WePlanPlans · jseo9732 · Jan 2, 2024 · Jan 3, 2024 · Jan 3, 2024 · Jan 3, 2024
diff --git a/README.md b/README.md
@@ -16,3 +16,4 @@
 - Chore : 빌드 관련 코드 수정
 - Rename : 파일 및 폴더명 수정.
 - Remove : 파일 삭제.
+  ...
diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="ko">
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/favicon.jpeg" />

diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "react-dom": "^18.2.0",
     "react-infinite-scroller": "^1.2.6",
     "react-kakao-maps-sdk": "^1.1.24",
-    "react-modal": "^3.16.1",
     "react-router-dom": "^6.21.1",
     "recoil": "^0.7.7",
     "styled-components": "^6.1.3",
@@ -35,7 +34,6 @@
     "@types/react-dom": "^18.2.17",
     "@types/react-infinite-scroller": "^1.2.5",
     "@types/uuid": "^9.0.7",
-    "@types/react-modal": "^3.16.3",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
     "@vitejs/plugin-react": "^4.2.1",

diff --git a/src/api/client.ts b/src/api/client.ts
@@ -1,9 +1,12 @@
 import axios from 'axios';
 
+const accessToken = window.localStorage.getItem('accessToken');
+
 const client = axios.create({
   baseURL: import.meta.env.VITE_SERVER_URL,
   headers: {
     'Content-Type': 'application/json',
+    Authorization: `Bearer ${accessToken}`,
   },
   withCredentials: true,
 });

diff --git a/src/api/comments.ts b/src/api/comments.ts
@@ -3,22 +3,22 @@ import client from './client';
 // 댓글 관련 API
 
 // 댓글수정
-export const putComments = async (content: string, commentId: number) => {
+export const putComments = async (content: string, commentId: string) => {
   const res = await client.put(`comments/${commentId}`, {
     content,
   });
   return res;
 };
 
 // 댓글삭제
-export const deleteComments = async (commentId: number) => {
+export const deleteComments = async (commentId: string) => {
   const res = await client.delete(`comments/${commentId}`);
   return res;
 };
 
 // 댓글작성
 export const postComments = async (content: string, reviewId: number) => {
-  const res = await client.post(`comments`, {
+  const res = await client.post(`comments/`, {
     content: content,
     reviewId: reviewId,
   });

diff --git a/src/api/member.ts b/src/api/member.ts
@@ -39,7 +39,7 @@ export const getMemberReviews = async () => {
 };
 
 // 나의 관심 여행지 삭제
-export const deleteMemberTours = async (tourItemId: number) => {
-  const res = await client.delete(`member/tours/${tourItemId}`);
+export const deleteMemberTours = async (tourId: number) => {
+  const res = await client.delete(`member/tours/${tourId}`);
   return res;
 };
diff --git a/src/api/review.ts b/src/api/review.ts
@@ -31,7 +31,7 @@ export const getReviewComments = async (reviewId: number) => {
 };
 
 // 리뷰키워드조회
-export const getReviewKeywords = async (keywordType: string) => {
-  const res = await client.get(`reviews/keywords?keywordType=${keywordType}`);
+export const getReviewKeywords = async (code: number) => {
+  const res = await client.get(`reviews/keywords?code=${code}`);
   return res;
 };
diff --git a/src/api/tours.ts b/src/api/tours.ts
@@ -35,6 +35,8 @@ export const getDetailTours = async (tourItemId: number) => {
 // 여행 상품 리뷰 조회
 export const getToursReviews = async (tourItemId: number) => {
   const res = await client.get(`tours/${tourItemId}/reviews`);
+  console.log('res', res);
+  console.log('res.data.data.reviewInfos', res.data.data.reviewInfos);
   return res;
 };
 

diff --git a/src/assets/images/ProgressBarIcon.svg b/src/assets/images/ProgressBarIcon.svg
diff --git a/src/assets/images/profileImg.svg b/src/assets/images/profileImg.svg
diff --git a/src/components/DetailSectionBottom/DetailReview.tsx b/src/components/DetailSectionBottom/DetailReview.tsx
@@ -0,0 +1,85 @@
+// import { getToursReviews } from '@api/tours';
+// import { useEffect, useState } from 'react';
+// import InfiniteScroll from 'react-infinite-scroller';
+// import { useInfiniteQuery } from '@tanstack/react-query';
+// import ReviewItem from './ReviewItem';
+// import { StarIcon } from '@components/common/icons/Icons';
+
+// export default function DetailReview() {
+//   const [reviewDataLength, setReviewDataLength] = useState<number>(0);
+//   const tourItemId = 1;
+
+//   const {
+//     data: toursReviews,
+//     fetchNextPage,
+//     hasNextPage,
+//   } = useInfiniteQuery({
+//     queryKey: ['toursReviews'],
+//     queryFn: ({ pageParam }) => getToursReviews(tourItemId),
+//     initialPageParam: 0,
+//     getNextPageParam: (lastPage, allPages, lastPageParam) => {
+//       const lastData = lastPage?.data?.data?.reviewInfos;
+//       return lastData && lastData.length === 4 ? lastPageParam + 1 : undefined;
+//     },
+//   });
+
+//   useEffect(() => {
+//     if (toursReviews) {
+//       const totalCount = toursReviews.pages.reduce(
+//         (accumulator, page) =>
+//           accumulator + (page?.data?.data?.reviewInfos?.length || 0),
+//         0,
+//       );
+//       setReviewDataLength(totalCount);
+//     }
+//   }, [toursReviews]);
+
+//   return (
+//     <>
+//       <div className="mb-4 mt-2 text-lg font-bold">
+//         리뷰 <span className="text-gray3">{reviewDataLength}</span>
+//       </div>
+//       {reviewDataLength > 0 && (
+//         <InfiniteScroll
+//           hasMore={hasNextPage}
+//           loadMore={() => fetchNextPage()}
+//           initialLoad={false}>
+//           {toursReviews?.pages?.map((page, pageIndex) => (
+//             <div key={pageIndex}>
+//               {page?.data?.data?.reviewInfos?.map(
+//                 (item: any, index: number) => (
+//                   <ReviewItem
+//                     key={item.reviewId}
+//                     authorNickname={item.authorNickname}
+//                     authorProfileImageUrl={item.authorProfileImageUrl}
+//                     rating={item.rating}
+//                     createdTime={item.createdTime}
+//                     content={item.content}
+//                     keywords={item.keywords} // keywordId, content, type
+//                     commentCount={2} //commentCount가 swagger에는 있는데 response에는 없음
+//                   />
+//                 ),
+//               )}
+//             </div>
+//           ))}
+//         </InfiniteScroll>
+//       )}
+//       {reviewDataLength == 0 && (
+//         <div className="flex flex-col items-center justify-center">
+//           <div className="mb-2 flex">
+//             {Array.from({ length: 5 }, (_, index) => (
+//               <StarIcon
+//                 key={index}
+//                 size={30}
+//                 color="none"
+//                 fill={'#EDEDED'}
+//                 className="cursor-pointer"
+//               />
+//             ))}
+//           </div>
+//           <div className="text-sm text-gray3">첫번째 리뷰를 남겨주세요!</div>
+//         </div>
+//       )}
+//     </>
+//   );
+// }
diff --git a/src/components/DetailSectionBottom/DetailSectionBottom.tsx b/src/components/DetailSectionBottom/DetailSectionBottom.tsx
@@ -1,24 +1,11 @@
-import { DetailReviews, DetailReviewStats } from '.';
-import { useParams } from 'react-router-dom';
-import { useQuery } from '@tanstack/react-query';
-import { getDetailTours } from '@api/tours';
-import { useEffect } from 'react';
+import { DetailReviewStats } from '.';
 
+// 담당 컴포넌트들 호출하는 컴포넌트(분업 때문에 페이지 느낌으로 나눠봤습니다), API 호출 컴포넌트,
 export default function DetailSectionBottom() {
-  const params = useParams();
-  const tourItemId = Number(params.id);
-  const { isError, isLoading, isFetching, data } = useQuery({
-    queryKey: ['details', tourItemId],
-    queryFn: () => getDetailTours(tourItemId),
-  });
-  if (data) {
-    return (
-      <>
-        <DetailReviewStats />
-        <DetailReviews reviewData={data} />
-      </>
-    );
-  }
-
-  if (isError) console.log('error');
+  return (
+    <>
+      <DetailReviewStats />
+      {/* <DetailReview /> */}
+    </>
+  );
 }