Merge pull request #179 from gw-lim/fix/chip

⚡️ fix: 칩 수정

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) => {
               </div>
               <div className="flex flex-wrap items-center gap-4 pc:gap-8">
                 {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) => (
                     <Chip key={tag.tagId} kind="goods" label={tag.tagName} />
                   ))}

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
       <BottomSheet.Title>특전 선택</BottomSheet.Title>
       <div ref={refs.content}>
         <div className="flex flex-wrap gap-x-8 gap-y-12 px-24 py-20">
-          {GIFTS.map((gift) => (
+          {GIFT_LIST.map((gift) => (
             <ChipButton key={gift} label={gift} onClick={() => handleGiftClick(gift)} selected={gifts.includes(gift)} />
           ))}
         </div>
@@ -45,5 +46,3 @@ const GiftsBottomSheet = ({ closeBottomSheet, refs, setGiftsFilter, initialGift
 };
 
 export default GiftsBottomSheet;
-
-const GIFTS = ["컵/컵홀더", "포스터", "포토카드", "포토굿즈", "엽서", "스티커", "키링", "기타"] as const;

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) => {
           </p>
           <ul className="flex flex-wrap gap-4">
             {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) => (
                 <Chip key={tag.tagId} kind="goods" label={tag.tagName} />
               ))}

app/_components/chip/Chip.tsx

@@ -1,62 +1,39 @@
-type ColorEvent = keyof typeof COLOR_EVENT;
-type ColorGoods = keyof typeof COLOR_GOODS;
-type Label<T> = T extends "event" ? ColorEvent : ColorGoods;
+import { EventType, GiftType } from "@/types/index";
+import { EVENT_EMOJI, TAG_EMOJI } from "@/constants/post";
+
+type Label<T> = T extends "event" ? EventType : GiftType;
 type Kind = "event" | "goods";
-type Theme<T> = T extends "event" ? "light" : "light" | "dark";
 interface Props<T> {
   label: Label<T>;
   kind: T;
-  theme?: Theme<T>;
 }
 
-const Chip = <T extends Kind>({ label, kind, theme = "light" }: Props<T>) => {
+const Chip = <T extends Kind>({ label, kind }: Props<T>) => {
   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 (
     <div className={`flex-center h-[2.2rem] w-max flex-shrink-0 rounded-lg px-8 pc:h-24 ${colorStyle()}`}>
-      <span className="text-12 font-600 pc:text-14">{label}</span>
+      <span className="text-12 font-600 pc:text-14">
+        {getEmoji()}
+        {label}
+      </span>
     </div>
   );
 };
 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,
-};

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"}`}
     >
-      <p className="text-14 font-500">{`${GIFT_LIST.includes(label) ? TAG_EMOJI[label as GiftType] : ""} ${label}`}</p>
+      <p className="text-14 font-500">{`${GIFT_LIST.includes(label as GiftType) ? TAG_EMOJI[label as GiftType] : ""} ${label}`}</p>
       {canDelete && <CloseIcon alt="태그 삭제" width={16} height={16} stroke="#FF50AA" />}
     </button>
   );

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",