From 50d60df286d57183aad81d8de10f885cf67f890d Mon Sep 17 00:00:00 2001 From: yoonyesol Date: Mon, 17 Jun 2024 14:06:27 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20#5=20=ED=9A=8C=EC=9B=90=EA=B0=80?= =?UTF-8?q?=EC=9E=85=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=B0=8F=20=EB=A7=88=ED=81=AC=EC=97=85,=20CSS=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/assets/authGULogo.svg | 7 +++ src/index.css | 10 ++++ src/layouts/AuthLayout.tsx | 11 ++++ src/pages/user/SignUpPage.tsx | 95 ++++++++++++++++++++++++++++++++++- src/routes/MainRouter.tsx | 7 ++- tailwind.config.js | 2 +- yarn.lock | 38 ++++++++++++-- 8 files changed, 163 insertions(+), 8 deletions(-) create mode 100644 src/assets/authGULogo.svg create mode 100644 src/layouts/AuthLayout.tsx diff --git a/package.json b/package.json index 5f0f3a10..c8a38fb7 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.51.4", "react-router-dom": "^6.23.1", + "tailwind-scrollbar-hide": "^1.1.7", "zustand": "^4.5.2" }, "devDependencies": { diff --git a/src/assets/authGULogo.svg b/src/assets/authGULogo.svg new file mode 100644 index 00000000..be5b9088 --- /dev/null +++ b/src/assets/authGULogo.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/src/index.css b/src/index.css index b5c61c95..51bd59d9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,3 +1,13 @@ @tailwind base; @tailwind components; @tailwind utilities; + +@layer components { + .auth-btn { + @apply h-[4.38rem] bg-[#E1F4D9] rounded-[10px] text-base font-bold; + } + + .auth-input { + @apply h-[4.38rem] bg-white rounded-[10px] p-4 placeholder:text-[#5E5E5E] text-sm; + } +} diff --git a/src/layouts/AuthLayout.tsx b/src/layouts/AuthLayout.tsx new file mode 100644 index 00000000..0b7dc448 --- /dev/null +++ b/src/layouts/AuthLayout.tsx @@ -0,0 +1,11 @@ +import { Outlet } from 'react-router-dom'; +import AuthGULogo from '../assets/authGULogo.svg'; + +export default function AuthLayout() { + return ( +
+ Auth GU Logo + +
+ ); +} diff --git a/src/pages/user/SignUpPage.tsx b/src/pages/user/SignUpPage.tsx index be64afeb..6b162c96 100644 --- a/src/pages/user/SignUpPage.tsx +++ b/src/pages/user/SignUpPage.tsx @@ -1,3 +1,96 @@ export default function SignUpPage() { - return
SignUpPage
; + return ( +
+
+
+
+ img +
+
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+ + + +
+ + +
+
+ + +
+
+ +

로그인 페이지로 돌아가기

+
+
+
+ ); } diff --git a/src/routes/MainRouter.tsx b/src/routes/MainRouter.tsx index c85d5c57..4817f600 100644 --- a/src/routes/MainRouter.tsx +++ b/src/routes/MainRouter.tsx @@ -2,6 +2,7 @@ import { RouterProvider, createBrowserRouter } from 'react-router-dom'; import AfterLoginRoute from '@routes/AfterLoginRoute'; import BeforeLoginRoute from '@routes/BeforeLoginRoute'; +import AuthLayout from '@layouts/AuthLayout'; import TeamLayout from '@layouts/TeamLayout'; import DefaultLayout from '@layouts/DefaultLayout'; import SettingLayout from '@layouts/SettingLayout'; @@ -23,7 +24,11 @@ export default function MainRouter() { const router = createBrowserRouter([ { path: '/', - element: , + element: ( + + + + ), errorElement: , children: [ { path: 'signup', element: }, diff --git a/tailwind.config.js b/tailwind.config.js index d21f1cda..076945b2 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -4,5 +4,5 @@ export default { theme: { extend: {}, }, - plugins: [], + plugins: [require('tailwind-scrollbar-hide')], }; diff --git a/yarn.lock b/yarn.lock index e4366539..79ed4db5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3887,8 +3887,16 @@ string-argv@0.3.2: resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.3.2.tgz#2b6d0ef24b656274d957d54e0a4bbf6153dc02b6" integrity sha512-aqD2Q0144Z+/RqG52NeHEkZauTAUWJO8c6yTftGJKO3Tja5tUgIfmIl6kExvhtxSDP7fXB6DvzkfMpCd/F3G+Q== -"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: - name string-width-cjs +"string-width-cjs@npm:string-width@^4.2.0": + version "4.2.3" + resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" + integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== + dependencies: + emoji-regex "^8.0.0" + is-fullwidth-code-point "^3.0.0" + strip-ansi "^6.0.1" + +string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -3961,7 +3969,14 @@ string.prototype.trimstart@^1.0.8: define-properties "^1.2.1" es-object-atoms "^1.0.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1": + version "6.0.1" + resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" + integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== + dependencies: + ansi-regex "^5.0.1" + +strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -4041,6 +4056,11 @@ symbol-tree@^3.2.4: resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz" integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw== +tailwind-scrollbar-hide@^1.1.7: + version "1.1.7" + resolved "https://registry.yarnpkg.com/tailwind-scrollbar-hide/-/tailwind-scrollbar-hide-1.1.7.tgz#90b481fb2e204030e3919427416650c54f56f847" + integrity sha512-X324n9OtpTmOMqEgDUEA/RgLrNfBF/jwJdctaPZDzB3mppxJk7TLIDmOreEDm1Bq4R9LSPu4Epf8VSdovNU+iA== + tailwindcss@^3.4.3: version "3.4.3" resolved "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.3.tgz" @@ -4448,8 +4468,7 @@ word-wrap@^1.2.5: resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: - name wrap-ansi-cjs +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== @@ -4467,6 +4486,15 @@ wrap-ansi@^6.2.0: string-width "^4.1.0" strip-ansi "^6.0.0" +wrap-ansi@^7.0.0: + version "7.0.0" + resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" + integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== + dependencies: + ansi-styles "^4.0.0" + string-width "^4.1.0" + strip-ansi "^6.0.0" + wrap-ansi@^8.1.0: version "8.1.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-8.1.0.tgz"