Merge pull request #41 from Nico1eKim/feat/common-components

✨ feat: gnb, top app bar, bottom app bar, 세로형 카드 구현

app/(route)/_components/carousel/FavArtistEventsCarousel.tsx

@@ -6,15 +6,6 @@ import Carousel from "@/components/Carousel";
 import { EventMockData } from "@/components/card/EventMockData";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
 
-const DATA = {
-  placeName: "카페",
-  artistName: "아티스트",
-  eventType: "생일 카페",
-  address: "주소",
-  startDate: "날짜",
-  endDate: "날짜",
-};
-
 const FavArtistEventsCarousel = () => {
   // 추후 next auth로 변경 예정
   const [status, setStatus] = useState(true);
@@ -24,27 +15,33 @@ const FavArtistEventsCarousel = () => {
   const hasFavoriteEvents = EventMockData.length > 0;
   // const hasFavoriteEvents = false;
 
+  const renderContent = () => {
+    if (!status) {
+      return <NoFavCard buttonName="로그인 하기" href={"/signin"} />;
+    }
+
+    if (!hasFavoriteEvents) {
+      <NoFavCard buttonName="아티스트 둘러보기" href={"/setting/artist"} />;
+    }
+
+    return (
+      <Carousel customSettings={{ dots: true, infinite: false }}>
+        {EventMockData.map((event, index) => (
+          <div key={index}>
+            <VerticalEventCard data={event} />
+          </div>
+        ))}
+      </Carousel>
+    );
+  };
+
   return (
     <>
       <div className="flex justify-between">
         <h2>좋아요한 아티스트의 새 행사</h2>
         <Link href="/my-artist-event">전체보기</Link>
       </div>
-      {status ? (
-        hasFavoriteEvents ? (
-          <Carousel customSettings={{ dots: true, infinite: false }}>
-            <VerticalEventCard data={DATA} />
-            <VerticalEventCard data={DATA} />
-            <VerticalEventCard data={DATA} />
-            <VerticalEventCard data={DATA} />
-            <VerticalEventCard data={DATA} />
-          </Carousel>
-        ) : (
-          <NoFavCard buttonName="아티스트 둘러보기" href={"/setting/artist"} />
-        )
-      ) : (
-        <NoFavCard buttonName="로그인 하기" href={"/signin"} />
-      )}
+      {renderContent()}
     </>
   );
 };
@@ -57,7 +54,7 @@ interface NoFavCardProps {
 const NoFavCard = ({ href, buttonName }: NoFavCardProps) => {
   return (
     <div className="flex h-148 w-320 items-center justify-center bg-[#EFEFEF]">
-      <Link href={href} className="block h-32 w-120 rounded-[4px] bg-[#676767] text-center text-14 leading-[32px] text-white">
+      <Link href={href} className="text-white block h-32 w-120 rounded-[4px] bg-[#676767] text-center text-14 leading-[32px]">
         {buttonName}
       </Link>
     </div>

app/(route)/event/[id]/_components/BottomDoubleButton.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import Button from "@/components/button";
+
+interface Props {
+  onClickLeft: () => void;
+  onClickRight: () => void;
+}
+
+const BottomDoubleButton = ({ onClickLeft, onClickRight }: Props) => {
+  return (
+    <div className="fixed bottom-0 left-0 z-popup flex w-360 gap-8 border-t border-gray-50 bg-white-black px-20 pb-24 pt-12">
+      <div className="w-156">
+        {/* 추후 회색으로 변경 예정 */}
+        <Button size="xl" type="lined" onClick={onClickLeft}>
+          거절하기
+        </Button>
+      </div>
+      <div className="w-156">
+        <Button size="xl" type="lined" onClick={onClickRight}>
+          승인하기
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default BottomDoubleButton;

app/(route)/event/[id]/_components/Header.tsx

@@ -1,20 +1,43 @@
 "use client";
 
+import { usePathname, useRouter } from "next/navigation";
 import BottomSheetFrame from "@/components/bottom-sheet/BottomSheetFrame";
 import { useBottomSheet } from "@/hooks/useBottomSheet";
+import ArrowLeft from "@/public/icon/arrow-left_lg.svg";
+import KebabButton from "@/public/icon/kebab.svg";
 
-const Header = () => {
+interface Props {
+  params: { id: number };
+}
+
+const Header = ({ params }: Props) => {
   const { bottomSheet, openBottomSheet, closeBottomSheet } = useBottomSheet();
 
   const openKebeb = () => {
     openBottomSheet("event-kebab");
   };
 
+  const router = useRouter();
+  const pathname = usePathname();
+
+  let title = "카페 이름"; // 기본값
+
+  if (pathname === `/event/${params.id}`) {
+    title = "카페 이름"; // 추후 id에 따른 카페 이름으로 변경
+  } else if (pathname === `/event/${params.id}/post`) {
+    title = "후기 작성하기";
+  } else if (pathname === `/event/${params.id}/edit`) {
+    title = "수정 등록하기";
+  } else if (pathname === `/event/${params.id}/approve`) {
+    title = "수정 승인하기";
+  }
+
   return (
     <>
-      <header className="flex items-center justify-between">
-        <span>파이키</span>
-        <button onClick={openKebeb}>케밥 버튼</button>
+      <header className="fixed left-0 top-0 z-nav flex h-72 w-360 gap-16 border-b border-gray-50 bg-white-white px-20 pb-12 pt-36">
+        <ArrowLeft onClick={() => router.back()} className="cursor-pointer" />
+        <h1 className="w-240 text-center text-16 font-500 text-gray-900">{title}</h1>
+        {pathname === `/event/${params.id}` && <KebabButton onClick={openKebeb} className="cursor-pointer" />}
       </header>
       {bottomSheet === "event-kebab" && (
         <BottomSheetFrame closeBottomSheet={closeBottomSheet}>

app/(route)/event/[id]/_components/tabs/ReviewTab.tsx

@@ -1,5 +1,5 @@
+import BottomButton from "@/components/button/BottomButton";
 import Review from "../../../../../_components/Review";
-import ReviewButton from "../ReviewButton";
 
 const REVIEWS = [
   {
@@ -37,7 +37,7 @@ const REVIEWS = [
 const ReviewTab = () => {
   return (
     <div className="h-400 w-full">
-      <ReviewButton />
+      <BottomButton>후기 작성하기</BottomButton>
       <ul className="w-full">
         {REVIEWS.map((data, index) => (
           <li key={index}>

app/(route)/event/[id]/edit/_components/EditContent.tsx

@@ -5,6 +5,7 @@ import SubInput from "@/(route)/post/_components/_inputs/SubInput";
 import { PostType } from "@/(route)/post/page";
 import classNames from "classnames";
 import { useFormContext } from "react-hook-form";
+import BottomButton from "@/components/button/BottomButton";
 import TextModal from "@/components/modal/TextModal";
 import { useModal } from "@/hooks/useModal";
 import { useStore } from "@/store/index";
@@ -71,9 +72,9 @@ const EditContent = () => {
       <StarInput />
       <SubInput />
       <DetailInput />
-      <button disabled={!isValid} className={classNames("w-full bg-gray-200 p-16", { "bg-yellow-200": isValid })} onClick={() => openModal("endEdit")}>
-        수정 요청
-      </button>
+      <BottomButton isDisabled={!isValid} onClick={() => openModal("endEdit")}>
+        수정사항 등록
+      </BottomButton>
       {modal === "endEdit" && (
         <TextModal title="텍스트 모달 타이틀" btnText="오케이" textareaId="text" closeModal={closeModal} {...{ control: control, placeholder: "텍스트 모달입니다." }} />
       )}

app/(route)/event/[id]/layout.tsx

@@ -0,0 +1,17 @@
+import { ReactElement } from "react";
+import Header from "./_components/Header";
+
+interface Props {
+  children: ReactElement;
+  params: { id: number };
+}
+
+const SettingLayout = ({ children, params }: Props) => {
+  return (
+    <>
+      <Header params={params} />
+      {children}
+    </>
+  );
+};
+export default SettingLayout;

app/(route)/event/[id]/page.tsx

@@ -1,14 +1,12 @@
 import Tabs from "@/components/Tabs";
 import Banner from "./_components/Banner";
-import Header from "./_components/Header";
 import DescriptionTab from "./_components/tabs/DescriptionTab";
 import LocationTab from "./_components/tabs/LocationTab";
 import ReviewTab from "./_components/tabs/ReviewTab";
 
 const EventInfoPage = () => {
   return (
     <>
-      <Header />
       <Banner />
       <Tabs names={["행사정보", "위치", "후기"]}>
         <DescriptionTab />

app/(route)/mypage/_components/EventCalendar.tsx

@@ -12,6 +12,7 @@ interface ScheduleData {
   address: string;
   startDate: string;
   endDate: string;
+  eventImage: string;
 }
 
 const mockData: ScheduleData[] = [
@@ -22,6 +23,7 @@ const mockData: ScheduleData[] = [
     address: "마포구",
     startDate: "2024-01-25T00:00:00",
     endDate: "2024-02-01T00:00:00",
+    eventImage: "",
   },
 
   {
@@ -31,6 +33,7 @@ const mockData: ScheduleData[] = [
     address: "마포구",
     startDate: "2024-01-28T00:00:00",
     endDate: "2024-01-31T00:00:00",
+    eventImage: "",
   },
   {
     placeName: "김민지 카페",
@@ -39,6 +42,7 @@ const mockData: ScheduleData[] = [
     address: "마포구",
     startDate: "2024-01-26T00:00:00",
     endDate: "2024-01-28T00:00:00",
+    eventImage: "",
   },
 ];
 

app/(route)/page.tsx

@@ -1,5 +1,5 @@
 import ArtistList from "@/components/artist-list/ArtistList";
-import BottomNav from "./_components/BottomNav";
+import BottomNav from "../_components/BottomNav";
 import FavArtistEventsCarousel from "./_components/carousel/FavArtistEventsCarousel";
 import NewestEventsCarousel from "./_components/carousel/NewestEventsCarousel";
 import PopularEventsCarousel from "./_components/carousel/PopularEventsCarousel";

app/(route)/post/_components/DetailInfo.tsx

@@ -1,5 +1,6 @@
 import { useFormContext } from "react-hook-form";
 import ProgressBar from "@/components/ProgressBar";
+import BottomButton from "@/components/button/BottomButton";
 import { useStore } from "@/store/index";
 import { PostType } from "../page";
 import FunnelTitle from "./FunnelTitle";
@@ -15,7 +16,8 @@ const DetailInfo = () => {
       <ProgressBar ratio="full" />
       <FunnelTitle step="상세 설명" />
       <DetailInput />
-      <PostFooter isDisabled={!isCheck || getValues("detailText").length > 100} />
+      {/* <PostFooter isDisabled={!isCheck || getValues("detailText").length > 100} /> */}
+      <BottomButton isDisabled={!isCheck || getValues("detailText").length > 100}>작성 완료</BottomButton>
     </div>
   );
 };

app/(route)/post/_components/MainInfo.tsx

@@ -3,6 +3,7 @@
 import "react-day-picker/dist/style.css";
 import { useFormContext } from "react-hook-form";
 import ProgressBar from "@/components/ProgressBar";
+import BottomButton from "@/components/button/BottomButton";
 import { PostType } from "../page";
 import FunnelTitle from "./FunnelTitle";
 import PostFooter from "./PostFooter";
@@ -26,7 +27,10 @@ const MainInfo = ({ onNextStep }: Props) => {
       <ProgressBar ratio="1/2" />
       <FunnelTitle step="행사 정보" isRequired />
       <MainInput />
-      <PostFooter onNextStep={onNextStep} isDisabled={isDisabled} />
+      {/* <PostFooter onNextStep={onNextStep} isDisabled={isDisabled} /> */}
+      <BottomButton onClick={onNextStep} isDisabled={isDisabled}>
+        다음으로
+      </BottomButton>
     </div>
   );
 };

app/(route)/post/_components/StarInfo.tsx

@@ -1,4 +1,5 @@
 import ProgressBar from "@/components/ProgressBar";
+import BottomButton from "@/components/button/BottomButton";
 import FunnelTitle from "./FunnelTitle";
 import PostFooter from "./PostFooter";
 import StarInput from "./_inputs/StarInput";
@@ -13,7 +14,8 @@ const StarInfo = ({ onNextStep }: Props) => {
       <ProgressBar ratio="1/4" />
       <FunnelTitle step="행사 대상" isRequired />
       <StarInput />
-      <PostFooter onNextStep={onNextStep} />
+      {/* <PostFooter onNextStep={onNextStep} /> */}
+      <BottomButton onClick={onNextStep}>다음으로</BottomButton>
     </div>
   );
 };

app/(route)/post/_components/SubInfo.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import ProgressBar from "@/components/ProgressBar";
+import BottomButton from "@/components/button/BottomButton";
 import FunnelTitle from "./FunnelTitle";
 import PostFooter from "./PostFooter";
 import SubInput from "./_inputs/SubInput";
@@ -15,7 +16,8 @@ const SubInfo = ({ onNextStep }: Props) => {
       <ProgressBar ratio="3/4" />
       <FunnelTitle step="특전 정보" />
       <SubInput />
-      <PostFooter onNextStep={onNextStep} />
+      {/* <PostFooter onNextStep={onNextStep} /> */}
+      <BottomButton onClick={onNextStep}>다음으로</BottomButton>
     </div>
   );
 };

app/(route)/search/page.tsx

@@ -19,6 +19,7 @@ const MOCK_EVENTS = [
     endDate: "2024-01-30",
     address: "중구",
     gifts: ["포토카드", "엽서"],
+    eventImage: "https://thumb.mtstarnews.com/06/2023/09/2023090715013844673_1.jpg/dims/optimize",
   },
   {
     placeName: "강남역",
@@ -28,6 +29,7 @@ const MOCK_EVENTS = [
     endDate: "2024-01-30",
     address: "강남구",
     gifts: ["포토카드", "엽서"],
+    eventImage: "https://thumb.mtstarnews.com/06/2023/09/2023090715013844673_1.jpg/dims/optimize",
   },
 ];