diff --git a/admin/src/constants/common.ts b/admin/src/constants/common.ts
index 7a6d140b..721993b4 100644
--- a/admin/src/constants/common.ts
+++ b/admin/src/constants/common.ts
@@ -1,8 +1,8 @@
-export const EVENT_STATUS = {
-    BEFORE: "BEFORE",
-    DURING: "DURING",
-    AFTER: "AFTER",
-} as const;
+export const enum EVENT_STATUS {
+    BEFORE = "BEFORE",
+    DURING = "DURING",
+    AFTER = "AFTER",
+}
 
 export const STATUS_MAP = {
     [EVENT_STATUS.BEFORE]: "오픈 전",
diff --git a/admin/src/constants/cookie.ts b/admin/src/constants/cookie.ts
index e7273426..0dedff42 100644
--- a/admin/src/constants/cookie.ts
+++ b/admin/src/constants/cookie.ts
@@ -1,3 +1,3 @@
-export const COOKIE_KEY = {
-    ACCESS_TOKEN: "token",
-} as const;
+export const enum COOKIE_KEY {
+    ACCESS_TOKEN = "token",
+}
diff --git a/admin/src/constants/rush.ts b/admin/src/constants/rush.ts
index f72ed89c..baaf2cf9 100644
--- a/admin/src/constants/rush.ts
+++ b/admin/src/constants/rush.ts
@@ -11,12 +11,12 @@ export const EVENT_LIST_HEADER = [
     "참여자 리스트 보기",
 ];
 
-export const QUERY_OPTION = {
-    OPTION: "option",
-    PRIZE: "prize",
-} as const;
+export const enum QUERY_OPTION {
+    OPTION = "option",
+    PRIZE = "prize",
+}
 
-export const OPTION_POSITION = {
-    LEFT: "LEFT",
-    RIGHT: "RIGHT",
-} as const;
+export const enum OPTION_POSITION {
+    LEFT = "LEFT",
+    RIGHT = "RIGHT",
+}
diff --git a/admin/src/types/lottery.ts b/admin/src/types/lottery.ts
index a170fb6f..7eb9cb32 100644
--- a/admin/src/types/lottery.ts
+++ b/admin/src/types/lottery.ts
@@ -1,6 +1,5 @@
 import { EVENT_STATUS } from "@/constants/common";
 
-export type LotteryEventStatusType = (typeof EVENT_STATUS)[keyof typeof EVENT_STATUS];
 export interface LotteryEventType {
     startDate: string;
     startTime: string;
@@ -8,7 +7,7 @@ export interface LotteryEventType {
     endTime: string;
     appliedCount: number;
     winnerCount: number;
-    status: LotteryEventStatusType;
+    status: EVENT_STATUS;
 }
 
 export interface LotteryExpectationsType {
diff --git a/admin/src/types/rush.ts b/admin/src/types/rush.ts
index 9ccffa22..84f432ae 100644
--- a/admin/src/types/rush.ts
+++ b/admin/src/types/rush.ts
@@ -2,7 +2,6 @@ import { Dispatch } from "react";
 import { EVENT_STATUS } from "@/constants/common";
 import { OPTION_POSITION } from "@/constants/rush";
 
-export type RushEventStatusType = (typeof EVENT_STATUS)[keyof typeof EVENT_STATUS];
 export interface RushEventType {
     rushEventId: number;
     eventDate: string;
@@ -11,12 +10,10 @@ export interface RushEventType {
     winnerCount: number;
     prizeImageUrl: string;
     prizeDescription: string;
-    status: RushEventStatusType;
+    status: EVENT_STATUS;
     options: RushOptionType[];
 }
 
-type RushOptionPositionType = (typeof OPTION_POSITION)[keyof typeof OPTION_POSITION];
-
 export interface RushOptionType {
     optionId: number;
     mainText: string;
@@ -24,7 +21,7 @@ export interface RushOptionType {
     resultMainText: string;
     resultSubText: string;
     imageUrl: string;
-    position: RushOptionPositionType;
+    position: OPTION_POSITION;
 }
 
 export interface RushPrizeType {
@@ -36,14 +33,14 @@ export interface RushEventStateType {
     rushList: RushEventType[];
 }
 
-export const RUSH_ACTION = {
-    SET_EVENT_LIST: "SET_EVENT_LIST",
-} as const;
+export const enum RUSH_ACTION {
+    SET_EVENT_LIST = "SET_EVENT_LIST",
+}
 
 export type ImageType = { imgName: string; imgFile: File };
 
 export type RushEventAction = {
-    type: typeof RUSH_ACTION.SET_EVENT_LIST;
+    type: RUSH_ACTION.SET_EVENT_LIST;
     payload: RushEventType[];
 };
 
diff --git a/client/src/constants/CasperCustom/casper.ts b/client/src/constants/CasperCustom/casper.ts
index 0adfae47..0338d6fe 100644
--- a/client/src/constants/CasperCustom/casper.ts
+++ b/client/src/constants/CasperCustom/casper.ts
@@ -1,65 +1,63 @@
-import { ColorOptionType, StickerOptionType } from "@/types/casperCustom";
-
-export const CUSTOM_OPTION = {
-    EYES: "eyes",
-    EYES_DIRECTION: "eyesDirection",
-    MOUTH: "mouth",
-    COLOR: "color",
-    STICKER: "sticker",
-} as const;
-export const EYES_OPTION = {
-    "15INCH_ALLOY": "15inch-alloy",
-    "17INCH_ALLOY": "17inch-alloy",
-    PIXEL: "pixel",
-    ELECTRIC: "electric",
-    VACANT: "vacant",
-    SMILE: "smile",
-    CUTE: "cute",
-    HEART: "heart",
-} as const;
-export const POSITION_OPTION = {
-    LEFT: "left",
-    CENTER: "center",
-    RIGHT: "right",
-} as const;
-export const MOUTH_OPTION = {
-    SMILE: "smile",
-    CLOUDY: "cloudy",
-    MOCKING: "mocking",
-    LAUGH: "laugh",
-    EXPRESSIONLESS: "expressionless",
-} as const;
-export const COLOR_OPTION = {
-    C_CREAM: "#D8D2BC",
-    C_ORANGE: "#CA7349",
-    C_KHAKI: "#515868",
-    C_SILVER: "#AAAEB1",
-    C_BLACK: "#000000",
-    R_LIME: "#5CDD6A",
-    R_TEAL: "#1CD6BE",
-    R_LIGHTBLUE: "#11CCF2",
-    R_SKYBLUE: "#3FB6FF",
-    R_BLUE: "#638DFF",
-    R_INDIGO: "#797AF7",
-    R_DEEPPURPLE: "#A17CF6",
-    R_PURPLE: "#CE7BF0",
-    R_MAGENTA: "#FF6FB0",
-    R_RED: "#FF687A",
-    R_ORANGE: "#FF875C",
-    R_AMBER: "#FFD96B",
-    R_YELLOW: "#FEFF78",
-} as const;
-export const STICKER_OPTION = {
-    ELECTRIC: "electric",
-    CHARGE_MAX: "charge-max",
-    CHARGE_NONE: "charge-none",
-    LOVELY: "lovely",
-    TWINKLE: "twinkle",
-} as const;
-export const OPTION_TYPE = {
-    LIMITED: "limited",
-    BASIC: "basic",
-} as const;
+export const enum CUSTOM_OPTION {
+    EYES = "eyes",
+    EYES_DIRECTION = "eyesDirection",
+    MOUTH = "mouth",
+    COLOR = "color",
+    STICKER = "sticker",
+}
+export const enum EYES_OPTION {
+    "15INCH_ALLOY" = "15inch-alloy",
+    "17INCH_ALLOY" = "17inch-alloy",
+    PIXEL = "pixel",
+    ELECTRIC = "electric",
+    VACANT = "vacant",
+    SMILE = "smile",
+    CUTE = "cute",
+    HEART = "heart",
+}
+export const enum POSITION_OPTION {
+    LEFT = "left",
+    CENTER = "center",
+    RIGHT = "right",
+}
+export const enum MOUTH_OPTION {
+    SMILE = "smile",
+    CLOUDY = "cloudy",
+    MOCKING = "mocking",
+    LAUGH = "laugh",
+    EXPRESSIONLESS = "expressionless",
+}
+export const enum COLOR_OPTION {
+    C_CREAM = "#D8D2BC",
+    C_ORANGE = "#CA7349",
+    C_KHAKI = "#515868",
+    C_SILVER = "#AAAEB1",
+    C_BLACK = "#000000",
+    R_LIME = "#5CDD6A",
+    R_TEAL = "#1CD6BE",
+    R_LIGHTBLUE = "#11CCF2",
+    R_SKYBLUE = "#3FB6FF",
+    R_BLUE = "#638DFF",
+    R_INDIGO = "#797AF7",
+    R_DEEPPURPLE = "#A17CF6",
+    R_PURPLE = "#CE7BF0",
+    R_MAGENTA = "#FF6FB0",
+    R_RED = "#FF687A",
+    R_ORANGE = "#FF875C",
+    R_AMBER = "#FFD96B",
+    R_YELLOW = "#FEFF78",
+}
+export const enum STICKER_OPTION {
+    ELECTRIC = "electric",
+    CHARGE_MAX = "charge-max",
+    CHARGE_NONE = "charge-none",
+    LOVELY = "lovely",
+    TWINKLE = "twinkle",
+}
+export const enum OPTION_TYPE {
+    LIMITED = "limited",
+    BASIC = "basic",
+}
 
 export const COLOR_BACKGROUND_MAP = [
     COLOR_OPTION.R_BLUE,
@@ -105,7 +103,7 @@ export const STICKER_COLOR_MAP = {
     },
 } as const;
 
-export const COLOR_STICKER_EXCEPTION: Partial<Record<ColorOptionType, StickerOptionType>> = {
+export const COLOR_STICKER_EXCEPTION: Partial<Record<COLOR_OPTION, STICKER_OPTION>> = {
     [COLOR_OPTION.C_SILVER]: STICKER_OPTION.CHARGE_MAX,
     [COLOR_OPTION.R_PURPLE]: STICKER_OPTION.CHARGE_MAX,
     [COLOR_OPTION.R_ORANGE]: STICKER_OPTION.CHARGE_NONE,
@@ -119,11 +117,11 @@ export const COLOR_STICKER_EXCEPTION: Partial<Record<ColorOptionType, StickerOpt
     [COLOR_OPTION.C_ORANGE]: STICKER_OPTION.TWINKLE,
 };
 
-export const CASPER_Z_INDEX = {
-    CASPER: 2,
-    UNDER_CASPER: 1,
-    UPPER_CASPER: 3,
-} as const;
+export const enum CASPER_Z_INDEX {
+    CASPER = 2,
+    UNDER_CASPER = 1,
+    UPPER_CASPER = 3,
+}
 
 export const CASPER_OPTION = {
     [CUSTOM_OPTION.EYES]: [
@@ -305,10 +303,10 @@ export const OPTION_MAX_COUNT = {
     [CUSTOM_OPTION.COLOR]: CASPER_OPTION[CUSTOM_OPTION.COLOR].length,
 };
 
-export const CASPER_SIZE_OPTION = {
-    LG: "lg",
-    SM: "sm",
-} as const;
+export const enum CASPER_SIZE_OPTION {
+    LG = "lg",
+    SM = "sm",
+}
 
 export const CASPER_CARD_SIZE = {
     [CASPER_SIZE_OPTION.LG]: {
diff --git a/client/src/constants/CasperCustom/customStep.tsx b/client/src/constants/CasperCustom/customStep.tsx
index 2047e1b5..68787355 100644
--- a/client/src/constants/CasperCustom/customStep.tsx
+++ b/client/src/constants/CasperCustom/customStep.tsx
@@ -6,12 +6,12 @@ import {
 } from "@/features/CasperCustom/CasperCustomPanel/CasperCustomPanel";
 import { CUSTOM_OPTION } from "./casper";
 
-export const CUSTOM_STEP_OPTION = {
-    PROCESS: "process",
-    FORM: "form",
-    FINISHING: "finishing",
-    FINISH: "finish",
-} as const;
+export const enum CUSTOM_STEP_OPTION {
+    PROCESS = "process",
+    FORM = "form",
+    FINISHING = "finishing",
+    FINISH = "finish",
+}
 export const CUSTOM_STEP_OPTION_ARRAY = [
     CUSTOM_STEP_OPTION.PROCESS,
     CUSTOM_STEP_OPTION.FORM,
diff --git a/client/src/constants/PageSections/sections.ts b/client/src/constants/PageSections/sections.ts
index eae90169..444466ba 100644
--- a/client/src/constants/PageSections/sections.ts
+++ b/client/src/constants/PageSections/sections.ts
@@ -1,42 +1,42 @@
-export const MAIN_SECTIONS = {
-    HEADLINE: "HEADLINE",
-    LOTTERY: "LOTTERY",
-    RUSH: "RUSH",
-    LEARN_MORE: "LEARN_MORE",
-} as const;
+export const enum MAIN_SECTIONS {
+    HEADLINE = "HEADLINE",
+    LOTTERY = "LOTTERY",
+    RUSH = "RUSH",
+    LEARN_MORE = "LEARN_MORE",
+}
 
-export const LOTTERY_SECTIONS = {
-    HEADLINE: "HEADLINE",
-    INTRO: "INTRO",
-    HEADLAMP: "HEADLAMP",
-    PIXEL_DESIGN: "PIXEL_DESIGN",
-    WHEEL_DESIGN: "WHEEL_DESIGN",
-    CUSTOM_DESIGN: "CUSTOM_DESIGN",
-    NEW_COLOR: "NEW_COLOR",
-    SMILE_BADGE: "SMILE_BADGE",
-    SHORT_CUT: "SHORT_CUT",
-} as const;
+export const enum LOTTERY_SECTIONS {
+    HEADLINE = "HEADLINE",
+    INTRO = "INTRO",
+    HEADLAMP = "HEADLAMP",
+    PIXEL_DESIGN = "PIXEL_DESIGN",
+    WHEEL_DESIGN = "WHEEL_DESIGN",
+    CUSTOM_DESIGN = "CUSTOM_DESIGN",
+    NEW_COLOR = "NEW_COLOR",
+    SMILE_BADGE = "SMILE_BADGE",
+    SHORT_CUT = "SHORT_CUT",
+}
 
-export const RUSH_SECTIONS = {
-    HEADLINE: "HEADLINE",
-    INTRO: "INTRO",
-    FAQ: "FAQ",
-    ELECTRIC_REASON: "ELECTRIC_REASON",
-    ELECTRIC_ADVANTAGE: "ELECTRIC_ADVANTAGE",
-    REASON_FIRST: "REASON_FIRST",
-    CASPER_FAR: "CASPER_FAR",
-    CASPER_FAST: "CASPER_FAST",
-    CASPER_COMFORTABLE: "CASPER_COMFORTABLE",
-    REASON_SECOND: "REASON_SECOND",
-    CASPER_WIDE: "CASPER_WIDE",
-    CASPER_CHARGE: "CASPER_CHARGE",
-    CASPER_SMART_KEY: "CASPER_SMART_KEY",
-} as const;
+export const enum RUSH_SECTIONS {
+    HEADLINE = "HEADLINE",
+    INTRO = "INTRO",
+    FAQ = "FAQ",
+    ELECTRIC_REASON = "ELECTRIC_REASON",
+    ELECTRIC_ADVANTAGE = "ELECTRIC_ADVANTAGE",
+    REASON_FIRST = "REASON_FIRST",
+    CASPER_FAR = "CASPER_FAR",
+    CASPER_FAST = "CASPER_FAST",
+    CASPER_COMFORTABLE = "CASPER_COMFORTABLE",
+    REASON_SECOND = "REASON_SECOND",
+    CASPER_WIDE = "CASPER_WIDE",
+    CASPER_CHARGE = "CASPER_CHARGE",
+    CASPER_SMART_KEY = "CASPER_SMART_KEY",
+}
 
-export const CASPER_CUSTOM_SECTIONS = {
-    CUSTOM: "CUSTOM",
-} as const;
+export const enum CASPER_CUSTOM_SECTIONS {
+    CUSTOM = "CUSTOM",
+}
 
-export const CASPER_SHOWCASE_SECTIONS = {
-    SHOWCASE: "SHOWCASE",
-} as const;
+export const enum CASPER_SHOWCASE_SECTIONS {
+    SHOWCASE = "SHOWCASE",
+}
diff --git a/client/src/constants/Rush/rushCard.ts b/client/src/constants/Rush/rushCard.ts
index 86a3e75f..d0b8c8b0 100644
--- a/client/src/constants/Rush/rushCard.ts
+++ b/client/src/constants/Rush/rushCard.ts
@@ -1,23 +1,23 @@
-export const CARD_PHASE = {
-    NOT_STARTED: "NOT_STARTED",
-    IN_PROGRESS: "IN_PROGRESS",
-    COMPLETED: "COMPLETED",
-} as const;
+export const enum CARD_PHASE {
+    NOT_STARTED = "NOT_STARTED",
+    IN_PROGRESS = "IN_PROGRESS",
+    COMPLETED = "COMPLETED",
+}
 
-export const CARD_COLOR = {
-    BLUE: "blue",
-    RED: "red",
-    YELLOW: "yellow",
-    GREEN: "green",
-} as const;
+export enum CARD_COLOR {
+    BLUE = "blue",
+    RED = "red",
+    YELLOW = "yellow",
+    GREEN = "green",
+}
 
-export const CARD_OPTION = {
-    LEFT_OPTIONS: 1,
-    RIGHT_OPTIONS: 2,
-} as const;
+export const enum CARD_OPTION {
+    LEFT_OPTIONS = 1,
+    RIGHT_OPTIONS = 2,
+}
 
-export const WIN_STATUS = {
-    WIN: "Win",
-    LOSE: "Lose",
-    TIE: "Tie",
-} as const;
+export const enum WIN_STATUS {
+    WIN = "Win",
+    LOSE = "Lose",
+    TIE = "Tie",
+}
diff --git a/client/src/constants/cookie.ts b/client/src/constants/cookie.ts
index c359e9aa..3d9d71d0 100644
--- a/client/src/constants/cookie.ts
+++ b/client/src/constants/cookie.ts
@@ -1,4 +1,4 @@
-export const COOKIE_KEY = {
-    ACCESS_TOKEN: "token",
-    INVITE_USER: "referralId",
-} as const;
+export const enum COOKIE_KEY {
+    ACCESS_TOKEN = "token",
+    INVITE_USER = "referralId",
+}
diff --git a/client/src/features/CasperCustom/CasperCard/CasperCardBackUI.tsx b/client/src/features/CasperCustom/CasperCard/CasperCardBackUI.tsx
index 57226aa5..e3e355f8 100644
--- a/client/src/features/CasperCustom/CasperCard/CasperCardBackUI.tsx
+++ b/client/src/features/CasperCustom/CasperCard/CasperCardBackUI.tsx
@@ -16,7 +16,7 @@ import CasperFace from "/public/assets/casper-custom/face.svg?react";
 import HyundaiLogo from "/public/assets/hyundai-logo.svg?react";
 
 interface CasperCardBackUIProps {
-    size?: (typeof CASPER_SIZE_OPTION)[keyof typeof CASPER_SIZE_OPTION];
+    size?: CASPER_SIZE_OPTION;
     casperName: string;
     expectations?: string;
     selectedCasperIdx: SelectedCasperIdxType;
diff --git a/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx b/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx
index bef524d2..6cf6a412 100644
--- a/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx
+++ b/client/src/features/CasperCustom/CasperCard/CasperCardFrontUI.tsx
@@ -20,7 +20,7 @@ import CasperEyesLayout from "/public/assets/casper-custom/eyes/layout.svg?react
 import CasperFace from "/public/assets/casper-custom/face.svg?react";
 
 interface CasperCardFrontUIProps {
-    size?: (typeof CASPER_SIZE_OPTION)[keyof typeof CASPER_SIZE_OPTION];
+    size?: CASPER_SIZE_OPTION;
     optionDescription?: string;
     casperName?: string;
     hasRandomButton?: boolean;
diff --git a/client/src/features/CasperCustom/CasperCard/CasperFlipCard.tsx b/client/src/features/CasperCustom/CasperCard/CasperFlipCard.tsx
index 3f40dd73..9cb394ff 100644
--- a/client/src/features/CasperCustom/CasperCard/CasperFlipCard.tsx
+++ b/client/src/features/CasperCustom/CasperCard/CasperFlipCard.tsx
@@ -6,7 +6,7 @@ import { CasperCardBackUI } from "./CasperCardBackUI";
 import { CasperCardFrontUI } from "./CasperCardFrontUI";
 
 interface CasperFlipCardProps {
-    size: (typeof CASPER_SIZE_OPTION)[keyof typeof CASPER_SIZE_OPTION];
+    size: CASPER_SIZE_OPTION;
     card: Omit<CasperCardType, "id">;
     isFlipped: boolean;
 }
diff --git a/client/src/features/CasperCustom/CasperCard/MyCasperCardBack.tsx b/client/src/features/CasperCustom/CasperCard/MyCasperCardBack.tsx
index 6749f62d..71a639c0 100644
--- a/client/src/features/CasperCustom/CasperCard/MyCasperCardBack.tsx
+++ b/client/src/features/CasperCustom/CasperCard/MyCasperCardBack.tsx
@@ -3,7 +3,7 @@ import useCasperCustomStateContext from "@/hooks/useCasperCustomStateContext";
 import { CasperCardBackUI } from "./CasperCardBackUI";
 
 interface MyCasperCardBackProps {
-    size?: (typeof CASPER_SIZE_OPTION)[keyof typeof CASPER_SIZE_OPTION];
+    size?: CASPER_SIZE_OPTION;
     casperName: string;
     expectations?: string;
 }
diff --git a/client/src/features/CasperCustom/CasperCard/MyCasperCardFront.tsx b/client/src/features/CasperCustom/CasperCard/MyCasperCardFront.tsx
index 924ba2f5..e6ff584f 100644
--- a/client/src/features/CasperCustom/CasperCard/MyCasperCardFront.tsx
+++ b/client/src/features/CasperCustom/CasperCard/MyCasperCardFront.tsx
@@ -6,7 +6,7 @@ import { CASPER_ACTION } from "@/types/casperCustom";
 import { CasperCardFrontUI } from "./CasperCardFrontUI";
 
 interface MyCasperCardFrontProps {
-    size?: (typeof CASPER_SIZE_OPTION)[keyof typeof CASPER_SIZE_OPTION];
+    size?: CASPER_SIZE_OPTION;
     optionDescription?: string;
     casperName?: string;
     hasRandomButton?: boolean;
diff --git a/client/src/features/CasperCustom/CasperCustomPanel/CasperCustomPanel.tsx b/client/src/features/CasperCustom/CasperCustomPanel/CasperCustomPanel.tsx
index 7c3b331d..85a4d095 100644
--- a/client/src/features/CasperCustom/CasperCustomPanel/CasperCustomPanel.tsx
+++ b/client/src/features/CasperCustom/CasperCustomPanel/CasperCustomPanel.tsx
@@ -33,7 +33,7 @@ function getCustomOptionImageItem({
 }
 
 interface GetFilteredOptionsProps {
-    optionType: (typeof OPTION_TYPE)[keyof typeof OPTION_TYPE];
+    optionType: OPTION_TYPE;
     options: (typeof CASPER_OPTION)[keyof typeof CASPER_OPTION];
     selectedOptionId?: string;
     handleClickOption: (optionId: string) => void;
diff --git a/client/src/features/CasperCustom/CasperCustomPanel/SharedPanel.tsx b/client/src/features/CasperCustom/CasperCustomPanel/SharedPanel.tsx
index 1d1240f9..512c65f9 100644
--- a/client/src/features/CasperCustom/CasperCustomPanel/SharedPanel.tsx
+++ b/client/src/features/CasperCustom/CasperCustomPanel/SharedPanel.tsx
@@ -3,7 +3,7 @@ import Category from "@/components/Category";
 import { CUSTOM_OPTION } from "@/constants/CasperCustom/casper";
 import { CasperCustomPanelLayout } from "./CasperCustomPanelLayout";
 
-type CustomOptionType = (typeof CUSTOM_OPTION)[keyof typeof CUSTOM_OPTION];
+type CustomOptionType = CUSTOM_OPTION;
 type OptionListItemType = {
     id: string;
     component: ReactNode;
diff --git a/client/src/types/casperCustom.ts b/client/src/types/casperCustom.ts
index 945e4369..864ae0c4 100644
--- a/client/src/types/casperCustom.ts
+++ b/client/src/types/casperCustom.ts
@@ -1,24 +1,9 @@
 import { Dispatch } from "react";
-import {
-    COLOR_OPTION,
-    CUSTOM_OPTION,
-    EYES_OPTION,
-    MOUTH_OPTION,
-    POSITION_OPTION,
-    STICKER_OPTION,
-} from "@/constants/CasperCustom/casper";
+import { CUSTOM_OPTION } from "@/constants/CasperCustom/casper";
 
-export type ColorOptionType = (typeof COLOR_OPTION)[keyof typeof COLOR_OPTION];
-export type StickerOptionType = (typeof STICKER_OPTION)[keyof typeof STICKER_OPTION];
-export type EyesOptionType = (typeof EYES_OPTION)[keyof typeof EYES_OPTION];
-export type EyesDirectionOptionType = (typeof POSITION_OPTION)[keyof typeof POSITION_OPTION];
-export type MouthOptionType = (typeof MOUTH_OPTION)[keyof typeof MOUTH_OPTION];
-
-export type CustomOptionType = (typeof CUSTOM_OPTION)[keyof typeof CUSTOM_OPTION];
-type CasperFaceKeys = Exclude<CustomOptionType, typeof CUSTOM_OPTION.STICKER>;
+type CasperFaceKeys = Exclude<CUSTOM_OPTION, CUSTOM_OPTION.STICKER>;
 type CasperFaceType = Record<CasperFaceKeys, number>;
-export type SelectedCasperIdxType = CasperFaceType &
-    Record<typeof CUSTOM_OPTION.STICKER, number | null>;
+export type SelectedCasperIdxType = CasperFaceType & Record<CUSTOM_OPTION.STICKER, number | null>;
 
 export interface CasperCustomStateType {
     selectedCasperIdx: SelectedCasperIdxType;
@@ -26,27 +11,27 @@ export interface CasperCustomStateType {
     expectations: string;
 }
 
-export const CASPER_ACTION = {
-    SET_CASPER: "SET_CASPER",
-    SET_CASPER_NAME: "SET_CASPER_NAME",
-    SET_EXPECTATIONS: "SET_EXPECTATIONS",
-    SELECT_OPTION: "SELECT_OPTION",
-    SHUFFLE_CASPER: "SHUFFLE_CASPER",
-    RESET_CUSTOM: "RESET_CUSTOM",
-} as const;
+export const enum CASPER_ACTION {
+    SET_CASPER = "SET_CASPER",
+    SET_CASPER_NAME = "SET_CASPER_NAME",
+    SET_EXPECTATIONS = "SET_EXPECTATIONS",
+    SELECT_OPTION = "SELECT_OPTION",
+    SHUFFLE_CASPER = "SHUFFLE_CASPER",
+    RESET_CUSTOM = "RESET_CUSTOM",
+}
 
 export type CasperCustomAction =
     | {
-          type: typeof CASPER_ACTION.SET_CASPER;
+          type: CASPER_ACTION.SET_CASPER;
           payload: { option: SelectedCasperIdxType; casperName: string; expectations: string };
       }
-    | { type: typeof CASPER_ACTION.SET_CASPER_NAME; payload: string }
-    | { type: typeof CASPER_ACTION.SET_EXPECTATIONS; payload: string }
+    | { type: CASPER_ACTION.SET_CASPER_NAME; payload: string }
+    | { type: CASPER_ACTION.SET_EXPECTATIONS; payload: string }
     | {
-          type: typeof CASPER_ACTION.SELECT_OPTION;
-          payload: { option: CustomOptionType; id: string };
+          type: CASPER_ACTION.SELECT_OPTION;
+          payload: { option: CUSTOM_OPTION; id: string };
       }
-    | { type: typeof CASPER_ACTION.SHUFFLE_CASPER }
-    | { type: typeof CASPER_ACTION.RESET_CUSTOM };
+    | { type: CASPER_ACTION.SHUFFLE_CASPER }
+    | { type: CASPER_ACTION.RESET_CUSTOM };
 
 export type CasperCustomDispatchType = Dispatch<CasperCustomAction>;
diff --git a/client/src/types/phoneNumber.ts b/client/src/types/phoneNumber.ts
index a9fb45da..1f3d24f0 100644
--- a/client/src/types/phoneNumber.ts
+++ b/client/src/types/phoneNumber.ts
@@ -4,12 +4,12 @@ export interface PhoneNumberStateType {
     phoneNumber: string;
 }
 
-export const PHONE_NUMBER_ACTION = {
-    SET_PHONE_NUMBER: "SET_PHONE_NUMBER",
-} as const;
+export const enum PHONE_NUMBER_ACTION {
+    SET_PHONE_NUMBER = "SET_PHONE_NUMBER",
+}
 
 export type PhoneNumberAction = {
-    type: typeof PHONE_NUMBER_ACTION.SET_PHONE_NUMBER;
+    type: PHONE_NUMBER_ACTION.SET_PHONE_NUMBER;
     payload: string;
 };
 
diff --git a/client/src/utils/CasperCustom/getCasperEyesComponent.tsx b/client/src/utils/CasperCustom/getCasperEyesComponent.tsx
index a0338402..316b43ad 100644
--- a/client/src/utils/CasperCustom/getCasperEyesComponent.tsx
+++ b/client/src/utils/CasperCustom/getCasperEyesComponent.tsx
@@ -1,4 +1,4 @@
-import { EyesDirectionOptionType, EyesOptionType } from "@/types/casperCustom";
+import { EYES_OPTION, POSITION_OPTION } from "@/constants/CasperCustom/casper";
 import Alloy15Center from "/public/assets/casper-custom/eyes/15inch-alloy-center.svg?react";
 import Alloy15Left from "/public/assets/casper-custom/eyes/15inch-alloy-left.svg?react";
 import Alloy15Right from "/public/assets/casper-custom/eyes/15inch-alloy-right.svg?react";
@@ -25,35 +25,35 @@ import VacantLeft from "/public/assets/casper-custom/eyes/vacant-left.svg?react"
 import VacantRight from "/public/assets/casper-custom/eyes/vacant-right.svg?react";
 
 const EYES_COMPONENT_MAP: Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
-    "15inch-alloy-center": Alloy15Center,
-    "15inch-alloy-left": Alloy15Left,
-    "15inch-alloy-right": Alloy15Right,
-    "17inch-alloy-center": Alloy17Center,
-    "17inch-alloy-left": Alloy17Left,
-    "17inch-alloy-right": Alloy17Right,
-    "cute-center": CuteCenter,
-    "cute-left": CuteLeft,
-    "cute-right": CuteRight,
-    "electric-center": ElectricCenter,
-    "electric-left": ElectricLeft,
-    "electric-right": ElectricRight,
-    "heart-center": HeartCenter,
-    "heart-left": HeartLeft,
-    "heart-right": HeartRight,
-    "pixel-center": PixelCenter,
-    "pixel-left": PixelLeft,
-    "pixel-right": PixelRight,
-    "smile-center": SmileCenter,
-    "smile-left": SmileLeft,
-    "smile-right": SmileRight,
-    "vacant-center": VacantCenter,
-    "vacant-left": VacantLeft,
-    "vacant-right": VacantRight,
+    [`${EYES_OPTION["15INCH_ALLOY"]}-${[POSITION_OPTION.CENTER]}`]: Alloy15Center,
+    [`${EYES_OPTION["15INCH_ALLOY"]}-${[POSITION_OPTION.LEFT]}`]: Alloy15Left,
+    [`${EYES_OPTION["15INCH_ALLOY"]}-${[POSITION_OPTION.RIGHT]}`]: Alloy15Right,
+    [`${EYES_OPTION["17INCH_ALLOY"]}-${[POSITION_OPTION.CENTER]}`]: Alloy17Center,
+    [`${EYES_OPTION["17INCH_ALLOY"]}-${[POSITION_OPTION.LEFT]}`]: Alloy17Left,
+    [`${EYES_OPTION["17INCH_ALLOY"]}-${[POSITION_OPTION.RIGHT]}`]: Alloy17Right,
+    [`${EYES_OPTION.CUTE}-${[POSITION_OPTION.CENTER]}`]: CuteCenter,
+    [`${EYES_OPTION.CUTE}-${[POSITION_OPTION.LEFT]}`]: CuteLeft,
+    [`${EYES_OPTION.CUTE}-${[POSITION_OPTION.RIGHT]}`]: CuteRight,
+    [`${EYES_OPTION.ELECTRIC}-${[POSITION_OPTION.CENTER]}`]: ElectricCenter,
+    [`${EYES_OPTION.ELECTRIC}-${[POSITION_OPTION.LEFT]}`]: ElectricLeft,
+    [`${EYES_OPTION.ELECTRIC}-${[POSITION_OPTION.RIGHT]}`]: ElectricRight,
+    [`${EYES_OPTION.HEART}-${[POSITION_OPTION.CENTER]}`]: HeartCenter,
+    [`${EYES_OPTION.HEART}-${[POSITION_OPTION.LEFT]}`]: HeartLeft,
+    [`${EYES_OPTION.HEART}-${[POSITION_OPTION.RIGHT]}`]: HeartRight,
+    [`${EYES_OPTION.PIXEL}-${[POSITION_OPTION.CENTER]}`]: PixelCenter,
+    [`${EYES_OPTION.PIXEL}-${[POSITION_OPTION.LEFT]}`]: PixelLeft,
+    [`${EYES_OPTION.PIXEL}-${[POSITION_OPTION.RIGHT]}`]: PixelRight,
+    [`${EYES_OPTION.SMILE}-${[POSITION_OPTION.CENTER]}`]: SmileCenter,
+    [`${EYES_OPTION.SMILE}-${[POSITION_OPTION.LEFT]}`]: SmileLeft,
+    [`${EYES_OPTION.SMILE}-${[POSITION_OPTION.RIGHT]}`]: SmileRight,
+    [`${EYES_OPTION.VACANT}-${[POSITION_OPTION.CENTER]}`]: VacantCenter,
+    [`${EYES_OPTION.VACANT}-${[POSITION_OPTION.LEFT]}`]: VacantLeft,
+    [`${EYES_OPTION.VACANT}-${[POSITION_OPTION.RIGHT]}`]: VacantRight,
 };
 
 export function getCasperEyesComponent(
-    eyesOption: EyesOptionType,
-    eyesDirectionOption: EyesDirectionOptionType
+    eyesOption: EYES_OPTION,
+    eyesDirectionOption: POSITION_OPTION
 ): React.ComponentType<React.SVGProps<SVGSVGElement>> {
     const componentKey = `${eyesOption}-${eyesDirectionOption}`;
     return EYES_COMPONENT_MAP[componentKey];
diff --git a/client/src/utils/CasperCustom/getCasperMouthComponent.tsx b/client/src/utils/CasperCustom/getCasperMouthComponent.tsx
index 85a31df6..74459f25 100644
--- a/client/src/utils/CasperCustom/getCasperMouthComponent.tsx
+++ b/client/src/utils/CasperCustom/getCasperMouthComponent.tsx
@@ -1,4 +1,4 @@
-import { MouthOptionType } from "@/types/casperCustom";
+import { MOUTH_OPTION } from "@/constants/CasperCustom/casper";
 import Cloudy from "/public/assets/casper-custom/mouth/cloudy.svg?react";
 import Expressionsless from "/public/assets/casper-custom/mouth/expressionless.svg?react";
 import Laugh from "/public/assets/casper-custom/mouth/laugh.svg?react";
@@ -6,15 +6,15 @@ import Mocking from "/public/assets/casper-custom/mouth/mocking.svg?react";
 import Smile from "/public/assets/casper-custom/mouth/smile.svg?react";
 
 const mouthComponentMap: Record<string, React.ComponentType<React.SVGProps<SVGSVGElement>>> = {
-    cloudy: Cloudy,
-    expressionless: Expressionsless,
-    laugh: Laugh,
-    mocking: Mocking,
-    smile: Smile,
+    [MOUTH_OPTION.CLOUDY]: Cloudy,
+    [MOUTH_OPTION.EXPRESSIONLESS]: Expressionsless,
+    [MOUTH_OPTION.LAUGH]: Laugh,
+    [MOUTH_OPTION.MOCKING]: Mocking,
+    [MOUTH_OPTION.SMILE]: Smile,
 };
 
 export function getCasperMouthComponent(
-    mouth: MouthOptionType
+    mouth: MOUTH_OPTION
 ): React.ComponentType<React.SVGProps<SVGSVGElement>> {
     return mouthComponentMap[mouth];
 }
diff --git a/client/src/utils/CasperCustom/getCasperStickerComponent.tsx b/client/src/utils/CasperCustom/getCasperStickerComponent.tsx
index 3e1732d1..5964ee22 100644
--- a/client/src/utils/CasperCustom/getCasperStickerComponent.tsx
+++ b/client/src/utils/CasperCustom/getCasperStickerComponent.tsx
@@ -1,4 +1,4 @@
-import { StickerOptionType } from "@/types/casperCustom";
+import { STICKER_OPTION } from "@/constants/CasperCustom/casper";
 import ChargeMax from "/public/assets/casper-custom/sticker/charge-max.svg?react";
 import ChargeNone from "/public/assets/casper-custom/sticker/charge-none.svg?react";
 import Electric from "/public/assets/casper-custom/sticker/electric.svg?react";
@@ -9,15 +9,15 @@ const STICKER_COMPONENT_MAP: Record<
     string,
     React.ComponentType<React.SVGProps<SVGSVGElement>> | null
 > = {
-    "charge-max": ChargeMax,
-    "charge-none": ChargeNone,
-    electric: Electric,
-    lovely: Lovely,
-    twinkle: Twinkle,
+    [STICKER_OPTION.CHARGE_MAX]: ChargeMax,
+    [STICKER_OPTION.CHARGE_NONE]: ChargeNone,
+    [STICKER_OPTION.ELECTRIC]: Electric,
+    [STICKER_OPTION.LOVELY]: Lovely,
+    [STICKER_OPTION.TWINKLE]: Twinkle,
 };
 
 export function getCasperStickerComponent(
-    sticker: StickerOptionType | null
+    sticker: STICKER_OPTION | null
 ): React.ComponentType<React.SVGProps<SVGSVGElement>> | null {
     if (sticker === null) {
         return null;