feat: 쿼리 스트링으로 부모 데이터 전달 받아서 서버와 통신

src/components/KeywordStats/index.tsx

@@ -8,17 +8,14 @@ import KeywordStatList from './KeywordStatList';
 import { ReactComponent as Down } from '@/assets/icons/down.svg';
 import { ReactComponent as Up } from '@/assets/icons/up.svg';
 import { KeywordList } from '@/data/keywordData';
+import useMessageToParent from '@/hooks/useMessageToParent';
 
-interface Props {
-  setHeightChange: (height: boolean) => void;
-}
+export default function KeywordStats() {
+  const { setHeightChange, heightChange } = useMessageToParent();
 
-export default function KeywordStats(props: Props) {
   const limit = 4;
   const [hide, setHide] = useState(true);
 
-  const { setHeightChange } = props;
-
   return (
     <Container>
       <Fonts.body1>주요 키워드</Fonts.body1>
@@ -81,7 +78,7 @@ export default function KeywordStats(props: Props) {
         <button
           onClick={() => {
             setHide(!hide);
-            setHeightChange(hide);
+            setHeightChange(heightChange + 1);
           }}
         >
           {hide ? <Down /> : <Up />}

src/components/ReviewEditor/index.tsx

@@ -9,7 +9,7 @@ import { ReviewWriteStateType } from '@/types/Comments';
 import { CommentList } from '@/data/commentData';
 import { useCreateReview } from '@/hooks/useReviews';
 import { PARTNER_DOMAIN } from '@/config/api';
-import { makeReservation } from '@/temp/makeReservation';
+import { useLocation } from 'react-router-dom';
 
 interface Props extends ReviewWriteStateType {
   title: string;
@@ -23,25 +23,42 @@ interface onChangeInputProps {
 
 export default function ReviewEditor(props: Props) {
   const { comments, setComments, title, setTitle, content, setContent } = props;
+
+  const location = useLocation();
+  // 파트너가 전달한 예약 아이디
+  const reservationId = new URLSearchParams(location.search).get(
+    'reservation_id'
+  );
+
   const [rating, setRating] = useState<number>(0);
   const [images, setImages] = useState<File[]>([]);
-
-  const { mutate: createReviewMutate } = useCreateReview();
+  const { mutate: createReviewMutate } = useCreateReview(() => {
+    window.alert('리뷰가 등록되었습니다.');
+  });
 
   const onChangeInput = ({ e, setState }: onChangeInputProps) => {
     setState(e.target.value);
   };
 
-  const onClickSubmit = async () => {
+  const validationCheck = () => {
     if (rating === 0) window.alert('별점을 입력해주세요');
+    else if (title.length === 0) window.alert('제목을 입력해주세요');
+    else if (content.length === 0) window.alert('내용을 입력해주세요');
+
+    return rating !== 0 && title.length !== 0 && content.length !== 0;
+  };
+
+  const onClickSubmit = async () => {
+    if (!reservationId) {
+      window.alert('예약 아이디가 없습니다.');
+      return;
+    }
+    if (!validationCheck()) return;
+
     setContent('');
     setTitle('');
 
-    const date = new Date();
     const formData = intoFormData();
-    const reservationId = `${PARTNER_DOMAIN}-${date.getTime().toString()}`;
-
-    await makeReservation(reservationId);
 
     createReviewMutate({
       partnerDomain: PARTNER_DOMAIN,
@@ -62,7 +79,6 @@ export default function ReviewEditor(props: Props) {
     );
 
     images.forEach((image, index) => {
-      console.log(image);
       formData.append('reviewImageFiles', image);
     });
 
@@ -71,8 +87,7 @@ export default function ReviewEditor(props: Props) {
 
   const [count, setCount] = useState(0);
   // 1초간 입력이 없을 경우 실행
-  useInputTimeout(2000, () => {
-    console.log('timeout');
+  useInputTimeout(1000, () => {
     setComments([...comments, CommentList[count]]);
     setCount(1);
   });

src/components/ReviewSortingList/Reviews.tsx

@@ -4,7 +4,7 @@ import React, { useEffect } from 'react';
 import { styled } from 'styled-components';
 import { ReactComponent as StarYellow } from '@/assets/icons/starYellow.svg';
 import { Row } from '@/ui/flex/flex';
-import { ReviewType } from '@/types/RivewType';
+import { ReviewType } from '@/types/ReviewType';
 
 export default function Reviews(props: ReviewType) {
   const {

src/components/ReviewSortingList/index.tsx

@@ -3,7 +3,7 @@ import { styled } from 'styled-components';
 import KeywordSort from './KeywordSortBar';
 import ReviewSort from './ReviewSortBar';
 import Reviews from './Reviews';
-import { ReviewType } from '@/types/RivewType';
+import { ReviewType } from '@/types/ReviewType';
 
 interface Props {
   reviewList: ReviewType[];

src/hooks/useMessageToParent.tsx

@@ -2,12 +2,12 @@ import React, { useEffect, useState } from 'react';
 
 export default function useMessageToParent(): {
   componentRef: React.RefObject<HTMLDivElement>;
-  setHeightChange: React.Dispatch<React.SetStateAction<boolean>>;
-  heightChange: boolean;
+  setHeightChange: React.Dispatch<React.SetStateAction<number>>;
+  heightChange: number;
 } {
   const componentRef = React.useRef<HTMLDivElement>(null);
 
-  const [heightChange, setHeightChange] = useState(false);
+  const [heightChange, setHeightChange] = useState(0);
 
   useEffect(() => {
     const handleMessage = (e: MessageEvent) => {

src/hooks/useReviews.tsx

@@ -1,7 +1,7 @@
 import { useQuery, useMutation } from 'react-query';
 import axios from 'axios';
 import { BASE_URL } from '@/config/api';
-import { ReviewListSortType } from '@/types/RivewType';
+import { ReviewListSortType } from '@/types/ReviewType';
 import { ReviewSort, ReviewSortType } from '@/config/enum';
 
 interface CreateReview {
@@ -47,11 +47,9 @@ const fetchProductReviews = async ({
 };
 
 // 리뷰 생성
-export const useCreateReview = () => {
+export const useCreateReview = (onSuccess?: () => void) => {
   return useMutation(createReview, {
-    onSuccess: () => {
-      console.log('리뷰 생성 성공');
-    },
+    onSuccess: onSuccess,
     onError: () => {
       console.log('리뷰 생성 실패');
     },

src/pages/ReviewList.tsx

@@ -2,25 +2,33 @@ import KeywordStats from '@/components/KeywordStats';
 import ReviewSortingList from '@/components/ReviewSortingList';
 import ReviewStats from '@/components/ReviewStats';
 import { PARTNER_DOMAIN } from '@/config/api';
-import { PARTNER_CUSTOM_PRODUCT_ID } from '@/config/constants';
 import useMessageToParent from '@/hooks/useMessageToParent';
 import { useProductReviews } from '@/hooks/useReviews';
 import { SCORE_AVE, SCORE_LIST } from '@/temp/constant';
 import { Margin } from '@/ui/margin/margin';
 import { Fonts } from '@/utils/GlobalFonts';
 import React, { useState } from 'react';
+import { useLocation } from 'react-router-dom';
 import { styled } from 'styled-components';
 
 export default function ReviewList() {
   const { componentRef, setHeightChange, heightChange } = useMessageToParent();
+  const location = useLocation();
+  // 파트너가 전달한 상품 아이디
+  const partnerProductId = new URLSearchParams(location.search).get(
+    'product_id'
+  );
 
-  const { data, isLoading } = useProductReviews({
-    partnerDomain: PARTNER_DOMAIN,
-    travelProductPartnerCustomId: PARTNER_CUSTOM_PRODUCT_ID,
-    onSuccess: () => {
-      setHeightChange(!heightChange);
-    },
-  });
+  // 상품 리뷰 목록 조회
+  const { data, isLoading } = partnerProductId
+    ? useProductReviews({
+        partnerDomain: PARTNER_DOMAIN,
+        travelProductPartnerCustomId: partnerProductId,
+        onSuccess: () => {
+          setHeightChange(heightChange + 1);
+        },
+      })
+    : { data: null, isLoading: true };
 
   return (
     <Container ref={componentRef}>
@@ -29,7 +37,7 @@ export default function ReviewList() {
       </Title>
       <ReviewStats rating={SCORE_AVE} scoreList={SCORE_LIST} />
       <Margin margin={'30px 0 0 0'} />
-      <KeywordStats setHeightChange={setHeightChange} />
+      <KeywordStats />
       <Margin margin={'30px 0 0 0'} />
       {isLoading && <div>로딩중</div>}
       {!isLoading && data && <ReviewSortingList reviewList={data?.content} />}