From 838b2e9e83f4da89ce92b1f14d986939ae471187 Mon Sep 17 00:00:00 2001 From: chaeyeon LEE <98521882+colorkite10@users.noreply.github.com> Date: Tue, 24 Oct 2023 16:18:23 +0900 Subject: [PATCH 1/4] =?UTF-8?q?SKRF-111=20design:=20Login=20Page=20?= =?UTF-8?q?=EB=94=94=EC=9E=90=EC=9D=B8=20(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * design: Login Page 디자인 * refactor: 코드리뷰 반영 * refactor: 코드리뷰 반영 --- src/constants/LoginPage.ts | 9 ++++ src/pages/LoginPage/LoginPage.style.ts | 71 ++++++++++++++++++++++++++ src/pages/LoginPage/LoginPage.tsx | 28 ++++++++++ src/pages/MainPage.tsx | 2 - src/routes/index.tsx | 5 ++ 5 files changed, 113 insertions(+), 2 deletions(-) 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/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..7a3e25a9 --- /dev/null +++ b/src/pages/LoginPage/LoginPage.style.ts @@ -0,0 +1,71 @@ +import styled from '@emotion/styled'; + +import Theme from '@styles/Theme'; + +const PageContainerStyled = 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.h1` + display: flex; + flex-direction: column; + position: relative; + top: 1rem; + right: 3rem; + color: ${Theme.color.logoTextColor}; + text-align: end; + font-size: 6.25rem; + font-family: 'LogoFont'; +`; + +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.h1` + padding: 0 10% 3rem 10%; + font-weight: bold; + font-size: large; +`; + +export { + PageContainerStyled, + 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..d0b23365 --- /dev/null +++ b/src/pages/LoginPage/LoginPage.tsx @@ -0,0 +1,28 @@ +import { LogoText, Message } from '@/constants/LoginPage'; + +import { + LoginAreaStyled, + LogoAreaStyled, + LogoCircleStyled, + LogoTextStyled, + PageContainerStyled, + TitleStyled, +} from './LoginPage.style'; + +const LoginPage = () => { + return ( + + + + {LogoText.SPACE_CLUB} + + + + {Message.WELCOME} + + + + ); +}; + +export default LoginPage; diff --git a/src/pages/MainPage.tsx b/src/pages/MainPage.tsx index 400cba81..fd51a4b8 100644 --- a/src/pages/MainPage.tsx +++ b/src/pages/MainPage.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - const MainPage = () => { return
main
; }; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 3ca9df3b..9bf556d9 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 1d47ab321d28d5626198f7f62c8b2c1f1efbd1aa Mon Sep 17 00:00:00 2001 From: chaeyeon LEE <98521882+colorkite10@users.noreply.github.com> Date: Tue, 24 Oct 2023 16:20:49 +0900 Subject: [PATCH 2/4] =?UTF-8?q?design:=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=B9=B4=EB=93=9C=20=EA=B3=B5=ED=86=B5=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84=20(#13)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/EventCard/EventCard.style.ts | 69 +++++++++++++++++++ .../common/EventCard/EventCard.tsx | 52 ++++++++++++++ 2 files changed, 121 insertions(+) create mode 100644 src/componenets/common/EventCard/EventCard.style.ts create mode 100644 src/componenets/common/EventCard/EventCard.tsx diff --git a/src/componenets/common/EventCard/EventCard.style.ts b/src/componenets/common/EventCard/EventCard.style.ts new file mode 100644 index 00000000..54291057 --- /dev/null +++ b/src/componenets/common/EventCard/EventCard.style.ts @@ -0,0 +1,69 @@ +import styled from '@emotion/styled'; + +const ContainerStyled = styled.div` + display: flex; + width: 25rem; + height: 17rem; + font-family: 'MainThin'; + cursor: pointer; + transition: transform 0.3s ease; + + &:hover { + transform: scale(1.02); + } +`; + +const PosterAreaStyled = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 12rem; + height: 17rem; +`; + +const EventInfoWrapper = styled.div` + display: flex; + justify-content: space-between; + flex-direction: column; + margin: 3%; +`; + +const TitleStyled = styled.div` + padding-bottom: 3%; + font-family: 'MainBold'; + font-size: 1.5rem; +`; + +const EventDateStyled = styled.div` + font-size: 1rem; +`; + +const EventFooterWrapper = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: end; + height: 20%; + margin-right: 3%; +`; + +const PlaceStyled = styled.div` + color: grey; + font-size: 1rem; +`; + +const ClubNameStyled = styled.div` + font-family: 'MainRegular'; + font-size: 0.8rem; +`; + +export { + ContainerStyled, + PosterAreaStyled, + EventInfoWrapper, + TitleStyled, + EventDateStyled, + EventFooterWrapper, + PlaceStyled, + ClubNameStyled, +}; diff --git a/src/componenets/common/EventCard/EventCard.tsx b/src/componenets/common/EventCard/EventCard.tsx new file mode 100644 index 00000000..80ab50ff --- /dev/null +++ b/src/componenets/common/EventCard/EventCard.tsx @@ -0,0 +1,52 @@ +import { useNavigate } from 'react-router-dom'; + +import { + ClubNameStyled, + ContainerStyled, + EventDateStyled, + EventFooterWrapper, + EventInfoWrapper, + PlaceStyled, + PosterAreaStyled, + TitleStyled, +} from './EventCard.style'; + +interface EventProps { + eventId: number; + eventPoster: string; + eventTitle: string; + eventDate: string; + eventPlace: string; + clubName: string; +} + +const EventCard = ({ + eventId, + eventPoster, + eventTitle, + eventDate, + eventPlace, + clubName, +}: EventProps) => { + const navigate = useNavigate(); + + return ( + navigate(`/event/detail/${eventId}`)}> + + poster image + + +
+ {eventTitle} + {eventDate} +
+ + {eventPlace} + {clubName} + + + + ); +}; + +export default EventCard; From 79d15aec12f67dbb86fc7c87398f7a7abd1eef97 Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@gmail.com> Date: Tue, 24 Oct 2023 17:10:40 +0900 Subject: [PATCH 3/4] =?UTF-8?q?SKRF-109=20=EC=B9=B4=EC=B9=B4=EC=98=A4=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EB=B2=84=ED=8A=BC=20=EB=A7=8C?= =?UTF-8?q?=EB=93=A4=EA=B8=B0=20(#14)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat : auth를 위한 상수 추가 * feat : emotion styled설치 * feat : 카카오 로그인 버튼 추가 * fix : kakaoYellow 컬러 오류 수정 * feat : redirect, login 라우트 설정 * feat : redirect, login 라우트 설정 * feat : 로그인페이지 추가 * feat : main페이지 url변경 * fix : 스타일 파일 export 컨벤션 맞추기 * fix : 불필요한 import 삭제 * fix : components import문 수정 * feat : oauth 라우팅 설정 * feat : 로그인 페이지에 카카오버튼 추가 --- package-lock.json | 14 ++++++++++++++ src/componenets/common/index.ts | 0 .../common/EventCard/EventCard.style.ts | 0 .../common/EventCard/EventCard.tsx | 0 .../common/InputForm/InputForm.style.ts | 0 .../common/InputForm/InputForm.tsx | 0 .../SpaceClubHomeLogo.style.ts | 0 .../SpaceClubHomeLogo/SpaceClubHomeLogo.tsx | 0 .../KakaoLoginButton.style.ts | 19 +++++++++++++++++++ .../kakaoLoginButton/KakaoLoginButton.tsx | 13 +++++++++++++ src/constants/auth.ts | 3 +++ src/pages/LoginPage.tsx | 11 +++++++++++ src/pages/LoginPage/LoginPage.tsx | 4 +++- src/pages/OauthRedirectPage.tsx | 11 +++++++++++ src/pages/RegisterPage/RegisterPage.tsx | 2 +- src/routes/index.tsx | 12 ++++++++++-- src/styles/Theme.ts | 1 + 17 files changed, 86 insertions(+), 4 deletions(-) delete mode 100644 src/componenets/common/index.ts rename src/{componenets => components}/common/EventCard/EventCard.style.ts (100%) rename src/{componenets => components}/common/EventCard/EventCard.tsx (100%) rename src/{componenets => components}/common/InputForm/InputForm.style.ts (100%) rename src/{componenets => components}/common/InputForm/InputForm.tsx (100%) rename src/{componenets => components}/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts (100%) rename src/{componenets => components}/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx (100%) create mode 100644 src/components/kakaoLoginButton/KakaoLoginButton.style.ts create mode 100644 src/components/kakaoLoginButton/KakaoLoginButton.tsx create mode 100644 src/constants/auth.ts create mode 100644 src/pages/LoginPage.tsx create mode 100644 src/pages/OauthRedirectPage.tsx diff --git a/package-lock.json b/package-lock.json index f114c00d..b36a60a6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -4443,6 +4443,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-kakao-login": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-kakao-login/-/react-kakao-login-2.1.1.tgz", + "integrity": "sha512-t9htk41/i0zUY7q92mtqdqVZZ018BPi1DgbSVVrPCmuMKhZGJOnZ9OfaKLVPu3sn8QXbJc3dPwqKOiElpb44hQ==", + "peerDependencies": { + "react": ">= 15.3.0" + } + }, "node_modules/react-router": { "version": "6.16.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", @@ -8569,6 +8577,12 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "react-kakao-login": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-kakao-login/-/react-kakao-login-2.1.1.tgz", + "integrity": "sha512-t9htk41/i0zUY7q92mtqdqVZZ018BPi1DgbSVVrPCmuMKhZGJOnZ9OfaKLVPu3sn8QXbJc3dPwqKOiElpb44hQ==", + "requires": {} + }, "react-router": { "version": "6.16.0", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.16.0.tgz", diff --git a/src/componenets/common/index.ts b/src/componenets/common/index.ts deleted file mode 100644 index e69de29b..00000000 diff --git a/src/componenets/common/EventCard/EventCard.style.ts b/src/components/common/EventCard/EventCard.style.ts similarity index 100% rename from src/componenets/common/EventCard/EventCard.style.ts rename to src/components/common/EventCard/EventCard.style.ts diff --git a/src/componenets/common/EventCard/EventCard.tsx b/src/components/common/EventCard/EventCard.tsx similarity index 100% rename from src/componenets/common/EventCard/EventCard.tsx rename to src/components/common/EventCard/EventCard.tsx diff --git a/src/componenets/common/InputForm/InputForm.style.ts b/src/components/common/InputForm/InputForm.style.ts similarity index 100% rename from src/componenets/common/InputForm/InputForm.style.ts rename to src/components/common/InputForm/InputForm.style.ts diff --git a/src/componenets/common/InputForm/InputForm.tsx b/src/components/common/InputForm/InputForm.tsx similarity index 100% rename from src/componenets/common/InputForm/InputForm.tsx rename to src/components/common/InputForm/InputForm.tsx diff --git a/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts b/src/components/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts similarity index 100% rename from src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts rename to src/components/common/SpaceClubHomeLogo/SpaceClubHomeLogo.style.ts diff --git a/src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx b/src/components/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx similarity index 100% rename from src/componenets/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx rename to src/components/common/SpaceClubHomeLogo/SpaceClubHomeLogo.tsx diff --git a/src/components/kakaoLoginButton/KakaoLoginButton.style.ts b/src/components/kakaoLoginButton/KakaoLoginButton.style.ts new file mode 100644 index 00000000..ce512add --- /dev/null +++ b/src/components/kakaoLoginButton/KakaoLoginButton.style.ts @@ -0,0 +1,19 @@ +import styled from '@emotion/styled'; + +const KakaoLoginButtonStyled = styled.div` + width: 300px; + height: 50px; + border-radius: 15px; + background-color: ${(props) => props.theme.color.kakaoYellow}; +`; + +const KakaoLoginLink = styled.a` + text-decoration: none; + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 100%; +`; + +export { KakaoLoginButtonStyled, KakaoLoginLink }; diff --git a/src/components/kakaoLoginButton/KakaoLoginButton.tsx b/src/components/kakaoLoginButton/KakaoLoginButton.tsx new file mode 100644 index 00000000..4ad5f86e --- /dev/null +++ b/src/components/kakaoLoginButton/KakaoLoginButton.tsx @@ -0,0 +1,13 @@ +import { KAKAO_AUTH_URL } from '@/constants/auth'; + +import { KakaoLoginButtonStyled, KakaoLoginLink } from './KakaoLoginButton.style'; + +const KakaoLoginButton = () => { + return ( + + 카카오계정으로 로그인하기 + + ); +}; + +export default KakaoLoginButton; diff --git a/src/constants/auth.ts b/src/constants/auth.ts new file mode 100644 index 00000000..2add8e88 --- /dev/null +++ b/src/constants/auth.ts @@ -0,0 +1,3 @@ +export const KAKAO_REST_API_KEY = 'd358bd786d22951d3c433fe2cbcd6689'; +export const KAKAO_REDIRECT_URI = 'http://localhost:5173/oauth/kakao'; +export const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_REST_API_KEY}&redirect_uri=${KAKAO_REDIRECT_URI}&response_type=code`; diff --git a/src/pages/LoginPage.tsx b/src/pages/LoginPage.tsx new file mode 100644 index 00000000..4e352434 --- /dev/null +++ b/src/pages/LoginPage.tsx @@ -0,0 +1,11 @@ +import KakaoLoginButton from '@/components/kakaoLoginButton/KakaoLoginButton'; + +const LoginPage = () => { + return ( + <> + ; + + ); +}; + +export default LoginPage; diff --git a/src/pages/LoginPage/LoginPage.tsx b/src/pages/LoginPage/LoginPage.tsx index d0b23365..bc0564bd 100644 --- a/src/pages/LoginPage/LoginPage.tsx +++ b/src/pages/LoginPage/LoginPage.tsx @@ -1,5 +1,7 @@ import { LogoText, Message } from '@/constants/LoginPage'; +import KakaoLoginButton from '@components/kakaoLoginButton/KakaoLoginButton'; + import { LoginAreaStyled, LogoAreaStyled, @@ -19,7 +21,7 @@ const LoginPage = () => { {Message.WELCOME} - + ); diff --git a/src/pages/OauthRedirectPage.tsx b/src/pages/OauthRedirectPage.tsx new file mode 100644 index 00000000..354afe20 --- /dev/null +++ b/src/pages/OauthRedirectPage.tsx @@ -0,0 +1,11 @@ +import { useEffect } from 'react'; + +const OauthRedirectPage = () => { + const authCode = new URL(window.location.href).searchParams.get('code'); + + useEffect(() => {}, []); + + return
OauthRedirectPage
; +}; + +export default OauthRedirectPage; diff --git a/src/pages/RegisterPage/RegisterPage.tsx b/src/pages/RegisterPage/RegisterPage.tsx index df13247f..65130e2d 100644 --- a/src/pages/RegisterPage/RegisterPage.tsx +++ b/src/pages/RegisterPage/RegisterPage.tsx @@ -1,4 +1,4 @@ -import InputForm from '@/componenets/common/InputForm/InputForm'; +import InputForm from '@components/common/InputForm/InputForm'; import { Container, SubmitBtn, Title } from './RegisterPage.style'; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 9bf556d9..63a25abc 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -3,6 +3,7 @@ import Layout from '@/pages/Layout'; import LoginPage from '@/pages/LoginPage/LoginPage'; import MainPage from '@/pages/MainPage'; import NotFoundPage from '@/pages/NotFoundPage'; +import OauthRedirectPage from '@/pages/OauthRedirectPage'; import ProfilePage from '@/pages/ProfilePage'; import RegisterPage from '@/pages/RegisterPage/RegisterPage'; import ClubEventPage from '@/pages/club/ClubEventPage'; @@ -23,13 +24,17 @@ const router = createBrowserRouter([ path: '/', element: , children: [ + { + path: 'login', + element: , + }, { path: 'register', element: , }, { - path: 'login', - element: , + path: 'oauth/kakao', + element: , }, { path: '', @@ -91,6 +96,9 @@ const router = createBrowserRouter([ path: 'writeform', element: , }, + { + path: 'https://kauth.kakao.com/oauth', + }, ], }, ], diff --git a/src/styles/Theme.ts b/src/styles/Theme.ts index 16cd8ea4..6da5d7b8 100644 --- a/src/styles/Theme.ts +++ b/src/styles/Theme.ts @@ -6,6 +6,7 @@ const color = { secondary: '#ff5a03', white: '#ffffff', black: '#000000', + kakaoYellow: '#FEE500', gray: '#d9d9d9', indigo: '#003949', logoTextColor: '#fafafa', From 27d64c494be5137a7e0e5eebac72446533c93eaf Mon Sep 17 00:00:00 2001 From: hyesung99 <4538asd@gmail.com> Date: Tue, 24 Oct 2023 17:14:17 +0900 Subject: [PATCH 4/4] =?UTF-8?q?feat=20:=20react-icons=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=B6=94=EA=B0=80=20(#16)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 15 +++++++++++++++ package.json | 1 + 2 files changed, 16 insertions(+) diff --git a/package-lock.json b/package-lock.json index b36a60a6..3208be09 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16,6 +16,7 @@ "axios": "^1.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.11.0", "react-router-dom": "^6.16.0" }, "devDependencies": { @@ -4438,6 +4439,14 @@ "react": "^18.2.0" } }, + "node_modules/react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -8572,6 +8581,12 @@ "scheduler": "^0.23.0" } }, + "react-icons": { + "version": "4.11.0", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.11.0.tgz", + "integrity": "sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==", + "requires": {} + }, "react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", diff --git a/package.json b/package.json index 778ef4d5..e54899f5 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "axios": "^1.5.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.11.0", "react-router-dom": "^6.16.0" }, "devDependencies": {