Merge pull request #60 from boostcampwm-2022/refactor/#59-C

Refactor/#59-C: MODAL_MENUS를 배열 인덱스로 바로 접근하도록 수정

Author: wcho21

client/src/constants/workspace.ts

@@ -13,31 +13,25 @@ Object.freeze(MENUS);
 
 export const MODAL_MENUS = [
   {
-    id: 1,
-    props: {
-      title: '워크스페이스 생성',
-      texts: ['워크스페이스 이름을 입력해주세요.'],
-      btnText: '생성하기',
-    },
-  },
-  {
-    id: 2,
-    props: {
-      title: '워크스페이스 참여',
-      texts: ['워크스페이스 코드를 입력해주세요.'],
-      btnText: '참여하기',
-    },
-  },
-  {
-    id: 3,
-    props: {
-      title: '워크스페이스 생성 완료',
-      texts: [
-        '워크스페이스가 생성되었습니다.',
-        ' 멤버들에게 참여 코드를 공유해보세요.',
-      ],
-      btnText: '확인',
-    },
-  },
-];
+    /* unused */
+    title: '',
+    texts: [],
+    btnText: ''
+  }, {
+    title: '워크스페이스 생성',
+    texts: ['워크스페이스 이름을 입력해주세요.'],
+    btnText: '생성하기',
+  }, {
+    title: '워크스페이스 참여',
+    texts: ['워크스페이스 코드를 입력해주세요.'],
+    btnText: '참여하기',
+  }, {
+    title: '워크스페이스 생성 완료',
+    texts: [
+      '워크스페이스가 생성되었습니다.',
+      ' 멤버들에게 참여 코드를 공유해보세요.',
+    ],
+    btnText: '확인',
+  }
+]
 Object.freeze(MODAL_MENUS);

client/src/pages/Workspace/index.tsx

@@ -51,20 +51,18 @@ function WorkspacePage() {
         </SelectModal>
       )}
 
-      {MODAL_MENUS.map(({ id, props: { title, texts, btnText } }) => {
-        if (id === clickedMenuId)
-          return (
-            <WorkspaceModal
-              key={id}
-              {...{ title, texts, btnText }}
-              inputValue={inputValue}
-              onChange={onInput}
-              onClose={() => setClickedMenuId(0)}
-              onClick={onClickBtn}
-              isInputDisabled={clickedMenuId === MENU.JOIN_SUCCESS_ID}
-            />
-          );
-      })}
+      {clickedMenuId !== 0 && (
+        <WorkspaceModal
+          title={MODAL_MENUS[clickedMenuId].title}
+          texts={MODAL_MENUS[clickedMenuId].texts}
+          btnText={MODAL_MENUS[clickedMenuId].btnText}
+          inputValue={inputValue}
+          onChange={onInput}
+          onClose={() => setClickedMenuId(0)}
+          onClick={onClickBtn}
+          isInputDisabled={clickedMenuId === MENU.JOIN_SUCCESS_ID}
+        />
+      )}
     </div>
   );
 }