Merge branch 'main' into SKRF-140-feat-register-function

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": {

src/components/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,
+};

src/components/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 (
+    <ContainerStyled onClick={() => navigate(`/event/detail/${eventId}`)}>
+      <PosterAreaStyled>
+        <img src={eventPoster} alt="poster image" />
+      </PosterAreaStyled>
+      <EventInfoWrapper>
+        <div>
+          <TitleStyled>{eventTitle}</TitleStyled>
+          <EventDateStyled>{eventDate}</EventDateStyled>
+        </div>
+        <EventFooterWrapper>
+          <PlaceStyled>{eventPlace}</PlaceStyled>
+          <ClubNameStyled>{clubName}</ClubNameStyled>
+        </EventFooterWrapper>
+      </EventInfoWrapper>
+    </ContainerStyled>
+  );
+};
+
+export default EventCard;

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 };

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 (
+    <KakaoLoginButtonStyled>
+      <KakaoLoginLink href={KAKAO_AUTH_URL}>카카오계정으로 로그인하기</KakaoLoginLink>
+    </KakaoLoginButtonStyled>
+  );
+};
+
+export default KakaoLoginButton;

src/constants/LoginPage.ts

@@ -0,0 +1,9 @@
+const LogoText = {
+  SPACE_CLUB: 'Space Club',
+};
+
+const Message = {
+  WELCOME: '스페이스 클럽에 오신 걸 환영합니다!',
+};
+
+export { LogoText, Message };

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`;

src/pages/LoginPage.tsx

@@ -0,0 +1,11 @@
+import KakaoLoginButton from '@/components/kakaoLoginButton/KakaoLoginButton';
+
+const LoginPage = () => {
+  return (
+    <>
+      <KakaoLoginButton />;
+    </>
+  );
+};
+
+export default LoginPage;

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,
+};

src/pages/LoginPage/LoginPage.tsx

@@ -0,0 +1,30 @@
+import { LogoText, Message } from '@/constants/LoginPage';
+
+import KakaoLoginButton from '@components/kakaoLoginButton/KakaoLoginButton';
+
+import {
+  LoginAreaStyled,
+  LogoAreaStyled,
+  LogoCircleStyled,
+  LogoTextStyled,
+  PageContainerStyled,
+  TitleStyled,
+} from './LoginPage.style';
+
+const LoginPage = () => {
+  return (
+    <PageContainerStyled>
+      <LogoAreaStyled>
+        <LogoCircleStyled>
+          <LogoTextStyled>{LogoText.SPACE_CLUB}</LogoTextStyled>
+        </LogoCircleStyled>
+      </LogoAreaStyled>
+      <LoginAreaStyled>
+        <TitleStyled>{Message.WELCOME}</TitleStyled>
+        <KakaoLoginButton />
+      </LoginAreaStyled>
+    </PageContainerStyled>
+  );
+};
+
+export default LoginPage;

src/pages/MainPage.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 const MainPage = () => {
   return <div>main</div>;
 };

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 <div>OauthRedirectPage</div>;
+};
+
+export default OauthRedirectPage;