Merge pull request #258 from FinalDoubleTen/FE-103--feat/Refactor/1st

Fe 103 feat/refactor/1st
WePlanPlans · Jan 24, 2024 · 435f9a4 · 435f9a4
2 parents 456e13e + 07a0db4
commit 435f9a4
Show file tree

Hide file tree

Showing 22 changed files with 134 additions and 114 deletions.
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>
                 );
               }

diff --git a/src/components/Review/ReviewKeyword.tsx b/src/components/Review/ReviewKeyword.tsx
@@ -4,11 +4,7 @@ import { getReviewKeywords } from '@api/review';
 import { useQuery } from '@tanstack/react-query';
 import { useRecoilState } from 'recoil';
 import { keywordsState } from '@recoil/review';
-
-interface Keyword {
-  keywordId: number;
-  content: string;
-}
+import { Keyword } from '@/@types/review.types';
 
 export default function ReviewKeyword() {
   const location = useLocation();
@@ -59,7 +55,7 @@ export default function ReviewKeyword() {
       <div className="mb-5 text-lg font-bold">어떤 점이 좋았나요? </div>
       <div className="text-md mb-10 grid grid-cols-2 gap-2 font-bold">
         {reviewKeywords?.data?.data?.keywords?.map(
-          (keyword: any, index: number) => {
+          (keyword: Keyword, index: number) => {
             const row = Math.floor(index / columns) + 1;
             const col = (index % columns) + 1;
 

diff --git a/src/components/Review/ReviewRating.tsx b/src/components/Review/ReviewRating.tsx
@@ -13,7 +13,7 @@ const ReviewRating = () => {
 
   const handleStarClick = (index: number) => {
     const newRating = index + 1;
-    setRating((prevRating: any) => {
+    setRating((prevRating: number) => {
       const updatedIsHalfClicked =
         prevRating === newRating ? !isHalfClicked : false;
       setIsHalfClicked(updatedIsHalfClicked);

diff --git a/src/components/Trip/TripInfo.tsx b/src/components/Trip/TripInfo.tsx
@@ -26,7 +26,7 @@ const ShareList = () => {
     <>
       <hr className="my-3 border-solid border-gray2" />
       <div className="max-h-[115px] overflow-y-auto">
-        {members.map((member: any, index: number) => {
+        {members.map((member: TripMemeberInfo, index: number) => {
           return (
             <div
               className={`mb-2 flex cursor-pointer items-center text-gray5`}
@@ -89,7 +89,7 @@ const TripInfo = () => {
       <div className="my-5">
         <div className="flex items-center justify-between">
           <div className="flex  space-x-[-17.5px]">
-            {members?.map((member: any, index: number) => (
+            {members?.map((member: TripMemeberInfo, index: number) => (
               <div key={index}>
                 {member.profileImageUrl &&
                 member.profileImageUrl !== 'http://asiduheimage.jpg' ? (