Merge pull request #73 from Nico1eKim/feat/overall-design-fix

💄 design: 디자인 수정 반영
P1Z7 · Feb 7, 2024 · 1ab04fb · 1ab04fb
2 parents 6b74cc8 + 43e2c30
commit 1ab04fb
Show file tree

Hide file tree

Showing 13 changed files with 54 additions and 127 deletions.
diff --git a/app/(route)/(bottom-nav)/page.tsx b/app/(route)/(bottom-nav)/page.tsx
@@ -11,7 +11,7 @@ const Home = () => {
       <header className="fixed left-0 top-0 z-nav h-88 w-full bg-white-black px-20 pb-16 pt-48">
         <Logo />
       </header>
-      <main className="flex flex-col gap-40 overflow-hidden px-20">
+      <main className="flex flex-col gap-40 overflow-hidden">
         <FavArtistEventsCarousel />
         <PopularEventsCarousel />
         <NewestEventsCarousel />

diff --git a/app/(route)/(header)/my-artist-event/page.tsx b/app/(route)/(header)/my-artist-event/page.tsx
@@ -3,7 +3,7 @@ import MyArtistEvent from "./_components/MyArtistEvent";
 
 const MyArtistEventPage = () => {
   return (
-    <div className="flex flex-col items-center px-20 pb-88 pt-16">
+    <div className="flex flex-col px-20 pb-88 pt-16">
       <MyArtistEvent />
     </div>
   );

diff --git a/app/(route)/_components/artist-list/ArtistList.tsx b/app/(route)/_components/artist-list/ArtistList.tsx
@@ -26,7 +26,7 @@ const ArtistList = () => {
   };
 
   return (
-    <div className="flex flex-col gap-16">
+    <div className="flex flex-col gap-16 px-20">
       <h2 className="text-20 font-700 text-gray-900">아티스트로 찾아보기</h2>
       <InfiniteScroll
         pageStart={0}
@@ -37,15 +37,17 @@ const ArtistList = () => {
             Loading ...
           </div>
         }
-        className="w-320"
+        className="flex flex-col items-center"
       >
-        <ul className="grid w-320 grid-cols-3 gap-12 px-8">
-          {artists.map((artist, index) => (
-            <li key={index}>
-              <ArtistCard profileImage={artist.profileImage}>{artist.name}</ArtistCard>
-            </li>
-          ))}
-        </ul>
+        <div className="flex w-full max-w-[52rem] flex-col items-center">
+          <ul className="flex flex-wrap justify-center gap-20">
+            {artists.map((artist, index) => (
+              <li key={index}>
+                <ArtistCard profileImage={artist.profileImage}>{artist.name}</ArtistCard>
+              </li>
+            ))}
+          </ul>
+        </div>
       </InfiniteScroll>
     </div>
   );

diff --git a/app/(route)/_components/carousel/Carousel.tsx b/app/(route)/_components/carousel/Carousel.tsx
@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+interface Props {
+  title?: string;
+  children: ReactNode;
+}
+
+const Carousel = ({ title, children }: Props) => {
+  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>
+  );
+};
+
+export default Carousel;
diff --git a/app/(route)/_components/carousel/FavArtistEventsCarousel.tsx b/app/(route)/_components/carousel/FavArtistEventsCarousel.tsx
@@ -3,10 +3,10 @@
 import Link from "next/link";
 import { useRouter } from "next/navigation";
 import { useState } from "react";
-import Carousel from "@/components/Carousel";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
 import { MOCK_EVENTS } from "@/constants/mock";
 import Hero from "@/public/icon/hero.svg";
+import Carousel from "./Carousel";
 
 const FavArtistEventsCarousel = () => {
   // 추후 next auth로 변경 예정
@@ -26,7 +26,7 @@ const FavArtistEventsCarousel = () => {
     }
 
     return (
-      <Carousel customSettings={{ infinite: false }}>
+      <Carousel>
         {MOCK_EVENTS.map((event, index) => (
           <div key={index}>
             <VerticalEventCard data={event} />
@@ -38,7 +38,7 @@ const FavArtistEventsCarousel = () => {
 
   return (
     <div className="flex flex-col gap-16">
-      <div className="flex items-center justify-between self-stretch">
+      <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">
@@ -60,11 +60,13 @@ const NoFavCard = ({ href, buttonName }: NoFavCardProps) => {
   const router = useRouter();
 
   return (
-    <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 ">
-          {buttonName}
+    <div className="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 ">
+            {buttonName}
+          </div>
         </div>
       </div>
     </div>

diff --git a/app/(route)/_components/carousel/NewestEventsCarousel.tsx b/app/(route)/_components/carousel/NewestEventsCarousel.tsx
@@ -1,10 +1,10 @@
-import Carousel from "@/components/Carousel";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
 import { MOCK_EVENTS } from "@/constants/mock";
+import Carousel from "./Carousel";
 
 const NewestEventsCarousel = () => {
   return (
-    <Carousel title="새로 올라온 행사" customSettings={{ autoplay: true }}>
+    <Carousel title="새로 올라온 행사">
       <NewestEvents />
     </Carousel>
   );

diff --git a/app/(route)/_components/carousel/PopularEventsCarousel.tsx b/app/(route)/_components/carousel/PopularEventsCarousel.tsx
@@ -1,10 +1,10 @@
-import Carousel from "@/components/Carousel";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
 import { MOCK_EVENTS } from "@/constants/mock";
+import Carousel from "./Carousel";
 
 const PopularEventsCarousel = () => {
   return (
-    <Carousel title="지금 가장 인기 있는 행사" customSettings={{ autoplay: true }}>
+    <Carousel title="지금 가장 인기 있는 행사">
       <PopularEvents />
     </Carousel>
   );

diff --git a/app/_components/BottomNav.tsx b/app/_components/BottomNav.tsx
@@ -29,7 +29,7 @@ const BottomNav = () => {
   ];
 
   return (
-    <nav className="flex-center shadow-top fixed bottom-0 left-0 z-nav h-72 w-full gap-28 border-t border-gray-50 bg-white-black py-8">
+    <nav className="fixed bottom-0 left-0 z-nav flex h-72 w-full items-center justify-evenly gap-28 border-t border-gray-50 bg-white-black py-8 shadow-top">
       {navButtons.map((item, index) => (
         <NavButton key={index} href={item.href} icon={item.icon} label={item.label} isActive={pathname === item.href} />
       ))}
@@ -50,7 +50,7 @@ const NavButton = ({ href, icon, label, isActive }: NavItemProps) => {
   });
 
   return (
-    <Link href={href} className={`flex w-60 flex-col items-center gap-8`}>
+    <Link href={href} className={"flex w-60 flex-col items-center gap-8"}>
       {clonedIcon}
       <p className={`${isActive ? "text-main-pink-500" : "text-gray-700"} text-12`}>{label}</p>
     </Link>

diff --git a/app/_components/Carousel.tsx b/app/_components/Carousel.tsx
diff --git a/app/_components/Header.tsx b/app/_components/Header.tsx
@@ -1,6 +1,5 @@
 "use client";
 
-import classNames from "classnames";
 import { useParams, usePathname, useRouter } from "next/navigation";
 import BottomSheet from "@/components/bottom-sheet/BottomSheetMaterial";
 import { useBottomSheet } from "@/hooks/useBottomSheet";

diff --git a/app/_hooks/useHeaderTitle.tsx b/app/_hooks/useHeaderTitle.tsx
@@ -16,7 +16,7 @@ const useHeaderTitle = () => {
       title = "팔로우 아티스트 수정";
       break;
     case "/my-artist-event":
-      title = "내 아티스트의 새 행사";
+      title = "내 아티스트의 행사";
       break;
     case "/signup":
       title = "회원가입";

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -14,7 +14,6 @@
     "@tanstack/react-query-devtools": "^5.17.19",
     "@tanstack/react-query-next-experimental": "^5.17.19",
     "@types/classnames": "^2.3.1",
-    "@types/react-slick": "^0.23.13",
     "classnames": "^2.5.1",
     "date-fns": "^3.3.1",
     "next": "14.1.0",
@@ -27,8 +26,6 @@
     "react-hook-form": "^7.49.3",
     "react-hot-toast": "^2.4.1",
     "react-infinite-scroller": "^1.2.6",
-    "react-slick": "^0.29.0",
-    "slick-carousel": "^1.8.1",
     "tailwind-scrollbar-hide": "^1.1.7",
     "zustand": "^4.5.0"
   },