diff --git a/.eslintrc.json b/.eslintrc.json index 4caec14..0a9380a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -57,6 +57,11 @@ "group": "type", "position": "before" }, + { + "pattern": "@/pages/**/*", + "group": "type", + "position": "before" + }, { "pattern": "@/styles/**/*", "group": "type", diff --git a/.pnp.cjs b/.pnp.cjs index 38e202f..07fd8e7 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -63,6 +63,7 @@ const RAW_RUNTIME_STATE = ["prettier", "npm:3.4.2"],\ ["react", "npm:18.3.1"],\ ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\ + ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\ ["sass", "npm:1.83.4"],\ ["sass-loader", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:16.0.4"],\ ["storybook", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.5.0"],\ @@ -3883,6 +3884,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@types/cookie", [\ + ["npm:0.6.0", {\ + "packageLocation": "./.yarn/cache/@types-cookie-npm-0.6.0-1f4c3f48f0-5b326bd018.zip/node_modules/@types/cookie/",\ + "packageDependencies": [\ + ["@types/cookie", "npm:0.6.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@types/doctrine", [\ ["npm:0.0.9", {\ "packageLocation": "./.yarn/cache/@types-doctrine-npm-0.0.9-ffe93045db-cdaca493f1.zip/node_modules/@types/doctrine/",\ @@ -5649,6 +5659,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["cookie", [\ + ["npm:1.0.2", {\ + "packageLocation": "./.yarn/cache/cookie-npm-1.0.2-7a4273d897-fd25fe79e8.zip/node_modules/cookie/",\ + "packageDependencies": [\ + ["cookie", "npm:1.0.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["copy-anything", [\ ["npm:2.0.6", {\ "packageLocation": "./.yarn/cache/copy-anything-npm-2.0.6-1cede50956-2702998a8c.zip/node_modules/copy-anything/",\ @@ -10121,6 +10140,7 @@ const RAW_RUNTIME_STATE = ["prettier", "npm:3.4.2"],\ ["react", "npm:18.3.1"],\ ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\ + ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\ ["sass", "npm:1.83.4"],\ ["sass-loader", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:16.0.4"],\ ["storybook", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:8.5.0"],\ @@ -11192,6 +11212,63 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["react-router", [\ + ["npm:7.1.3", {\ + "packageLocation": "./.yarn/cache/react-router-npm-7.1.3-690b1d22ca-f42f7b2455.zip/node_modules/react-router/",\ + "packageDependencies": [\ + ["react-router", "npm:7.1.3"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:bad46d96c73c63ba90244009f3bd4b5df4e579d18101515952d096dfdd42ac2b0c4f649150d6bde466de848b7a68026671be18fe23d3efb774f1497c0d48586a#npm:7.1.3", {\ + "packageLocation": "./.yarn/__virtual__/react-router-virtual-5c83736909/0/cache/react-router-npm-7.1.3-690b1d22ca-f42f7b2455.zip/node_modules/react-router/",\ + "packageDependencies": [\ + ["react-router", "virtual:bad46d96c73c63ba90244009f3bd4b5df4e579d18101515952d096dfdd42ac2b0c4f649150d6bde466de848b7a68026671be18fe23d3efb774f1497c0d48586a#npm:7.1.3"],\ + ["@types/cookie", "npm:0.6.0"],\ + ["@types/react", "npm:18.3.18"],\ + ["@types/react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.5"],\ + ["cookie", "npm:1.0.2"],\ + ["react", "npm:18.3.1"],\ + ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\ + ["set-cookie-parser", "npm:2.7.1"],\ + ["turbo-stream", "npm:2.4.0"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["react-router-dom", [\ + ["npm:7.1.3", {\ + "packageLocation": "./.yarn/cache/react-router-dom-npm-7.1.3-4ea8242f95-84752b90e3.zip/node_modules/react-router-dom/",\ + "packageDependencies": [\ + ["react-router-dom", "npm:7.1.3"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3", {\ + "packageLocation": "./.yarn/__virtual__/react-router-dom-virtual-bad46d96c7/0/cache/react-router-dom-npm-7.1.3-4ea8242f95-84752b90e3.zip/node_modules/react-router-dom/",\ + "packageDependencies": [\ + ["react-router-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:7.1.3"],\ + ["@types/react", "npm:18.3.18"],\ + ["@types/react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.5"],\ + ["react", "npm:18.3.1"],\ + ["react-dom", "virtual:bf4b7fdd92a9723d0b8b3c0ad1d9b3bf177b06bda2d8d90eee6bb9b559bcf7f6a4e86d3e1e4088168d00f3b758fa58c40c57bffe4a3e68627cd86f7a3c1c2191#npm:18.3.1"],\ + ["react-router", "virtual:bad46d96c73c63ba90244009f3bd4b5df4e579d18101515952d096dfdd42ac2b0c4f649150d6bde466de848b7a68026671be18fe23d3efb774f1497c0d48586a#npm:7.1.3"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["readdirp", [\ ["npm:4.1.1", {\ "packageLocation": "./.yarn/cache/readdirp-npm-4.1.1-c531313b8b-a1afc90d0e.zip/node_modules/readdirp/",\ @@ -11650,6 +11727,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["set-cookie-parser", [\ + ["npm:2.7.1", {\ + "packageLocation": "./.yarn/cache/set-cookie-parser-npm-2.7.1-0e92d9e679-060c198c4c.zip/node_modules/set-cookie-parser/",\ + "packageDependencies": [\ + ["set-cookie-parser", "npm:2.7.1"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["set-function-length", [\ ["npm:1.2.2", {\ "packageLocation": "./.yarn/cache/set-function-length-npm-1.2.2-243073748b-82850e62f4.zip/node_modules/set-function-length/",\ @@ -12628,6 +12714,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["turbo-stream", [\ + ["npm:2.4.0", {\ + "packageLocation": "./.yarn/cache/turbo-stream-npm-2.4.0-e0cec53097-e68b2569f1.zip/node_modules/turbo-stream/",\ + "packageDependencies": [\ + ["turbo-stream", "npm:2.4.0"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["tweetnacl", [\ ["npm:0.14.5", {\ "packageLocation": "./.yarn/cache/tweetnacl-npm-0.14.5-a3f766c0d1-4612772653.zip/node_modules/tweetnacl/",\ diff --git a/.yarn/cache/@types-cookie-npm-0.6.0-1f4c3f48f0-5b326bd018.zip b/.yarn/cache/@types-cookie-npm-0.6.0-1f4c3f48f0-5b326bd018.zip new file mode 100644 index 0000000..17e0cab Binary files /dev/null and b/.yarn/cache/@types-cookie-npm-0.6.0-1f4c3f48f0-5b326bd018.zip differ diff --git a/.yarn/cache/cookie-npm-1.0.2-7a4273d897-fd25fe79e8.zip b/.yarn/cache/cookie-npm-1.0.2-7a4273d897-fd25fe79e8.zip new file mode 100644 index 0000000..c4a5b20 Binary files /dev/null and b/.yarn/cache/cookie-npm-1.0.2-7a4273d897-fd25fe79e8.zip differ diff --git a/.yarn/cache/react-router-dom-npm-7.1.3-4ea8242f95-84752b90e3.zip b/.yarn/cache/react-router-dom-npm-7.1.3-4ea8242f95-84752b90e3.zip new file mode 100644 index 0000000..a3b1fff Binary files /dev/null and b/.yarn/cache/react-router-dom-npm-7.1.3-4ea8242f95-84752b90e3.zip differ diff --git a/.yarn/cache/react-router-npm-7.1.3-690b1d22ca-f42f7b2455.zip b/.yarn/cache/react-router-npm-7.1.3-690b1d22ca-f42f7b2455.zip new file mode 100644 index 0000000..fb5ec2f Binary files /dev/null and b/.yarn/cache/react-router-npm-7.1.3-690b1d22ca-f42f7b2455.zip differ diff --git a/.yarn/cache/set-cookie-parser-npm-2.7.1-0e92d9e679-060c198c4c.zip b/.yarn/cache/set-cookie-parser-npm-2.7.1-0e92d9e679-060c198c4c.zip new file mode 100644 index 0000000..a6d8ce9 Binary files /dev/null and b/.yarn/cache/set-cookie-parser-npm-2.7.1-0e92d9e679-060c198c4c.zip differ diff --git a/.yarn/cache/turbo-stream-npm-2.4.0-e0cec53097-e68b2569f1.zip b/.yarn/cache/turbo-stream-npm-2.4.0-e0cec53097-e68b2569f1.zip new file mode 100644 index 0000000..3b3982c Binary files /dev/null and b/.yarn/cache/turbo-stream-npm-2.4.0-e0cec53097-e68b2569f1.zip differ diff --git a/package.json b/package.json index 8224b1b..3b91d21 100644 --- a/package.json +++ b/package.json @@ -19,7 +19,8 @@ "@tanstack/react-query": "^5.64.2", "classnames": "^2.5.1", "react": "^18.3.1", - "react-dom": "^18.3.1" + "react-dom": "^18.3.1", + "react-router-dom": "^7.1.3" }, "devDependencies": { "@commitlint/cli": "^19.6.1", diff --git a/src/App.module.scss b/src/App.module.scss deleted file mode 100644 index dd8252f..0000000 --- a/src/App.module.scss +++ /dev/null @@ -1,24 +0,0 @@ -.Test { - display: flex; - flex-direction: column; - gap: 16px; - width: 300px; - align-items: center; - margin: 0 auto; - margin-top: 40px; -} - -.Test2 { - width: 161px; - display: flex; - flex-direction: column; - gap: 16px; -} - -.Test3 { - width: 216px; - display: flex; - flex-direction: column; - align-items: center; - gap: 8px; -} diff --git a/src/App.tsx b/src/App.tsx index 7d79321..4ee36c6 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,34 +1,10 @@ -import styles from "./App.module.scss"; - -import Button from "@/components/ui/Button/Button"; -import IconButton from "@/components/ui/IconButton/IconButton"; -import Text from "@/components/ui/Text/Text"; +import { Outlet } from "react-router-dom"; const App = () => { return ( -
-
+
+ +
); }; diff --git a/src/assets/img/img-graphic-logo.png b/src/assets/img/img-graphic-logo.png new file mode 100644 index 0000000..c0964b5 Binary files /dev/null and b/src/assets/img/img-graphic-logo.png differ diff --git a/src/assets/svg/img-graphic-main.svg b/src/assets/svg/img-graphic-main.svg new file mode 100644 index 0000000..1cbc13a --- /dev/null +++ b/src/assets/svg/img-graphic-main.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Home/Home.module.scss b/src/components/Home/Home.module.scss new file mode 100644 index 0000000..41c5821 --- /dev/null +++ b/src/components/Home/Home.module.scss @@ -0,0 +1,58 @@ +.Home { + 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); + + &::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; + } + + .HomeTitle { + padding-top: 5rem; + padding-bottom: 1.25rem; + + display: flex; + flex-direction: column; + gap: 0.625rem; + z-index: 1; + + & > h1 { + white-space: pre-line; + } + } + + .HomeImage { + display: flex; + justify-content: center; + align-items: center; + z-index: 1; + + & > img { + width: 16.25rem; + height: 16.25rem; + } + } + + .HomeBottom { + display: flex; + align-items: center; + gap: 0.875rem; + z-index: 1; + } +} diff --git a/src/components/Home/Home.tsx b/src/components/Home/Home.tsx new file mode 100644 index 0000000..fc895a7 --- /dev/null +++ b/src/components/Home/Home.tsx @@ -0,0 +1,27 @@ +import styles from "@/components/Home/Home.module.scss"; +import IconButton from "@/components/ui/IconButton/IconButton"; +import Text from "@/components/ui/Text/Text"; + +const Home = () => { + return ( +
+
+ + {`영수증으로\nAI 음식 리뷰 남겨요`} + + + 손쉬운 음식 리뷰 작성 + +
+
+ mainLogo +
+
+ + +
+
+ ); +}; + +export default Home; diff --git a/src/components/common/Navbar.module.scss b/src/components/common/Navbar.module.scss new file mode 100644 index 0000000..1f73a80 --- /dev/null +++ b/src/components/common/Navbar.module.scss @@ -0,0 +1,5 @@ +.Navbar { + width: 100%; + height: 2.75rem; + background-color: red; +} diff --git a/src/components/common/Navbar.tsx b/src/components/common/Navbar.tsx new file mode 100644 index 0000000..d70d5ff --- /dev/null +++ b/src/components/common/Navbar.tsx @@ -0,0 +1,7 @@ +import styles from "@/components/common/Navbar.module.scss"; + +const Navbar = () => { + return
Navbar
; +}; + +export default Navbar; diff --git a/src/main.tsx b/src/main.tsx index 40b99a9..ae5863d 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -1,19 +1,19 @@ import { StrictMode } from "react"; -import { createRoot } from "react-dom/client"; +import ReactDom from "react-dom/client"; import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; -import App from "@/App"; +import AppRouter from "@/router/AppRouter"; import ReactQueryClientProvider from "@/components/provider/ReactQueryClientProvider"; import "@/styles/reset.scss"; import "@/styles/global.scss"; -createRoot(document.getElementById("root")!).render( +ReactDom.createRoot(document.getElementById("root")!).render( - + , diff --git a/src/pages/HomePage.tsx b/src/pages/HomePage.tsx new file mode 100644 index 0000000..788c024 --- /dev/null +++ b/src/pages/HomePage.tsx @@ -0,0 +1,13 @@ +import Navbar from "@/components/common/Navbar"; +import Home from "@/components/Home/Home"; + +const HomePage = () => { + return ( + <> + + + + ); +}; + +export default HomePage; diff --git a/src/router/AppRouter.tsx b/src/router/AppRouter.tsx new file mode 100644 index 0000000..6481c13 --- /dev/null +++ b/src/router/AppRouter.tsx @@ -0,0 +1,24 @@ +import { RouterProvider, createBrowserRouter } from "react-router-dom"; + +import App from "@/App"; + +import HomePage from "@/pages/HomePage"; + +const AppRouter = () => { + const router = createBrowserRouter([ + { + path: "/", + element: , + children: [ + { + path: "", + element: , + }, + ], + }, + ]); + + return ; +}; + +export default AppRouter; diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index d1287c8..3709c55 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -30,6 +30,6 @@ --color-gray500: #00000040; --color-gray600: #363642; --color-gray700: #161636; - --color-bg-gradient: linear-gradient(#ffffff, #443fb6); + --color-bg-gradient: linear-gradient(180deg, #ffffff, #dcdce8); --color-bg-error: #d45085; } diff --git a/yarn.lock b/yarn.lock index ddc152b..242d8f2 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2464,6 +2464,13 @@ __metadata: languageName: node linkType: hard +"@types/cookie@npm:^0.6.0": + version: 0.6.0 + resolution: "@types/cookie@npm:0.6.0" + checksum: 10c0/5b326bd0188120fb32c0be086b141b1481fec9941b76ad537f9110e10d61ee2636beac145463319c71e4be67a17e85b81ca9e13ceb6e3bb63b93d16824d6c149 + languageName: node + linkType: hard + "@types/doctrine@npm:^0.0.9": version: 0.0.9 resolution: "@types/doctrine@npm:0.0.9" @@ -3887,6 +3894,13 @@ __metadata: languageName: node linkType: hard +"cookie@npm:^1.0.1": + version: 1.0.2 + resolution: "cookie@npm:1.0.2" + checksum: 10c0/fd25fe79e8fbcfcaf6aa61cd081c55d144eeeba755206c058682257cb38c4bd6795c6620de3f064c740695bb65b7949ebb1db7a95e4636efb8357a335ad3f54b + languageName: node + linkType: hard + "copy-anything@npm:^2.0.1": version: 2.0.6 resolution: "copy-anything@npm:2.0.6" @@ -7813,6 +7827,7 @@ __metadata: prettier: "npm:^3.4.2" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" + react-router-dom: "npm:^7.1.3" sass: "npm:^1.83.4" sass-loader: "npm:^16.0.4" storybook: "npm:^8.5.0" @@ -8687,6 +8702,36 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:^7.1.3": + version: 7.1.3 + resolution: "react-router-dom@npm:7.1.3" + dependencies: + react-router: "npm:7.1.3" + peerDependencies: + react: ">=18" + react-dom: ">=18" + checksum: 10c0/84752b90e3f9e9168fc29d7dd5eb0ff622a831de15e4e5d899694f19bc988387d831d180d07f503071d944fa4a666c1d07004e4526268215cc5dbe5bba98f52c + languageName: node + linkType: hard + +"react-router@npm:7.1.3": + version: 7.1.3 + resolution: "react-router@npm:7.1.3" + dependencies: + "@types/cookie": "npm:^0.6.0" + cookie: "npm:^1.0.1" + set-cookie-parser: "npm:^2.6.0" + turbo-stream: "npm:2.4.0" + peerDependencies: + react: ">=18" + react-dom: ">=18" + peerDependenciesMeta: + react-dom: + optional: true + checksum: 10c0/f42f7b245533d1adaa00779a0287993a836d5b56039d97a6643a8b3a721ffb92ff47c97cfb36409fec8794ac3c8a884339f588cf21fcd7f6dccdfc834520c76f + languageName: node + linkType: hard + "react@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react@npm:^18.3.1": version: 18.3.1 resolution: "react@npm:18.3.1" @@ -9166,6 +9211,13 @@ __metadata: languageName: node linkType: hard +"set-cookie-parser@npm:^2.6.0": + version: 2.7.1 + resolution: "set-cookie-parser@npm:2.7.1" + checksum: 10c0/060c198c4c92547ac15988256f445eae523f57f2ceefeccf52d30d75dedf6bff22b9c26f756bd44e8e560d44ff4ab2130b178bd2e52ef5571bf7be3bd7632d9a + languageName: node + linkType: hard + "set-function-length@npm:^1.2.2": version: 1.2.2 resolution: "set-function-length@npm:1.2.2" @@ -10016,6 +10068,13 @@ __metadata: languageName: node linkType: hard +"turbo-stream@npm:2.4.0": + version: 2.4.0 + resolution: "turbo-stream@npm:2.4.0" + checksum: 10c0/e68b2569f1f16e6e9633d090c6024b2ae9f0e97bfeacb572451ca3732e120ebbb546f3bc4afc717c46cb57b5aea6104e04ef497f9912eef6a7641e809518e98a + languageName: node + linkType: hard + "tweetnacl@npm:^0.14.3, tweetnacl@npm:~0.14.0": version: 0.14.5 resolution: "tweetnacl@npm:0.14.5"