🤖 Refactor(#117): type 지정 및 불필요한 로직 제거

dnd-side-project · Jun 10, 2024 · f18e4c6 · f18e4c6
1 parent bf413db
commit f18e4c6
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 43 deletions.
diff --git a/src/components/landing/carousel/Carousel.tsx b/src/components/landing/carousel/Carousel.tsx
@@ -1,7 +1,6 @@
 "use client";
 import RecommendItem from "./RecommendItem";
 import { useEffect, useState } from "react";
-import { TagProps } from "@component/components/common-components/tag";
 import Slider from "react-slick";
 import "slick-carousel/slick/slick.css";
 import "slick-carousel/slick/slick-theme.css";
@@ -11,6 +10,17 @@ import { useGetProjectRecommend } from "@component/hooks/useProject";
 import ArrowBackIosNewRoundedIcon from "@mui/icons-material/ArrowBackIosNewRounded";
 import ArrowForwardIosRoundedIcon from "@mui/icons-material/ArrowForwardIosRounded";
 
+export interface RecommendData {
+  createdAt: string;
+  createdBy: string;
+  field: string;
+  profileImageUrl: string;
+  progress: string;
+  projectId: number;
+  summary: string;
+  title: string;
+}
+
 const PrevArrow = ({ onClick }: any) => {
   return (
     <ArrowBackIosNewRoundedIcon
@@ -38,25 +48,29 @@ const settings = {
   slidesToShow: 3, // 화면에 한 번에 표시할 슬라이드 개수 설정
   slidesToScroll: 3, // 다음 보여 줄 슬라이드의 개수 설정
   speed: 2000, // 화면을 넘길 때 속도
-  autoplay: false, // TODO: 자동 넘김 논의
+  autoplay: false,
   autoplaySpeed: 5000, // 간격
   nextArrow: <NextArrow />,
   prevArrow: <PrevArrow />,
 };
 
 const Carousel = () => {
   const { data, error, isLoading } = useGetProjectRecommend();
-  const [recommendData, setRecommendData] = useState<any>();
+  const [recommendData, setRecommendData] = useState<RecommendData[]>();
 
   useEffect(() => {
     if (data) {
-        setRecommendData(data.data.data)
+      setRecommendData(data.data.data);
     }
   }, [data]);
 
   if (error) {
     console.log(error);
   }
+  if (isLoading) {
+    console.log('로딩 중~~')
+    return <div>로딩중 입니다.</div>
+  }
   return (
     <>
       <Slider {...settings} className="mt-[32.5px]">
@@ -71,7 +85,6 @@ const Carousel = () => {
             profileImg={item.profileImageUrl}
             nickname={item.createdBy}
             createdAt={item.createdAt}
-            isLoading={isLoading}
           />
         ))}
       </Slider>

diff --git a/src/components/landing/carousel/RecommendItem.tsx b/src/components/landing/carousel/RecommendItem.tsx
@@ -1,45 +1,61 @@
 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";
 
-const RecommendItem = ({
-    projectId,
-    fields,
-    progress,
-    title,
-    content,
-    profileImg,
-    nickname,
-    createdAt,
-    isLoading
-}: any) => {
-    const router = useRouter();
-    return (
-        <>
-            {isLoading ? (
-                <div className="w-[344px] h-[340px] rounded-[10px] border border-[1.5px] border-purple-main1 bg-purple-main5 flex justify-center items-center cursor-pointer">
-                </div>
-            ) : (
-                <div 
-                    className="w-[344px] h-[340px] rounded-[10px] border border-[1.5px] border-purple-main1 bg-purple-main5 flex justify-center items-center cursor-pointer"
-                    onClick={() => {
-                        router.push(`/project/${projectId}`)
-                    }}
-                >
-                    <div className="w-[261px] h-[296.93px] relative">
-                        <Tag type={fields} 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="absolute bottom-0 flex items-center">
-                            <Image src={profileImg} 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}</div>
-                            <div className="text-body1 text-gray-60 font-medium">{createdAt}</div>
-                        </div>
-                    </div>
-                </div>
-            )}
-        </>
-    );
+interface RecommendItemData {
+  projectId: number;
+  fields: TagProps["type"];
+  progress: TagProps["status"];
+  title: string;
+  content: string;
+  profileImg: string;
+  nickname: string;
+  createdAt: string;
 }
 
+const RecommendItem = ({
+  projectId,
+  fields,
+  progress,
+  title,
+  content,
+  profileImg,
+  nickname,
+  createdAt,
+}: RecommendItemData) => {
+  const router = useRouter();
+  return (
+    <>
+      <div
+        className="w-[344px] h-[340px] rounded-[10px] border border-[1.5px] border-purple-main1 bg-purple-main5 flex justify-center items-center cursor-pointer"
+        onClick={() => {
+          router.push(`/project/${projectId}`);
+        }}
+      >
+        <div className="w-[261px] h-[296.93px] relative">
+          <Tag type={fields} 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="absolute bottom-0 flex items-center">
+            <Image
+              src={profileImg}
+              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}
+            </div>
+            <div className="text-body1 text-gray-60 font-medium">
+              {createdAt}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
 export default RecommendItem;