diff --git a/src/models/date.ts b/src/models/date.ts
new file mode 100644
index 0000000..5186bcf
--- /dev/null
+++ b/src/models/date.ts
@@ -0,0 +1 @@
+export type Day = '일' | '월' | '화' | '수' | '목' | '금' | '토';
diff --git a/src/pages/Coop/components/Calendar/Calendar.module.scss b/src/pages/Coop/components/Calendar/Calendar.module.scss
index fcabc41..7ac871f 100644
--- a/src/pages/Coop/components/Calendar/Calendar.module.scss
+++ b/src/pages/Coop/components/Calendar/Calendar.module.scss
@@ -1,109 +1,79 @@
 .container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  padding: 24px 24px 10px;
+  background-color: #fff;
+}
+
+.day {
+  width: 28px;
+  height: 55px;
   display: flex;
   flex-direction: column;
+  justify-content:space-between;
+  align-items: center;
+  background-color: transparent;
+  cursor: pointer;
+}
+
+.day-of-week {
   font-family: Pretendard, sans-serif;
-  margin-top: 24px;
-  gap: 10px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 20.8px;
+  text-align: center;
+  color: #8e8e8e;
 
-  &__calendar {
-    display: flex;
-    flex-direction: column;
-    font-family: Pretendard, sans-serif;
-    padding-top: 24px;
-    padding-bottom: 8px;
-    gap: 16px;
-    background-color: #fff;
+  &--after,
+  &--selected {
+    color: #4b4b4b;
   }
+}
 
-  &__week {
-    display: flex;
-    justify-content: space-around;
-    text-align: center;
-    color: #8e8e8e;
-    font-size: 13px;
-    font-weight: 400;
-    padding: 0 16px;
-  }
+.date {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-family: Pretendard, sans-serif;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 25.6px;
+  text-align: center;
+  color: #000;
+  width: 28px;
+  height: 28px;
+  border-radius: 99px;
+  background-color: transparent;
+  border: none;
+  padding-top: 2px;
+  box-sizing: border-box;
 
-  &__date {
-    display: flex;
-    justify-content: space-around;
-    align-items: center;
-    text-align: center;
+  &--previous {
     color: #8e8e8e;
-    font-size: 16px;
-    font-weight: 500;
-    padding: 0 16px;
-
-    &--future {
-      color: #000;
-    }
-
-    &--today-font {
-      color: #175c8e;
-    }
+  }
 
-    &--selected {
-      display: flex;
-      width: 28px;
-      height: 28px;
-      padding: 4px;
-      margin: -8px;
-      border-radius: 999px;
-      background-color: #175c8e;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-      font-weight: 500;
-      color: #fff;
-      -webkit-tap-highlight-color: rgb(0 0 0 / 0%);
-      -webkit-tap-highlight-color: transparent;
-    }
+  &--today {
+    font-size: 15px;
+    line-height: 24px;
+    color: #175c8e;
+    border: 1px solid #175c8e;
 
-    &--today {
-      display: flex;
-      width: 28px;
-      height: 28px;
-      padding: 2px;
-      margin: -7px;
+    &::after {
+      content: '';
+      position: absolute;
+      bottom: -9px;
       border: 1px solid #175c8e;
-      border-radius: 999px;
-      justify-content: center;
-      align-items: center;
-      font-size: 16px;
-      font-weight: 500;
+      width: 11.5px;
+      border-radius: 10px;
     }
-
-    &--common {
-      width: 20px;
-      height: 20px;
-    }
-
-    &--wrapper {
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      gap: 4px;
-    }
-  }
-
-  &__today--border {
-    display: flex;
-    width: 12px;
-    margin-top: 10px;
-    border-bottom: 2px solid #175c8e;
-    border-radius: 999px;
   }
 
-  &__common--border {
-    display: flex;
-    border-color: none;
-    margin-top: 10px;
-    border-bottom: 2px solid none;
+  &--selected {
+    font-size: 15px;
+    line-height: 24px;
+    color: #fff;
+    background-color: #175c8e;
   }
 }
-
-.cursor-pointer {
-  cursor: pointer;
-}
diff --git a/src/pages/Coop/components/Calendar/index.tsx b/src/pages/Coop/components/Calendar/index.tsx
index 0ed42ea..86e9019 100644
--- a/src/pages/Coop/components/Calendar/index.tsx
+++ b/src/pages/Coop/components/Calendar/index.tsx
@@ -1,67 +1,49 @@
-import { getDayOfWeek } from 'pages/Coop/hook/useGetDayOfWeek';
 import cn from 'utils/className';
+import { getDayOfWeek } from 'utils/date';
 
 import dayjs from 'dayjs';
 
 import styles from './Calendar.module.scss';
 
-interface DateProps {
-  selectedDate: string;
+interface Props {
+  selectedDate: string; // .format('YYYY-MM-DD') 형식
   setSelectedDate: (dateType: string) => void;
 }
-export default function Calendar({ selectedDate, setSelectedDate }: DateProps) {
+export default function Calendar({ selectedDate, setSelectedDate }: Props) {
   const today = dayjs();
-  const weekDays = Array.from({ length: 7 }, (_, i) => today.add(i - 3, 'day'));
+  const weekDays = Array.from(
+    { length: 7 },
+    (_, i) => today.add(i - 3, 'day').format('YYYY-MM-DD'),
+  );
 
   return (
-    <div className={styles.container__calendar}>
-      <div className={styles.container__week}>
-        {weekDays.map((day) => (
-          <div key={day.format('YYYY-MM-DD')}>
-            <div className={styles['container__date--common']}>{getDayOfWeek(day.format('YYYY-MM-DD'))}</div>
-          </div>
-        ))}
-      </div>
-      <div className={styles.container__date}>
-        {weekDays.map((day) => {
-          const dayFormat = day.format('YYYY-MM-DD');
-          return (
-            <div
-              key={dayFormat}
-              tabIndex={0}
-              role="button"
-              onClick={() => setSelectedDate(dayFormat)}
-              className={cn({
-                [styles['container__date--wrapper']]: true,
-                [styles['container__date--future']]: day.isAfter(today, 'day'),
-                [styles['container__date--today-font']]: day.isSame(today, 'day'),
-              })}
-              onKeyDown={(event) => {
-                if (event.key === 'Enter' || event.key === ' ') {
-                  setSelectedDate(dayFormat);
-                }
-              }}
-            >
-              <div
-                className={cn({
-                  [styles['container__date--selected']]: dayFormat === selectedDate,
-                  [styles['container__date--common']]: !day.isSame(today, 'day') && dayFormat !== selectedDate,
-                  [styles['cursor-pointer']]: true,
-                  [styles['container__date--wrapper']]: day.isSame(today, 'day'),
-                  [styles['container__date--today']]: day.isSame(today, 'day') && dayFormat !== selectedDate,
-                })}
-              >
-                {day.format('DD')}
-              </div>
-              <div className={cn({
-                [styles['container__today--border']]: day.isSame(today, 'day'),
-                [styles['container__common--border']]: !day.isSame(today, 'day'),
-              })}
-              />
-            </div>
-          );
-        })}
-      </div>
+    <div className={styles.container}>
+      {weekDays.map((day) => (
+        <button
+          key={day}
+          type="button"
+          className={styles.day}
+          onClick={() => setSelectedDate(day)}
+        >
+          <span className={cn({
+            [styles['day-of-week']]: true,
+            [styles['day-of-week--after']]: dayjs(day).isAfter(today, 'day'),
+            [styles['day-of-week--selected']]: day === selectedDate,
+          })}
+          >
+            {getDayOfWeek(day)}
+          </span>
+          <span className={cn({
+            [styles.date]: true,
+            [styles['date--previous']]: dayjs(day).isBefore(today, 'day'),
+            [styles['date--today']]: day === today.format('YYYY-MM-DD'),
+            [styles['date--selected']]: day === selectedDate,
+          })}
+          >
+            {dayjs(day).format('DD')}
+          </span>
+        </button>
+      ))}
     </div>
   );
 }
diff --git a/src/pages/Coop/components/MenuCard/index.tsx b/src/pages/Coop/components/MenuCard/index.tsx
index d48303f..d4f4935 100644
--- a/src/pages/Coop/components/MenuCard/index.tsx
+++ b/src/pages/Coop/components/MenuCard/index.tsx
@@ -20,8 +20,8 @@ import axios from 'axios';
 import styles from './MenuCard.module.scss';
 
 interface Props {
-  selectedMenuType: DiningType;
-  selectedDate: string;
+  diningType: DiningType;
+  date: string;
 }
 
 interface FileInfo {
@@ -29,16 +29,16 @@ interface FileInfo {
   presignedUrl: string;
 }
 
-export default function MenuCard({ selectedMenuType, selectedDate }: Props) {
+export default function MenuCard({ diningType, date }: Props) {
   const { uploadDiningImageMutation } = useUploadDiningImage();
   const { toggleSoldOut } = useSoldOut();
   const fileInputRefs = useRef<{ [key: number]: HTMLInputElement | null }>({});
   const [isSoldOutModalOpen, setIsSoldOutModalOpen] = useState(false);
   const [selectedMenu, setSelectedMenu] = useState<Dining | null>(null);
-  const formattedDate = selectedDate.replace('-', '').replace('-', '').substring(2);
+  const formattedDate = date.replace('-', '').replace('-', '').substring(2);
   const { data: dinings } = useGetDinings(formattedDate);
   const [openMenu, setOpenMenu] = useState<OperatingStatus>(
-    getOpenMenuType(selectedMenuType, formattedDate),
+    getOpenMenuType(diningType, formattedDate),
   );
 
   const uploadImage = async ({ presignedUrl, file }: FileInfo) => {
@@ -97,8 +97,8 @@ export default function MenuCard({ selectedMenuType, selectedDate }: Props) {
   };
 
   useEffect(() => {
-    setOpenMenu(getOpenMenuType(selectedMenuType, formattedDate));
-  }, [selectedMenuType, formattedDate]);
+    setOpenMenu(getOpenMenuType(diningType, formattedDate));
+  }, [diningType, formattedDate]);
 
   return (
     <Suspense fallback={<div />}>
diff --git a/src/pages/Coop/components/MenuType/index.tsx b/src/pages/Coop/components/MenuType/index.tsx
index 3b24b6d..31098a7 100644
--- a/src/pages/Coop/components/MenuType/index.tsx
+++ b/src/pages/Coop/components/MenuType/index.tsx
@@ -4,20 +4,20 @@ import cn from 'utils/className';
 import styles from './MenuType.module.scss';
 
 interface MenuTypeProps {
-  selectedMenuType: DiningType;
-  setSelectedMenuType: (menuType: DiningType) => void;
+  diningType: DiningType;
+  setDiningType: (diningType: DiningType) => void;
 }
 
-export default function MenuType({ selectedMenuType, setSelectedMenuType }: MenuTypeProps) {
+export default function MenuType({ diningType, setDiningType }: MenuTypeProps) {
   return (
     <div className={styles.place__container}>
       <button
         className={cn({
-          [styles['place__button--selected']]: selectedMenuType === 'BREAKFAST',
-          [styles.place__button]: selectedMenuType !== 'BREAKFAST',
+          [styles['place__button--selected']]: diningType === 'BREAKFAST',
+          [styles.place__button]: diningType !== 'BREAKFAST',
         })}
-        onClick={() => setSelectedMenuType('BREAKFAST')}
-        onKeyDown={(e) => e.key === 'Enter' && setSelectedMenuType('BREAKFAST')}
+        onClick={() => setDiningType('BREAKFAST')}
+        onKeyDown={(e) => e.key === 'Enter' && setDiningType('BREAKFAST')}
         type="button"
         tabIndex={0}
       >
@@ -25,11 +25,11 @@ export default function MenuType({ selectedMenuType, setSelectedMenuType }: Menu
       </button>
       <button
         className={cn({
-          [styles['place__button--selected']]: selectedMenuType === 'LUNCH',
-          [styles.place__button]: selectedMenuType !== 'LUNCH',
+          [styles['place__button--selected']]: diningType === 'LUNCH',
+          [styles.place__button]: diningType !== 'LUNCH',
         })}
-        onClick={() => setSelectedMenuType('LUNCH')}
-        onKeyDown={(e) => e.key === 'Enter' && setSelectedMenuType('LUNCH')}
+        onClick={() => setDiningType('LUNCH')}
+        onKeyDown={(e) => e.key === 'Enter' && setDiningType('LUNCH')}
         type="button"
         tabIndex={0}
       >
@@ -37,11 +37,11 @@ export default function MenuType({ selectedMenuType, setSelectedMenuType }: Menu
       </button>
       <button
         className={cn({
-          [styles['place__button--selected']]: selectedMenuType === 'DINNER',
-          [styles.place__button]: selectedMenuType !== 'DINNER',
+          [styles['place__button--selected']]: diningType === 'DINNER',
+          [styles.place__button]: diningType !== 'DINNER',
         })}
-        onClick={() => setSelectedMenuType('DINNER')}
-        onKeyDown={(e) => e.key === 'Enter' && setSelectedMenuType('DINNER')}
+        onClick={() => setDiningType('DINNER')}
+        onKeyDown={(e) => e.key === 'Enter' && setDiningType('DINNER')}
         type="button"
         tabIndex={0}
       >
diff --git a/src/pages/Coop/hook/useGetCurrentMenuType.ts b/src/pages/Coop/hook/useGetCurrentMenuType.ts
index 7dd1c39..26b081f 100644
--- a/src/pages/Coop/hook/useGetCurrentMenuType.ts
+++ b/src/pages/Coop/hook/useGetCurrentMenuType.ts
@@ -6,22 +6,13 @@ export type OperatingStatus = '운영중' | '운영종료';
 
 export const OPEN = '운영중';
 
-export const getCurrentMenuType = (): DiningType => {
+export const getDiningTypeOnTime = (): DiningType => {
   const now = new Date();
-  const hour = now.getHours();
-  const minute = now.getMinutes();
-  const time = hour * 60 + minute;
+  const time = now.getHours() * 60 + now.getMinutes();
 
-  // 00:01~10:30
-  if (time >= 1 && time <= 630) {
-    return 'BREAKFAST';
-  }
-  // 10:31~15:00
-  if (time <= 900) {
-    return 'LUNCH';
-  }
-  // 15:01~24:00
-  return 'DINNER';
+  if (time <= 630) return 'BREAKFAST'; // 00:01~10:30
+  if (time <= 900) return 'LUNCH'; // 10:31~15:00
+  return 'DINNER'; // 15:01~24:00
 };
 
 // date = 'yyMMdd'
diff --git a/src/pages/Coop/hook/useGetDayOfWeek.ts b/src/pages/Coop/hook/useGetDayOfWeek.ts
deleted file mode 100644
index 78b4029..0000000
--- a/src/pages/Coop/hook/useGetDayOfWeek.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import dayjs from 'dayjs';
-
-export type Day = '일' | '월' | '화' | '수' | '목' | '금' | '토';
-
-export const getDayOfWeek = (date: string): Day => {
-  const dayOfWeek = dayjs(date).day();
-  switch (dayOfWeek) {
-    case 0:
-      return '일';
-    case 1:
-      return '월';
-    case 2:
-      return '화';
-    case 3:
-      return '수';
-    case 4:
-      return '목';
-    case 5:
-      return '금';
-    case 6:
-      return '토';
-    default:
-      throw new Error('해당없음');
-  }
-};
diff --git a/src/pages/Coop/index.tsx b/src/pages/Coop/index.tsx
index 046e48a..2c3616f 100644
--- a/src/pages/Coop/index.tsx
+++ b/src/pages/Coop/index.tsx
@@ -3,21 +3,22 @@ import { useState } from 'react';
 import Calendar from 'pages/Coop/components/Calendar';
 import MenuCard from 'pages/Coop/components/MenuCard';
 import MenuType from 'pages/Coop/components/MenuType';
-import { getCurrentMenuType } from 'pages/Coop/hook/useGetCurrentMenuType';
+import { getDiningTypeOnTime } from 'pages/Coop/hook/useGetCurrentMenuType';
 
 import dayjs from 'dayjs';
 
 import styles from './Coop.module.scss';
 
 export default function Coop() {
-  const [selectedMenuType, setSelectedMenuType] = useState(getCurrentMenuType());
+  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} />
-        <MenuType selectedMenuType={selectedMenuType} setSelectedMenuType={setSelectedMenuType} />
-        <MenuCard selectedMenuType={selectedMenuType} selectedDate={selectedDate} />
+        <MenuType diningType={diningType} setDiningType={setDiningType} />
+        <MenuCard diningType={diningType} date={selectedDate} />
       </div>
     </div>
   );
diff --git a/src/utils/date.ts b/src/utils/date.ts
new file mode 100644
index 0000000..ddc6c45
--- /dev/null
+++ b/src/utils/date.ts
@@ -0,0 +1,9 @@
+import { Day } from 'models/date';
+
+import dayjs from 'dayjs';
+
+export const getDayOfWeek = (date: string): Day => { // date는 현재 .format('YYYY-MM-DD') 형식임. 아니어도 됨.
+  const dayOfWeek = dayjs(date).day();
+  const dayOfWeekKorean: Day[] = ['일', '월', '화', '수', '목', '금', '토'];
+  return dayOfWeekKorean[dayOfWeek];
+};