refactor: 팀회의 피드백 반영

Author: cccwon2

src/app/components/card/cardList/MyApplicationListItem.tsx

@@ -31,6 +31,7 @@ interface ApplicationListItemProps {
   id: number;
 }
 
+// 지원 상태에 따른 Chip 컴포넌트의 variant를 반환하는 함수
 const getStatusVariant = (status: ApplicationStatus) => {
   switch (status) {
     case applicationStatus.HIRED:
@@ -42,6 +43,7 @@ const getStatusVariant = (status: ApplicationStatus) => {
   }
 };
 
+// 지원 상태에 따른 한글 라벨을 반환하는 함수
 const getStatusLabel = (status: ApplicationStatus) => {
   switch (status) {
     case applicationStatus.HIRED:
@@ -57,24 +59,31 @@ const getStatusLabel = (status: ApplicationStatus) => {
   }
 };
 
+// 내 지원 내역 카드 아이템 컴포넌트
 const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }: ApplicationListItemProps) => {
+  // 현재 공고의 모집 상태를 가져옴
   const recruitmentStatus = getRecruitmentStatus(new Date(form.recruitmentEndDate));
 
+  // 이력서 다운로드 핸들러
   const handleResumeDownload = async () => {
     try {
+      // API를 통해 이력서 파일을 다운로드
       const response = await axios.get(`/api/resumes/${resumeId}`, {
         responseType: "blob",
       });
 
+      // Blob 객체 생성 및 다운로드 링크 생성
       const blob = new Blob([response.data], { type: "application/pdf" });
       const url = window.URL.createObjectURL(blob);
 
+      // 가상의 링크를 생성하여 다운로드 실행
       const link = document.createElement("a");
       link.href = url;
       link.download = resumeName || `이력서_${resumeId}.pdf`;
       document.body.appendChild(link);
       link.click();
 
+      // 메모리 정리
       window.URL.revokeObjectURL(url);
       document.body.removeChild(link);
 
@@ -103,24 +112,24 @@ const MyApplicationListItem = ({ createdAt, status, resumeId, resumeName, form }
           </button>
         </div>
 
-        {/* 중앙 컨텐츠 영역 */}
+        {/* 중앙 컨텐츠 영역: 가게 정보, 제목, 설명 */}
         <div className="flex-1 space-y-3 py-4">
-          {/* 가게 정보 영역 */}
+          {/* 가게 프로필 이미지와 이름 */}
           <div className="flex items-center gap-2">
             <div className="relative h-10 w-10 overflow-hidden rounded-full md:h-14 md:w-14">
               <Image src={form.owner.imageUrl} alt={form.owner.storeName} fill className="object-cover" />
             </div>
             <span className="text-base font-medium text-gray-900 md:text-lg">{form.owner.storeName}</span>
           </div>
 
-          {/* 제목 */}
+          {/* 공고 제목 */}
           <div className="text-lg font-bold text-gray-900 md:text-xl">{form.title}</div>
 
-          {/* 설명 */}
+          {/* 공고 설명 (2줄 제한) */}
           <p className="line-clamp-2 text-sm text-gray-600 md:line-clamp-2 md:text-base">{form.description}</p>
         </div>
 
-        {/* 하단 상태 칩 영역 */}
+        {/* 하단 상태 표시 영역: 지원 상태와 모집 상태 */}
         <div className="flex gap-2">
           <div className="rounded-[4px] border border-primary-orange-300 md:text-base">
             <Chip label={getStatusLabel(status)} variant={getStatusVariant(status)} />

src/app/components/card/cardList/RecruitIcon.tsx

@@ -1,6 +1,7 @@
 import { formatRecruitDate, getWorkDaysDisplay } from "@/utils/workDayFormatter";
 import RecruitIconItem from "./RecruitIconItem";
 
+// 채용 공고 아이콘 컴포넌트의 Props 인터페이스
 interface RecruitIconProps {
   hourlyWage: number;
   recruitmentStartDate: Date;
@@ -11,6 +12,7 @@ interface RecruitIconProps {
   workEndTime: string;
 }
 
+// 채용 공고의 근무 조건을 아이콘으로 표시하는 컴포넌트
 export const RecruitIcon = ({
   hourlyWage,
   recruitmentStartDate,
@@ -20,11 +22,14 @@ export const RecruitIcon = ({
   workStartTime,
   workEndTime,
 }: RecruitIconProps) => {
+  // 모집 기간을 반응형으로 표시하는 컴포넌트
   const periodValue = (
     <>
+      {/* 모바일에서 표시되는 기간 형식 */}
       <span className="whitespace-normal md:hidden">
         {formatRecruitDate(recruitmentStartDate)}~{formatRecruitDate(recruitmentEndDate)}
       </span>
+      {/* 데스크탑에서 표시되는 기간 형식 */}
       <span className="hidden whitespace-normal md:inline">
         {formatRecruitDate(recruitmentStartDate, true)}~
         <br />
@@ -33,6 +38,7 @@ export const RecruitIcon = ({
     </>
   );
 
+  // 근무 조건 데이터 배열
   const conditions = [
     {
       icon: {
@@ -69,7 +75,9 @@ export const RecruitIcon = ({
   ];
 
   return (
+    // 반응형 컨테이너
     <div className="h-auto w-full sm:h-[156px] sm:w-[327px] sm:p-3 md:h-[336px] md:w-[640px]">
+      {/* 2x2 그리드 레이아웃 */}
       <div className="grid h-full grid-cols-2 gap-2 sm:gap-3">
         {conditions.map((condition, index) => (
           <RecruitIconItem key={index} icon={condition.icon} label={condition.label} value={condition.value} />

src/app/components/card/cardList/RecruitIconItem.tsx

@@ -9,6 +9,7 @@ interface RecruitIconItemProps {
   value: string | React.ReactNode;
 }
 
+// 채용 공고의 근무 조건을 아이콘으로 표시하는 컴포넌트의 아이템 컴포넌트
 const RecruitIconItem = ({ icon, label, value }: RecruitIconItemProps) => {
   return (
     <div className="flex items-center gap-2 overflow-hidden rounded-lg border border-gray-200 p-1 sm:p-3 md:gap-6 md:p-6">

src/app/components/card/cardList/RecruitListItem.tsx

@@ -1,14 +1,15 @@
 import Image from "next/image";
 import { formatRecruitDate } from "@/utils/workDayFormatter";
 import { getRecruitmentStatus, getRecruitmentDday } from "@/utils/recruitDateFormatter";
-import { BsThreeDotsVertical, BsChevronLeft, BsChevronRight, BsDot } from "react-icons/bs";
+import { BsThreeDotsVertical } from "react-icons/bs";
 import Chip from "@/app/components/chip/Chip";
 import { useState, useEffect, useRef } from "react";
 import { useRouter } from "next/navigation";
 import useModalStore from "@/store/modalStore";
+import Indicator from "../../pagination/Indicator";
 
 /**
- * 알바 리스트 아이템 컴포넌트 Props
+ * 채용 공고 리스트 아이템 컴포넌트 Props
  */
 interface RecruitListItemProps {
   id: string; // formId를 id로 변경
@@ -23,8 +24,8 @@ interface RecruitListItemProps {
 }
 
 /**
- * 알바 리스트 아이템 컴포넌트
- * 알바 정보를 카드 형태로 표시하며, 이미지 슬라이더와 수정/삭제 기능을 포함
+ * 채용 공고 리스트 아이템 컴포넌트
+ * 채용 공고 정보를 카드 형태로 표시하며, 이미지 인디케이터와 수정/삭제 기능을 포함
  */
 const RecruitListItem = ({
   id,
@@ -87,18 +88,6 @@ const RecruitListItem = ({
     });
   };
 
-  // 이미지 슬라이더 이전 이미지로 이동
-  const handlePrevImage = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setCurrentImageIndex((prev) => (prev === 0 ? imageUrls.length - 1 : prev - 1));
-  };
-
-  // 이미지 슬라이더 다음 이미지로 이동
-  const handleNextImage = (e: React.MouseEvent) => {
-    e.stopPropagation();
-    setCurrentImageIndex((prev) => (prev === imageUrls.length - 1 ? 0 : prev + 1));
-  };
-
   return (
     <div className="relative h-auto w-full overflow-hidden rounded-xl border border-gray-200 bg-white shadow-md transition-transform duration-300 hover:scale-[1.02] sm:h-[390px] sm:w-[327px] md:h-[536px] md:w-[477px]">
       {/* 이미지 슬라이더 영역 */}
@@ -113,39 +102,16 @@ const RecruitListItem = ({
           />
         )}
 
-        {/* 슬라이더 네비게이션 버튼 */}
+        {/* 이미지 인디케이터 */}
         {imageUrls.length > 1 && (
-          <>
-            <button
-              onClick={handlePrevImage}
-              className="bg-black/30 hover:bg-black/50 absolute left-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white transition-opacity md:h-10 md:w-10"
-            >
-              <BsChevronLeft className="h-3 w-3 md:h-5 md:w-5" />
-            </button>
-            <button
-              onClick={handleNextImage}
-              className="bg-black/30 hover:bg-black/50 absolute right-2 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full text-white transition-opacity md:h-10 md:w-10"
-            >
-              <BsChevronRight className="h-3 w-3 md:h-5 md:w-5" />
-            </button>
-          </>
-        )}
-
-        {/* 이미지 인디케이터 (하단 도트) */}
-        <div className="absolute bottom-2 left-1/2 flex -translate-x-1/2 gap-2">
-          {imageUrls.map((_, index) => (
-            <button
-              key={index}
-              onClick={(e) => {
-                e.stopPropagation();
-                setCurrentImageIndex(index);
-              }}
-              className={`h-2 w-2 rounded-full transition-all ${
-                currentImageIndex === index ? "bg-white" : "bg-white/50"
-              }`}
+          <div className="absolute bottom-4 left-1/2 -translate-x-1/2">
+            <Indicator
+              imageCount={imageUrls.length}
+              currentPage={currentImageIndex}
+              onPageChange={setCurrentImageIndex}
             />
-          ))}
-        </div>
+          </div>
+        )}
       </div>
 
       {/* 콘텐츠 영역 */}

src/app/components/pagination/Indicator.tsx

@@ -1,11 +1,14 @@
 "use client";
 
-import { useState } from "react";
 import { GoDotFill } from "react-icons/go";
 
-const Indicator = ({ imageCount }: { imageCount: number }) => {
-  // 상세폼 이미지 캐러셀 하단 페이지네이션 컴포넌트
-  const [currentPage, setCurrentPage] = useState<number>(1);
+interface IndicatorProps {
+  imageCount: number;
+  currentPage: number;
+  onPageChange: (page: number) => void;
+}
+
+const Indicator = ({ imageCount, currentPage, onPageChange }: IndicatorProps) => {
   const activeStyle = "size-4 text-gray-300 opacity-60";
   const defaultStyle = "size-3 text-gray-50 opacity-60";
 
@@ -15,7 +18,7 @@ const Indicator = ({ imageCount }: { imageCount: number }) => {
     .map((_, index) => (
       <GoDotFill
         key={index}
-        onClick={() => setCurrentPage(index)}
+        onClick={() => onPageChange(index)}
         className={currentPage === index ? activeStyle : defaultStyle}
       />
     ));

src/app/stories/design-system/components/card/cardList/RecruitListItem.stories.tsx

@@ -35,6 +35,8 @@ const mockProps = {
     "https://images.unsplash.com/photo-1514933651103-005eec06c04b?q=80&w=1974&auto=format&fit=crop",
     "https://images.unsplash.com/photo-1574126154517-d1e0d89ef734?q=80&w=1974&auto=format&fit=crop",
     "https://images.unsplash.com/photo-1554118811-1e0d58224f24?q=80&w=2047&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?q=80&w=2070&auto=format&fit=crop",
+    "https://images.unsplash.com/photo-1523242942815-1ba8fc07f592?q=80&w=2070&auto=format&fit=crop",
   ],
   isPublic: true,
   recruitmentStartDate: new Date("2024-06-01"),

src/app/stories/design-system/components/pagination/Indicator.stories.tsx

@@ -1,21 +1,55 @@
-import "react-datepicker/dist/react-datepicker.css";
 import { Meta, StoryObj } from "@storybook/react";
 import Indicator from "@/app/components/pagination/Indicator";
+import { useState } from "react";
 
 const meta = {
-  title: "Design System/Components/Pagination/IndicatorForCarousel",
+  title: "Design System/Components/Pagination/Indicator",
   component: Indicator,
   parameters: {
     layout: "centered",
   },
+  tags: ["autodocs"],
 } satisfies Meta<typeof Indicator>;
 
 export default meta;
 
 type Story = StoryObj<typeof Indicator>;
 
-export const IndicatorForCarousel: Story = {
-  args: {
-    imageCount: 3,
+// 상호작용 가능한 Indicator를 위한 래퍼 컴포넌트
+const IndicatorWrapper = ({ imageCount }: { imageCount: number }) => {
+  const [currentPage, setCurrentPage] = useState(0);
+
+  return <Indicator imageCount={imageCount} currentPage={currentPage} onPageChange={setCurrentPage} />;
+};
+
+// 3개 이미지 인디케이터
+export const ThreeImages: Story = {
+  render: () => <IndicatorWrapper imageCount={3} />,
+};
+
+// 5개 이미지 인디케이터
+export const FiveImages: Story = {
+  render: () => <IndicatorWrapper imageCount={5} />,
+};
+
+// 단일 이미지 인디케이터
+export const SingleImage: Story = {
+  render: () => <IndicatorWrapper imageCount={1} />,
+};
+
+// 많은 이미지 인디케이터
+export const ManyImages: Story = {
+  render: () => <IndicatorWrapper imageCount={8} />,
+};
+
+// 기본 Props로 렌더링되는 인디케이터
+export const Default: Story = {
+  render: () => <IndicatorWrapper imageCount={3} />,
+  parameters: {
+    docs: {
+      description: {
+        story: "기본적으로 3개의 인디케이터를 보여주며, 클릭하여 페이지를 변경할 수 있습니다.",
+      },
+    },
   },
 };