[#9] feat: 로그인 구현 및 마이페이지 수정

package.json

@@ -13,8 +13,8 @@
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "@types/react-router-dom": "^5.3.3",
-    "axios": "^1.7.2",
     "aos": "^2.3.4",
+    "axios": "^1.7.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.2.1",

src/App.tsx

@@ -12,6 +12,7 @@ import UserPage from "./pages/UserPage";
 import LoginPage from "./pages/LoginPage";
 import ReviewWriting from "./pages/ReviewWriting";
 import ReviewList from "./pages/ReviewList";
+import KakaoRedirectHandler from "./pages/KakaoRedirectHandler";
 
 const App: React.FC = () => {
     useEffect(() => {
@@ -31,7 +32,7 @@ const App: React.FC = () => {
                 <Route path="/themeRecsResult" element={<ThemeRecsResult />} />
                 <Route path="/userPage" element={<UserPage />} />
                 <Route path="/loginPage" element={<LoginPage />} />
-                <Route path="/auth/kakao/redirect" element={<UserPage />} />
+                <Route path="/auth/kakao/redirect" element={<KakaoRedirectHandler />} />
                 <Route path="/reviewList" element={<ReviewList />} />
                 <Route path="/reviewWriting" element={<ReviewWriting />} />
                 <Route path="/themeList" element={<ThemeList />} />

src/components/Navbar.tsx

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

src/components/ReviewTheme.tsx

@@ -1,8 +1,10 @@
-import { Theme } from "../styles/RoomThemeStyled";
+import { Theme } from "../styles/RoomTheme2Styled";
 
 const ReviewTheme = () => {
+
+
     return (
-        <Theme>
+        <Theme data-aos="fade-up" data-aos-duration="1000">
             <div className="titleBox">
                 <p>방탈출 테마 이름</p>
             </div>

src/pages/KakaoLogin.tsx

@@ -1,8 +1,12 @@
-import React from "react";
+import React, { useEffect } from "react";
 import loginBtn from '../image/kakao_login_img.png'
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
 
 const KakaoLogin: React.FC = () => {
+
     const loginWithKakao = () => {
+
         if (window.Kakao && window.Kakao.Auth) {
           window.Kakao.Auth.authorize({
             redirectUri: "http://localhost:3000/auth/kakao/redirect", // 설정한 리디렉션 URI 입력
@@ -23,3 +27,4 @@ const KakaoLogin: React.FC = () => {
 };
 
 export default KakaoLogin;
+

src/pages/KakaoRedirectHandler.tsx

@@ -0,0 +1,37 @@
+import React, { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import axios from "axios";
+
+const KakaoRedirectHandler = () => {
+    console.log("로그인중...");
+    const navigate = useNavigate();
+    const code = new URL(window.location.href).searchParams.get("code");
+    console.log(code);
+    const login = async () => {
+        try {
+            console.log('code', code);
+
+            const response = await axios.post(
+                "https://api.labyrinth30-edu.link/auth/kakao/redirect",
+                {
+                    params: { code },
+                }
+            );
+            localStorage.setItem("accessToken", response.data.accessToken);
+            navigate("/themeRecs");
+            console.log(response);
+        } catch (error) {
+            console.log('123', error);
+        }
+    };
+
+    useEffect(() => {
+        if (code) {
+            login();
+        }
+    }, []);
+    return (
+        <div>로그인 중..</div>
+    );
+};
+export default KakaoRedirectHandler;

src/pages/LoginPage.tsx

@@ -3,6 +3,7 @@ import KakaoLogin from "./KakaoLogin"; // Kakao 로그인 버튼 컴포넌트
 import { Container } from "../styles/LoginPageStyled";
 
 const LoginPage: React.FC = () => {
+
   useEffect(() => {
     const initializeKakao = () => {
       console.log("Kakao SDK 초기화 시도"); // 로그 추가

src/pages/ReviewWriting.tsx

@@ -1,8 +1,45 @@
 import { Select } from "../styles/ThemeRecsQuestionsStyled";
 import { IoIosArrowForward } from "react-icons/io";
 import { Container } from "../styles/NavbarStyled";
+import axios from "axios";
+import { useState } from "react";
+
+interface reviewContents {
+    themeName: String;
+    isSuccess: Boolean;
+    numberOfPeople: Number;
+    numberofHintsUsed: Number;
+    remainingTime: Number;
+    totalThemeTime: Number;
+    content: String;
+}
 
 const ReviewWriting = () => {
+    const [minute1, setMinute1] = useState<number>(0);
+    const [second, setSecond] = useState<number>(0);
+    const [minute2, setMinute2] = useState<number>(0);
+
+    const handleSubmit = (event: React.FormEvent) => {
+        event.preventDefault();
+
+        const minute1Converted = minute1 / 60;
+        const minute2Converted = minute2 / 60;
+
+        const data = {
+            minute1: minute1Converted,
+            second: second,
+            minute2: minute2Converted
+        };
+
+        axios.post('YOUR_BACKEND_ENDPOINT', data)
+            .then(response => {
+                console.log('Response:', response.data);
+            })
+            .catch(error => {
+                console.error('Error:', error);
+            });
+    };
+
     return (
         <>
         <Container>
@@ -37,9 +74,18 @@ const ReviewWriting = () => {
                     <input type="number" />회
                 </div>
                 <div>
-                    <input type="number" />분
-                    <input type="number" />초 / 
-                    <input type="number" />분
+                    <input type="number" 
+                        value={minute1}
+                        onChange={(e) => setMinute1(Number(e.target.value))}
+                    />분
+                    <input type="number" 
+                        value={second}
+                        onChange={(e) => setSecond(Number(e.target.value))}
+                    />초 / 
+                    <input type="number" 
+                        value={minute2}
+                        onChange={(e) => setMinute2(Number(e.target.value))}
+                    />분
                 </div>
             </>
         </Container>
@@ -49,9 +95,9 @@ const ReviewWriting = () => {
                 <div>어떠셨나요?</div>
             </div>
             <div>
-                <textarea placeholder="한 줄 평 남겨주세요" />
+                <textarea placeholder="한 줄 평 남겨주세요" maxLength={500} />
             </div>
-            <div>
+            <div onClick={handleSubmit}>
                 <button>제출</button>
                 <div>
                     <IoIosArrowForward />

src/pages/UserPage.tsx

@@ -1,48 +1,53 @@
 import { BsPersonFill } from "react-icons/bs";
 import { Container } from "../styles/UserPageStyled";
 import ReviewTheme from "../components/ReviewTheme";
-import { NavLink } from "react-router-dom";
+import { NavLink, useNavigate } from "react-router-dom";
 import { IoIosArrowForward } from "react-icons/io";
+import { useEffect } from "react";
+import axios from "axios";
 
 const UserPage = () => {
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        const params = new URLSearchParams(window.location.search);
+        const code = params.get('code');
+
+        if (code) {
+            console.log('인가 코드:', code);  // 인가 코드를 콘솔에 출력
+
+            // 백엔드로 인가 코드를 POST 요청
+            axios.post('https://api.labyrinth30-edu.link/auth/kakao/redirect', { code })
+                .then(response => {
+                    const { access_token } = response.data;
+                    localStorage.setItem('kakao_token', access_token);
+                    navigate('/userPage'); // 로그인 후 이동할 페이지로 리디렉션
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                    navigate('/loginPage'); // 로그인 실패 시 로그인 페이지로 리디렉션
+                });
+        } else {
+            console.error('인가 코드가 없습니다.');
+            navigate('/loginPage'); // 인가 코드가 없을 경우 로그인 페이지로 리디렉션
+        }
+    }, [navigate]);
+
+
     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>
+                    <div>userName님의 방탈출 일지</div>
+                    <div>
+                        <NavLink to='/reviewWriting'>+ 리뷰 작성</NavLink>
                     </div>
                 </div>
-
-                <div className="text">
-                    <div className="subTitle">당신을 위한 방,</div>
-                    <div className="title">어땠는지<br />남겨주시겠어요?</div>
+                <div>
+                    <ReviewTheme />
+                    <ReviewTheme />
                 </div>
-                <NavLink to={`/reviewWriting`}>
-                    <>
-                        <div className="writingBtn">
-                            <div className="writing">남기러 가기</div>
-                            <div className="icon">
-                                <IoIosArrowForward />
-                            </div>
-                        </div>
-                    </>
-                </NavLink>
             </Container>
         </>
     );