Merge pull request #50 from gw-lim/fix/type

⚡️ fix: 이벤트 타입 및 mock 데이터 통일
P1Z7 · Feb 2, 2024 · bd9fbfe · bd9fbfe
2 parents 2f378b2 + e1dfeb6
commit bd9fbfe
Show file tree

Hide file tree

Showing 12 changed files with 353 additions and 261 deletions.
diff --git a/app/(route)/(bottom-nav)/mypage/_components/EventCalendar.tsx b/app/(route)/(bottom-nav)/mypage/_components/EventCalendar.tsx
@@ -4,47 +4,7 @@ import { useState } from "react";
 import Calendar from "react-calendar";
 import "react-calendar/dist/Calendar.css";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
-
-interface ScheduleData {
-  placeName: string;
-  artistName: string;
-  eventType: string;
-  address: string;
-  startDate: string;
-  endDate: string;
-  eventImage: string;
-}
-
-const mockData: ScheduleData[] = [
-  {
-    placeName: "윤정한 카페",
-    artistName: "윤정한",
-    eventType: "생일카페",
-    address: "마포구",
-    startDate: "2024-01-25T00:00:00",
-    endDate: "2024-02-01T00:00:00",
-    eventImage: "",
-  },
-
-  {
-    placeName: "김정우 카페",
-    artistName: "김정우",
-    eventType: "생일카페",
-    address: "마포구",
-    startDate: "2024-01-28T00:00:00",
-    endDate: "2024-01-31T00:00:00",
-    eventImage: "",
-  },
-  {
-    placeName: "김민지 카페",
-    artistName: "김민지",
-    eventType: "생일카페",
-    address: "마포구",
-    startDate: "2024-01-26T00:00:00",
-    endDate: "2024-01-28T00:00:00",
-    eventImage: "",
-  },
-];
+import { MOCK_EVENTS } from "@/constants/mock";
 
 const EventCalendar = () => {
   const [date, setDate] = useState<Date | null>(null);
@@ -55,7 +15,7 @@ const EventCalendar = () => {
   };
 
   const tileContent = ({ date }: { date: Date }) => {
-    const eventsForDate = mockData.filter((event) => new Date(event.startDate).getTime() <= date.getTime() && new Date(event.endDate).getTime() >= date.getTime());
+    const eventsForDate = MOCK_EVENTS.filter((event) => new Date(event.startDate).getTime() <= date.getTime() && new Date(event.endDate).getTime() >= date.getTime());
 
     // 추후 장소 이름 말고 디자인으로 수정 예정
     if (eventsForDate.length > 0) {
@@ -77,11 +37,11 @@ const EventCalendar = () => {
       <div>
         <ul>
           {/* 날짜를 선택하지 않았을 때 모든 Event를 보여줌 */}
-          {mockData
-            .filter((event) => !date || (new Date(event.startDate).getTime() <= date.getTime() && new Date(event.endDate).getTime() >= date.getTime()))
-            .map((event, index) => (
+          {MOCK_EVENTS.filter((event) => !date || (new Date(event.startDate).getTime() <= date.getTime() && new Date(event.endDate).getTime() >= date.getTime())).map(
+            (event, index) => (
               <VerticalEventCard key={index} data={event} />
-            ))}
+            ),
+          )}
         </ul>
       </div>
     </div>

diff --git a/app/(route)/(bottom-nav)/search/page.tsx b/app/(route)/(bottom-nav)/search/page.tsx
@@ -8,31 +8,9 @@ import GiftBottomSheet from "@/components/bottom-sheet/GiftsBottomSheet";
 import SmallRegionBottomSheet from "@/components/bottom-sheet/SmallRegionBottomSheet";
 import HorizontalEventCard from "@/components/card/HorizontalEventCard";
 import { useBottomSheet } from "@/hooks/useBottomSheet";
+import { MOCK_EVENTS } from "@/constants/mock";
 import { BIG_REGIONS } from "@/constants/regions";
 
-const MOCK_EVENTS = [
-  {
-    placeName: "스타벅스",
-    eventType: "카페",
-    artistName: "민지",
-    startDate: "2024-01-29",
-    endDate: "2024-01-30",
-    address: "중구",
-    gifts: ["포토카드", "엽서"],
-    eventImage: "https://thumb.mtstarnews.com/06/2023/09/2023090715013844673_1.jpg/dims/optimize",
-  },
-  {
-    placeName: "투썸플레이스",
-    eventType: "팬광고",
-    artistName: "하니",
-    startDate: "2024-01-29",
-    endDate: "2024-01-30",
-    address: "강남구",
-    gifts: ["컵홀더", "포스터", "스티커", "티켓", "포토카드", "엽서", "굿즈", "기타"],
-    eventImage: "https://thumb.mtstarnews.com/06/2023/09/2023090715013844673_1.jpg/dims/optimize",
-  },
-];
-
 interface FilterType {
   bigRegion: (typeof BIG_REGIONS)[number] | "";
   smallRegion: string;

diff --git a/app/(route)/(header)/my-artist-event/_components/MyArtistEvent.tsx b/app/(route)/(header)/my-artist-event/_components/MyArtistEvent.tsx
@@ -1,12 +1,12 @@
-import { EventMockData } from "@/components/card/EventMockData";
 import HorizontalEventCard from "@/components/card/HorizontalEventCard";
+import { MOCK_EVENTS } from "@/constants/mock";
 
 const MyArtistEvent = () => {
   // 좋아요 한 아티스트의 새 행사 로직은 추후 구현
 
   return (
     <>
-      {EventMockData.map((event, index) => (
+      {MOCK_EVENTS.map((event, index) => (
         <div key={index}>
           <HorizontalEventCard data={event} />
         </div>

diff --git a/app/(route)/_components/carousel/FavArtistEventsCarousel.tsx b/app/(route)/_components/carousel/FavArtistEventsCarousel.tsx
@@ -3,16 +3,16 @@
 import Link from "next/link";
 import { useState } from "react";
 import Carousel from "@/components/Carousel";
-import { EventMockData } from "@/components/card/EventMockData";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
+import { MOCK_EVENTS } from "@/constants/mock";
 
 const FavArtistEventsCarousel = () => {
   // 추후 next auth로 변경 예정
   const [status, setStatus] = useState(true);
 
   // 목업의 길이를 기반으로 좋아요한 이벤트의 수 확인
   // 추후 수정 예정
-  const hasFavoriteEvents = EventMockData.length > 0;
+  const hasFavoriteEvents = MOCK_EVENTS.length > 0;
   // const hasFavoriteEvents = false;
 
   const renderContent = () => {
@@ -26,7 +26,7 @@ const FavArtistEventsCarousel = () => {
 
     return (
       <Carousel customSettings={{ dots: true, infinite: false }}>
-        {EventMockData.map((event, index) => (
+        {MOCK_EVENTS.map((event, index) => (
           <div key={index}>
             <VerticalEventCard data={event} />
           </div>

diff --git a/app/(route)/_components/carousel/NewestEventsCarousel.tsx b/app/(route)/_components/carousel/NewestEventsCarousel.tsx
@@ -1,6 +1,6 @@
 import Carousel from "@/components/Carousel";
-import { EventMockData } from "@/components/card/EventMockData";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
+import { MOCK_EVENTS } from "@/constants/mock";
 
 const NewestEventsCarousel = () => {
   return (
@@ -12,7 +12,7 @@ const NewestEventsCarousel = () => {
 
 const NewestEvents = () => {
   // 추후 최신순으로 10개 잘라낼 예정
-  const newestEvents = EventMockData.slice(0, 10);
+  const newestEvents = MOCK_EVENTS.slice(0, 10);
 
   return (
     <>

diff --git a/app/(route)/_components/carousel/PopularEventsCarousel.tsx b/app/(route)/_components/carousel/PopularEventsCarousel.tsx
@@ -1,6 +1,6 @@
 import Carousel from "@/components/Carousel";
-import { EventMockData } from "@/components/card/EventMockData";
 import VerticalEventCard from "@/components/card/VerticalEventCard";
+import { MOCK_EVENTS } from "@/constants/mock";
 
 const PopularEventsCarousel = () => {
   return (
@@ -12,7 +12,7 @@ const PopularEventsCarousel = () => {
 
 const PopularEvents = () => {
   // 추후 인기순으로 10개 잘라낼 예정
-  const popularEvents = EventMockData.slice(0, 10);
+  const popularEvents = MOCK_EVENTS.slice(0, 10);
 
   return (
     <>

diff --git a/app/_components/card/EventMockData.ts b/app/_components/card/EventMockData.ts
diff --git a/app/_components/card/HorizontalEventCard.tsx b/app/_components/card/HorizontalEventCard.tsx
@@ -1,37 +1,36 @@
 import Image from "next/image";
 import HeartButton from "@/components/button/HeartButton";
 import Chip from "@/components/chip/Chip";
-import { EventCardType } from "@/types/index";
+import { formatAddress, formatDate } from "@/utils/formatString";
+import { EventInfoType } from "@/types/index";
 
 interface Props {
-  data: EventCardType;
+  data: EventInfoType;
 }
 
 const HorizontalEventCard = ({ data }: Props) => {
-  const startDate = data.startDate.split("-");
-  const endDate = data.endDate.split("-");
-
-  const formattedDate = `${startDate[1]}.${startDate[2]} ~ ${endDate[1]}.${endDate[2]}`;
+  const formattedDate = formatDate(data.startDate, data.endDate);
+  const formattedAddress = formatAddress(data.address);
 
   return (
     <div className="flex w-320 items-center gap-12 border-b border-gray-50 bg-transparent py-12">
       <div className="relative h-112 w-84 shrink-0">
-        <Image src={data.eventImage} className="rounded-[0.4rem] object-cover" fill alt="행사 포스터" />
+        <Image src={data.eventImages?.[0] || ""} className="rounded-[0.4rem] object-cover" fill alt="행사 포스터" />
       </div>
-      <div className="relative flex w-full flex-col justify-center gap-4">
+      <div className="relative flex w-224 flex-col justify-center gap-4">
         <div className="absolute right-0 top-0">
           <HeartButton isSmall />
         </div>
-        <h3 className="text-16 font-600">{data.placeName}</h3>
+        <h3 className="w-200 truncate text-16 font-600">{data.placeName}</h3>
         <div className="flex w-full gap-8">
-          <span className="text-16 font-600">{data.artistName}</span>
+          <span className="text-16 font-600">{data.artists[0]}</span>
           <Chip kind="event" label={data.eventType} />
         </div>
         <p className="h-16 text-12 font-600 text-gray-400">
           <span className="mr-8 border-r border-gray-400 pr-8">{formattedDate}</span>
-          <span>{data.address}</span>
+          <span>{formattedAddress}</span>
         </p>
-        <ul className="flex flex-wrap gap-4">{data.gifts?.map((gift) => <Chip kind="goods" label={gift} />)}</ul>
+        <ul className="flex flex-wrap gap-4">{data.tags?.map((tag) => <Chip kind="goods" label={tag} />)}</ul>
       </div>
     </div>
   );