fix: 유저카드 태그 개수 조절, 사이즈 조절, 리뷰 작성 시 해당 여행 id와 title이 같이 전송될 수 있도록 설정

src/app/review/@modal/(.)new/page.tsx

@@ -1,11 +1,14 @@
 import ReviewModal from '@/components/review/new/ReviewModal';
+import { Suspense } from 'react';
 import WriteReviewPage from '../../new/page';
 
 const CreateReview = () => {
   return (
-    <ReviewModal>
-      <WriteReviewPage />
-    </ReviewModal>
+    <Suspense fallback={<div>로딩중...</div>}>
+      <ReviewModal>
+        <WriteReviewPage />
+      </ReviewModal>
+    </Suspense>
   );
 };
 

src/app/review/new/page.tsx

@@ -6,28 +6,36 @@ import SelectTravel from '@/components/review/new/SelectTravel';
 import SelectHashTag from '@/components/review/new/organizer/SelectHashTag';
 import ReviewParticipantContainer from '@/components/review/new/participant/ReviewParticipantContainer';
 import { Suspense, useState } from 'react';
+import SpinnerIcon from '@/assets/icon/loading/spinner-button.svg';
 
-const CreateReviewPage = ({ id, title }: { id?: number; title?: string }) => {
+const CreateReviewPage = () => {
   const [isFirstPage, setIsFirstPage] = useState(true);
 
   return (
-    <form
-      method="dialog"
-      className="heading-1-sb flex h-fit w-full flex-col px-6 pb-6 pt-8 text-label-normal"
+    <Suspense
+      fallback={
+        <div className="mt-4 flex h-[46px] items-center justify-center">
+          <SpinnerIcon className="animate-spin" />
+        </div>
+      }
     >
-      <CreateReviewHeader />
-      <main className="flex flex-col gap-6">
-        <Suspense fallback={<div>Loading...</div>}>
-          <SelectTravel id={id} title={title} />
+      <form
+        method="dialog"
+        className="heading-1-sb flex h-fit w-full flex-col px-6 pb-6 pt-8 text-label-normal"
+      >
+        <CreateReviewHeader />
+        <main className="flex flex-col gap-6">
+          <SelectTravel />
+
           {isFirstPage ? <SelectHashTag /> : <ReviewParticipantContainer />}
-        </Suspense>
-      </main>
+        </main>
 
-      <CreateReviewButtons
-        isFirstPage={isFirstPage}
-        clickNext={() => setIsFirstPage(false)}
-      />
-    </form>
+        <CreateReviewButtons
+          isFirstPage={isFirstPage}
+          clickNext={() => setIsFirstPage(false)}
+        />
+      </form>
+    </Suspense>
   );
 };
 

src/components/card/user/UserCard.test.tsx

@@ -43,7 +43,6 @@ describe('UserCard가 올바르게 렌더링됩니다', () => {
   it('해시태그를 렌더링합니다', async () => {
     expect(screen.getByText('상세해요')).toBeInTheDocument();
     expect(screen.getByText('여행')).toBeInTheDocument();
-    expect(screen.getByText('맛집')).toBeInTheDocument();
   });
 
   it('openTravelCount와 reviewCount를 렌더링합니다', async () => {

src/components/card/user/UserCard.tsx

@@ -15,7 +15,7 @@ const UserCard = ({
     <Link
       href={`/${userId}`}
       aria-label={`${nickName} 프로필 보기`}
-      className="flex h-[246px] flex-col items-center justify-center rounded border border-line-normal px-[21px] py-5 md:w-[200px] lg:h-[306px] lg:w-[332px]"
+      className="flex h-[246px] w-[200px] flex-col items-center justify-center rounded border border-line-normal px-[21px] py-5 lg:h-[306px] lg:w-[332px]"
     >
       <UserIcon profileImage={profileImage} nickname={nickName} />
       <div className="flex flex-col items-center justify-center gap-0.5 pb-4 pt-4 md:pt-6">
@@ -29,6 +29,7 @@ const UserCard = ({
         {hashTags
           ?.split('#')
           .filter((str) => str.trim() !== '')
+          .slice(0, 2)
           .map((str) => <UserTag label={str} key={str} />)}
       </div>
     </Link>

src/components/mypage/contents/content/myReview/Writable.tsx

@@ -7,9 +7,11 @@ import { useWritableTravel } from '@/queries/travel/useGetMyTravel';
 import Pagination from '@/components/common/pagination/Pagination';
 import HorizontalDivider from '@/components/common/divider/HorizontalDivider';
 import MyTravelCardSkeleton from '@/components/mypage/skeleton/MyTravelCardSkeleton';
+import useCreateReviewStore from '@/store/useCreateReview';
 import NoTravel from '../myTravel/NoTravel';
 
 const Writable = () => {
+  const { setTravelName, setTravelId } = useCreateReviewStore();
   const itemsPerPage = 6;
   const [currentPage, setCurrentPage] = useState(1);
   const { data: travels, isLoading } = useWritableTravel(
@@ -47,9 +49,13 @@ const Writable = () => {
               />
               <HorizontalDivider className="mt-5 xl:mt-6" />
 
-              <Link href="/">
+              <Link href="/review/new">
                 <button
                   type="button"
+                  onClick={() => {
+                    setTravelName(travel.travelName);
+                    setTravelId(travel.travelId);
+                  }}
                   className="body-3-m absolute right-0 top-0 text-primary-normal underline"
                 >
                   리뷰 작성

src/components/review/new/SelectTravel.tsx

@@ -8,14 +8,15 @@ import { useInView } from 'react-intersection-observer';
 import SpinnerIcon from '@/assets/spinner_round.svg';
 import useCreateReviewStore from '@/store/useCreateReview';
 
-const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
+const SelectTravel = () => {
   const { ref, inView } = useInView();
-  const { setTravelId, errorMessages } = useCreateReviewStore();
+  const { travelId, travelName, setTravelId, errorMessages } =
+    useCreateReviewStore();
   const buttonRef = useRef<HTMLDivElement>(null);
   const [isListOpen, setIsListOpen] = useState(false);
   const [selectedTravel, setSelectedTravel] = useState({
-    travelId: id || 0,
-    travelName: title || '작성할 리뷰를 선택해 주세요.',
+    id: travelId,
+    travel: travelName,
   });
 
   const {
@@ -32,16 +33,12 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
     setIsListOpen((prev) => !prev);
   };
 
-  const handleSelect = (travelId: number, travelName: string) => {
-    setSelectedTravel({ travelId, travelName });
-    setTravelId(travelId);
+  const handleSelect = (id: number, travel: string) => {
+    setSelectedTravel({ id, travel });
+    setTravelId(id);
     setIsListOpen(false);
   };
 
-  useEffect(() => {
-    if (id) setTravelId(id);
-  }, [id, setTravelId]);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -81,21 +78,21 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
 
   return (
     <div className="mt-4">
-      {errorMessages.travelId && selectedTravel.travelId === 0 && (
+      {errorMessages.travelId && selectedTravel.id === 0 && (
         <p className="body-3-r text-status-error">{errorMessages.travelId}</p>
       )}
       <section
         ref={buttonRef}
-        className={`body-2-r relative flex h-[46px] items-center rounded border border-line-normal px-4 py-3 text-interaction-inactive ${errorMessages.travelId && selectedTravel.travelId === 0 && 'border-status-error'}`}
+        className={`body-2-r relative flex h-[46px] items-center rounded border border-line-normal px-4 py-3 text-interaction-inactive ${errorMessages.travelId && selectedTravel.id === 0 && 'border-status-error'}`}
       >
         <button
           type="button"
           aria-label="리뷰를 작성할 여행 선택하기"
           onClick={handleListOpen}
-          className={`${selectedTravel.travelId !== 0 && 'text-label-normal'} flex w-full cursor-pointer items-center justify-between`}
+          className={`${selectedTravel.id !== 0 && 'text-label-normal'} flex w-full cursor-pointer items-center justify-between`}
         >
           <span className="w-full overflow-hidden truncate text-start">
-            {selectedTravel.travelName}
+            {selectedTravel.travel}
           </span>
 
           <ArrowIcon
@@ -122,11 +119,11 @@ const SelectTravel = ({ id, title }: { id?: number; title?: string }) => {
                       className="group flex max-h-16 w-full cursor-pointer items-center gap-1.5 px-3 py-1.5 text-interaction-inactive"
                     >
                       <CheckIcon
-                        className={`${selectedTravel.travelId === travel.travelId ? 'visible' : 'invisible'}`}
+                        className={`${selectedTravel.id === travel.travelId ? 'visible' : 'invisible'}`}
                         aria-hidden="true"
                       />
                       <span
-                        className={`w-[95%] overflow-hidden truncate group-hover:text-label-neutral ${selectedTravel.travelId === travel.travelId ? 'text-label-neutral' : ''}`}
+                        className={`w-[95%] overflow-hidden truncate group-hover:text-label-neutral ${selectedTravel.id === travel.travelId ? 'text-label-neutral' : ''}`}
                       >
                         {travel.travelName}
                       </span>

src/store/useCreateReview.ts

@@ -2,6 +2,7 @@ import { create } from 'zustand';
 
 interface CreateReviewStore {
   travelId: number;
+  travelName: string;
   hashTags: Set<string>;
   countStar: number;
   title: string;
@@ -16,6 +17,7 @@ interface CreateReviewStore {
   };
 
   setTravelId: (travelId: number) => void;
+  setTravelName: (travelName: string) => void;
   setHashTags: (hashTag: string) => void;
   setCountStar: (countStar: number) => void;
   setTitle: (title: string) => void;
@@ -31,6 +33,7 @@ interface CreateReviewStore {
 
 const useCreateReviewStore = create<CreateReviewStore>((set, get) => ({
   travelId: 0,
+  travelName: '작성할 리뷰를 선택해 주세요.',
   hashTags: new Set(),
   countStar: 0,
   title: '',
@@ -45,6 +48,7 @@ const useCreateReviewStore = create<CreateReviewStore>((set, get) => ({
   },
 
   setTravelId: (travelId) => set({ travelId }),
+  setTravelName: (travelName) => set({ travelName }),
   setHashTags: (hashTag) => {
     const { hashTags } = get();
     if (hashTags.has(hashTag)) {
@@ -70,6 +74,7 @@ const useCreateReviewStore = create<CreateReviewStore>((set, get) => ({
   resetStore: () =>
     set({
       travelId: 0,
+      travelName: '작성할 리뷰를 선택해 주세요.',
       hashTags: new Set(),
       countStar: 0,
       title: '',