[refactor] reviewandcreatepage 기능 및 디테일 수정

src/apis/getCloseGatheringData.ts

@@ -0,0 +1,13 @@
+import { instance } from '@/apis/api';
+import type { GetCloseGatheringResponse } from '@manchui-api';
+
+export async function getCloseGatheringData(): Promise<GetCloseGatheringResponse> {
+  try {
+    const res = await instance.get<GetCloseGatheringResponse>('/api/gatherings');
+
+    return res.data;
+  } catch (e) {
+    console.log('GetCloseGatheringResponse 함수에서 오류 발생', e);
+    throw new Error('닫힌 모임 데이터를 불러오는데 실패했습니다.');
+  }
+}

src/apis/getCloseGatheringIdData.ts

@@ -0,0 +1,13 @@
+import { instance } from '@/apis/api';
+import type { GetCloseGatheringIdResponse } from '@manchui-api';
+
+export async function getCloseGatheringIdData(gatheringsId: number): Promise<GetCloseGatheringIdResponse> {
+  try {
+    const res = await instance.get<GetCloseGatheringIdResponse>(`/api/gatherings/${gatheringsId}`);
+
+    return res.data;
+  } catch (e) {
+    console.log('getCloseGatheringIdData 함수에서 오류 발생', e);
+    throw new Error('닫힌 모임 데이터를 불러오는데 실패했습니다.');
+  }
+}

src/apis/getReviewData.ts

@@ -1,16 +1,17 @@
 import { instanceWithoutAccess } from '@/apis/api';
 import type { GetReviewResponse } from '@manchui-api';
 
-type GetReviewProps= {
+type GetReviewProps = {
   category?: string;
   endDate?: string;
   location?: string;
   page?: number;
   query?: string;
+  score?: number;
   size?: number;
   sort?: string;
   startDate?: string;
-}
+};
 
 export async function getReviewData({
   page = 0,
@@ -21,19 +22,20 @@ export async function getReviewData({
   endDate,
   query,
   sort,
+  score,
 }: GetReviewProps): Promise<GetReviewResponse> {
   const params = new URLSearchParams({
     page: page.toString(),
     size: size.toString(),
     ...(sort && { sort }),
+    ...(score && { score: score?.toString() }),
     ...(query && { query }),
     ...(category && { category }),
     ...(location && { location }),
     ...(startDate && { startDate }),
     ...(endDate && { endDate }),
   });
 
-
   try {
     const res = await instanceWithoutAccess.get<GetReviewResponse>('/api/reviews?', {
       params,

src/apis/getReviewScoreZeroData.ts

@@ -0,0 +1,49 @@
+import { instanceWithoutAccess } from '@/apis/api';
+import type { GetReviewResponse } from '@manchui-api';
+
+type GetReviewProps = {
+  category?: string;
+  endDate?: string;
+  location?: string;
+  page?: number;
+  query?: string;
+  score?: number;
+  size?: number;
+  sort?: string;
+  startDate?: string;
+};
+
+export async function getReviewScoreZeroData({
+  page = 0,
+  size = 10,
+  category,
+  location,
+  startDate,
+  endDate,
+  query,
+  sort,
+  score = 0,
+}: GetReviewProps): Promise<GetReviewResponse> {
+  const params = new URLSearchParams({
+    page: page.toString(),
+    size: size.toString(),
+    ...(score && { score: score?.toString() }),
+    ...(sort && { sort }),
+    ...(query && { query }),
+    ...(category && { category }),
+    ...(location && { location }),
+    ...(startDate && { startDate }),
+    ...(endDate && { endDate }),
+  });
+
+  try {
+    const res = await instanceWithoutAccess.get<GetReviewResponse>('/api/reviews?', {
+      params,
+    });
+
+    return res.data;
+  } catch (e) {
+    console.error('getReviewScoreZeroData 함수에서 오류 발생:', e);
+    throw new Error('리뷰 데이터를 불러오는데 실패했습니다.');
+  }
+}

src/components/Create/CapacityDropdown/index.tsx

@@ -20,8 +20,8 @@ export function CapacityDropdown({ errorMin, errorMax, selectedMinNum, selectedM
   return (
     <div>
       <h2 className="mb-3 text-base font-semibold text-gray-900"> 모집 정원 </h2>
-      <div className="flex w-full flex-col justify-center gap-2 mobile:flex-row mobile:justify-between tablet:gap-10">
-        <div className="flex flex-1 items-center">
+      <div className="flex w-full flex-col justify-center gap-2 phablet:flex-row phablet:justify-between phablet:gap-10">
+        <div className="flex flex-1 items-center gap-2">
           <p className="mr-2 whitespace-nowrap text-sm font-medium">최소 인원 </p>
           <div className="flex-1">
             <LongDropdown
@@ -33,7 +33,7 @@ export function CapacityDropdown({ errorMin, errorMax, selectedMinNum, selectedM
           </div>
         </div>
 
-        <div className="flex flex-1 items-center">
+        <div className="flex flex-1 items-center gap-2">
           <p className="mr-2 whitespace-nowrap text-sm font-medium">최대 인원 </p>
           <div className="flex-1">
             <LongDropdown

src/components/Create/CategoryDropdown/index.tsx

@@ -1,21 +1,33 @@
+import { useEffect, useState } from 'react';
 import LongDropdown from '@/components/shared/Dropdown/LongDropdown';
 import { FILTER_OPTIONS } from '@/constants/filter';
+import type { GetCloseGatheringIdResponse } from '@manchui-api';
 
 type CategoryDropdownProps = {
+  closeGatheringIdData?: GetCloseGatheringIdResponse['data'];
   error: string;
   setSelectedCategory: (category: string) => void;
 };
 
-export function CategoryDropdown({ setSelectedCategory ,error}: CategoryDropdownProps) {
-  const categoryList = FILTER_OPTIONS.slice(1).map(option => option.label);
+export function CategoryDropdown({ closeGatheringIdData, setSelectedCategory, error }: CategoryDropdownProps) {
+  const categoryList = FILTER_OPTIONS.slice(1).map((option) => option.label);
+  const [placeholder, setPlaceholder] = useState<string>('서비스 카테고리를 정해주세요.');
+  useEffect(() => {
+    if (closeGatheringIdData) {
+      setSelectedCategory(closeGatheringIdData.category);
+      setPlaceholder(closeGatheringIdData.category);
+    }
+  }, [closeGatheringIdData, setSelectedCategory]);
 
+  const isCategorySelected = Boolean(closeGatheringIdData?.category);
+
+  // console.log('Selected placeholder:', placeholder);
 
   return (
     <div>
       <h2 className="mb-3 text-base font-semibold text-gray-900"> 카테고리 </h2>
-      <LongDropdown listDropdown={categoryList} placeholder="서비스 카테고리를 정해주세요." onListChange={setSelectedCategory} />
-      {error && <p className="mt-1 -mb-5 text-red-500 text-sm font-medium ">{error}를 선택하세요.</p>}
+      <LongDropdown listDropdown={categoryList} placeholder={placeholder} onListChange={setSelectedCategory} disabled={isCategorySelected} />
+      {error && <p className="-mb-5 mt-1 text-sm font-medium text-red-500">{error}를 선택하세요.</p>}
     </div>
   );
 }
-

src/components/Create/DescriptionInput/index.tsx

@@ -17,7 +17,7 @@ export function DescriptionInput({ description, setDescription, error }: Descrip
       <textarea
         value={description || ''}
         placeholder="모임에 대한 설명을 작성해주세요."
-        className="min-h-40 w-full resize-none rounded-xl border border-blue-100 bg-blue-50 pl-2 pt-3 text-sm font-medium"
+        className="resize-none min-h-40 w-full rounded-xl border border-blue-100 bg-blue-50 pl-2 pt-3 text-sm font-medium"
         onChange={handleChange}
       />
       {error && <p className="-mb-5 mt-1 text-sm font-medium text-red-500">{errorMessage}</p>}

src/components/Create/GroupNameInput/index.tsx

@@ -1,29 +1,81 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import { getCloseGatheringData } from '@/apis/getCloseGatheringData';
+import LongDropdown from '@/components/shared/Dropdown/LongDropdown';
+import useGetCloseGatheringData from '@/hooks/useGetCloseGatheringData';
+import { dehydrate, QueryClient } from '@tanstack/react-query';
+
+type CloseGatheringData = {
+  gatheringId: number;
+  groupName: string;
+}[];
 
 type GroupNameInputProps = {
   error: string;
   name: string | null;
+  setGatheringId: (id: number) => void;
   setName: (name: string) => void;
 };
 
-export function GroupNameInput({ name, setName, error }: GroupNameInputProps) {
-
-  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const inputValue = e.target.value;
-    setName(inputValue); 
-  };
+export function GroupNameInput({ name, setName, setGatheringId, error }: GroupNameInputProps) {
+  const { data: closeGatheringData } = useGetCloseGatheringData();
+
+  // const gatheringList: CloseGatheringData = (closeGatheringData?.data?.closedGatheringList as unknown as CloseGatheringData) || [];
 
-  const errorMessage = error==='모임 이름' ? `${error}을 입력하세요.` : error;
+  const errorMessage = error === '모임 이름' ? `${error}을 입력하세요.` : error;
+  const handleKeyPress = (e: React.KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      e.preventDefault(); // Enter 키에 의한 폼 제출을 막음
+    }
+  };
   return (
     <div>
-      <h2 className="text-base font-semibold text-gray-900"> 모임 이름 </h2>
+      <h2 className="text-base font-semibold text-gray-900">모임 이름</h2>
+      {/* {gatheringList.length > 0 ? (
+        <LongDropdown
+          isCloseGathering
+          listDropdown={gatheringList} 
+          placeholder="모임 이름을 작성해주세요"
+          onListChange={(selectedGroupName) => {
+            setName(selectedGroupName);
+            const selectedGroup = gatheringList.find((item) => item.groupName === selectedGroupName);
+            if (selectedGroup) {
+              setGatheringId(selectedGroup.gatheringId);
+            }
+          }}
+        />
+      ) : ( */}
       <input
         value={name || ''}
-        placeholder="모임 이름을 작성해주세요"
-        className='mt-3 h-11 w-full rounded-xl border border-blue-100 bg-blue-50 pl-2 text-sm font-medium '
-        onChange={handleChange}
+        placeholder="모임 이름을 작성해 주세요"
+        className="mt-3 h-11 w-full rounded-xl border border-blue-100 bg-blue-50 pl-2 text-sm font-medium"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          const inputValue = e.target.value;
+          setName(inputValue);
+          // const selectedGroup = gatheringList.find((item) => item.groupName === inputValue);
+          // if (selectedGroup) {
+          //   setGatheringId(selectedGroup.gatheringId);
+          // }
+        }}
+        onKeyPress={handleKeyPress}
       />
-         {error && <p className="mt-1 text-red-500 text-sm font-medium -mb-5">{errorMessage}</p>}
+      {/* )} */}
+      {error && <p className="-mb-5 mt-1 text-sm font-medium text-red-500">{errorMessage}</p>}
     </div>
-
   );
 }
+
+export const getServerSideProps = async () => {
+  const queryClient = new QueryClient();
+
+  await queryClient.prefetchQuery({
+    queryKey: ['getClosegatherings'],
+    queryFn: () => getCloseGatheringData(),
+  });
+
+  return {
+    props: {
+      dehydratedState: dehydrate(queryClient),
+    },
+  };
+};

src/components/Create/ImageUploader/index.tsx

@@ -37,7 +37,7 @@ export default function ImageUploader({ error, setSelectedImage }: ImageUploader
       <div className="scrollbar-hide -mt-3 flex items-center space-x-3 overflow-x-auto">
         <button
           type="button"
-          className="mt-3 flex size-[100px] shrink-0 flex-col items-center justify-center rounded-lg border border-blue-200 text-sm font-medium text-blue-800 mobile:size-[150px]"
+          className="mt-3 flex aspect-[280/156] h-[100px] shrink-0 flex-col items-center justify-center rounded-lg border border-blue-200 text-sm font-medium text-blue-800 tablet:h-[150px]"
           onClick={handleButtonClick}
         >
           <Image src="/icons/+.svg" alt="+" width={18} height={18} className="mb-2" />
@@ -47,7 +47,7 @@ export default function ImageUploader({ error, setSelectedImage }: ImageUploader
         <input type="file" accept="image/*" ref={fileInputRef} onChange={handleFileChange} style={{ display: 'none' }} />
 
         {previewImage && (
-          <div className="relative mt-3 size-[100px] shrink-0 rounded-lg border border-blue-200 mobile:size-[150px]">
+          <div className="relative mt-3 aspect-[280/156] h-[100px] shrink-0 rounded-lg border border-blue-200 tablet:h-[150px]">
             <Image src={previewImage} alt="예시 이미지" layout="fill" objectFit="cover" className="rounded-lg" />
             <button
               type="button"

src/components/review/FilterSection/ScoreFilter/index.tsx

@@ -0,0 +1,25 @@
+import Image from 'next/image';
+import { Toast } from '@/components/shared/Toast';
+import { useScore, useSetScore } from '@/store/useFilterStore';
+
+export default function ScoreFilter() {
+  const score = useScore();
+  const setScore = useSetScore();
+
+  const handleScoreRemove = () => {
+    setScore(0);
+    Toast('info', '별점 필터가 초기화되었습니다.');
+  };
+  return (
+    <div>
+      {score ? (
+        <div className="relative flex items-center justify-center gap-2 rounded-lg border border-gray-100 bg-blue-800 p-3 text-13-16-response font-semibold text-white ease-out">
+          <span className="leading-none">{score}점</span>
+          <button type="button" onClick={handleScoreRemove} className="flex size-3 items-center justify-center">
+            <Image src="icons/x-white.svg" alt="x" width={12} height={12} />
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

src/components/review/FilterSection/SortToggle/index.tsx

@@ -1,26 +1,25 @@
-import type { Dispatch, SetStateAction } from 'react';
 import { useState } from 'react';
 import Dropdown from '@/components/main/Dropdown';
 import { Toast } from '@/components/shared/Toast';
+import { useSetSort, useSort } from '@/store/useFilterStore';
 
 const sortData = [
   { api: 'ratingDesc', name: '별점 높은순' },
   { api: 'ratingAsc', name: '별점 낮은순' },
 ];
 
-interface RegionDropdownProps {
-  setSort: Dispatch<SetStateAction<string | undefined>>;
-  sort?: string;
-}
 
-export default function SortToggle({ sort, setSort }: RegionDropdownProps) {
+
+export default function SortToggle() {
   const [sortDropOpen, setSortDropOpen] = useState(false);
+ const sort=useSort();
+ const setSort=useSetSort();
 
   const handleInitClick = () => {
     setSort(undefined);
     setSortDropOpen(false);
 
-    Toast('success', '순서가 초기화되었습니다.');
+    Toast('info', '순서가 초기화되었습니다.');
   };
 
   const handleSortSelect = (value: { api: string; name: string }) => {