🤖 Refactor(#117): seperate recommendItem type

dnd-side-project · Jun 18, 2024 · 5c74515 · 5c74515
1 parent b0edad6
commit 5c74515
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 39 deletions.
diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx
@@ -5,23 +5,12 @@ import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
 import { useGetProjectRecommend } from "@component/hooks/useProject";
-import { TagProps } from "@component/components/common-components/tag";
+import { RecommendDataType } from "./Carousel.types";
 
 // 캐러셀 화살표
 import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded";
 import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded";
 
-export interface RecommendData {
-  createdAt: string;
-  createdBy: string;
-  field: TagProps["type"];
-  profileImageUrl: string;
-  progress: TagProps["status"];
-  projectId: number;
-  summary: string;
-  title: string;
-}
-
 const PrevArrow = ({ onClick }: any) => {
   return (
     <ArrowBackIosNewRoundedIcon
@@ -58,7 +47,7 @@ const settings = {
 const Carousel = () => {
   const { data, error, isLoading } = useGetProjectRecommend();
 
-  const recommendData: RecommendData[] = useMemo(() => {
+  const recommendData: RecommendDataType[] = useMemo(() => {
     return data?.data.data ?? [];
   }, [data]);
 
@@ -76,16 +65,16 @@ const Carousel = () => {
   return (
     <>
       <Slider {...settings} className="mt-[32.5px]">
-        {recommendData?.map((item: RecommendData) => (
+        {recommendData?.map((item: RecommendDataType) => (
           <RecommendItem
             key={item.projectId}
             projectId={item.projectId}
-            fields={item.field}
+            field={item.field}
             progress={item.progress}
             title={item.title}
-            content={item.summary}
-            profileImg={item.profileImageUrl}
-            nickname={item.createdBy}
+            summary={item.summary}
+            profileImageUrl={item.profileImageUrl}
+            createdBy={item.createdBy}
             createdAt={item.createdAt}
           />
         ))}

diff --git a/src/components/landing/carousel/Carousel.types.ts b/src/components/landing/carousel/Carousel.types.ts
@@ -0,0 +1,13 @@
+import { TagProps } from "@component/components/common-components/tag";
+
+export type RecommendDataType = {
+  createdAt: string;
+  createdBy: string;
+  field: TagProps["type"];
+  profileImageUrl: string;
+  progress: TagProps["status"];
+  projectId: number;
+  summary: string;
+  title: string;
+}
+
diff --git a/src/components/landing/carousel/RecommendItem.tsx b/src/components/landing/carousel/RecommendItem.tsx
@@ -1,29 +1,18 @@
 import Image from "next/image";
 import Tag from "@component/components/common-components/tag/Tag";
 import { useRouter } from "next/navigation";
-import { TagProps } from "@component/components/common-components/tag";
-
-interface RecommendItemData {
-  projectId: number;
-  fields: TagProps["type"];
-  progress: TagProps["status"];
-  title: string;
-  content: string;
-  profileImg: string;
-  nickname: string;
-  createdAt: string;
-}
+import { RecommendDataType } from "./Carousel.types";
 
 const RecommendItem = ({
   projectId,
-  fields,
+  field,
   progress,
   title,
-  content,
-  profileImg,
-  nickname,
+  summary,
+  profileImageUrl,
+  createdBy,
   createdAt,
-}: RecommendItemData) => {
+}: RecommendDataType) => {
   const router = useRouter();
   return (
     <>
@@ -34,19 +23,19 @@ const RecommendItem = ({
         }}
       >
         <div className="w-[261px] h-[296.93px] relative">
-          <Tag type={fields} status={progress} />
+          <Tag type={field} status={progress} />
           <div className="text-title mt-[12px] mb-[24px]">{title}</div>
-          <div className="text-body1 text-gray-60 font-medium">{content}</div>
+          <div className="text-body1 text-gray-60 font-medium">{summary}</div>
           <div className="absolute bottom-0 flex items-center">
             <Image
-              src={profileImg}
+              src={profileImageUrl}
               alt="임시 프로필 이미지"
               width={20}
               height={20}
               className="w-[20px] h-[20px] rounded-full me-[10px]"
             />
             <div className="text-body1 text-gray-60 me-[24px] font-medium">
-              {nickname}
+              {createdBy}
             </div>
             <div className="text-body1 text-gray-60 font-medium">
               {createdAt}