Feat : write review comment (#60)

src/App.jsx

@@ -6,6 +6,7 @@ import MainPage from './pages/Main';
 import CentralClubPage from './pages/CentralClub';
 import SmallClubPage from './pages/SmallClub';
 import DetailPage from './pages/DetailPage';
+import ReviewWrite from './component/detail/review/ReviewWrite';
 import LoginPage from './pages/LoginPage';
 import KakaoRedirection from './component/login/kakaoRedirection';
 import HashTagPage from './pages/HashTag';
@@ -14,6 +15,8 @@ import SummaryPage from './pages/Summary';
 import BookMarkPage from './menu/bookmark';
 import BranchCentralPage from './pages/BranchCentral';
 import BranchSmallPage from './pages/BranchSmall';
+import ReviewComment from './component/detail/review/ReviewComment';
+import MyReview from './component/mypage/MyReview';
 
 function App() {
     const isPc = useMediaQuery({
@@ -33,6 +36,8 @@ function App() {
                         {/* <Route path="/menu/central_club/detail_page/review_write" element={<ReviewWrite />} /> */}
                         <Route path="/small" element={<SmallClubPage />} />
                         <Route path="/clubs/:clubId" element={<DetailPage />} />
+                        <Route path="/clubs/:clubId/review" element={<ReviewWrite />} />
+                        <Route path="/clubs/:clubId/review/comment" element={<ReviewComment />} />
                         <Route path="/central/divisions" element={<BranchCentralPage />} />
                         <Route path="/login" element={<LoginPage />} />
                         <Route path="/v1/auths/oauth/kakao" element={<KakaoRedirection />} />
@@ -41,6 +46,7 @@ function App() {
                         <Route path="/search" element={<SearchPage />} />
                         <Route path="/summary" element={<SummaryPage />} />
                         <Route path="/menu/bookmark" element={<BookMarkPage />} />
+                        <Route path="/user/reviews" element={<MyReview />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>
@@ -54,6 +60,8 @@ function App() {
                         <Route path="/central" element={<CentralClubPage />} />
                         <Route path="/small" element={<SmallClubPage />} />
                         <Route path="/clubs/:clubId" element={<DetailPage />} />
+                        <Route path="/clubs/:clubId/review" element={<ReviewWrite />} />
+                        <Route path="/clubs/:clubId/review/comment" element={<ReviewComment />} />
                         <Route path="/central/divisions" element={<BranchCentralPage />} />
                         <Route path="/login" element={<LoginPage />} />
                         <Route path="/v1/auths/oauth/kakao" element={<KakaoRedirection />} />
@@ -62,6 +70,7 @@ function App() {
                         <Route path="/search" element={<SearchPage />} />
                         <Route path="/summary" element={<SummaryPage />} />
                         <Route path="/menu/bookmark" element={<BookMarkPage />} />
+                        <Route path="/user/reviews" element={<MyReview />} />
                     </Routes>
                     <Footer />
                 </BrowserRouter>

src/component/detail/review/ReviewBox.jsx

@@ -23,9 +23,9 @@ export default function ReviewBox({ clubId }) {
     useEffect(() => {
         const fetchKeywordData = async () => {
             try {
-                const res = await axios.get(`http://13.125.141.171:8080/v1/clubs/${clubId}/reviews`);
+                const res = await axios.get(`http://13.125.141.171:8080/v1/clubs/${clubId}/reviews/v2`);
                 if (res.data.success) {
-                    setReviewData(res.data.data.clubReviews);
+                    setReviewData(res.data.data.reviews);
                     console.log(reviewData);
                 }
             } catch (error) {
@@ -50,6 +50,7 @@ export default function ReviewBox({ clubId }) {
                                 <KeywordBar key={index} text={item} />
                             ))}
                         </div>
+                        <p>{review.content}</p>
                     </div>
                 </div>
             ))}

src/component/detail/review/ReviewComment.jsx

@@ -0,0 +1,79 @@
+import axios from "axios";
+import { useNavigate, useLocation } from "react-router-dom";
+import styles from './reviewComment.module.css';
+import { useState } from "react";
+
+export default function ReviewComment() {
+    const navigate = useNavigate();
+    const location = useLocation();
+
+    const tab = 'Review';
+    const [comment, setComment] = useState("");
+
+    const clubId = location.state.clubId;
+    const selectedKeywords = location.state.selectedKeywords;
+    console.log(clubId);
+    console.log(selectedKeywords);
+
+    const saveComment = (event) => {
+        setComment(event.target.value);
+        console.log(event.target.value);
+    }
+
+    const onClickPass = async () => {
+        try {
+            const accessToken = localStorage.getItem('accessToken');
+            const res = await axios.post(
+                `http://13.125.141.171:8080/v1/clubs/${clubId}/reviews`,
+                {
+                    keywords: selectedKeywords,
+                },
+                {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                }
+            );
+            console.log('리뷰 작성 성공:', res.data);
+            navigate(`/clubs/${clubId}`, { state: tab }); // 해당 동아리 상세 페이지로 이동 -> 폴더구조 정리해서 리뷰페이지로 이동하게
+            // setBtnActive({}); // 제출 후 버튼 상태를 초기화
+        } catch (error) {
+            console.error('리뷰 작성 실패:', error);
+        }
+    }
+
+    const onClickSubmit = async () => {
+        console.log(comment);
+        try {
+            const accessToken = localStorage.getItem('accessToken');
+            const res = await axios.post(
+                `http://13.125.141.171:8080/v1/clubs/${clubId}/reviews/v2?clubId=${clubId}`,
+                {
+                    content: comment,
+                    keywords: selectedKeywords,
+                },
+                {
+                    headers: {
+                        Authorization: `Bearer ${accessToken}`,
+                    },
+                }
+            );
+            console.log('리뷰 작성 성공:', res.data);
+            navigate(`/clubs/${clubId}`, { state: tab }); // 해당 동아리 상세 페이지로 이동 -> 폴더구조 정리해서 리뷰페이지로 이동하게
+            // setBtnActive({}); // 제출 후 버튼 상태를 초기화
+        } catch (error) {
+            console.error('리뷰 작성 실패:', error);
+        }
+    };
+
+    return (
+        <div className={styles.container}>
+            <h2 className={styles.title}>한줄평을 자유롭게 써주세요!</h2>
+            <input type="text" placeholder="작성하기" onChange={saveComment} />
+            <div className={styles.buttonContainer}>
+                <button onClick={onClickPass}>넘어가기</button>
+                <button onClick={onClickSubmit}>작성하기</button>
+            </div>
+        </div>
+    )
+}

src/component/detail/review/ReviewPage.jsx

@@ -7,7 +7,7 @@ export default function ReviewPage({ clubId, clubName }) {
     const navigate = useNavigate();
 
     const onClickReviewWrite = () => {
-        navigate(`/components/clubs/review/ReviewWrite`, { state: { clubId, clubName } });
+        navigate(`/clubs/${clubId}/review`, { state: { clubId, clubName } });
     };
 
     return (

src/component/detail/review/ReviewWrite.jsx

@@ -53,36 +53,16 @@ function ReviewWrite() {
     };
     //이전 버튼상태(prevActive)를 가져와 반전시켜 type값에 저장 후 리턴.
 
-    const handleSubmit = async () => {
-        const tab = 'Review';
+    const onClickNext = async () => {
         const selectedKeywords = Object.keys(btnActive).filter((key) => btnActive[key]);
         console.log(selectedKeywords);
-
-        try {
-            const accessToken = localStorage.getItem('accessToken');
-            const response = await axios.post(
-                `http://13.125.141.171:8080/v1/clubs/${clubId}/reviews`,
-                {
-                    keywords: selectedKeywords,
-                },
-                {
-                    headers: {
-                        Authorization: `Bearer ${accessToken}`,
-                    },
-                }
-            );
-            console.log('리뷰 작성 성공:', response.data);
-            navigate(`/menu/detail/${clubId}`, { state: tab }); // 해당 동아리 상세 페이지로 이동 -> 폴더구조 정리해서 리뷰페이지로 이동하게
-            setBtnActive({}); // 제출 후 버튼 상태를 초기화
-        } catch (error) {
-            console.error('리뷰 작성 실패:', error);
-        }
+        navigate(`/clubs/${clubId}/review/comment`, { state: { clubId, selectedKeywords } });
     };
 
     const submitButtonClass = Object.values(btnActive).includes(true) ? 'submit-active' : 'submit';
 
     return (
-        <div>
+        <div className="write-container">
             <h2 className="title">{clubName}에 대한 키워드를 골라주세요!</h2>
 
             {btns.map((item) => (
@@ -97,8 +77,8 @@ function ReviewWrite() {
                     <p className="button_text">{item.title}</p>
                 </button>
             ))}
-            <button type="button" onClick={handleSubmit} className={submitButtonClass}>
-                작성하기
+            <button onClick={onClickNext} className={submitButtonClass}>
+                다음
             </button>
         </div>
     );

src/component/detail/review/reviewComment.module.css

@@ -0,0 +1,52 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 500px;
+}
+
+.title {
+    width: 380px;
+    height: 40px;
+    text-align: center;
+    font-family: Noto Sans KR;
+    font-size: 24px;
+    font-weight: 600;
+    line-height: 34.75px;
+    margin: auto;
+    margin-bottom: 20px;
+    margin-top: 39px;
+}
+
+input {
+    width: 50%;
+    height: 50px;
+    border: 1px solid #00000033;
+    border-radius: 10px;
+
+    font-family: Noto Sans KR;
+    font-weight: 400;
+    margin-bottom: 30px;
+}
+
+input::placeholder {
+    color: #9C9C9CB2;
+}
+
+.buttonContainer {
+    width: 16%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+}
+
+.buttonContainer button {
+    height: 40px;
+    margin: 20px 5px;
+    background-color: #7BC8E0;
+    color: white;
+    text-align: center;
+    font-weight: 600;
+    border-radius: 5px;
+}

src/component/detail/review/reviewWrite.css

@@ -1,3 +1,7 @@
+.write-container {
+    margin-bottom: 60px;
+}
+
 .title {
     width: 380px;
     height: 40px;
@@ -76,4 +80,4 @@ button {
 
 .div_style {
     display: inline-block;
-}
+}

src/component/layout/Header.jsx

@@ -25,6 +25,8 @@ export default function Header() {
     const refreshToken = localStorage.getItem('refreshToken');
     console.log(accessToken);
     console.log(refreshToken);
+    console.log(adminId);
+
 
     // 관리자 로그인 시 저장한 관리자 아이디 불러오기 -> 있으면 관리자 여부 true
     useEffect(() => {
@@ -105,29 +107,31 @@ export default function Header() {
         try {
             if (isAdmin) {
                 const res = await axios.post(
-                    'http://13.125.141.171:8080/v1/admins/logout',
-                    {},
+                    'http://13.125.141.171:8080/v1/admins/logout', {},
                     {
                         headers: {
                             Authorization: `Bearer ${accessToken}`,
                         },
                     }
                 );
                 console.log(res);
+                localStorage.removeItem('accessToken'); // 로컬 스토리지에서 액세스 토큰 삭제
+                localStorage.removeItem('refreshToken');
+                localStorage.removeItem('adminId');
             } else {
                 const res = await axios.post(
-                    'http://13.125.141.171:8080/v1/auths/logout',
-                    {},
+                    'http://13.125.141.171:8080/v1/auths/logout', {},
                     {
                         headers: {
                             Authorization: `Bearer ${accessToken}`,
                         },
                     }
                 );
                 console.log(res);
+                localStorage.removeItem('accessToken'); // 로컬 스토리지에서 액세스 토큰 삭제
+                localStorage.removeItem('refreshToken');
             }
             setShowLoginBox(false);
-            localStorage.removeItem('accessToken'); // 로컬 스토리지에서 액세스 토큰 삭제
             // 로그아웃 이후 메인페이지 ? 로그인 페이지 ?
             navigate('/');
         } catch (error) {
@@ -194,7 +198,7 @@ export default function Header() {
                                 </Link>
                             </div>
                             <div className="verticalLine"></div>
-                            <Link to="/menu/bookmark">
+                            <Link to="/user/reviews">
                                 <img className="icon_message" src="/main/message-text.png" alt="message" />
                                 <p className="reviewBtn">내가 쓴 리뷰</p>
                             </Link>

src/component/layout/header.css

@@ -207,6 +207,7 @@
 
     .rectangle .reviewBtn {
         background-color: #ffffff;
+        color: #000000;
         border: 0;
         font-family: Noto Sans;
         font-size: 12px;
@@ -482,6 +483,7 @@
 
     .rectangle .reviewBtn {
         background-color: #ffffff;
+        color: #000000;
         border: 0;
         font-family: Noto Sans;
         font-size: 12px;

src/component/mypage/MyReview.jsx

@@ -2,6 +2,7 @@ import '../detail/review/reviewBox.css';
 import KeywordBar from '../detail/review/ReviewBox';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
+import '../detail/review/reviewBox.css';
 
 export default function MyReview() {
     const [myReviewData, setMyReviewData] = useState([]);
@@ -24,7 +25,22 @@ export default function MyReview() {
     return (
         <div>
             <h2>내가 쓴 리뷰</h2>
-            {myReviewData.map(myReview)}
+            {myReviewData.map((myReview) => (
+                <div className="review_box_container">
+                    <div key={myReview.reviewId} className="review_box">
+                        <div className="review_box_header">
+                            <p>{myReview.clubName}</p>
+                            <span>{myReview.dateTime}</span>
+                        </div>
+                        <div className="review_box_contents">
+                            {myReview.keywords.map((item, index) => (
+                                <KeywordBar key={index} text={item} />
+                            ))}
+                        </div>
+                        <p>{myReview.content}</p>
+                    </div>
+                </div>
+            ))}
         </div>
     );
 }