Merge pull request #259 from FinalDoubleTen/FE-102--feat/Refactor

Fe 102 feat/refactor
WePlanPlans · Jan 24, 2024 · cdac8d5 · cdac8d5
2 parents d80194c + d8b8953
commit cdac8d5
Show file tree

Hide file tree

Showing 23 changed files with 159 additions and 125 deletions.
diff --git a/index.html b/index.html
@@ -1,16 +1,30 @@
 <!doctype html>
 <html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0 maximum-scale=1" />
+    <title>위플플 | 여정 공유 플랫폼</title>
+  </head>
 
-<head>
-  <meta charset="UTF-8" />
-  <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1" />
-  <title>위플플 | 여정 공유 플랫폼</title>
-</head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
 
-<body>
-  <div id="root"></div>
-  <script type="module" src="/src/main.tsx"></script>
-</body>
+  <!-- Google tag (gtag.js) -->
+  <script
+    async
+    src="https://www.googletagmanager.com/gtag/js?id=G-1285JF2LMZ"></script>
+  <script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag() {
+      dataLayer.push(arguments);
+    }
+    gtag('js', new Date());
 
-</html>
+    gtag('config', 'G-1285JF2LMZ');
+  </script>
+</html>
diff --git a/src/@types/detail.types.ts b/src/@types/detail.types.ts
@@ -1,5 +1,6 @@
 interface tourDetail {
   id: number;
+  contentTypeId: number;
   title: string;
   liked: boolean;
   fullAddress: string;

diff --git a/src/@types/review.types.ts b/src/@types/review.types.ts
@@ -1,11 +1,27 @@
-interface ReviewRequest {
-  tourItemId: number;
-  rating: number;
-  keywords: Keyword[];
+export interface Keyword {
+  keywordId: number;
   content: string;
+  type: string;
 }
 
-interface Keyword {
-  keywordId: number;
+export interface CommentItemProps {
+  commentId: number;
+  authorNickname: string;
+  authorProfileImageUrl: string;
+  createdTime: string;
   content: string;
+  onClick?: () => void;
+  isAuthor: boolean;
+}
+
+export interface MyReviewContent {
+  reviewId: number;
+  authorNickname: string;
+  authorProfileImageUrl: string;
+  rating: number;
+  createdTime: string;
+  content: string;
+  keywords: Keyword[];
+  commentCount: number;
+  isAuthor?: boolean;
 }
diff --git a/src/@types/tours.types.ts b/src/@types/tours.types.ts
@@ -52,3 +52,25 @@ export interface LikedListType {
   preferTotalCount: number;
   notPreferTotalCount: number;
 }
+
+export interface ReviewInfoItemProps {
+  reviewId: number;
+  authorNickname: string;
+  authorProfileImageUrl: string;
+  rating: number;
+  createdTime: string;
+  content: string;
+  keywords: Keyword[]; // keywordId, content, type
+  commentCount: number;
+  onClick?: () => void;
+  tourItemId?: number;
+  contentTypeId?: number;
+  canTextOverflow: boolean;
+  isAuthor?: boolean;
+}
+
+interface Keyword {
+  keywordId: number;
+  content: string;
+  type: string;
+}
diff --git a/src/@types/trips.types.ts b/src/@types/trips.types.ts
@@ -51,3 +51,13 @@ interface AuthorityType {
     tripId: string;
   };
 }
+interface TripSurveySetMemberInfo {
+  memberId: number;
+  nickname: string;
+  thumbnail: string;
+}
+
+interface TripMemeberInfo {
+  nickname: string;
+  profileImageUrl: string;
+}
diff --git a/src/api/review.ts b/src/api/review.ts
@@ -1,6 +1,6 @@
 import client from './client';
 import authClient from './authClient';
-
+import { ReviewRequest } from '@recoil/review';
 // 리뷰 관련 API
 
 // 리뷰수정

diff --git a/src/components/DetailSectionBottom/DetailReviews.tsx b/src/components/DetailSectionBottom/DetailReviews.tsx
@@ -26,12 +26,13 @@ import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
 import EditDelete from '@components/common/modal/children/EditDelete';
 import MyAlert from '@components/common/modal/children/MyAlert';
 import { alertTypeState } from '@recoil/modal';
+import { ReviewInfoItemProps } from '@/@types/tours.types';
 
-interface reviewProps {
-  reviewData: any;
-}
-
-export default function DetailReviews({ reviewData }: reviewProps) {
+export default function DetailReviews({
+  reviewData,
+}: {
+  reviewData: tourDetail;
+}) {
   const [reviewDataLength, setReviewDataLength] = useState<number>(0);
   const { title, contentTypeId } = reviewData;
   const params = useParams();
@@ -73,7 +74,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
     return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
   }
 
-  const handleReviewClick = (item: any) => {
+  const handleReviewClick = (item: ReviewInfoItemProps) => {
     const reviewId = item.reviewId;
     navigate(`/reviewComment/${reviewId}`, { state: { item, tourItemId } });
   };
@@ -155,24 +156,26 @@ export default function DetailReviews({ reviewData }: reviewProps) {
             {
               return (
                 <React.Fragment key={index}>
-                  {group?.data.data.reviewInfos.content.map((item: any) => (
-                    <ReviewItem
-                      key={item.reviewId}
-                      reviewId={item.reviewId}
-                      authorNickname={item.authorNickname}
-                      authorProfileImageUrl={item.authorProfileImageUrl}
-                      rating={item.rating}
-                      createdTime={item.createdTime}
-                      content={item.content}
-                      keywords={item.keywords}
-                      commentCount={item.commentCount}
-                      onClick={() => handleReviewClick(item)}
-                      tourItemId={tourItemId}
-                      contentTypeId={contentTypeId}
-                      canTextOverflow={true}
-                      isAuthor={item.isAuthor}
-                    />
-                  ))}
+                  {group?.data.data.reviewInfos.content.map(
+                    (item: ReviewInfoItemProps) => (
+                      <ReviewItem
+                        key={item.reviewId}
+                        reviewId={item.reviewId}
+                        authorNickname={item.authorNickname}
+                        authorProfileImageUrl={item.authorProfileImageUrl}
+                        rating={item.rating}
+                        createdTime={item.createdTime}
+                        content={item.content}
+                        keywords={item.keywords}
+                        commentCount={item.commentCount}
+                        onClick={() => handleReviewClick(item)}
+                        tourItemId={tourItemId}
+                        contentTypeId={contentTypeId}
+                        canTextOverflow={true}
+                        isAuthor={item.isAuthor}
+                      />
+                    ),
+                  )}
                 </React.Fragment>
               );
             }
@@ -187,7 +190,7 @@ export default function DetailReviews({ reviewData }: reviewProps) {
         {modalChildren === 'MyAlert' && alertType === 'LoginReview' && (
           <MyAlert
             title="로그인"
-            content="리뷰 쓰기 시 로그인이 필요해요. 로그인하시겠어요?"
+            content="리뷰를 쓰려면 로그인이 필요해요. 로그인하러 가볼까요?"
           />
         )}
       </Modal>

diff --git a/src/components/DetailSectionBottom/ReviewItem.tsx b/src/components/DetailSectionBottom/ReviewItem.tsx
@@ -21,30 +21,9 @@ import {
 import { MouseEvent, useState } from 'react';
 import { getEmoji } from '@utils/utils';
 import { getStarFill } from '@utils/getStarFill';
+import { ReviewInfoItemProps } from '@/@types/tours.types';
 
-interface Keyword {
-  keywordId: number;
-  content: string;
-  type: string;
-}
-
-interface ItemProps {
-  reviewId: number;
-  authorNickname: string;
-  authorProfileImageUrl: string;
-  rating: number;
-  createdTime: any;
-  content: string;
-  keywords: Keyword[]; // keywordId, content, type
-  commentCount: number;
-  onClick?: () => void;
-  tourItemId?: number;
-  contentTypeId?: number;
-  canTextOverflow: boolean;
-  isAuthor?: boolean;
-}
-
-const Item: React.FC<ItemProps> = (props: ItemProps) => {
+const Item: React.FC<ReviewInfoItemProps> = (props: ReviewInfoItemProps) => {
   const {
     reviewId,
     authorNickname,

diff --git a/src/components/DetailSectionTop/DetailToursButtons.tsx b/src/components/DetailSectionTop/DetailToursButtons.tsx
@@ -10,11 +10,11 @@ import { useNavigate, useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
 import { getMember } from '@api/member';
 
-interface reviewProps {
-  reviewData: any;
-}
-
-export default function DetailTourButtons({ reviewData }: reviewProps) {
+export default function DetailTourButtons({
+  reviewData,
+}: {
+  reviewData: tourDetail;
+}) {
   const { title, contentTypeId } = reviewData;
   const params = useParams();
   const tourItemId = Number(params.id);

diff --git a/src/components/Review/CommentItem.tsx b/src/components/Review/CommentItem.tsx
@@ -6,17 +6,9 @@ import {
 } from '@recoil/modal';
 import { commentState, targetCommentIdState } from '@recoil/review';
 import { useRecoilState, useSetRecoilState } from 'recoil';
-interface ItemProps {
-  commentId: number;
-  authorNickname: string;
-  authorProfileImageUrl: string;
-  createdTime: any;
-  content: string;
-  onClick?: () => void;
-  isAuthor: boolean;
-}
+import { CommentItemProps } from '@/@types/review.types';
 
-const CommentItem: React.FC<ItemProps> = (props: ItemProps) => {
+const CommentItem: React.FC<CommentItemProps> = (props: CommentItemProps) => {
   const {
     commentId,
     authorNickname,

diff --git a/src/components/Review/MyReview.tsx b/src/components/Review/MyReview.tsx
@@ -22,6 +22,7 @@ import MyAlert from '@components/common/modal/children/MyAlert';
 import { alertTypeState } from '@recoil/modal';
 import { PenIcon } from '@components/common/icons/Icons';
 import ScrollTopButton from '@components/Plan/ScrollTopButton';
+import { MyReviewContent } from '@/@types/review.types';
 
 export default function MyReview() {
   const [reviewDataLength, setReviewDataLength] = useState<number>(0);
@@ -60,7 +61,7 @@ export default function MyReview() {
     return <div>데이터를 불러오는 중 오류가 발생했습니다.</div>;
   }
 
-  const handleReviewClick = (item: any) => {
+  const handleReviewClick = (item: MyReviewContent) => {
     const reviewId = item.reviewId;
     navigate(`/reviewComment/${reviewId}`, { state: { item } });
   };
@@ -113,7 +114,7 @@ export default function MyReview() {
             <PenIcon size={50} color="#D7D7D7" />
           </div>
           <div className="text-md mb-2 flex justify-center font-bold text-gray4">
-            작성한 리뷰가 없습니다
+            내가 쓴 리뷰가 없어요
           </div>
           <div className="flex justify-center text-sm text-gray4">
             다녀온 여행지의 리뷰를 남겨보세요!
@@ -134,7 +135,7 @@ export default function MyReview() {
             {
               return (
                 <React.Fragment key={index}>
-                  {group?.data.data.content.map((item: any) => {
+                  {group?.data.data.content.map((item: MyReviewContent) => {
                     item.isAuthor = true;
                     return (
                       <ReviewItem

diff --git a/src/components/Review/Review.tsx b/src/components/Review/Review.tsx
@@ -15,9 +15,9 @@ import { isModalOpenState } from '@recoil/modal';
 import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil';
 import { useParams, useNavigate } from 'react-router-dom';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-
+import { ReviewRequest } from '@recoil/review';
 interface EditReviewMutationParams {
-  reviewData: any;
+  reviewData: ReviewRequest;
   targetReviewId: number;
 }
 

diff --git a/src/components/Review/ReviewButton.tsx b/src/components/Review/ReviewButton.tsx
@@ -3,11 +3,7 @@ import { ratingState } from '@recoil/review';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 
-interface ButtonProps {
-  onClick: () => void;
-}
-
-const ReviewButton = (props: ButtonProps) => {
+const ReviewButton = (props: { onClick: () => void }) => {
   const { onClick } = props;
   const rating = useRecoilValue(ratingState);
   const [isRatingValid, setIsRatingValid] = useState(false);

diff --git a/src/components/Review/ReviewComments.tsx b/src/components/Review/ReviewComments.tsx
@@ -13,6 +13,7 @@ import MyAlert from '@components/common/modal/children/MyAlert';
 import { commentState, toastPopUpState } from '@recoil/review';
 import { alertTypeState } from '@recoil/modal';
 import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
+import { CommentItemProps } from '@/@types/review.types';
 
 export default function ReviewComments() {
   const params = useParams();
@@ -88,8 +89,8 @@ export default function ReviewComments() {
       <div className="h-[8px] bg-gray1"></div>
       <div className="flex flex-col">
         {commentDataLength == 0 && (
-          <div className="mb-4 flex flex-col items-center justify-center text-sm text-gray4">
-            <div>댓글이 없습니다. </div>
+          <div className="mt-10 flex flex-col items-center justify-center text-sm text-gray4">
+            <div>아직 댓글이 없어요. </div>
             <div>첫 댓글을 작성해보세요!</div>
           </div>
         )}
@@ -107,17 +108,19 @@ export default function ReviewComments() {
               {
                 return (
                   <React.Fragment key={index}>
-                    {group?.data.data.comments.content.map((item: any) => (
-                      <CommentItem
-                        key={item.commentId}
-                        commentId={item.commentId}
-                        authorNickname={item.authorNickname}
-                        authorProfileImageUrl={item.authorProfileImageUrl}
-                        createdTime={item.createdTime}
-                        content={item.content}
-                        isAuthor={item.isAuthor}
-                      />
-                    ))}
+                    {group?.data.data.comments.content.map(
+                      (item: CommentItemProps) => (
+                        <CommentItem
+                          key={item.commentId}
+                          commentId={item.commentId}
+                          authorNickname={item.authorNickname}
+                          authorProfileImageUrl={item.authorProfileImageUrl}
+                          createdTime={item.createdTime}
+                          content={item.content}
+                          isAuthor={item.isAuthor}
+                        />
+                      ),
+                    )}
                   </React.Fragment>
                 );
               }