Merge pull request #97 from Nico1eKim/feat/homepage-desktop-design

Feat/homepage desktop design
P1Z7 · Feb 16, 2024 · 9dec74d · 9dec74d
2 parents d09de25 + 5612ac8
commit 9dec74d
Show file tree

Hide file tree

Showing 15 changed files with 148 additions and 104 deletions.
diff --git a/app/(route)/(bottom-nav)/page.tsx b/app/(route)/(bottom-nav)/page.tsx
@@ -11,15 +11,15 @@ const Home = () => {
       <header className="sticky left-0 top-0 z-nav h-88 w-full bg-white-black px-20 pb-16 pt-48 pc:hidden">
         <Logo />
       </header>
-      <div className="flex flex-col gap-40 pb-72">
-        <main className="flex flex-col gap-40 overflow-hidden">
+      <div className="flex flex-col gap-40 pb-72 pc:items-center pc:pb-0 pc:pt-52">
+        <main className="flex flex-col gap-40 overflow-hidden pc:w-[112rem]">
           <FavArtistEventsCarousel />
           <PopularEventsCarousel />
           <NewestEventsCarousel />
           <ArtistList />
         </main>
-        <Footer />
       </div>
+      <Footer />
     </>
   );
 };

diff --git a/app/(route)/_components/Footer.tsx b/app/(route)/_components/Footer.tsx
@@ -2,12 +2,12 @@ import React from "react";
 
 const Footer = () => {
   return (
-    <footer className="bg-white-black p-20 text-12 font-500 text-gray-500">
-      Contact : mail, sns
-      <br />
-      Copyright © p1z7 All Rights Reserved.
-      <br />
-      imsi footer
+    <footer className="mb-72 w-full bg-gray-50 pc:mb-0 pc:py-32">
+      <p className="p-20 text-12 font-500 leading-8 text-gray-500 pc:mx-auto pc:w-[104rem] pc:p-0">
+        Contact : mail, sns
+        <br />
+        Copyright © p1z7 All Rights Reserved.
+      </p>
     </footer>
   );
 };

diff --git a/app/(route)/_components/artist-list/ArtistList.tsx b/app/(route)/_components/artist-list/ArtistList.tsx
@@ -24,6 +24,7 @@ const ArtistList = () => {
     data: artistData,
     fetchNextPage,
     isFetching,
+    isLoading,
   } = useInfiniteQuery({
     initialPageParam: 1,
     queryKey: ["artist"],
@@ -37,15 +38,16 @@ const ArtistList = () => {
   });
 
   return (
-    <div className="flex flex-col gap-16 px-20">
+    <div className="flex flex-col gap-16 px-20 pc:px-40">
       <h2 className="text-20 font-700 text-gray-900">아티스트로 찾아보기</h2>
       <div className="flex flex-col items-center">
-        <div className="flex w-full max-w-[52rem] flex-col items-center">
-          <ul className="flex flex-wrap justify-center gap-20">
+        <div className="flex w-full max-w-[52rem] flex-col items-center pc:max-w-full">
+          <ul className="flex flex-wrap justify-center gap-20 pc:gap-32">
+            {isLoading && <div>로딩중</div>}
             {artistData?.pages.map((page) =>
               page.artistAndGroupList.map((artist) => (
-                <li key={artist.id} className="w-88">
-                  <ArtistCard profileImage={artist.image} onClick={() => router.push(`/search?keyword=${artist.name}`)}>
+                <li key={artist.id} className="w-88 pc:w-120">
+                  <ArtistCard profileImage={artist.image} onClick={() => router.push(`/search?keyword=${artist.name}&sort=최신순`)}>
                     {artist.name}
                   </ArtistCard>
                 </li>

diff --git a/app/(route)/_components/carousel/Carousel.tsx b/app/(route)/_components/carousel/Carousel.tsx
@@ -1,15 +1,76 @@
-import { ReactNode } from "react";
+import { useEffect, useState } from "react";
+import VerticalEventCard from "@/components/card/VerticalEventCard";
+import { Res_Get_Type } from "@/types/getResType";
+import PrevButtonIcon from "@/public/icon/arrow-left_xl.svg";
+import NextButtonIcon from "@/public/icon/arrow-right_xl.svg";
 
 interface Props {
-  title?: string;
-  children: ReactNode;
+  cards: Res_Get_Type["eventList"] | undefined;
 }
 
-const Carousel = ({ title, children }: Props) => {
+const Carousel = ({ cards }: Props) => {
+  const [slideIndex, setSlideIndex] = useState(0);
+  const [isPrevDisabled, setIsPrevDisabled] = useState(true);
+  const [isNextDisabled, setIsNextDisabled] = useState(false);
+  const [isPc, setIsPc] = useState(window.innerWidth >= 1200);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsPc(window.innerWidth >= 1200);
+    };
+
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+    };
+  }, []);
+
+  const handlePrevClick = () => {
+    if (!isPc) return;
+    if (slideIndex <= 0) return;
+    setSlideIndex((prev) => prev - 1);
+    setIsNextDisabled(false);
+    if (slideIndex - 1 === 0) {
+      setIsPrevDisabled(true);
+    }
+  };
+
+  const handleNextClick = () => {
+    if (!isPc) return;
+    if (slideIndex >= (cards?.length || 0) - 5) return;
+    setSlideIndex((prev) => prev + 1);
+    setIsPrevDisabled(false);
+    if (slideIndex + 1 === (cards?.length || 0) - 5) {
+      setIsNextDisabled(true);
+    }
+  };
+
   return (
-    <div className="flex flex-col gap-16">
-      {title && <h2 className="px-20 text-20 font-700 text-gray-900">{title}</h2>}
-      <div className="flex gap-16 overflow-auto px-20">{children}</div>
+    <div className="flex flex-col gap-16 pc:gap-24">
+      <div className="pc:flex pc:w-[112rem]">
+        <div onClick={handlePrevClick} className={`relative top-76 hidden h-100 w-[5rem] cursor-pointer pc:block ${isPrevDisabled ? "pointer-events-none opacity-50" : ""}`}>
+          <PrevButtonIcon />
+        </div>
+        <div className="flex gap-16 overflow-auto px-20 pc:gap-20 pc:overflow-hidden pc:p-0 pc:transition-transform pc:duration-1000 pc:ease-in-out">
+          {isPc
+            ? cards?.slice(slideIndex, slideIndex + 5).map((event) => (
+                <div key={event.id}>
+                  <VerticalEventCard data={event} />
+                </div>
+              ))
+            : cards?.map((event) => (
+                <div key={event.id}>
+                  <VerticalEventCard data={event} />
+                </div>
+              ))}
+        </div>
+        <div
+          onClick={handleNextClick}
+          className={`relative top-76 hidden h-100 w-[5rem] cursor-pointer pc:flex pc:justify-end ${isNextDisabled ? "pointer-events-none opacity-50" : ""}`}
+        >
+          <NextButtonIcon />
+        </div>
+      </div>
     </div>
   );
 };

diff --git a/app/(route)/_components/carousel/FavArtistEventsCarousel.tsx b/app/(route)/_components/carousel/FavArtistEventsCarousel.tsx
@@ -2,12 +2,11 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { instance } from "app/_api/api";
+import Image from "next/image";
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import VerticalEventCard from "@/components/card/VerticalEventCard";
 import { Res_Get_Type } from "@/types/getResType";
-import Hero from "@/public/icon/hero.svg";
 import Carousel from "./Carousel";
 
 const FavArtistEventsCarousel = () => {
@@ -40,27 +39,21 @@ const FavArtistEventsCarousel = () => {
     return (
       <>
         {isLoading && <div>로딩중</div>}
-        {isSuccess && (
-          <Carousel>
-            {favArtistEvent.map((event) => (
-              <div key={event.id}>
-                <VerticalEventCard data={event} />
-              </div>
-            ))}
-          </Carousel>
-        )}
+        {isSuccess && <Carousel cards={favArtistEvent} />}
       </>
     );
   };
 
   return (
-    <div className="flex flex-col gap-16">
-      <div className="flex items-center justify-between self-stretch px-20">
-        <h2 className="text-20 font-700 text-gray-900">내 아티스트의 새 행사</h2>
-        {hasFavoriteEvents && (
-          <Link href="/my-artist-event" className="text-12 font-600 text-blue">
-            전체보기
-          </Link>
+    <div className="flex flex-col gap-16 pc:gap-24">
+      <div className="flex items-center justify-between self-stretch px-20 pc:px-48">
+        {status && (
+          <>
+            <h2 className="text-20 font-700 text-gray-900">내 아티스트의 새 행사</h2>
+            <Link href="/my-artist-event" className="text-12 font-600 text-blue">
+              전체보기
+            </Link>
+          </>
         )}
       </div>
       {renderContent()}
@@ -77,11 +70,19 @@ export const NoFavCard = ({ href, buttonName }: NoFavCardProps) => {
   const router = useRouter();
 
   return (
-    <div className="w-full px-20">
-      <div className="flex-center relative h-160 overflow-hidden rounded-lg">
-        <Hero className="absolute left-1/2 top-0 -translate-x-1/2" />
-        <div className="flex-center absolute top-96 w-full flex-col gap-16">
-          <div onClick={() => router.push(href)} className="h-32 cursor-pointer rounded-full bg-gray-900 px-16 text-14 font-600 leading-loose text-white-white ">
+    <div className="w-full px-20 pc:px-40">
+      <div className="flex-center relative h-160 overflow-hidden rounded-lg border border-main-pink-50 pc:h-232">
+        <Image
+          src="/image/hero.png"
+          fill
+          sizes="100%"
+          // style={{
+          //   objectFit: "cover",
+          // }}
+          alt="배너이미지"
+        />
+        <div className="flex-center absolute top-96 w-full flex-col gap-16 pc:top-152">
+          <div onClick={() => router.push(href)} className="pc:text-18 h-32 cursor-pointer rounded-full bg-gray-900 px-16 text-14 font-600 leading-loose text-white-white pc:h-40">
             {buttonName}
           </div>
         </div>

diff --git a/app/(route)/_components/carousel/NewestEventsCarousel.tsx b/app/(route)/_components/carousel/NewestEventsCarousel.tsx
@@ -7,18 +7,10 @@ import { Res_Get_Type } from "@/types/getResType";
 import Carousel from "./Carousel";
 
 const NewestEventsCarousel = () => {
-  return (
-    <Carousel title="새로 올라온 행사">
-      <NewestEvents />
-    </Carousel>
-  );
-};
-
-const NewestEvents = () => {
   const {
     data: newestEvents,
-    isSuccess,
     isLoading,
+    isSuccess,
   } = useQuery<Res_Get_Type["eventList"]>({
     queryKey: ["event", "new"],
     queryFn: async () => {
@@ -27,18 +19,11 @@ const NewestEvents = () => {
   });
 
   return (
-    <>
+    <div className="flex flex-col gap-16 pc:gap-24">
+      <h2 className="px-20 text-20 font-700 text-gray-900 pc:px-48">새로 올라온 행사</h2>
       {isLoading && <div>로딩중</div>}
-      {isSuccess && (
-        <>
-          {newestEvents?.map((event) => (
-            <div key={event.id}>
-              <VerticalEventCard data={event} />
-            </div>
-          ))}
-        </>
-      )}
-    </>
+      {isSuccess && <Carousel cards={newestEvents} />}
+    </div>
   );
 };
 

diff --git a/app/(route)/_components/carousel/PopularEventsCarousel.tsx b/app/(route)/_components/carousel/PopularEventsCarousel.tsx
@@ -2,23 +2,14 @@
 
 import { useQuery } from "@tanstack/react-query";
 import { instance } from "app/_api/api";
-import VerticalEventCard from "@/components/card/VerticalEventCard";
 import { Res_Get_Type } from "@/types/getResType";
 import Carousel from "./Carousel";
 
 const PopularEventsCarousel = () => {
-  return (
-    <Carousel title="지금 가장 인기 있는 행사">
-      <PopularEvents />
-    </Carousel>
-  );
-};
-
-const PopularEvents = () => {
   const {
     data: popularEvents,
-    isSuccess,
     isLoading,
+    isSuccess,
   } = useQuery<Res_Get_Type["eventList"]>({
     queryKey: ["event", "popular"],
     queryFn: async () => {
@@ -27,18 +18,11 @@ const PopularEvents = () => {
   });
 
   return (
-    <>
+    <div className="flex flex-col gap-16 pc:gap-24">
+      <h2 className="px-20 text-20 font-700 text-gray-900 pc:px-48">지금 가장 인기 있는 행사</h2>
       {isLoading && <div>로딩중</div>}
-      {isSuccess && (
-        <>
-          {popularEvents?.map((event) => (
-            <div key={event.id}>
-              <VerticalEventCard data={event} />
-            </div>
-          ))}
-        </>
-      )}
-    </>
+      {isSuccess && <Carousel cards={popularEvents} />}
+    </div>
   );
 };
 

diff --git a/app/_components/ArtistCard.tsx b/app/_components/ArtistCard.tsx
@@ -10,8 +10,8 @@ interface Props {
 
 const ArtistCard = ({ children, onClick, profileImage, isChecked = false, isSmall = false }: Props) => {
   return (
-    <div className="flex-center h-fit w-fit flex-col gap-8 rounded-sm hover:cursor-pointer" onClick={onClick}>
-      <div className="relative h-88 w-88">
+    <div className="flex-center h-fit w-fit flex-col gap-8 rounded-sm hover:cursor-pointer pc:gap-4" onClick={onClick}>
+      <div className="relative h-88 w-88 pc:h-120 pc:w-120">
         <Image
           src={profileImage ? profileImage : "/image/no-profile.png"}
           alt="아티스트 이미지"
@@ -20,7 +20,7 @@ const ArtistCard = ({ children, onClick, profileImage, isChecked = false, isSmal
           className={`rounded-full object-cover ${isChecked ? "border-2 border-main-pink-500" : "border border-gray-100"}`}
         />
       </div>
-      <p className={`w-88 break-all text-center ${isSmall ? "h-20 text-14 font-600 text-gray-700" : "text-16 font-600 text-gray-900"}`}>{children}</p>
+      <p className={`pc:text-18 w-88 break-all text-center font-600 ${isSmall ? "h-20 text-14 text-gray-700" : "text-16 text-gray-900"}`}>{children}</p>
     </div>
   );
 };

diff --git a/app/_components/card/VerticalEventCard.tsx b/app/_components/card/VerticalEventCard.tsx
@@ -23,15 +23,15 @@ const VerticalEventCard = ({ data }: Props) => {
   };
 
   return (
-    <Link href={`/event/${data.id}`} className="border-black flex w-148 cursor-pointer flex-col gap-12">
-      <div className="relative h-196 w-148">
-        <div className="z-heart absolute right-8 top-8">
+    <Link href={`/event/${data.id}`} className="flex w-148 cursor-pointer flex-col gap-12 pc:w-188">
+      <div className="relative h-196 w-148 pc:h-244 pc:w-188">
+        <div className="absolute right-8 top-8 z-heart">
           <HeartButton isSelected={!!data.likeCount} onClick={handleHeartClick} />
         </div>
         <Image
           src={bannerImage?.imageUrl ?? "/image/no-profile.png"}
           fill
-          sizes="14.8rem"
+          sizes="100%"
           style={{
             objectFit: "cover",
           }}
@@ -40,9 +40,9 @@ const VerticalEventCard = ({ data }: Props) => {
           priority
         />
       </div>
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 pc:gap-8">
         <p className="truncate text-16 font-600 text-gray-900">{data.placeName}</p>
-        <div className="flex gap-8 text-12 font-600 text-gray-400">
+        <div className="flex gap-8 text-12 font-600 text-gray-400 pc:text-16 pc:font-500">
           <p className="border-r border-gray-400 pr-8">{formattedDate}</p>
           <p>{formattedAddress}</p>
         </div>

diff --git a/public/icon/MainHero.svg b/public/icon/MainHero.svg
diff --git a/public/icon/arrow-left_xl.svg b/public/icon/arrow-left_xl.svg
diff --git a/public/icon/arrow-right_xl.svg b/public/icon/arrow-right_xl.svg
diff --git a/public/icon/back-arrow_black.svg b/public/icon/back-arrow_black.svg
diff --git a/public/image/hero.png b/public/image/hero.png