From 9072df3a71b62fb9d6aeb5eafa4e5cdd3088832c Mon Sep 17 00:00:00 2001 From: colorkite10 Date: Mon, 23 Oct 2023 22:31:31 +0900 Subject: [PATCH 1/3] =?UTF-8?q?design:=20Login=20Page=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 52 +++++++++++++++++++ package.json | 1 + src/constants/LoginPage.ts | 9 ++++ src/pages/LoginPage/LoginPage.style.ts | 72 ++++++++++++++++++++++++++ src/pages/LoginPage/LoginPage.tsx | 30 +++++++++++ src/pages/RegisterPage.tsx | 2 +- src/routes/index.tsx | 5 ++ 7 files changed, 170 insertions(+), 1 deletion(-) create mode 100644 src/constants/LoginPage.ts create mode 100644 src/pages/LoginPage/LoginPage.style.ts create mode 100644 src/pages/LoginPage/LoginPage.tsx diff --git a/package-lock.json b/package-lock.json index 2b2e176e..f114c00d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^4.36.1", "axios": "^1.5.1", "react": "^18.2.0", @@ -482,6 +483,14 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, "node_modules/@emotion/memoize": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", @@ -527,6 +536,28 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" }, + "node_modules/@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "dependencies": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + }, + "peerDependencies": { + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", @@ -5905,6 +5936,14 @@ "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.1.tgz", "integrity": "sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==" }, + "@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "requires": { + "@emotion/memoize": "^0.8.1" + } + }, "@emotion/memoize": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.8.1.tgz", @@ -5942,6 +5981,19 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.2.2.tgz", "integrity": "sha512-0QBtGvaqtWi+nx6doRwDdBIzhNdZrXUppvTM4dtZZWEGTXL/XE/yJxLMGlDT1Gt+UHH5IX1n+jkXyytE/av7OA==" }, + "@emotion/styled": { + "version": "11.11.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.11.0.tgz", + "integrity": "sha512-hM5Nnvu9P3midq5aaXj4I+lnSfNi7Pmd4EWk1fOZ3pxookaQTNew6bp4JaCBYM4HVFZF9g7UjJmsUmC2JlxOng==", + "requires": { + "@babel/runtime": "^7.18.3", + "@emotion/babel-plugin": "^11.11.0", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/serialize": "^1.1.2", + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.1", + "@emotion/utils": "^1.2.1" + } + }, "@emotion/unitless": { "version": "0.8.1", "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.8.1.tgz", diff --git a/package.json b/package.json index 55bf60a7..778ef4d5 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@emotion/css": "^11.11.2", "@emotion/react": "^11.11.1", + "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^4.36.1", "axios": "^1.5.1", "react": "^18.2.0", diff --git a/src/constants/LoginPage.ts b/src/constants/LoginPage.ts new file mode 100644 index 00000000..52b0349a --- /dev/null +++ b/src/constants/LoginPage.ts @@ -0,0 +1,9 @@ +const LogoText = { + SPACE_CLUB: 'Space Club', +}; + +const Message = { + WELCOME: '스페이스 클럽에 오신 걸 환영합니다!', +}; + +export { LogoText, Message }; diff --git a/src/pages/LoginPage/LoginPage.style.ts b/src/pages/LoginPage/LoginPage.style.ts new file mode 100644 index 00000000..5e78642e --- /dev/null +++ b/src/pages/LoginPage/LoginPage.style.ts @@ -0,0 +1,72 @@ +import styled from '@emotion/styled'; + +const ContainerStyled = styled.div` + display: flex; + height: 100vh; +`; + +const LogoAreaStyled = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 50%; + min-width: 30rem; + height: 100vh; + min-height: 30rem; +`; + +const LogoCircleStyled = styled.div` + width: 28rem; + height: 28rem; + border-radius: 50%; + background: linear-gradient( + 139deg, + #012a36 10.1%, + rgba(50, 51, 96, 0.78) 46.84%, + rgba(113, 42, 124, 0.51) 69.53%, + rgba(0, 221, 49, 0.15) 88.79% + ); + overflow: hidden; +`; + +const LogoTextStyled = styled.div` + display: flex; + flex-direction: column; + position: relative; + top: 1rem; + right: 3rem; + color: #ffffff; + text-align: end; + font-size: 6.25rem; + font-style: normal; + font-family: 'LogoFont'; + font-weight: 400; + line-height: normal; +`; + +const LoginAreaStyled = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 50%; + min-width: 30rem; + height: 100vh; + min-height: 30rem; + font-family: 'MainBold'; +`; + +const TitleStyled = styled.div` + padding: 0 10% 3rem 10%; + font-weight: bold; + font-size: large; +`; + +export { + ContainerStyled, + LogoAreaStyled, + LogoCircleStyled, + LogoTextStyled, + LoginAreaStyled, + TitleStyled, +}; diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx new file mode 100644 index 00000000..dbc0a9df --- /dev/null +++ b/src/pages/LoginPage/LoginPage.tsx @@ -0,0 +1,30 @@ +import { LogoText, Message } from '@/constants/LoginPage'; + +import { + ContainerStyled, + LoginAreaStyled, + LogoAreaStyled, + LogoCircleStyled, + LogoTextStyled, + TitleStyled, +} from './LoginPage.style'; + +const LoginPage = () => { + return ( + + + + + {LogoText.SPACE_CLUB} + + + + + {Message.WELCOME} + + + + ); +}; + +export default LoginPage; diff --git a/src/pages/RegisterPage.tsx b/src/pages/RegisterPage.tsx index c01eac8d..8a23ebc3 100644 --- a/src/pages/RegisterPage.tsx +++ b/src/pages/RegisterPage.tsx @@ -1,7 +1,7 @@ import React from 'react'; const RegisterPage = () => { - return
; + return
register
; }; export default RegisterPage; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index d140143b..bdaeb5d0 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,5 +1,6 @@ import App from '@/App'; import Layout from '@/pages/Layout'; +import LoginPage from '@/pages/LoginPage/LoginPage'; import MainPage from '@/pages/MainPage'; import NotFoundPage from '@/pages/NotFoundPage'; import ProfilePage from '@/pages/ProfilePage'; @@ -26,6 +27,10 @@ const router = createBrowserRouter([ path: 'register', element: , }, + { + path: 'login', + element: , + }, { path: '', element: , From df79f0d37cee5e336d1e769f22d769c0e170251c Mon Sep 17 00:00:00 2001 From: colorkite10 Date: Tue, 24 Oct 2023 15:48:54 +0900 Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/LoginPage/LoginPage.style.ts | 11 ++++------- src/pages/LoginPage/LoginPage.tsx | 4 +--- src/pages/MainPage.tsx | 8 +++++++- 3 files changed, 12 insertions(+), 11 deletions(-) diff --git a/src/pages/LoginPage/LoginPage.style.ts b/src/pages/LoginPage/LoginPage.style.ts index 5e78642e..f9b7a7ce 100644 --- a/src/pages/LoginPage/LoginPage.style.ts +++ b/src/pages/LoginPage/LoginPage.style.ts @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -const ContainerStyled = styled.div` +const PageContainerStyled = styled.div` display: flex; height: 100vh; `; @@ -29,7 +29,7 @@ const LogoCircleStyled = styled.div` overflow: hidden; `; -const LogoTextStyled = styled.div` +const LogoTextStyled = styled.h1` display: flex; flex-direction: column; position: relative; @@ -38,10 +38,7 @@ const LogoTextStyled = styled.div` color: #ffffff; text-align: end; font-size: 6.25rem; - font-style: normal; font-family: 'LogoFont'; - font-weight: 400; - line-height: normal; `; const LoginAreaStyled = styled.div` @@ -56,14 +53,14 @@ const LoginAreaStyled = styled.div` font-family: 'MainBold'; `; -const TitleStyled = styled.div` +const TitleStyled = styled.h1` padding: 0 10% 3rem 10%; font-weight: bold; font-size: large; `; export { - ContainerStyled, + PageContainerStyled as ContainerStyled, LogoAreaStyled, LogoCircleStyled, LogoTextStyled, diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index dbc0a9df..86916e41 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -14,9 +14,7 @@ const LoginPage = () => { - - {LogoText.SPACE_CLUB} - + {LogoText.SPACE_CLUB} diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 400cba81..514851f0 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,7 +1,13 @@ import React from 'react'; +import LoginPage from './LoginPage/LoginPage'; + const MainPage = () => { - return
main
; + return ( +
+ +
+ ); }; export default MainPage; From 271710861a9725488b45452271fabc74dc19bb89 Mon Sep 17 00:00:00 2001 From: colorkite10 Date: Tue, 24 Oct 2023 15:48:54 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EC=BD=94=EB=93=9C=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/LoginPage/LoginPage.style.ts | 2 +- src/pages/LoginPage/LoginPage.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/LoginPage/LoginPage.style.ts b/src/pages/LoginPage/LoginPage.style.ts index 371e20af..7a3e25a9 100644 --- a/src/pages/LoginPage/LoginPage.style.ts +++ b/src/pages/LoginPage/LoginPage.style.ts @@ -62,7 +62,7 @@ const TitleStyled = styled.h1` `; export { - PageContainerStyled as ContainerStyled, + PageContainerStyled, LogoAreaStyled, LogoCircleStyled, LogoTextStyled, diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index 86916e41..d0b23365 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -1,17 +1,17 @@ import { LogoText, Message } from '@/constants/LoginPage'; import { - ContainerStyled, LoginAreaStyled, LogoAreaStyled, LogoCircleStyled, LogoTextStyled, + PageContainerStyled, TitleStyled, } from './LoginPage.style'; const LoginPage = () => { return ( - + {LogoText.SPACE_CLUB} @@ -21,7 +21,7 @@ const LoginPage = () => { {Message.WELCOME} - + ); };