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

src/app/page.tsx

@@ -5,7 +5,6 @@ import LandingMid from "@component/components/landing/carousel/LandingMid";
 import ProjectList from "@component/components/landing/project/ProjectList";
 import { Suspense, useEffect, useState } from "react";
 import SignUpModal from "@component/components/signup/SignUpModal";
-import Image from "next/image";
 
 export default function Home() {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -17,33 +16,54 @@ export default function Home() {
     }
   }, []);
 
+  const [windowWidth, setWindowWidth] = useState(
+    typeof window !== "undefined" ? window.innerWidth : 0
+  );
+
+  useEffect(() => {
+    const handleResize = () => {
+      setWindowWidth(window.innerWidth);
+    };
+
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+
+      return () => {
+        window.removeEventListener("resize", handleResize);
+      };
+    }
+  }, []);
+
   return (
     // 전체 1440px
-    <main className="mx-auto w-full flex flex-col items-center">
-      {/* 랜딩 문구 */}
+    <>
       <section
-        className="w-full h-[620px] bg-purple-main4 flex justify-center"
-        style={{
-          backgroundImage: "url('/assets/main_background.png')",
-          backgroundSize: "cover",
-        }}
+        className={`absolute scale-75 ${windowWidth >= 1460 ? "fixed left-[20%] transform-1/2-1/2" : "flex justify-center items-center min-w-[1460px] max-[1920px]"}`}
       >
-        <section className="w-[1080px] scale-75 mx-auto">
-          <LandingTop />
-        </section>
+        <LandingTop />
       </section>
+      <main className="mx-auto w-full flex flex-col items-center mt-[70px]">
+        {/* 랜딩 문구 */}
+        <section
+          className="w-full max-w-[1470px] h-[620px] flex justify-center items-center"
+          style={{
+            backgroundImage: "url('/assets/main_background.png')",
+            backgroundSize: "cover",
+          }}
+        ></section>
 
-      {/* 컨테이너 너비 */}
-      <section className="max-w-[1080px] w-full mt-[100px] flex flex-col gap-[100px] mb-[100px]">
-        {/* 캐러셀 */}
-        <LandingMid />
-        <Suspense>
-          {/* 프로젝트 */}
-          <ProjectList />
-        </Suspense>
-      </section>
+        {/* 컨테이너 너비 */}
+        <section className="max-w-[1080px] w-full mt-[100px] flex flex-col gap-[100px] mb-[100px]">
+          {/* 캐러셀 */}
+          <LandingMid />
+          <Suspense>
+            {/* 프로젝트 */}
+            <ProjectList />
+          </Suspense>
+        </section>
 
-      {isOpen && <SignUpModal isOpen={isOpen} setIsOpen={setIsOpen} />}
-    </main>
+        {isOpen && <SignUpModal isOpen={isOpen} setIsOpen={setIsOpen} />}
+      </main>
+    </>
   );
 }

src/components/landing/carousel/Carousel.tsx

@@ -1,16 +1,27 @@
 "use client";
 import RecommendItem from "./RecommendItem";
-import { useEffect, useState } from "react";
-import { TagProps } from "@component/components/common-components/tag";
+import { useMemo } from "react";
 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 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
@@ -38,29 +49,34 @@ 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>();
 
-  useEffect(() => {
-    if (data) {
-        setRecommendData(data.data.data)
-    }
+  const recommendData: RecommendData[] = useMemo(() => {
+    return data?.data.data ?? [];
   }, [data]);
 
-  if (error) {
-    console.log(error);
+  if (isLoading || error) {
+    return (
+      <Slider {...settings} className="mt-[32.5px]">
+        {[...Array(3)].map((_, index) => (
+          <div>
+            <div className="w-[344px] h-[340px] rounded-[10px] border border-[1.5px] border-purple-main1 bg-purple-main5 flex justify-center items-center"></div>
+          </div>
+        ))}
+      </Slider>
+    );
   }
   return (
     <>
       <Slider {...settings} className="mt-[32.5px]">
-        {recommendData?.map((item: any) => (
+        {recommendData?.map((item: RecommendData) => (
           <RecommendItem
             key={item.projectId}
             projectId={item.projectId}
@@ -71,7 +87,6 @@ const Carousel = () => {
             profileImg={item.profileImageUrl}
             nickname={item.createdBy}
             createdAt={item.createdAt}
-            isLoading={isLoading}
           />
         ))}
       </Slider>

src/components/landing/carousel/LandingTop.tsx

@@ -40,7 +40,7 @@ const LandingTop = () => {
       <div className="text-title mt-[32px] text-white">
         여러 분야의 서비스 유저로부터 유의미한 피드백을 받을 수 있어요.
       </div>
-      <Button size="lg" className="mt-[100px] min-w-[246px]" onClick={onClickProject}>
+      <Button size="lg" className="mt-[100px] min-w-[246px] text-h1" onClick={onClickProject}>
         프로젝트 등록하기
       </Button>
       <Toaster />

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;