From d10c1f6998764300daa2e4c1567dc5e78ec5d3db Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9E=84=EA=B1=B4=EC=9A=B0?= Date: Sat, 16 Mar 2024 14:46:29 +0900 Subject: [PATCH] =?UTF-8?q?=E2=9A=A1=EF=B8=8F=20fix:=20=EC=B9=A9=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../event/[eventId]/_components/Banner.tsx | 4 +- .../bottom-sheet/GiftsBottomSheet.tsx | 5 +- app/_components/card/HorizontalEventCard.tsx | 4 +- app/_components/chip/Chip.tsx | 65 ++++++------------- app/_components/chip/ChipButton.tsx | 2 +- app/_constants/data.ts | 36 ---------- app/_constants/post.ts | 53 ++++++++++++++- 7 files changed, 80 insertions(+), 89 deletions(-) delete mode 100644 app/_constants/data.ts diff --git a/app/(route)/event/[eventId]/_components/Banner.tsx b/app/(route)/event/[eventId]/_components/Banner.tsx index 5531b162..398c9ad1 100644 --- a/app/(route)/event/[eventId]/_components/Banner.tsx +++ b/app/(route)/event/[eventId]/_components/Banner.tsx @@ -14,7 +14,7 @@ import { useStore } from "@/store/index"; import { formatDate } from "@/utils/formatString"; import { Res_Get_Type } from "@/types/getResType"; import { EventCardType, EventType, TargetArtistType } from "@/types/index"; -import { TAG_ORDER } from "@/constants/data"; +import { TAG_ORDER } from "@/constants/post"; import { SnsIcon } from "@/constants/snsIcon"; import CalendarIcon from "@/public/icon/calendar.svg"; import GiftIcon from "@/public/icon/gift.svg"; @@ -114,7 +114,7 @@ const Banner = ({ data, eventId }: Props) => {
{data.eventTags - .sort((a, b) => TAG_ORDER[a.tagId].order - TAG_ORDER[b.tagId].order) + .sort((a, b) => TAG_ORDER[a.tagName] - TAG_ORDER[b.tagName]) .map((tag) => ( ))} diff --git a/app/_components/bottom-sheet/GiftsBottomSheet.tsx b/app/_components/bottom-sheet/GiftsBottomSheet.tsx index 9131059d..99198d33 100644 --- a/app/_components/bottom-sheet/GiftsBottomSheet.tsx +++ b/app/_components/bottom-sheet/GiftsBottomSheet.tsx @@ -2,6 +2,7 @@ import { useState } from "react"; import { BottomSheetBaseType, GiftType } from "@/types/index"; +import { GIFT_LIST } from "@/constants/post"; import ChipButton from "../chip/ChipButton"; import BottomSheet from "./BottomSheetMaterial"; @@ -34,7 +35,7 @@ const GiftsBottomSheet = ({ closeBottomSheet, refs, setGiftsFilter, initialGift 특전 선택
- {GIFTS.map((gift) => ( + {GIFT_LIST.map((gift) => ( handleGiftClick(gift)} selected={gifts.includes(gift)} /> ))}
@@ -45,5 +46,3 @@ const GiftsBottomSheet = ({ closeBottomSheet, refs, setGiftsFilter, initialGift }; export default GiftsBottomSheet; - -const GIFTS = ["컵/컵홀더", "포스터", "포토카드", "포토굿즈", "엽서", "스티커", "키링", "기타"] as const; diff --git a/app/_components/card/HorizontalEventCard.tsx b/app/_components/card/HorizontalEventCard.tsx index 5ba802ce..bdf384fd 100644 --- a/app/_components/card/HorizontalEventCard.tsx +++ b/app/_components/card/HorizontalEventCard.tsx @@ -6,7 +6,7 @@ import Chip from "@/components/chip/Chip"; import useLikeEvent from "@/hooks/useLikeEvent"; import { formatAddress, formatDate } from "@/utils/formatString"; import { EventCardType } from "@/types/index"; -import { TAG_ORDER } from "@/constants/data"; +import { TAG_ORDER } from "@/constants/post"; import NoImage from "@/public/image/no-profile.png"; interface Props { @@ -67,7 +67,7 @@ const HorizontalEventCard = ({ data, onHeartClick, isGrow = false }: Props) => {

    {data.eventTags - .sort((a, b) => TAG_ORDER[a.tagId].order - TAG_ORDER[b.tagId].order) + .sort((a, b) => TAG_ORDER[a.tagName] - TAG_ORDER[b.tagName]) .map((tag) => ( ))} diff --git a/app/_components/chip/Chip.tsx b/app/_components/chip/Chip.tsx index acd7232f..43f1a812 100644 --- a/app/_components/chip/Chip.tsx +++ b/app/_components/chip/Chip.tsx @@ -1,62 +1,39 @@ -type ColorEvent = keyof typeof COLOR_EVENT; -type ColorGoods = keyof typeof COLOR_GOODS; -type Label = T extends "event" ? ColorEvent : ColorGoods; +import { EventType, GiftType } from "@/types/index"; +import { EVENT_EMOJI, TAG_EMOJI } from "@/constants/post"; + +type Label = T extends "event" ? EventType : GiftType; type Kind = "event" | "goods"; -type Theme = T extends "event" ? "light" : "light" | "dark"; interface Props { label: Label; kind: T; - theme?: Theme; } -const Chip = ({ label, kind, theme = "light" }: Props) => { +const Chip = ({ label, kind }: Props) => { const colorStyle = () => { if (kind === "event") { - return COLOR_EVENT[label as ColorEvent]; + return "bg-gray-900 text-white-white"; + } + if (kind === "goods") { + return "bg-gray-50 text-gray-700"; + } + }; + + const getEmoji = () => { + if (kind === "event") { + return EVENT_EMOJI[label as EventType]; } - if (theme === "light") { - return COLOR_GOODS[label as ColorGoods]; + if (kind === "goods") { + return TAG_EMOJI[label as GiftType]; } - return COLOR_DARK[label as ColorGoods]; }; return (
    - {label} + + {getEmoji()} + {label} +
    ); }; export default Chip; - -const textWhite = "text-white-white"; -const blackBG = "bg-gray-700 text-gray-50"; -const grayBG = "bg-gray-50 text-gray-700"; -const COLOR_EVENT = { - 카페: `bg-sub-pink ${textWhite}`, - 꽃집: `bg-sub-yellow ${textWhite}`, - 팬광고: `bg-sub-skyblue ${textWhite}`, - 포토부스: `bg-sub-blue ${textWhite}`, - 상영회: `bg-sub-purple ${textWhite}`, - 기타: `bg-sub-red ${textWhite}`, -}; -const COLOR_GOODS = { - "컵/컵홀더": `bg-sub-pink-bg text-sub-pink`, - 포스터: `bg-sub-scarlet-bg text-sub-scarlet`, - 스티커: `bg-sub-yellow-bg text-sub-yellow`, - 키링: `bg-sub-green-bg text-sub-green`, - 포토카드: `bg-sub-skyblue-bg text-sub-skyblue`, - 엽서: `bg-sub-blue-bg text-sub-blue`, - 포토굿즈: `bg-sub-purple-bg text-sub-purple`, - 기타: `bg-gray-50 text-gray-700`, -}; - -const COLOR_DARK = { - "컵/컵홀더": blackBG, - 포스터: grayBG, - 스티커: blackBG, - 키링: grayBG, - 포토카드: blackBG, - 엽서: blackBG, - 포토굿즈: grayBG, - 기타: grayBG, -}; diff --git a/app/_components/chip/ChipButton.tsx b/app/_components/chip/ChipButton.tsx index 5aeb4fba..949fe61c 100644 --- a/app/_components/chip/ChipButton.tsx +++ b/app/_components/chip/ChipButton.tsx @@ -19,7 +19,7 @@ const ChipButton = forwardRef(({ label, selected, canDelete, ...rest }: Props, r {...rest} className={`flex-center w-max flex-shrink-0 gap-4 rounded-lg px-12 py-4 ${canDelete && "border border-main-pink-300 bg-sub-pink-bg text-main-pink-white"} ${selected ? "bg-gray-900 text-white-black" : "bg-gray-50 text-gray-700"}`} > -

    {`${GIFT_LIST.includes(label) ? TAG_EMOJI[label as GiftType] : ""} ${label}`}

    +

    {`${GIFT_LIST.includes(label as GiftType) ? TAG_EMOJI[label as GiftType] : ""} ${label}`}

    {canDelete && } ); diff --git a/app/_constants/data.ts b/app/_constants/data.ts deleted file mode 100644 index da45d249..00000000 --- a/app/_constants/data.ts +++ /dev/null @@ -1,36 +0,0 @@ -export const TAG_ORDER: { - [id: string]: { name: string; order: number }; -} = { - "5d414e82-0dd4-40bb-916b-ca7364c5178d": { - name: "엽서", - order: 0, - }, - "c9072d9a-ab08-45af-ae09-d2febfaeba32": { - name: "스티커", - order: 1, - }, - "b4ade0be-df52-4623-ba9e-cdbd099eb7b8": { - name: "컵/컵홀더", - order: 2, - }, - "c2258461-9219-4635-b033-9cd9a890b36a": { - name: "포토카드", - order: 3, - }, - "3a571952-1c80-4224-9da4-f1d2cc2ef8e3": { - name: "키링", - order: 4, - }, - "0405719b-cbff-44d9-9f6e-d2538bf3b0c8": { - name: "포토굿즈", - order: 5, - }, - "bc8785ff-a2d1-4882-9a7e-1448c82a05b0": { - name: "포스터", - order: 6, - }, - "167e6c4f-68e4-4f35-847c-f1c95984879d": { - name: "기타", - order: 7, - }, -}; diff --git a/app/_constants/post.ts b/app/_constants/post.ts index 5e8cde24..82265871 100644 --- a/app/_constants/post.ts +++ b/app/_constants/post.ts @@ -1,5 +1,14 @@ import { LabelType } from "../_types"; +export const EVENT_EMOJI = { + 카페: "☕", + 꽃집: "🌷", + 팬광고: "📢", + 상영회: "🎬", + 포토부스: "📸", + 기타: "🎉", +}; + export const TAG_EMOJI = { 엽서: "📨", 스티커: "✌", @@ -44,7 +53,49 @@ export const TAG = { 해시태그: "9417f83b-af9b-41b2-9723-b9db643b5f08", }; -export const GIFT_LIST = Object.keys(TAG); +export const TAG_ORDER = { + "컵/컵홀더": 0, + 포토매틱: 1, + 그립톡: 2, + 마스킹테이프: 3, + 키링: 4, + 엽서: 5, + 유리컵: 6, + 티켓: 7, + 달력: 8, + 포스터: 9, + 포토카드: 10, + 스티커: 11, + ID카드: 12, + 홀더: 13, + 기타: 14, + 메뉴특전: 15, + 선착특전: 16, + 럭키드로우: 17, + 해시태그: 18, +}; + +export const GIFT_LIST = [ + "컵/컵홀더", + "포토매틱", + "그립톡", + "마스킹테이프", + "키링", + "엽서", + "유리컵", + "티켓", + "달력", + "포스터", + "포토카드", + "스티커", + "ID카드", + "홀더", + "기타", + "메뉴특전", + "선착특전", + "럭키드로우", + "해시태그", +] as const; export const EDIT_CATEGORY = { placeName: "placeName",