로그인(Oauth) 페이지 레이아웃 완성

src/pages/login/Login.tsx

@@ -0,0 +1,20 @@
+import { AlignCenter } from '../../style/LayOut';
+import { FlexContainer, LogoImageSection, SocialLoginLink } from './styles';
+
+export default function Login() {
+  const kakaoURL = `https://kauth.kakao.com/oauth/authorize?client_id=${
+    import.meta.env.VITE_KAKAO_REST_API_KEY
+  }&redirect_uri=${import.meta.env.VITE_KAKAO_REDIRECT_URL}&response_type=code`;
+  return (
+    <>
+      <AlignCenter>
+        <FlexContainer>
+          <LogoImageSection />
+          <SocialLoginLink to={kakaoURL}>카카오</SocialLoginLink>
+          <SocialLoginLink to="">구글</SocialLoginLink>
+          <SocialLoginLink to="">깃허브</SocialLoginLink>
+        </FlexContainer>
+      </AlignCenter>
+    </>
+  );
+}

src/pages/login/styles.ts

@@ -0,0 +1,26 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+export const FlexContainer = styled.section`
+  width: 1280px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+export const LogoImageSection = styled.section`
+  margin: 163px 0px 70px 0px;
+  width: 372px;
+  height: 82px;
+  border: 2px dashed #f00;
+  background: #efeff0;
+`;
+export const SocialLoginLink = styled(Link)`
+  display: block;
+  margin-bottom: 45px;
+  width: 412px;
+  height: 50px;
+  color: black;
+  text-decoration: none; // 밑줄 없애기
+  border-radius: 4px;
+  border: 2px solid #000;
+  background: #fff;
+`;

src/route/Router.tsx

@@ -5,6 +5,7 @@ import Ranking from '../pages/Ranking/Ranking';
 import Quiz from '../pages/Quiz/Quiz';
 import Admin from '../admin/Admin';
 import CreateQuiz from '../admin/CreateQuiz';
+import Login from '../pages/login/login';
 export default function Router() {
   return (
     <>
@@ -14,6 +15,7 @@ export default function Router() {
           <Route path="/quest" element={<Quest />}></Route>
           <Route path="/ranking" element={<Ranking />}></Route>
           <Route path="/quiz/:section/:part" element={<Quiz />}></Route>
+          <Route path="/login" element={<Login />}></Route>
           {/*어드민 페이지 부분 문제조회/추가 이외에 규모 확장 시 레포 분리 */}
           <Route path="/admin" element={<Admin />} />
           <Route path="/admin/create-quiz" element={<CreateQuiz />}></Route>