diff --git a/.pnp.cjs b/.pnp.cjs index 43e1d138..a89b67bd 100755 --- a/.pnp.cjs +++ b/.pnp.cjs @@ -1130,6 +1130,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["@remix-run/router", [\ + ["npm:1.14.2", {\ + "packageLocation": "../../.yarn/berry/cache/@remix-run-router-npm-1.14.2-59b4854d4d-10c0.zip/node_modules/@remix-run/router/",\ + "packageDependencies": [\ + ["@remix-run/router", "npm:1.14.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["@rollup/rollup-android-arm-eabi", [\ ["npm:4.9.5", {\ "packageLocation": "./.yarn/unplugged/@rollup-rollup-android-arm-eabi-npm-4.9.5-61e16d95f2/node_modules/@rollup/rollup-android-arm-eabi/",\ @@ -1832,6 +1841,8 @@ const RAW_RUNTIME_STATE = ["@vitejs/plugin-react", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:4.2.1"],\ ["react", "npm:18.2.0"],\ ["react-dom", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:18.2.0"],\ + ["react-router-dom", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:6.21.3"],\ + ["the-new-css-reset", "npm:1.11.2"],\ ["typescript", "patch:typescript@npm%3A5.3.3#optional!builtin::version=5.3.3&hash=e012d7"],\ ["vite", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:5.0.11"]\ ],\ @@ -3835,6 +3846,57 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["react-router", [\ + ["npm:6.21.3", {\ + "packageLocation": "../../.yarn/berry/cache/react-router-npm-6.21.3-4373d75dc2-10c0.zip/node_modules/react-router/",\ + "packageDependencies": [\ + ["react-router", "npm:6.21.3"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:8bdc1c4cdfa23d84a16c157c58a65c3692ba5c373e7b31b76913ec54a13151469087240c633c6260e3f39e4771146223e3fb69f573f6ca233a20d8e34a6bd8f7#npm:6.21.3", {\ + "packageLocation": "./.yarn/__virtual__/react-router-virtual-9a0f5aa746/3/.yarn/berry/cache/react-router-npm-6.21.3-4373d75dc2-10c0.zip/node_modules/react-router/",\ + "packageDependencies": [\ + ["react-router", "virtual:8bdc1c4cdfa23d84a16c157c58a65c3692ba5c373e7b31b76913ec54a13151469087240c633c6260e3f39e4771146223e3fb69f573f6ca233a20d8e34a6bd8f7#npm:6.21.3"],\ + ["@remix-run/router", "npm:1.14.2"],\ + ["@types/react", "npm:18.2.48"],\ + ["react", "npm:18.2.0"]\ + ],\ + "packagePeers": [\ + "@types/react",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ + ["react-router-dom", [\ + ["npm:6.21.3", {\ + "packageLocation": "../../.yarn/berry/cache/react-router-dom-npm-6.21.3-b7550652dc-10c0.zip/node_modules/react-router-dom/",\ + "packageDependencies": [\ + ["react-router-dom", "npm:6.21.3"]\ + ],\ + "linkType": "SOFT"\ + }],\ + ["virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:6.21.3", {\ + "packageLocation": "./.yarn/__virtual__/react-router-dom-virtual-8bdc1c4cdf/3/.yarn/berry/cache/react-router-dom-npm-6.21.3-b7550652dc-10c0.zip/node_modules/react-router-dom/",\ + "packageDependencies": [\ + ["react-router-dom", "virtual:9845906954fdbefbb879db24fa8772d77a945dca59f459806df47a5b67245d4bc6502880b373cca7201062c81bea9f13f699f52de2004c037e79dbdbd5d97fb3#npm:6.21.3"],\ + ["@remix-run/router", "npm:1.14.2"],\ + ["@types/react", "npm:18.2.48"],\ + ["@types/react-dom", "npm:18.2.18"],\ + ["react", "npm:18.2.0"],\ + ["react-dom", "virtual:de80dc576383b2386358abc0e9fe49c00e3397fe355a0337462b73ab3115c2e557eb85784ee0fe776394cc11dd020b4e84dbbd75acf72ee6d54415d82d21f5c5#npm:18.2.0"],\ + ["react-router", "virtual:8bdc1c4cdfa23d84a16c157c58a65c3692ba5c373e7b31b76913ec54a13151469087240c633c6260e3f39e4771146223e3fb69f573f6ca233a20d8e34a6bd8f7#npm:6.21.3"]\ + ],\ + "packagePeers": [\ + "@types/react-dom",\ + "@types/react",\ + "react-dom",\ + "react"\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["regenerator-runtime", [\ ["npm:0.14.1", {\ "packageLocation": "../../.yarn/berry/cache/regenerator-runtime-npm-0.14.1-a6c97c609a-10c0.zip/node_modules/regenerator-runtime/",\ @@ -4220,6 +4282,15 @@ const RAW_RUNTIME_STATE = "linkType": "HARD"\ }]\ ]],\ + ["the-new-css-reset", [\ + ["npm:1.11.2", {\ + "packageLocation": "../../.yarn/berry/cache/the-new-css-reset-npm-1.11.2-44ab50dbbf-10c0.zip/node_modules/the-new-css-reset/",\ + "packageDependencies": [\ + ["the-new-css-reset", "npm:1.11.2"]\ + ],\ + "linkType": "HARD"\ + }]\ + ]],\ ["to-fast-properties", [\ ["npm:2.0.0", {\ "packageLocation": "../../.yarn/berry/cache/to-fast-properties-npm-2.0.0-0dc60cc481-10c0.zip/node_modules/to-fast-properties/",\ diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz index 06e16d80..82163d9d 100644 Binary files a/.yarn/install-state.gz and b/.yarn/install-state.gz differ diff --git a/apps/admin/index.html b/apps/admin/index.html index e4b78eae..387c95b1 100644 --- a/apps/admin/index.html +++ b/apps/admin/index.html @@ -1,13 +1,15 @@ - - - - - - Vite + React + TS - - -
- - + + + + + + 불티 + + + +
+ + + diff --git a/apps/admin/package.json b/apps/admin/package.json index 6e50eb84..932371bb 100644 --- a/apps/admin/package.json +++ b/apps/admin/package.json @@ -15,7 +15,9 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-router-dom": "^6.21.3", + "the-new-css-reset": "^1.11.2" }, "devDependencies": { "@boolti/eslint-config": "*", diff --git a/apps/admin/public/vite.svg b/apps/admin/public/vite.svg deleted file mode 100644 index e7b8dfb1..00000000 --- a/apps/admin/public/vite.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx index 71ad4da4..831a8292 100644 --- a/apps/admin/src/App.tsx +++ b/apps/admin/src/App.tsx @@ -1,11 +1,33 @@ import { QueryClientProvider } from '@boolti/api'; +import { createBrowserRouter, RouterProvider, Navigate } from 'react-router-dom'; +import ThemeProvider from './styles/ThemeProvider'; +import LoginPage from './pages/Login/LoginPage'; +import 'the-new-css-reset/css/reset.css'; +import './index.css'; + +const router = createBrowserRouter([ + { + path: '/', + element: , // Note: 이후 랜딩 페이지로 교체 필요 + }, + { + path: '/login', + element: , + }, + { + path: '*', + element: , + }, +]); const App = () => { // const { data } = useHelloQuery(); // console.log(data?.hello) return ( -

Hello World

+ + + ); }; diff --git a/apps/admin/src/assets/svg/apple.svg b/apps/admin/src/assets/svg/apple.svg new file mode 100644 index 00000000..de21de0a --- /dev/null +++ b/apps/admin/src/assets/svg/apple.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/admin/src/assets/svg/kakao.svg b/apps/admin/src/assets/svg/kakao.svg new file mode 100644 index 00000000..3e0dbbe0 --- /dev/null +++ b/apps/admin/src/assets/svg/kakao.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/admin/src/main.tsx b/apps/admin/src/main.tsx index e5775c05..c018515c 100644 --- a/apps/admin/src/main.tsx +++ b/apps/admin/src/main.tsx @@ -1,6 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; -import App from './App.tsx'; +import App from './App'; ReactDOM.createRoot(document.getElementById('root')!).render( diff --git a/apps/admin/src/pages/Login/LoginPage.styles.ts b/apps/admin/src/pages/Login/LoginPage.styles.ts new file mode 100644 index 00000000..813f4718 --- /dev/null +++ b/apps/admin/src/pages/Login/LoginPage.styles.ts @@ -0,0 +1,119 @@ +import styled from '@emotion/styled'; +import { Link } from 'react-router-dom'; + +const LoginPage = styled.div` + width: 100vw; + height: 100vh; + display: flex; + justify-content: center; + align-items: center; + background-color: ${({ theme }) => theme.palette.grey.g20}; +`; + +const LoginContent = styled.div``; + +const Card = styled.div` + width: 600px; + background-color: ${({ theme }) => theme.palette.grey.w}; + box-shadow: 0px 8px 14px 0px #8b8b8b26; + margin-bottom: 40px; + border-radius: 8px; +`; + +const CardHeader = styled.div` + height: 64px; + display: flex; + justify-content: center; + align-items: center; + border-bottom: 1px solid ${({ theme }) => theme.palette.grey.g20}; +`; + +const CardHeaderTitle = styled.h2` + ${({ theme }) => theme.typo.h2_m}; + color: ${({ theme }) => theme.palette.grey.g70}; +`; + +const CardContent = styled.div` + padding-top: 60px; + padding-bottom: 40px; + display: flex; + flex-direction: column; + align-items: center; +`; + +const CardContentTitle = styled.h3` + ${({ theme }) => theme.typo.h3}; + color: ${({ theme }) => theme.palette.grey.g90}; + text-align: center; + margin-bottom: 48px; +`; + +const LoginButtonContainer = styled.div` + width: 388px; + display: flex; + flex-direction: column; + gap: 12px; + margin-bottom: 80px; +`; + +const LoginButtonIcon = styled.div` + position: absolute; + left: 24px; + display: inline-flex; + align-items: center; +`; + +const KakaoLoginButton = styled.button` + ${({ theme }) => theme.typo.sh1}; + color: ${({ theme }) => theme.palette.grey.g100}; + background-color: #ffe833; + height: 48px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + cursor: pointer; +`; + +const AppleLoginButton = styled.button` + ${({ theme }) => theme.typo.sh1}; + color: ${({ theme }) => theme.palette.grey.w}; + background-color: ${({ theme }) => theme.palette.grey.g100}; + height: 48px; + border-radius: 4px; + display: flex; + justify-content: center; + align-items: center; + position: relative; + cursor: pointer; +`; + +const BottomLinkContainer = styled.div` + ${({ theme }) => theme.typo.b3}; + color: ${({ theme }) => theme.palette.grey.g70}; + display: flex; + flex-direction: column; + gap: 8px; + text-align: center; +`; + +const BottomLink = styled(Link)` + cursor: pointer; +`; + +export default { + LoginPage, + LoginContent, + Card, + CardHeader, + CardHeaderTitle, + CardContent, + CardContentTitle, + LoginButtonContainer, + LoginButtonIcon, + KakaoLoginButton, + AppleLoginButton, + BottomLinkContainer, + BottomLink, +}; diff --git a/apps/admin/src/pages/Login/LoginPage.tsx b/apps/admin/src/pages/Login/LoginPage.tsx new file mode 100644 index 00000000..4039708b --- /dev/null +++ b/apps/admin/src/pages/Login/LoginPage.tsx @@ -0,0 +1,47 @@ +import Styled from './LoginPage.styles'; +import kakaoIconUrl from '../../assets/svg/kakao.svg'; +import appleIconUrl from '../../assets/svg/apple.svg'; + +const LoginPage = () => { + return ( + + + + + 로그인 + + + + 지금 불티에서 +
+ 티켓을 불티나게 팔아보세요! + + + + + 카카오톡 + + 카카오톡으로 시작하기 + + + + Apple + + Apple로 시작하기 + + + + {/* Note: 추후 실제 링크로 교체 */} + 개인정보 처리방침 + 서비스 이용약관 + + + + {/* Note: 추후 로고로 교체 */} +

Boolti logo

+ + + ); +}; + +export default LoginPage; diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts index d4dd3fc7..f1007522 100644 --- a/apps/admin/vite.config.ts +++ b/apps/admin/vite.config.ts @@ -5,7 +5,6 @@ import react from '@vitejs/plugin-react'; export default defineConfig({ plugins: [ react({ - jsxRuntime: 'classic', jsxImportSource: '@emotion/react', babel: { plugins: ['@emotion/babel-plugin'], diff --git a/yarn.lock b/yarn.lock index 74300648..a73ce5ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -828,6 +828,13 @@ __metadata: languageName: node linkType: hard +"@remix-run/router@npm:1.14.2": + version: 1.14.2 + resolution: "@remix-run/router@npm:1.14.2" + checksum: 163d4a8ea3e25a7a7e3015f274e54b8043eddaaa92da220cad2893eb0fcbb649f617152c6d74680a4b55c0f319944ff1b362e87f814bb73be54f8d687ee730d6 + languageName: node + linkType: hard + "@rollup/rollup-android-arm-eabi@npm:4.9.5": version: 4.9.5 resolution: "@rollup/rollup-android-arm-eabi@npm:4.9.5" @@ -1257,6 +1264,8 @@ __metadata: "@vitejs/plugin-react": "npm:^4.2.1" react: "npm:^18.2.0" react-dom: "npm:^18.2.0" + react-router-dom: "npm:^6.21.3" + the-new-css-reset: "npm:^1.11.2" typescript: "npm:^5.2.2" vite: "npm:^5.0.8" languageName: unknown @@ -3033,6 +3042,30 @@ __metadata: languageName: node linkType: hard +"react-router-dom@npm:^6.21.3": + version: 6.21.3 + resolution: "react-router-dom@npm:6.21.3" + dependencies: + "@remix-run/router": "npm:1.14.2" + react-router: "npm:6.21.3" + peerDependencies: + react: ">=16.8" + react-dom: ">=16.8" + checksum: 1bea7bf17eb148461a7a99c9314e5ccc662ae00f563e29c16038e0b1b40aefb7381685f21289df07ad2295087a783c897b4e841ed12b07cd9a0829274a224231 + languageName: node + linkType: hard + +"react-router@npm:6.21.3": + version: 6.21.3 + resolution: "react-router@npm:6.21.3" + dependencies: + "@remix-run/router": "npm:1.14.2" + peerDependencies: + react: ">=16.8" + checksum: 66a0377a74ef2d298b9d617c02ba7a10e7e8b8be34b303068b5b5986f05e965037c51c0d45ea3a7967438f2dfde76c2c0f638cf19d3417fb408608ee9aee1668 + languageName: node + linkType: hard + "react@npm:^18.2.0": version: 18.2.0 resolution: "react@npm:18.2.0" @@ -3432,6 +3465,13 @@ __metadata: languageName: node linkType: hard +"the-new-css-reset@npm:^1.11.2": + version: 1.11.2 + resolution: "the-new-css-reset@npm:1.11.2" + checksum: 2b5e6e7a3d06c2be8e05191a4ac345805740d2df948b6559b5445716147d354ab76f363f98266064a8814192e21850db31250187cb174a43a086150ced4eb829 + languageName: node + linkType: hard + "to-fast-properties@npm:^2.0.0": version: 2.0.0 resolution: "to-fast-properties@npm:2.0.0"