commit 1813c1eb5c9029a1fa504567cb6e0cfc48e749f3
parent 1ab3b5257016688a0ae46d0d1f4a434dda8763c3
Author: Yongbin Kim <iam@yongbin.kim>
Date: Sun, 29 Jan 2023 14:00:44 +0900
feat: Toast 추가
Signed-off-by: Yongbin Kim <iam@yongbin.kim>
Diffstat:
12 files changed, 189 insertions(+), 8 deletions(-)
diff --git a/.pnp.cjs b/.pnp.cjs
@@ -60,6 +60,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["pino", "npm:8.8.0"],\
["react", "npm:18.2.0"],\
["react-dom", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:18.2.0"],\
+ ["react-hot-toast", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:2.4.0"],\
["redis", "npm:4.6.1"],\
["sass", "npm:1.57.1"],\
["superjson", "npm:1.12.2"],\
@@ -3409,6 +3410,7 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
["pino", "npm:8.8.0"],\
["react", "npm:18.2.0"],\
["react-dom", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:18.2.0"],\
+ ["react-hot-toast", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:2.4.0"],\
["redis", "npm:4.6.1"],\
["sass", "npm:1.57.1"],\
["superjson", "npm:1.12.2"],\
@@ -4596,6 +4598,28 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
+ ["goober", [\
+ ["npm:2.1.11", {\
+ "packageLocation": "./.yarn/cache/goober-npm-2.1.11-7a0d27368b-c37c14f476.zip/node_modules/goober/",\
+ "packageDependencies": [\
+ ["goober", "npm:2.1.11"]\
+ ],\
+ "linkType": "SOFT"\
+ }],\
+ ["virtual:fb9c7734729e35124b57143a9a3090a64e7de6291d24560db9b56f966d0cf34bbc3d7321078118671e0aae2410d649021f8bac248a2e89fc41bf77987f9c3d18#npm:2.1.11", {\
+ "packageLocation": "./.yarn/__virtual__/goober-virtual-6bcde5f80c/0/cache/goober-npm-2.1.11-7a0d27368b-c37c14f476.zip/node_modules/goober/",\
+ "packageDependencies": [\
+ ["goober", "virtual:fb9c7734729e35124b57143a9a3090a64e7de6291d24560db9b56f966d0cf34bbc3d7321078118671e0aae2410d649021f8bac248a2e89fc41bf77987f9c3d18#npm:2.1.11"],\
+ ["@types/csstype", null],\
+ ["csstype", null]\
+ ],\
+ "packagePeers": [\
+ "@types/csstype",\
+ "csstype"\
+ ],\
+ "linkType": "HARD"\
+ }]\
+ ]],\
["gopd", [\
["npm:1.0.1", {\
"packageLocation": "./.yarn/cache/gopd-npm-1.0.1-10c1d0b534-a5ccfb8806.zip/node_modules/gopd/",\
@@ -7409,6 +7433,33 @@ function $$SETUP_STATE(hydrateRuntimeState, basePath) {
"linkType": "HARD"\
}]\
]],\
+ ["react-hot-toast", [\
+ ["npm:2.4.0", {\
+ "packageLocation": "./.yarn/cache/react-hot-toast-npm-2.4.0-df9434bc58-910214496d.zip/node_modules/react-hot-toast/",\
+ "packageDependencies": [\
+ ["react-hot-toast", "npm:2.4.0"]\
+ ],\
+ "linkType": "SOFT"\
+ }],\
+ ["virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:2.4.0", {\
+ "packageLocation": "./.yarn/__virtual__/react-hot-toast-virtual-fb9c773472/0/cache/react-hot-toast-npm-2.4.0-df9434bc58-910214496d.zip/node_modules/react-hot-toast/",\
+ "packageDependencies": [\
+ ["react-hot-toast", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:2.4.0"],\
+ ["@types/react", "npm:18.0.26"],\
+ ["@types/react-dom", "npm:18.0.10"],\
+ ["goober", "virtual:fb9c7734729e35124b57143a9a3090a64e7de6291d24560db9b56f966d0cf34bbc3d7321078118671e0aae2410d649021f8bac248a2e89fc41bf77987f9c3d18#npm:2.1.11"],\
+ ["react", "npm:18.2.0"],\
+ ["react-dom", "virtual:185201ad25745f54898a2e9f78d456a655eb75b6cdedfba903ba6a6b91ecfe544fb067556e53d84d3f5dee5e27bf03679e7ed01de96d422947cdba9f3cf4c1cd#npm:18.2.0"]\
+ ],\
+ "packagePeers": [\
+ "@types/react-dom",\
+ "@types/react",\
+ "react-dom",\
+ "react"\
+ ],\
+ "linkType": "HARD"\
+ }]\
+ ]],\
["react-is", [\
["npm:16.13.1", {\
"packageLocation": "./.yarn/cache/react-is-npm-16.13.1-a9b9382b4f-f7a19ac349.zip/node_modules/react-is/",\
diff --git a/.yarn/cache/goober-npm-2.1.11-7a0d27368b-c37c14f476.zip b/.yarn/cache/goober-npm-2.1.11-7a0d27368b-c37c14f476.zip
Binary files differ.
diff --git a/.yarn/cache/react-hot-toast-npm-2.4.0-df9434bc58-910214496d.zip b/.yarn/cache/react-hot-toast-npm-2.4.0-df9434bc58-910214496d.zip
Binary files differ.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
Binary files differ.
diff --git a/components/ui/Toast.module.css b/components/ui/Toast.module.css
@@ -0,0 +1 @@
+@keyframes toast-entering{0%{transform:translate3d(0, 200%, 0) scale(0.6);opacity:.5}100%{transform:translate3d(0, 0, 0) scale(1);opacity:1}}@keyframes toast-exiting{0%{transform:translate3d(0, 0, -1px) scale(1);opacity:1}100%{transform:translate3d(0, 150%, -1px) scale(0.6);opacity:0}}.toast{padding:.75rem 1rem;border-radius:.25rem;will-change:transform;user-select:none;pointer-events:none;box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.2),0px 8px 12px 6px rgba(0, 0, 0, 0.1);color:#191c1b;background-color:#c3cfd3}@media(prefers-color-scheme: dark){.toast{color:#e1e3e0;background-color:#455157}}.toast.is-entering{animation:toast-entering 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s 1 forwards}.toast.is-exiting{animation:toast-exiting 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s 1 forwards}/*# sourceMappingURL=Toast.module.css.map */
diff --git a/components/ui/Toast.module.css.map b/components/ui/Toast.module.css.map
@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["Toast.module.scss","../../styles/core/_elevate.scss","../../styles/core/_colors.scss"],"names":[],"mappings":"AAGA,0BACE,GACE,6CACA,WAEF,KACE,wCACA,WAIJ,yBACE,GACE,2CACA,UAEF,KACE,gDACA,WAIJ,OAGE,oBACA,qBACA,sBACA,iBACA,oBC8BA,kFD1BE,cCgBF,yBC4EA,mCFvGF,OAWI,cCgBF,0BDXA,mBACE,2EAGF,kBACE","file":"Toast.module.css"}
+\ No newline at end of file
diff --git a/components/ui/Toast.module.scss b/components/ui/Toast.module.scss
@@ -0,0 +1,49 @@
+@use 'core/colors';
+@use 'core/elevate';
+
+@keyframes toast-entering {
+ 0% {
+ transform: translate3d(0, 200%, 0) scale(.6);
+ opacity: .5;
+ }
+ 100% {
+ transform: translate3d(0, 0, 0) scale(1);
+ opacity: 1;
+ }
+}
+
+@keyframes toast-exiting {
+ 0% {
+ transform: translate3d(0, 0, -1px) scale(1);
+ opacity: 1;
+ }
+ 100% {
+ transform: translate3d(0, 150%, -1px) scale(.6);
+ opacity: 0;
+ }
+}
+
+.toast {
+ $elevation-level: 5;
+
+ padding: 0.75rem 1rem;
+ border-radius: 0.25rem;
+ will-change: transform;
+ user-select: none;
+ pointer-events: none;
+
+ @include elevate.apply-box-shadow($elevation-level);
+ @include colors.apply-themes() using($theme) {
+ color: colors.get($theme, 'on-surface');
+
+ @include elevate.apply-background-color($theme, $elevation-level, 'tertiary');
+ }
+
+ &.is-entering {
+ animation: toast-entering 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s 1 forwards;
+ }
+
+ &.is-exiting {
+ animation: toast-exiting 400ms cubic-bezier(0.25, 1, 0.5, 1) 0s 1 forwards;
+ }
+}
diff --git a/components/ui/Toast.tsx b/components/ui/Toast.tsx
@@ -0,0 +1,25 @@
+import classNames from '@/lib/classnames'
+import { ReactNode } from 'react'
+import { resolveValue, Toast as RealToast } from 'react-hot-toast'
+import styles from './Toast.module.css'
+
+export interface ToastProps {
+ toast: RealToast
+}
+
+export default function Toast ({ toast: t }: ToastProps) {
+ return (
+ <div
+ {...classNames(
+ styles['toast'],
+ t.className,
+ t.visible ? styles['is-entering'] : styles['is-exiting']
+ )}
+ style={{...t.style}}
+ >
+ <div {...t.ariaProps}>
+ {resolveValue(t.message, t)}
+ </div>
+ </div>
+ )
+}
diff --git a/components/ui/Toaster.tsx b/components/ui/Toaster.tsx
@@ -0,0 +1,25 @@
+import Toast from '@/components/ui/Toast'
+import { Toaster as RealToaster } from 'react-hot-toast'
+
+export default function Toaster () {
+ return (
+ <RealToaster
+ position="bottom-center"
+ reverseOrder={false}
+ >
+ {(t) => {
+ return (
+ <Toast toast={t}/>
+ )
+ }}
+ </RealToaster>
+ )
+}
+
+/*
+<div class="go4109123758" style="left: 0px; right: 0px; display: flex; position: absolute; transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1) 0s; transform: translateY(0px); bottom: 0px; justify-content: center;">
+<div class="" style="left: 0px; right: 0px; display: flex; position: absolute; transition: all 230ms cubic-bezier(0.21, 1.02, 0.73, 1) 0s; transform: translateY(0px); bottom: 0px; justify-content: center;">
+
+<div class="go2072408551" style="animation: 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) 0s 1 normal forwards running go2645569136;"><div role="status" aria-live="polite" class="go3958317564">Here is your toast.</div></div></div>
+<div class="go2072408551" style="animation: 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) 0s 1 normal forwards running go1846062317;"><div role="status" aria-live="polite" class="go3958317564">Here is your toast.</div></div></div>
+ */
diff --git a/package.json b/package.json
@@ -33,6 +33,7 @@
"pino": "^8.8.0",
"react": "18.2.0",
"react-dom": "18.2.0",
+ "react-hot-toast": "^2.4.0",
"redis": "^4.6.1",
"superjson": "^1.12.2",
"typescript": "4.9.4",
diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -2,17 +2,22 @@ import '@/styles/globals.css'
import { SocketProvider } from '@/components/contexts/SocketContext'
import { TokenProvider } from '@/components/contexts/TokenContext'
import Header from '@/components/layout/Header'
+import Toaster from '@/components/ui/Toaster'
import type { AppProps } from 'next/app'
export default function App ({ Component, pageProps }: AppProps) {
return (
- <TokenProvider>
- <SocketProvider>
- <div>
- <Header/>
- <Component {...pageProps} />
- </div>
- </SocketProvider>
- </TokenProvider>
+ <>
+ <TokenProvider>
+ <SocketProvider>
+ <div>
+ <Header/>
+ <Component {...pageProps} />
+ </div>
+ </SocketProvider>
+ </TokenProvider>
+
+ <Toaster/>
+ </>
)
}
diff --git a/yarn.lock b/yarn.lock
@@ -2483,6 +2483,7 @@ __metadata:
pino: ^8.8.0
react: 18.2.0
react-dom: 18.2.0
+ react-hot-toast: ^2.4.0
redis: ^4.6.1
sass: ^1.57.1
superjson: ^1.12.2
@@ -3476,6 +3477,15 @@ __metadata:
languageName: node
linkType: hard
+"goober@npm:^2.1.10":
+ version: 2.1.11
+ resolution: "goober@npm:2.1.11"
+ peerDependencies:
+ csstype: ^3.0.10
+ checksum: c37c14f476f65f7c66d94ac1a1686a130b4fa42fc512175444e3c708fa1815f6ea579e1b23567e57d41de2e62ff8b5913915ec829f05a3b995d1a7a0016c0bdf
+ languageName: node
+ linkType: hard
+
"gopd@npm:^1.0.1":
version: 1.0.1
resolution: "gopd@npm:1.0.1"
@@ -5891,6 +5901,18 @@ __metadata:
languageName: node
linkType: hard
+"react-hot-toast@npm:^2.4.0":
+ version: 2.4.0
+ resolution: "react-hot-toast@npm:2.4.0"
+ dependencies:
+ goober: ^2.1.10
+ peerDependencies:
+ react: ">=16"
+ react-dom: ">=16"
+ checksum: 910214496d6821af8e643c5f7087eff6c76f1395756f3d6cf1fc07a599c582c443cbb5a4cadfc58205acf0845b77a2a10a4ca49b385e772b72edc57dfd38d016
+ languageName: node
+ linkType: hard
+
"react-is@npm:^16.13.1, react-is@npm:^16.7.0":
version: 16.13.1
resolution: "react-is@npm:16.13.1"
