[#9] feat 로그인 수정 및 리뷰 구현

Skhuthon · Jun 29, 2024 · 076284c · 076284c
1 parent 3b9311f
commit 076284c
Show file tree

Hide file tree

Showing 7 changed files with 205 additions and 70 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -41,7 +41,7 @@ const App: React.FC = () => {
                 <Route path="/themeList" element={<ThemeList />} />
                 <Route path="/mypage" element={<MyPage />} />
                 <Route path="/postReview" element={<PostReview />} />
-                <Route path="/readReview" element={<ReadReview />} />
+                <Route path="/reviews/:reviewId" element={<ReadReview />} />
             </Routes>
         </Router>
     );

diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
@@ -31,7 +31,7 @@ const Navbar = () => {
                     </div>
                 </NavLink>
 
-                <NavLink to={`/userPage`}>
+                <NavLink to={`/mypage`}>
                     <div className="nav">
                         <div>
                             <BsPersonFill />

diff --git a/src/components/Review.tsx b/src/components/Review.tsx
@@ -1,26 +1,36 @@
+import { Link } from "react-router-dom";
 import { Review } from "../styles/ReviewStyled";
 
-const ReviewTheme = () => {
+type ReviewProps = {
+    reviewId: string;
+    title: string;
+};
+
+const ReviewTheme = (reviewId: any) => {
     return (
-        <Review>
-            <div className="titleBox">
-                <p>제목</p>
-            </div>
-            <div className="addressBox">
-                <p>매장</p>
-            </div>
-            <div className="contentBox">
-                <p>리뷰</p>
-            </div>
-            <div className="cardFooter">
-                <div className="hashtagBox">
-                    <p>#탈출 성공</p>
-                    <p>#4명</p>
-                    <p>#힌트 3번</p>
-                    <p>#남은 시간 10분</p>
-                </div>
-            </div>
-        </Review>
+        <Link to={`/reviews/${reviewId}`}>
+            <Review>
+                <>
+                    <div className="titleBox">
+                        <p>제목</p>
+                    </div>
+                    <div className="addressBox">
+                        <p>매장</p>
+                    </div>
+                    <div className="contentBox">
+                        <p>리뷰</p>
+                    </div>
+                    <div className="cardFooter">
+                        <div className="hashtagBox">
+                            <p>#탈출 성공</p>
+                            <p>#4명</p>
+                            <p>#힌트 3번</p>
+                            <p>#남은 시간 10분</p>
+                        </div>
+                    </div>
+                </>
+            </Review>
+        </Link>
     );
 };
 

diff --git a/src/pages/KakaoRedirectHandler.tsx b/src/pages/KakaoRedirectHandler.tsx
@@ -14,11 +14,11 @@ const KakaoRedirectHandler = () => {
             const response = await axios.post(
                 "https://api.labyrinth30-edu.link/auth/kakao/redirect",
                 {
-                    params: { code },
+                    code
                 }
             );
             localStorage.setItem("accessToken", response.data.accessToken);
-            navigate("/themeRecs");
+            navigate("/mypage");
             console.log(response);
         } catch (error) {
             console.log('123', error);

diff --git a/src/pages/MyPage.tsx b/src/pages/MyPage.tsx
@@ -2,10 +2,39 @@ import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
 import Review from "../components/Review";
 import { Container, StartBtn } from "../styles/MyPageStyled";
 import Pagination from "../components/BasicPagination";
+import axios from "axios";
+import { Link } from "react-router-dom";
 
 const MyPage = () => {
     const [take, setTake] = useState<number>(1); // 총 페이지 수
     const [page, setPage] = useState<number>(1); // 현재 페이지
+    const [reviews, setReviews] = useState(null);
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+
+    useEffect(() => {
+        const token = localStorage.getItem('accessToken');
+        if (token) {
+            setAccessToken(token);
+        }
+        console.log(token);
+    }, []);
+
+    useEffect(() => {
+        const reviewList = async () => {
+            const token = localStorage.getItem('accessToken');
+            try {
+                const response = await axios.get("https://api.labyrinth30-edu.link/reviews",
+                    {
+                        headers: {'Authorization': `Bearer ${token}`}
+                    }
+                );
+                setReviews(response.data);
+            } catch (error) {
+                console.log(error);
+            }
+        };
+        reviewList();
+    }, []);
 
     const handleChangePage = (
         event: React.ChangeEvent<unknown>,
@@ -23,9 +52,9 @@ const MyPage = () => {
                 </div>
 
                 <StartBtn isVisible={true}>
-                    <div className="startBtn">
+                    <Link to={'/postReview'} className="startBtn">
                         <p className="start">리뷰 작성</p>
-                    </div>
+                    </Link>
                 </StartBtn>
             </div>
 
@@ -34,6 +63,7 @@ const MyPage = () => {
                 <Review />
                 <Review />
                 <Review />
+
             </div>
 
             <div className="paginationBox">

diff --git a/src/pages/PostReview.tsx b/src/pages/PostReview.tsx
@@ -1,31 +1,98 @@
 import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
 import { Container, StartBtn } from "../styles/PostReviewStyled";
+import axios from "axios";
+import { useNavigate } from "react-router-dom";
+
+interface reviewInfo {
+    themeName: String;
+    isSuccess: Boolean;
+    numberOfPeople: Number;
+    numberOfHintsUsed: Number;
+    remainingTime: Number;
+    totalThemeTime: Number;
+    content: String;
+}
 
 const PostReview = () => {
-    const onInputHandler = (
-        e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-    ) => {
-        // const value = e.target.value.trim(); // 입력값 앞뒤 공백 제거
-        // if (e.target.name === "title") {
-        //     setTitle(value);
-        // } else if (e.target.name === "content") {
-        //     setContent(value);
-        //     setInputCount(value.length);
-        // } else if (e.target.name === "tags") {
-        //     const tagArray = value
-        //         .split("#")
-        //         .map((tag) => tag.trim())
-        //         .filter((tag) => tag !== "");
-        //     setTags(tagArray);
-        // }
+    // const onInputHandler = (
+    //     _e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
+    // ) => {
+    //     // const value = e.target.value.trim(); // 입력값 앞뒤 공백 제거
+    //     // if (e.target.name === "title") {
+    //     //     setTitle(value);
+    //     // } else if (e.target.name === "content") {
+    //     //     setContent(value);
+    //     //     setInputCount(value.length);
+    //     // } else if (e.target.name === "tags") {
+    //     //     const tagArray = value
+    //     //         .split("#")
+    //     //         .map((tag) => tag.trim())
+    //     //         .filter((tag) => tag !== "");
+    //     //     setTags(tagArray);
+    //     // }
+    // };
+
+    const navigate = useNavigate();
+    const onChange = (e: any) => {
+        console.log(e.target.value);
+        setFormData(e.target.value);
+    }
+
+    const [formData, setFormData] = useState({
+        themeName: "",
+        isSuccess: true,
+        numberOfPeople: 0,
+        numberOfHintsUsed: 0,
+        remainingTime: 0,
+        totalThemeTime: 0,
+        content: "",
+    });
+
+    const onInputHandler = (e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement | HTMLSelectElement>) => {
+        const { name, value, type } = e.target;
+        const inputValue = type === "checkbox" && "checked" in e.target ? e.target.checked : value;
+        setFormData((prevState) => ({
+            ...prevState,
+            [name]: type === "number" ? Number(inputValue) : inputValue,
+        }));
+    };
+
+    const handleSubmit = (event: React.FormEvent) => {
+
+        event.preventDefault();
+
+        const data = {
+            ...formData,
+        };
+        console.log(formData);
+        const token = localStorage.getItem('accessToken');
+        if (token) {
+            axios.post('https://api.labyrinth30-edu.link/reviews', data, {
+                headers: {
+                    'Authorization': `Bearer ${token}`,
+                    'Content-Type': 'application/json'
+                }
+            })
+                .then(response => {
+                    console.log('Response:', response.data);
+                    navigate('/reviews/${reviewId}');
+                })
+                .catch(error => {
+                    console.error('Error:', error);
+                });
+        } else {
+            console.error('No access token found');
+        }
+
     };
+
 
     return (
         <Container>
             <div className="postBox">
                 <div className="btnBox">
                     <StartBtn isVisible={true}>
-                        <div className="startBtn">
+                        <div className="startBtn" onClick={handleSubmit}>
                             <p className="start">저장</p>
                         </div>
                     </StartBtn>
@@ -51,7 +118,7 @@ const PostReview = () => {
                     <p className="postTitle">인원 수</p>
                     <input
                         type="number"
-                        name="themeName"
+                        name="numberOfPeople"
                         placeholder="플레이 인원"
                         onChange={onInputHandler}
                         className="postTagsBox"
@@ -61,7 +128,7 @@ const PostReview = () => {
                     <p className="postTitle">힌트 사용</p>
                     <input
                         type="number"
-                        name="themeName"
+                        name="numberOfHintsUsed"
                         placeholder="힌트 사용 개수"
                         onChange={onInputHandler}
                         className="postTagsBox"
@@ -70,8 +137,8 @@ const PostReview = () => {
                 <div className="posting">
                     <p className="postTitle">남은 시간</p>
                     <input
-                        name="themeName"
-                        placeholder="남은 시간 (탈출 성공시)"
+                        name="remainingTime"
+                        placeholder="남은 시간 (탈출 성공시, 초)"
                         onChange={onInputHandler}
                         className="postTagsBox"
                     ></input>

diff --git a/src/pages/ReadReview.tsx b/src/pages/ReadReview.tsx
@@ -1,24 +1,52 @@
 import React, { useEffect, useState, KeyboardEvent, ChangeEvent } from "react";
 import { Container, StartBtn } from "../styles/ReadReviewStyled";
+import { useNavigate, useParams } from "react-router-dom";
+import axios from "axios";
 
 const PostReview = () => {
-    const onInputHandler = (
-        e: ChangeEvent<HTMLTextAreaElement | HTMLInputElement>
-    ) => {
-        // const value = e.target.value.trim(); // 입력값 앞뒤 공백 제거
-        // if (e.target.name === "title") {
-        //     setTitle(value);
-        // } else if (e.target.name === "content") {
-        //     setContent(value);
-        //     setInputCount(value.length);
-        // } else if (e.target.name === "tags") {
-        //     const tagArray = value
-        //         .split("#")
-        //         .map((tag) => tag.trim())
-        //         .filter((tag) => tag !== "");
-        //     setTags(tagArray);
-        // }
-    };
+    const [accessToken, setAccessToken] = useState<string | null>(null);
+    const { reviewId } = useParams<{ reviewId: string }>();
+    const [review, setReview] = useState<any>(null);
+    const navigate = useNavigate();
+    const [formData, setFormData] = useState({
+        themeName: "",
+        isSuccess: true,
+        numberOfPeople: 0,
+        numberOfHintsUsed: 0,
+        remainingTime: 0,
+        totalThemeTime: 0,
+        content: "",
+    });
+
+    useEffect(() => {
+        const token = localStorage.getItem('accessToken');
+        if (token) {
+            setAccessToken(token);
+        }
+    }, []);
+
+
+    useEffect(() => {
+        const fetchReview = async () => {
+        const token = localStorage.getItem('accessToken');
+            try {
+                const response = await axios.get(`https://api.labyrinth30-edu.link/reviews/${reviewId}`, {
+                    headers: {
+                        'Authorization': `Bearer ${token}`
+                    }
+            });
+                setReview(response.data);
+            } catch (error) {
+                console.error("Error fetching review:", error);
+            }
+        };
+
+        fetchReview();
+    }, [reviewId]);
+
+    if (!review) {
+        return <div>Loading...</div>;
+    }
 
     return (
         <Container>
@@ -39,27 +67,27 @@ const PostReview = () => {
 
                 <div className="posting">
                     <p className="postTitle">테마 이름</p>
-                    <p className="read">테마 이름</p>
+                    <p className="read">{review.themeName}</p>
                 </div>
                 <div className="posting">
                     <p className="postTitle">성공 여부</p>
-                    <p className="read">성공</p>
+                    <p className="read">{review.isSuccess}</p>
                 </div>
                 <div className="posting">
                     <p className="postTitle">인원 수</p>
-                    <p className="read">0 명</p>
+                    <p className="read">{review.numberOfPeople} 명</p>
                 </div>
                 <div className="posting">
                     <p className="postTitle">힌트 사용</p>
-                    <p className="read">4 개</p>
+                    <p className="read">{review.numberOfHintsUsed} 개</p>
                 </div>
                 <div className="posting">
                     <p className="postTitle">남은 시간</p>
-                    <p className="read">1 분</p>
+                    <p className="read">{review.remainingTime} 분</p>
                 </div>
                 <div className="posting">
                     <p className="postTitle">한 줄 리뷰</p>
-                    <p className="read">재미있어요.</p>
+                    <p className="read">{review.content}</p>
                 </div>
             </div>
         </Container>