refactor: DiningTypeSelect 컴포넌트 수정

- 구조 간소화 - 반복 삭제
BCSDLab · Jun 15, 2024 · c7c2297 · c7c2297
1 parent 0d35e9d
commit c7c2297
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 80 deletions.
diff --git a/src/models/dinings.ts b/src/models/dinings.ts
@@ -12,6 +12,8 @@ export const DiningTypeSchema = z.union([
   z.literal('DINNER'),
 ]);
 
+export const DINING_TYPES = ['BREAKFAST', 'LUNCH', 'DINNER'] as const;
+
 export const DINING_TYPE_MAP = {
   BREAKFAST: '아침',
   LUNCH: '점심',

diff --git a/src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss b/src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss
@@ -1,40 +1,29 @@
-.place {
-  &__container {
-    display: flex;
-    height: 45px;
-    background-color: #fff;
-    align-items: center;
-    justify-content: center;
-    margin-top: 8px;
-    margin-bottom: -10px;
-  }
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 45px;
+  background-color: #fff;
+  margin-top: 8px;
+  margin-bottom: -10px;
+}
 
-  &__button {
-    flex-grow: 1;
-    height: 35px;
-    color: #8e8e8e;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    font-family: Pretendard, sans-serif;
-    font-size: 14px;
-    font-weight: 400;
-    border-bottom: 1.5px solid #e1e1e1;
-  }
+.button {
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 35px;
+  background-color: #fff;
+  color: #8e8e8e;
+  font-family: Pretendard, sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  border-bottom: 1.5px solid #e1e1e1;
+  cursor: pointer;
 
-  &__button--selected {
-    flex-grow: 1;
-    height: 35px;
+  &--selected {
     color: #175c8e;
-    background-color: #fff;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    cursor: pointer;
-    font-family: Pretendard, sans-serif;
-    font-size: 14px;
     font-weight: 500;
     border-bottom: 1.5px solid #10477a;
   }

diff --git a/src/pages/Coop/components/DiningTypeSelect/index.tsx b/src/pages/Coop/components/DiningTypeSelect/index.tsx
@@ -1,52 +1,29 @@
-import { DiningType } from 'models/dinings';
+import { DiningType, DINING_TYPES, DINING_TYPE_MAP } from 'models/dinings';
 import cn from 'utils/className';
 
 import styles from './DiningTypeSelect.module.scss';
 
-interface MenuTypeProps {
-  diningType: DiningType;
-  setDiningType: (diningType: DiningType) => void;
+interface Props {
+  selectedDiningType: DiningType;
+  setSelectedDiningType: (diningType: DiningType) => void;
 }
 
-export default function DiningTypeSelect({ diningType, setDiningType }: MenuTypeProps) {
+export default function DiningTypeSelect({ selectedDiningType, setSelectedDiningType }: Props) {
   return (
-    <div className={styles.place__container}>
-      <button
-        className={cn({
-          [styles['place__button--selected']]: diningType === 'BREAKFAST',
-          [styles.place__button]: diningType !== 'BREAKFAST',
-        })}
-        onClick={() => setDiningType('BREAKFAST')}
-        onKeyDown={(e) => e.key === 'Enter' && setDiningType('BREAKFAST')}
-        type="button"
-        tabIndex={0}
-      >
-        아침
-      </button>
-      <button
-        className={cn({
-          [styles['place__button--selected']]: diningType === 'LUNCH',
-          [styles.place__button]: diningType !== 'LUNCH',
-        })}
-        onClick={() => setDiningType('LUNCH')}
-        onKeyDown={(e) => e.key === 'Enter' && setDiningType('LUNCH')}
-        type="button"
-        tabIndex={0}
-      >
-        점심
-      </button>
-      <button
-        className={cn({
-          [styles['place__button--selected']]: diningType === 'DINNER',
-          [styles.place__button]: diningType !== 'DINNER',
-        })}
-        onClick={() => setDiningType('DINNER')}
-        onKeyDown={(e) => e.key === 'Enter' && setDiningType('DINNER')}
-        type="button"
-        tabIndex={0}
-      >
-        저녁
-      </button>
+    <div className={styles.container}>
+      {DINING_TYPES.map((type: DiningType) => (
+        <button
+          key={type}
+          type="button"
+          className={cn({
+            [styles.button]: true,
+            [styles['button--selected']]: selectedDiningType === type,
+          })}
+          onClick={() => setSelectedDiningType(type)}
+        >
+          {DINING_TYPE_MAP[type]}
+        </button>
+      ))}
     </div>
   );
 }
diff --git a/src/pages/Coop/index.tsx b/src/pages/Coop/index.tsx
@@ -10,15 +10,15 @@ import dayjs from 'dayjs';
 import styles from './Coop.module.scss';
 
 export default function Coop() {
+  const [date, setDate] = useState(dayjs().format('YYYY-MM-DD'));
   const [diningType, setDiningType] = useState(getDiningTypeOnTime());
-  const [selectedDate, setSelectedDate] = useState(dayjs().format('YYYY-MM-DD'));
 
   return (
     <div className={styles['container-wrapper']}>
       <div className={styles.container}>
-        <Calendar selectedDate={selectedDate} setSelectedDate={setSelectedDate} />
-        <DiningTypeSelect diningType={diningType} setDiningType={setDiningType} />
-        <DiningBlocks diningType={diningType} date={selectedDate} />
+        <Calendar selectedDate={date} setSelectedDate={setDate} />
+        <DiningTypeSelect selectedDiningType={diningType} setSelectedDiningType={setDiningType} />
+        <DiningBlocks diningType={diningType} date={date} />
       </div>
     </div>
   );