Feature/#295 스터디 작물 이미지 추가

src/app/team/[teamId]/study/[studyId]/page.tsx

@@ -60,7 +60,10 @@ const Page = ({ params }: { params: { teamId: number; studyId: number } }) => {
         />
         <Grid gap="4" templateColumns={{ base: '', xl: '2fr 1fr' }} w="100%">
           <Flex direction="column" rowGap={{ base: '6', '2xl': '12' }}>
-            <CurriculumCard />
+            {studyData && (
+              <CurriculumCard cropId={studyData.cropId} studyProgressRatio={studyData.studyProgressRatio} />
+            )}
+
             <Flex align="right" direction="column" rowGap="3">
               <Link
                 as={NextLink}

src/constants/crop.ts

@@ -1,9 +1,9 @@
 const CROP = [
-  { id: 1, name: '토마토', imageUrl: '/images/crops/tomato.png' },
-  { id: 2, name: '고구마', imageUrl: '/images/crops/sweet_potato.png' },
-  { id: 3, name: '당근', imageUrl: '/images/crops/carrot.png' },
-  { id: 4, name: '완두콩', imageUrl: '/images/crops/pea.png' },
-  { id: 5, name: '벼', imageUrl: '/images/crops/rice.png' },
+  { id: 1, name: '토마토', engName: 'tomato', imageUrl: '/images/crops/tomato.png' },
+  { id: 2, name: '고구마', engName: 'sweetPotato', imageUrl: '/images/crops/sweet_potato.png' },
+  { id: 3, name: '당근', engName: 'carrot', imageUrl: '/images/crops/carrot.png' },
+  { id: 4, name: '완두콩', engName: 'pea', imageUrl: '/images/crops/pea.png' },
+  { id: 5, name: '벼', engName: 'rice', imageUrl: '/images/crops/rice.png' },
 ];
 
 export default CROP;

src/containers/study/CurriculumCard/index.tsx

@@ -6,20 +6,30 @@ import { useState } from 'react';
 import { MdOutlineArrowForwardIos } from 'react-icons/md';
 
 import { getCurriculum } from '@/app/api/study';
+import CROP from '@/constants/crop';
 import { useGetFetchWithToken } from '@/hooks/useFetchWithToken';
 import { Curriculum } from '@/types';
 
 import CurriculumItem from './CurriculumItem';
+import { CurriculumCardProps } from './types';
 import CurriculumModal from '../CurriculumModal';
 
-const CurriculumCard = () => {
+const CurriculumCard = ({ cropId, studyProgressRatio }: CurriculumCardProps) => {
   const [isStudyLeader] = useState<boolean>(true); // NOTE 추후 스터디장 여부 props로 받아올 예정
   const { studyId } = useParams<{ studyId: string }>();
 
   const curriculumItems = useGetFetchWithToken(getCurriculum, [Number(studyId)]);
 
   const { isOpen: isCurriculumModalOpen, onOpen: onActionModalOpen, onClose: onCurriculumModalClose } = useDisclosure();
 
+  const getCropImage = () => {
+    const engName = CROP.find((crop) => crop.id === cropId)?.engName;
+    const growthLevel = studyProgressRatio === 0 ? 1 : Math.ceil(studyProgressRatio / 20);
+    const cropImageURL = `/images/crops/growth/${engName}/${growthLevel}.png`;
+
+    return cropImageURL;
+  };
+
   return (
     <Flex direction="column" gap="3" w="100%">
       {isStudyLeader && (
@@ -38,7 +48,7 @@ const CurriculumCard = () => {
           borderBottomLeftRadius="2xl"
           borderBottomRightRadius="0"
           alt="curriculum card"
-          src="/images/curriculumCrops/carrot_5.png"
+          src={getCropImage()}
         />
         <Card
           direction="row"

src/containers/study/CurriculumCard/types.ts

@@ -0,0 +1,4 @@
+export interface CurriculumCardProps {
+  cropId: number;
+  studyProgressRatio: number;
+}