diff --git a/.pnp.cjs b/.pnp.cjs index 840455e..89b910a 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -42,6 +42,7 @@ const RAW_RUNTIME_STATE = ["@testing-library/dom", "npm:10.4.0"],\ ["@testing-library/jest-dom", "npm:6.6.3"],\ ["@testing-library/react", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:16.2.0"],\ + ["@types/canvas-confetti", "npm:1.9.0"],\ ["@types/jest", "npm:29.5.14"],\ ["@types/node", "npm:22.10.7"],\ ["@types/react", "npm:18.3.18"],\ @@ -49,6 +50,7 @@ const RAW_RUNTIME_STATE = ["@typescript-eslint/eslint-plugin", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@typescript-eslint/parser", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@vitejs/plugin-react", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:4.3.4"],\ + ["canvas-confetti", "npm:1.9.3"],\ ["chromatic", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:11.25.1"],\ ["classnames", "npm:2.5.1"],\ ["cypress", "npm:14.0.0"],\ @@ -4297,6 +4299,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@types/canvas-confetti", [\ + ["npm:1.9.0", {\ + "packageLocation": "./.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip/node_modules/@types/canvas-confetti/",\ + "packageDependencies": [\ + ["@types/canvas-confetti", "npm:1.9.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/conventional-commits-parser", [\ ["npm:5.0.1", {\ "packageLocation": "./.yarn/cache/@types-conventional-commits-parser-npm-5.0.1-3f074d40bc-4b7b561f19.zip/node_modules/@types/conventional-commits-parser/",\ @@ -5723,6 +5734,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["canvas-confetti", [\ + ["npm:1.9.3", {\ + "packageLocation": "./.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip/node_modules/canvas-confetti/",\ + "packageDependencies": [\ + ["canvas-confetti", "npm:1.9.3"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["caseless", [\ ["npm:0.12.0", {\ "packageLocation": "./.yarn/cache/caseless-npm-0.12.0-e83bc5df83-ccf64bcb6c.zip/node_modules/caseless/",\ @@ -10570,6 +10590,7 @@ const RAW_RUNTIME_STATE = ["@testing-library/dom", "npm:10.4.0"],\ ["@testing-library/jest-dom", "npm:6.6.3"],\ ["@testing-library/react", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:16.2.0"],\ + ["@types/canvas-confetti", "npm:1.9.0"],\ ["@types/jest", "npm:29.5.14"],\ ["@types/node", "npm:22.10.7"],\ ["@types/react", "npm:18.3.18"],\ @@ -10577,6 +10598,7 @@ const RAW_RUNTIME_STATE = ["@typescript-eslint/eslint-plugin", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@typescript-eslint/parser", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.20.0"],\ ["@vitejs/plugin-react", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:4.3.4"],\ + ["canvas-confetti", "npm:1.9.3"],\ ["chromatic", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:11.25.1"],\ ["classnames", "npm:2.5.1"],\ ["cypress", "npm:14.0.0"],\ diff --git a/.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip b/.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip new file mode 100644 index 0000000..c5f2c83 Binary files /dev/null and b/.yarn/cache/@types-canvas-confetti-npm-1.9.0-128dcb43d0-ffe2c674d4.zip differ diff --git a/.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip b/.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip new file mode 100644 index 0000000..8247225 Binary files /dev/null and b/.yarn/cache/canvas-confetti-npm-1.9.3-b7b2362f3e-94c6f16591.zip differ diff --git a/package.json b/package.json index 7f93646..6fb1e0f 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@radix-ui/react-dialog": "^1.1.5", "@radix-ui/react-visually-hidden": "^1.1.1", "@tanstack/react-query": "^5.64.2", + "canvas-confetti": "^1.9.3", "classnames": "^2.5.1", "react": "^18.3.1", "react-dom": "^18.3.1", @@ -38,6 +39,7 @@ "@testing-library/dom": "^10.4.0", "@testing-library/jest-dom": "^6.1.3", "@testing-library/react": "^16.2.0", + "@types/canvas-confetti": "^1", "@types/jest": "^29.5.14", "@types/node": "^22.10.7", "@types/react": "^18.3.18", diff --git a/public/assets/img/img-style-cute-circle.png b/public/assets/img/img-style-cute-circle.png new file mode 100644 index 0000000..fbb5228 Binary files /dev/null and b/public/assets/img/img-style-cute-circle.png differ diff --git a/public/assets/img/img-style-friendly-circle.png b/public/assets/img/img-style-friendly-circle.png new file mode 100644 index 0000000..162f66b Binary files /dev/null and b/public/assets/img/img-style-friendly-circle.png differ diff --git a/public/assets/img/img-style-trust-circle.png b/public/assets/img/img-style-trust-circle.png new file mode 100644 index 0000000..b2f726f Binary files /dev/null and b/public/assets/img/img-style-trust-circle.png differ diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx index 61811e8..b0eac9e 100644 --- a/src/components/Home/Home.tsx +++ b/src/components/Home/Home.tsx @@ -1,13 +1,8 @@ import styles from "@/components/Home/Home.module.scss"; -import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal"; import IconButton from "@/components/ui/IconButton/IconButton"; import Text from "@/components/ui/Text/Text"; -import { useOverlay } from "@/hooks/common/useOverlay"; - const Home = () => { - const { isOpen, handleClose, handleOpen } = useOverlay(); - return (
@@ -22,11 +17,9 @@ const Home = () => { mainLogo
- +
- -
); }; diff --git a/src/components/ReceiptEdit/ReceiptEdit.module.css b/src/components/ReceiptEdit/ReceiptEdit.module.css deleted file mode 100644 index 9f7afef..0000000 --- a/src/components/ReceiptEdit/ReceiptEdit.module.css +++ /dev/null @@ -1,53 +0,0 @@ -.ReceiptEdit { - padding-left: 1.25rem; - padding-right: 1.25rem; - padding-bottom: 2.5rem; - height: calc(100vh - 2.75rem); - overflow: hidden; - position: relative; - display: flex; - flex-direction: column; - justify-content: space-between; - background: var(--color-bg-gradient); -} -.ReceiptEdit::before { - content: ""; - background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat; - background-size: 100% 16.375rem; - filter: blur(4.625rem); - position: absolute; - top: 0; - left: 0; - right: 0; - bottom: 0; - z-index: 0; -} - -.Top { - z-index: 1; -} -.Top .TitleBox { - display: flex; - justify-content: center; - margin-top: 2.5rem; -} - -.InfoList { - display: flex; - flex-direction: column; - gap: 0.875rem; - margin-top: 1.5rem; -} - -.InfoItem { - display: flex; - flex-direction: column; - gap: 0.5rem; -} - -.Bottom { - display: flex; - align-items: center; - gap: 0.875rem; - z-index: 1; -} \ No newline at end of file diff --git a/src/components/ReceiptResult/ReceiptResult.module.scss b/src/components/ReceiptResult/ReceiptResult.module.scss new file mode 100644 index 0000000..bda99c2 --- /dev/null +++ b/src/components/ReceiptResult/ReceiptResult.module.scss @@ -0,0 +1,60 @@ +.ReceiptResult { + padding: 1.25rem; + padding-bottom: 2.5rem; + height: calc(100vh - 2.75rem); + overflow: hidden; + position: relative; + display: flex; + flex-direction: column; + background: var(--color-bg-gradient); + justify-content: space-between; + + &::before { + content: ""; + background: url("/src/assets/svg/img-graphic-main.svg") center no-repeat; + background-size: 100% 16.375rem; + filter: blur(4.625rem); + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 0; + } +} + +.Top { + z-index: 1; + + .TitleBox { + display: flex; + justify-content: center; + margin: 1.875rem 0; + } +} + +.Bottom { + align-items: center; + gap: 0.875rem; + z-index: 1; + display: grid; + grid-template-columns: 30% 1fr; +} + +.ReceiptImage { + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + + & > img { + width: 7.5rem; + height: 7.5rem; + } +} + +.IconBtn { + width: 6.15625rem; + margin-top: 0.625rem; + margin-left: auto; +} diff --git a/src/components/ReceiptResult/ReceiptResult.tsx b/src/components/ReceiptResult/ReceiptResult.tsx new file mode 100644 index 0000000..1210d8a --- /dev/null +++ b/src/components/ReceiptResult/ReceiptResult.tsx @@ -0,0 +1,67 @@ +import { useEffect } from "react"; + +import confetti from "canvas-confetti"; + +import HomeNavigateConfirmModal from "@/components/HomeNavigateConfirmModal/HomeNavigateConfirmModal"; +import styles from "@/components/ReceiptResult/ReceiptResult.module.scss"; +import Button from "@/components/ui/Button/Button"; +import IconButton from "@/components/ui/IconButton/IconButton"; +import Text from "@/components/ui/Text/Text"; + +import { useOverlay } from "@/hooks/common/useOverlay"; + +import type { Options as ConfettiOptions } from "canvas-confetti"; + +const ReceiptResult = () => { + const { isOpen, handleClose, handleOpen } = useOverlay(); + + const handleConfetti = () => { + const setting: ConfettiOptions = { + particleCount: 100, + spread: 100, + origin: { y: 0.2 }, + colors: ["#f4abfe", "#cd90f2", "#eff0ff", "#6f91ff"], + ticks: 50, + }; + + confetti({ + ...setting, + }); + }; + + useEffect(() => { + handleConfetti(); + }, []); + + return ( +
+
+
+ mainLogo +
+
+ + 리뷰를 만들었어요! + +
+ + + 오늘 처음으로 청담커피 앤 토스트에서 주문했어요.. 매장도 깔끔하고 직원들도 친절해요! + 음료랑 토스트 세트 시켰는데 가성비가 좋네요… 맛도 좋고 양도 많아요!! 다음에도 또 시켜먹을 + 거예요. + +
+ +
+
+
+
+ + +
+ ); +}; + +export default ReceiptResult; diff --git a/src/pages/ReceiptResultPage.tsx b/src/pages/ReceiptResultPage.tsx new file mode 100644 index 0000000..7a7ef5e --- /dev/null +++ b/src/pages/ReceiptResultPage.tsx @@ -0,0 +1,16 @@ +import Navbar from "@/components/common/Navbar/Navbar"; +import ReceiptResult from "@/components/ReceiptResult/ReceiptResult"; +import Icon from "@/components/ui/Icon/Icon"; + +export default function ReceiptResultPage() { + return ( + <> + + + + + + + + ); +} diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx index 5e6781b..033029c 100644 --- a/src/router/AppRouter.tsx +++ b/src/router/AppRouter.tsx @@ -5,6 +5,7 @@ import App from "@/App"; import CreateReviewLoadingPage from "@/pages/CreateReviewLoadingPage/CreateReviewLoadingPage"; import HomePage from "@/pages/HomePage"; import ReceiptEditPage from "@/pages/ReceiptEditPage"; +import ReceiptResultPage from "@/pages/ReceiptResultPage"; import RecognitionFailPage from "@/pages/RecognitionFailPage"; import SelectStylePage from "@/pages/SelectStylePage"; import SelectTagPage from "@/pages/SelectTagPage"; @@ -39,6 +40,10 @@ const AppRouter = () => { path: "/create-review-loading", element: , }, + { + path: "/receipt-result", + element: , + }, ], }, ]); diff --git a/yarn.lock b/yarn.lock index 9abb521..f9727cc 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2741,6 +2741,13 @@ __metadata: languageName: node linkType: hard +"@types/canvas-confetti@npm:^1": + version: 1.9.0 + resolution: "@types/canvas-confetti@npm:1.9.0" + checksum: 10c0/ffe2c674d466b8e13472c81ab2a97056f3433fd40a3513dbc1bb76764e4e7c3ff0a2a58d37b16ea6a245c831077c553db321b069dda6572eab59f2be61137b2e + languageName: node + linkType: hard + "@types/conventional-commits-parser@npm:^5.0.0": version: 5.0.1 resolution: "@types/conventional-commits-parser@npm:5.0.1" @@ -3866,6 +3873,13 @@ __metadata: languageName: node linkType: hard +"canvas-confetti@npm:^1.9.3": + version: 1.9.3 + resolution: "canvas-confetti@npm:1.9.3" + checksum: 10c0/94c6f16591660d5ed4a48afb8da65902826ce6b38edc7644d62521aa9bf9ef5b950aa4396e980e7fe0a38e5f41a991a6d984721412a54c9fba4de3682c1eead0 + languageName: node + linkType: hard + "caseless@npm:~0.12.0": version: 0.12.0 resolution: "caseless@npm:0.12.0" @@ -8115,6 +8129,7 @@ __metadata: "@testing-library/dom": "npm:^10.4.0" "@testing-library/jest-dom": "npm:^6.1.3" "@testing-library/react": "npm:^16.2.0" + "@types/canvas-confetti": "npm:^1" "@types/jest": "npm:^29.5.14" "@types/node": "npm:^22.10.7" "@types/react": "npm:^18.3.18" @@ -8122,6 +8137,7 @@ __metadata: "@typescript-eslint/eslint-plugin": "npm:^8.20.0" "@typescript-eslint/parser": "npm:^8.20.0" "@vitejs/plugin-react": "npm:^4.3.4" + canvas-confetti: "npm:^1.9.3" chromatic: "npm:^11.25.1" classnames: "npm:^2.5.1" cypress: "npm:^14.0.0"