[#9] feat: 마이페이지 및 리뷰 페이지 구현

package.json

@@ -10,6 +10,7 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
+    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

src/App.tsx

@@ -5,6 +5,10 @@ import ThemeRecs from "./pages/ThemeRecs";
 import ThemeRecsQuestions from "./pages/ThemeRecsQuestions";
 import ThemeRecsResult from "./pages/ThemeRecsResult";
 import Navbar from "./components/Navbar";
+import UserPage from "./pages/UserPage";
+import LoginPage from "./pages/LoginPage";
+import ReviewWriting from "./pages/ReviewWriting";
+import ReviewList from "./pages/ReviewList";
 
 const App: React.FC = () => {
     return (
@@ -18,6 +22,11 @@ const App: React.FC = () => {
                     element={<ThemeRecsQuestions />}
                 />
                 <Route path="/themeRecsResult" element={<ThemeRecsResult />} />
+                <Route path="/userPage" element={<UserPage />} />
+                <Route path="/loginPage" element={<LoginPage />} />
+                <Route path="/auth/kakao/redirect" element={<UserPage />} />
+                <Route path="/reviewList" element={<ReviewList />} />
+                <Route path="/reviewWriting" element={<ReviewWriting />} />
             </Routes>
         </Router>
     );

src/components/Navbar.tsx

@@ -31,7 +31,7 @@ const Navbar = () => {
                     </div>
                 </NavLink>
 
-                <NavLink to={`/`}>
+                <NavLink to={`/loginPage`}>
                     <div className="nav">
                         <div>
                             <BsPersonFill />

src/components/ReviewTheme.tsx

@@ -0,0 +1,27 @@
+import { Theme } from "../styles/RoomThemeStyled";
+
+const ReviewTheme = () => {
+    return (
+        <Theme>
+            <div className="titleBox">
+                <p>방탈출 테마 이름</p>
+            </div>
+            <div className="addressBox">
+                <p>탈출 기록</p>
+            </div>
+            <div className="addressBox">
+                <p>한 줄 평</p>
+            </div>
+            <div className="cardFooter">
+                <div className="hashtagBox">
+                    <p>#성공여부</p>
+                    <p>#인원수</p>
+                    <p>#힌트</p>
+                    <p>#남은시간</p>
+                </div>
+            </div>
+        </Theme>
+    );
+};
+
+export default ReviewTheme;

src/global.d.ts

@@ -0,0 +1,3 @@
+interface Window {
+    Kakao: any;
+  }

src/pages/AuthRedirect.tsx

@@ -0,0 +1,49 @@
+import React, { useEffect, useState } from 'react';
+import axios from 'axios';
+
+interface KakaoUser {
+  nickname: string;
+  profile_image: string;
+}
+
+const MyPage: React.FC = () => {
+  const [user, setUser] = useState<KakaoUser | null>(null);
+
+  useEffect(() => {
+    const fetchKakaoUserInfo = async () => {
+      const token = localStorage.getItem('kakao_token');
+      if (token) {
+        try {
+          const response = await axios.get('https://kapi.kakao.com/v2/user/me', {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          });
+          const { properties } = response.data;
+          setUser({
+            nickname: properties.nickname,
+            profile_image: properties.profile_image,
+          });
+        } catch (error) {
+          console.error('Failed to fetch Kakao user info', error);
+        }
+      }
+    };
+
+    fetchKakaoUserInfo();
+  }, []);
+
+  if (!user) {
+    return <div>Loading...</div>;
+  }
+
+  return (
+    <div>
+      <h1>My Page</h1>
+      <img src={user.profile_image} alt={user.nickname} />
+      <h2>{user.nickname}</h2>
+    </div>
+  );
+};
+
+export default MyPage;

src/pages/KakaoLogin.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import loginBtn from '../image/kakao_login_img.png'
+
+const KakaoLogin: React.FC = () => {
+    const loginWithKakao = () => {
+        if (window.Kakao && window.Kakao.Auth) {
+          window.Kakao.Auth.authorize({
+            redirectUri: "http://localhost:3000/auth/kakao/redirect", // 설정한 리디렉션 URI 입력
+          });
+        } else {
+          console.error("Kakao SDK가 초기화되지 않았습니다.");
+        }
+      };
+
+      return (
+        <div>
+          <a id="kakao-login-btn" href="#" onClick={loginWithKakao}>
+            <img src={loginBtn} width="222" alt="카카오 로그인 버튼" />
+          </a>
+          <p id="token-result"></p>
+        </div>
+      );
+};
+
+export default KakaoLogin;

src/pages/LoginPage.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from "react";
+import KakaoLogin from "./KakaoLogin"; // Kakao 로그인 버튼 컴포넌트
+import { Container } from "../styles/LoginPageStyled";
+
+const LoginPage: React.FC = () => {
+  useEffect(() => {
+    const initializeKakao = () => {
+      console.log("Kakao SDK 초기화 시도"); // 로그 추가
+      if (window.Kakao && !window.Kakao.isInitialized()) {
+        window.Kakao.init("458c6e177d255cd6277b97d9a180e2b6"); // 여기에 Kakao 앱의 JavaScript 키 입력
+        console.log("Kakao SDK 초기화 완료"); // 초기화 완료 로그
+      } else if (window.Kakao) {
+        console.log("Kakao SDK 이미 초기화됨"); // 이미 초기화된 경우 로그
+      } else {
+        console.error("Kakao 객체를 찾을 수 없음"); // Kakao 객체가 없는 경우 로그
+      }
+    };
+
+    const script = document.createElement('script');
+    script.src = "https://developers.kakao.com/sdk/js/kakao.min.js";
+    script.async = true;
+    script.onload = initializeKakao;
+    document.head.appendChild(script);
+
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, []);
+
+  return (
+    <Container>
+      <div className="loginBtn">
+        <KakaoLogin />
+      </div>
+    </Container>
+  );
+};
+
+export default LoginPage;

src/pages/ReviewList.tsx

@@ -0,0 +1,18 @@
+import ReviewTheme from "../components/ReviewTheme";
+import { Container } from "../styles/ReviewListStyled";
+
+const ReviewList = () => {
+    return (
+        <>
+            <Container>
+                <div className="written">작성한 리뷰</div>
+                <div className="reviewBox">
+                    <ReviewTheme />
+                    <ReviewTheme />
+                    <ReviewTheme />
+                </div>
+            </Container>
+        </>
+    )
+}
+export default ReviewList;

src/pages/ReviewWriting.tsx

@@ -0,0 +1,64 @@
+import { Select } from "../styles/ThemeRecsQuestionsStyled";
+import { IoIosArrowForward } from "react-icons/io";
+import { Container } from "../styles/NavbarStyled";
+
+const ReviewWriting = () => {
+    return (
+        <>
+        <Container>
+            <div>
+                <div>당신을 위한 방,</div>
+                <div>어떤 방이었나요?</div>
+            </div>
+            <div>
+                <textarea placeholder="테마 이름 적어주세요" />
+            </div>
+        </Container>
+        <Container>
+            <>
+                <div>
+                    <div>당신을 위한 방,</div>
+                    <div>탈출 기록은 어떻게 되시나요?</div>
+                </div>
+                <div>
+                    <div>성공 여부</div>
+                    <div>인원 수</div>
+                    <div>힌트 사용 횟수</div>
+                    <div>남은 시간</div>
+                </div>
+                <div>
+                    <Select>탈출 성공</Select>
+                    <Select>탈출 실패</Select>
+                </div>
+                <div>
+                    <input type="number" />명
+                </div>
+                <div>
+                    <input type="number" />회
+                </div>
+                <div>
+                    <input type="number" />분
+                    <input type="number" />초 / 
+                    <input type="number" />분
+                </div>
+            </>
+        </Container>
+        <Container>
+            <div>
+                <div>당신을 위한 방,</div>
+                <div>어떠셨나요?</div>
+            </div>
+            <div>
+                <textarea placeholder="한 줄 평 남겨주세요" />
+            </div>
+            <div>
+                <button>제출</button>
+                <div>
+                    <IoIosArrowForward />
+                </div>
+            </div>
+        </Container>
+        </>
+    )
+}
+export default ReviewWriting;

src/pages/UserPage.tsx

@@ -0,0 +1,50 @@
+import { BsPersonFill } from "react-icons/bs";
+import { Container } from "../styles/UserPageStyled";
+import ReviewTheme from "../components/ReviewTheme";
+import { NavLink } from "react-router-dom";
+import { IoIosArrowForward } from "react-icons/io";
+
+const UserPage = () => {
+    return (
+        <>
+            <Container>
+                <div className="userInfo">
+                    <div className="userImg">
+                        <BsPersonFill />
+                    </div>
+                    <div className="userName">이름</div>
+                </div>
+                <div className="reviews">
+                    <div className="reviewTitle">작성한 리뷰</div>
+                    <NavLink to={`/reviewList`} className="moreReviews">
+                        <div>더보기</div>
+                        <div className="icon">
+                            <IoIosArrowForward />
+                        </div>
+                    </NavLink>
+                    <div className="reviewBox">
+                        <ReviewTheme />
+                        <ReviewTheme />
+                        <ReviewTheme />
+                    </div>
+                </div>
+
+                <div className="text">
+                    <div className="subTitle">당신을 위한 방,</div>
+                    <div className="title">어땠는지<br />남겨주시겠어요?</div>
+                </div>
+                <NavLink to={`/reviewWriting`}>
+                    <>
+                        <div className="writingBtn">
+                            <div className="writing">남기러 가기</div>
+                            <div className="icon">
+                                <IoIosArrowForward />
+                            </div>
+                        </div>
+                    </>
+                </NavLink>
+            </Container>
+        </>
+    );
+};
+export default UserPage;

src/styles/LoginPageStyled.tsx

@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+    width: 100vw;
+    height: 90vh;
+    /* margin: 0; */
+    margin-top: 10vh;
+    background: radial-gradient(50% 50% at 50% 50%, #3b3b3b 0%, #080101 100%);
+
+    display: flex;
+
+    .loginBtn {
+        display: flex;
+        align-items: center;
+        margin: 0 auto;
+    }
+`