From 9b16012eb7fc7984da6ea8de7744ba8fcccb70de Mon Sep 17 00:00:00 2001
From: Lee <ycp998@naver.com>
Date: Thu, 17 Mar 2022 20:23:01 +0900
Subject: [PATCH] =?UTF-8?q?refactor=20:=20=EC=88=AB=EC=9E=90=20=EC=83=81?=
 =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../organisms/PreferenceModal/index.tsx       | 40 +++++++++++--------
 frontend/src/enum/index.ts                    |  2 +
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/organisms/PreferenceModal/index.tsx b/frontend/src/components/organisms/PreferenceModal/index.tsx
index 9f0b8bcf..68606bf2 100644
--- a/frontend/src/components/organisms/PreferenceModal/index.tsx
+++ b/frontend/src/components/organisms/PreferenceModal/index.tsx
@@ -1,6 +1,7 @@
 import React, { useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { preferenceModalState } from '@state/modal';
+import { PREFERENCE_MODAL_STATUS } from '@enum/index';
 import PreferenceMenuContent from './PreferenceMenuContent';
 import AboutUs from './AboutUs/AboutUs';
 import ThemeSelect from './ThemeSelect';
@@ -14,14 +15,19 @@ import {
   RowDiv,
 } from './styles';
 
-const selectedContent = ({ isClicked }: { isClicked: number }): JSX.Element => {
-  switch (isClicked) {
-    case 1:
+const { ABOUT, THEME, OUT } = PREFERENCE_MODAL_STATUS;
+
+const selectedContent = ({
+  currentPreferenceStatus,
+}: {
+  currentPreferenceStatus: number;
+}): JSX.Element => {
+  switch (currentPreferenceStatus) {
+    case ABOUT:
       return <AboutUs />;
-    case 2:
+    case THEME:
       return <ThemeSelect />;
-    case 3:
-      return <WorkspaceOut />;
+    case OUT:
     default:
       return <WorkspaceOut />;
   }
@@ -29,7 +35,7 @@ const selectedContent = ({ isClicked }: { isClicked: number }): JSX.Element => {
 
 const PreferenceModal = (): JSX.Element => {
   const [isOpen, setIsOpen] = useRecoilState(preferenceModalState);
-  const [isClicked, setClick] = useState<number>(1);
+  const [currentPreferenceStatus, setClick] = useState<number>(ABOUT);
 
   return (
     <StyledModal isOpen={isOpen} onClose={() => setIsOpen(false)} zIndex={100}>
@@ -38,27 +44,27 @@ const PreferenceModal = (): JSX.Element => {
         <RowDiv>
           <MenuContainer>
             <StyledDivLists
-              isClicked={isClicked}
-              index={1}
-              onClick={() => setClick(1)}
+              isClicked={currentPreferenceStatus}
+              index={ABOUT}
+              onClick={() => setClick(ABOUT)}
               text="About us"
             />
             <StyledDivLists
-              isClicked={isClicked}
-              index={2}
-              onClick={() => setClick(2)}
+              isClicked={currentPreferenceStatus}
+              index={THEME}
+              onClick={() => setClick(THEME)}
               text="테마 설정"
             />
             <StyledDivLists
-              isClicked={isClicked}
-              index={3}
+              isClicked={currentPreferenceStatus}
+              index={OUT}
               color="red"
-              onClick={() => setClick(3)}
+              onClick={() => setClick(OUT)}
               text="워크스페이스 탈퇴"
             />
           </MenuContainer>
           <PreferenceMenuContent>
-            {selectedContent({ isClicked })}
+            {selectedContent({ currentPreferenceStatus })}
           </PreferenceMenuContent>
         </RowDiv>
       </Container>
diff --git a/frontend/src/enum/index.ts b/frontend/src/enum/index.ts
index 59194e7b..0719c2b1 100644
--- a/frontend/src/enum/index.ts
+++ b/frontend/src/enum/index.ts
@@ -21,3 +21,5 @@ export const CHANNELTYPE = {
   1: '🔒',
   0: '#',
 } as const;
+
+export const PREFERENCE_MODAL_STATUS = { ABOUT: 1, THEME: 2, OUT: 3 };