From ee4bf54fec856695549589417dfbe4597fe20b0c Mon Sep 17 00:00:00 2001 From: jhj2713 Date: Tue, 20 Aug 2024 14:38:42 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=83=89=EC=83=81=20=EC=98=88=EC=99=B8?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../casper-custom/sticker/charge-max.svg | 12 +- .../casper-custom/sticker/charge-none.svg | 14 +- .../assets/casper-custom/sticker/electric.svg | 920 +++---- .../assets/casper-custom/sticker/lovely.svg | 1428 +++++------ .../assets/casper-custom/sticker/twinkle.svg | 2158 ++++++++--------- client/src/constants/CasperCustom/casper.ts | 39 + .../CasperCard/CasperCardFrontUI.tsx | 14 + client/src/types/casperCustom.ts | 5 +- 8 files changed, 2323 insertions(+), 2267 deletions(-) diff --git a/client/public/assets/casper-custom/sticker/charge-max.svg b/client/public/assets/casper-custom/sticker/charge-max.svg index 59f69fff..5635c085 100644 --- a/client/public/assets/casper-custom/sticker/charge-max.svg +++ b/client/public/assets/casper-custom/sticker/charge-max.svg @@ -1,8 +1,8 @@ - - - - - - + + + + + + diff --git a/client/public/assets/casper-custom/sticker/charge-none.svg b/client/public/assets/casper-custom/sticker/charge-none.svg index 2f980a0e..f77b3507 100644 --- a/client/public/assets/casper-custom/sticker/charge-none.svg +++ b/client/public/assets/casper-custom/sticker/charge-none.svg @@ -1,8 +1,8 @@ - - - - + + + + @@ -14,9 +14,9 @@ - - - + + + diff --git a/client/public/assets/casper-custom/sticker/electric.svg b/client/public/assets/casper-custom/sticker/electric.svg index 9a7e5786..7effe3b5 100644 --- a/client/public/assets/casper-custom/sticker/electric.svg +++ b/client/public/assets/casper-custom/sticker/electric.svg @@ -1,462 +1,462 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/assets/casper-custom/sticker/lovely.svg b/client/public/assets/casper-custom/sticker/lovely.svg index 07dce138..a9868378 100644 --- a/client/public/assets/casper-custom/sticker/lovely.svg +++ b/client/public/assets/casper-custom/sticker/lovely.svg @@ -1,716 +1,716 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/public/assets/casper-custom/sticker/twinkle.svg b/client/public/assets/casper-custom/sticker/twinkle.svg index dd5c0ee4..e7eb5f0c 100644 --- a/client/public/assets/casper-custom/sticker/twinkle.svg +++ b/client/public/assets/casper-custom/sticker/twinkle.svg @@ -1,1081 +1,1081 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/src/constants/CasperCustom/casper.ts b/client/src/constants/CasperCustom/casper.ts index 803d6207..d7bba833 100644 --- a/client/src/constants/CasperCustom/casper.ts +++ b/client/src/constants/CasperCustom/casper.ts @@ -1,3 +1,5 @@ +import { SelectedColorType, SelectedStickerType } from "@/types/casperCustom"; + export const CUSTOM_OPTION = { EYES: "eyes", EYES_DIRECTION: "eyesDirection", @@ -80,6 +82,43 @@ export const COLOR_BACKGROUND_MAP = [ COLOR_OPTION.R_LIGHTBLUE, ] as const; +export const STICKER_COLOR_MAP = { + [STICKER_OPTION.CHARGE_MAX]: { + default: "#515867", + exception: "#333741", + }, + [STICKER_OPTION.CHARGE_NONE]: { + default: "#5CDD6A", + exception: "#FEFF78", + }, + [STICKER_OPTION.ELECTRIC]: { + default: "#FEFF78", + exception: "#FEFF78", + }, + [STICKER_OPTION.LOVELY]: { + default: "#FF6EB0", + exception: "#11CCF2", + }, + [STICKER_OPTION.TWINKLE]: { + default: "#11CCF2", + exception: "#FEFF78", + }, +} as const; + +export const COLOR_STICKER_EXCEPTION: Partial> = { + [COLOR_OPTION.C_SILVER]: STICKER_OPTION.CHARGE_MAX, + [COLOR_OPTION.R_PURPLE]: STICKER_OPTION.CHARGE_MAX, + [COLOR_OPTION.R_ORANGE]: STICKER_OPTION.CHARGE_NONE, + [COLOR_OPTION.R_INDIGO]: STICKER_OPTION.CHARGE_NONE, + [COLOR_OPTION.R_LIGHTBLUE]: STICKER_OPTION.LOVELY, + [COLOR_OPTION.R_AMBER]: STICKER_OPTION.LOVELY, + [COLOR_OPTION.R_MAGENTA]: STICKER_OPTION.TWINKLE, + [COLOR_OPTION.R_YELLOW]: STICKER_OPTION.TWINKLE, + [COLOR_OPTION.C_BLACK]: STICKER_OPTION.TWINKLE, + [COLOR_OPTION.R_DEEPPURPLE]: STICKER_OPTION.TWINKLE, + [COLOR_OPTION.C_ORANGE]: STICKER_OPTION.TWINKLE, +}; + export const CASPER_Z_INDEX = { CASPER: 2, UNDER_CASPER: 1, diff --git a/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx b/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx index b8d57c2f..375c1469 100644 --- a/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx +++ b/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx @@ -8,7 +8,9 @@ import { CASPER_SIZE_OPTION, CASPER_Z_INDEX, COLOR_BACKGROUND_MAP, + COLOR_STICKER_EXCEPTION, CUSTOM_OPTION, + STICKER_COLOR_MAP, } from "@/constants/CasperCustom/casper"; import { SelectedCasperIdxType } from "@/types/casperCustom"; import { getCasperEyesComponent } from "@/utils/CasperCustom/getCasperEyesComponent"; @@ -94,6 +96,17 @@ function CasperCardFrontUI({ selectedSticker !== null ? selectedSticker.id : null ); + const getStickerColor = () => { + if (!selectedSticker) { + return ""; + } + + const isException = COLOR_STICKER_EXCEPTION[selectedColor.id] === selectedSticker?.id; + return isException + ? STICKER_COLOR_MAP[selectedSticker.id].exception + : STICKER_COLOR_MAP[selectedSticker.id].default; + }; + return (
;