feat: 영양사 월간조회 페이지

src/api/dinings/index.ts

@@ -1,7 +1,16 @@
 import { accessClient } from 'api';
-import { DiningsParams, OriginalDinings } from 'models/dinings';
+import { DiningsParams, OriginalDinings, DiningExcelParams } from 'models/dinings';
 
 export const getDinings = async (date: DiningsParams) => {
   const { data } = await accessClient.get<DiningsParams>(`/dinings?date=${date}`);
   return OriginalDinings.parse(data);
 };
+
+export const getExcel = async (params: DiningExcelParams) => {
+  const response = await accessClient.get(
+    `/coop/dining/excel?startDate=${params.startDate}&endDate=${params.endDate}&isCafeteria=${params.isCafeteria}`,
+    { responseType: 'blob' },
+  );
+
+  return response;
+};

src/layout/DefaultLayout/DefaultLayout.module.scss

@@ -1,9 +1,15 @@
+@use "src/assets/styles/mediaQuery" as media;
+
 .wrapper {
   position: relative;
-  max-width: 480px;
+  max-width: 100vw;
   min-height: 100%;
   width: auto;
   margin: 0 auto;
   background: #f5f5f5;
   box-shadow: 0 0 20px #0000000d;
+
+  @include media.media-breakpoint-down(mobile) {
+    width: 480px;
+  }
 }

src/layout/Header/Header.module.scss

@@ -1,17 +1,22 @@
 @use "src/assets/styles/mediaQuery" as media;
 
 .header {
-  position: sticky;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 99;
   display: flex;
   margin-inline: 24px;
+  max-width: 989px;
+  width: 100%;
+  margin: 0 auto;
   height: 80px;
   align-items: center;
   justify-content: space-between;
   background: #f5f5f5;
+  margin-bottom: 105px;
+
+  @include media.media-breakpoint-down(mobile) {
+    max-width: 480px;
+    width: 100%;
+    margin-bottom: 30px;
+  }
 }
 
 .header__content {

src/layout/Header/index.tsx

@@ -1,7 +1,5 @@
-import { Link } from 'react-router-dom';
-
 import Logo from 'assets/svg/common/koin-logo.svg?react';
-import Setting from 'assets/svg/main/gear.svg?react';
+import Setting1 from 'pages/Coop/components/Setting';
 
 import styles from './Header.module.scss';
 
@@ -12,10 +10,7 @@ function Header() {
     >
       <Logo />
       <nav className={styles.header__content}>
-        {/* <Search /> */}
-        <Link to="/setting">
-          <Setting />
-        </Link>
+        <Setting1 />
       </nav>
     </header>
   );

src/models/dinings.ts

@@ -20,6 +20,14 @@ export const DINING_TYPE_MAP = {
   DINNER: '저녁',
 } as const;
 
+export const DiningExcelParams = z.object({
+  startDate: z.string(),
+  endDate: z.string(),
+  isCafeteria: z.boolean(),
+});
+
+export type DiningExcelParams = z.infer<typeof DiningExcelParams>;
+
 export type DiningPlace = 'A코너' | 'B코너' | 'C코너' | '능수관' | '2캠퍼스';
 
 export const PlaceSchema = z.union([

src/pages/Coop/Coop.module.scss

@@ -1,11 +1,36 @@
+@use "src/assets/styles/mediaQuery" as media;
+
 .container {
   display: flex;
-  flex-direction: column;
+  max-width: 989px;
+  width: 100%;
+  margin: 0 auto;
+
+  @include media.media-breakpoint-down(mobile) {
+    flex-direction: column;
+    max-width: 480px; // 모바일 뷰에서는 너비 제한
+    width: 100%;
+  }
+}
+
+.diningDownloadWrapper {
+  display: flex;
+  margin-left: auto;
 }
 
 .content {
   display: flex;
+  flex-grow: 2; // 2배 공간
   flex-direction: column;
   padding: 16px 24px;
   gap: 12px;
 }
+
+.calendarWrapper {
+  flex-grow: 1; // 1:2 비율에서 1배의 공간
+  max-width: 989px;
+}
+
+.diningTypeWrapper {
+  flex-grow: 2; // 1:2 비율에서 2배 공간
+}

src/pages/Coop/components/Calendar/Calendar.module.scss

@@ -6,34 +6,29 @@
 }
 
 .title-wrapper {
-  display: grid;
-  grid-template-areas:
-    "title-main title-main"
-    "title-sub button-container";
   width: calc(100% - 48px);
   margin: 8px 24px;
 }
 
 .title--main {
-  grid-area: title-main;
   color: #727272;
-  font-size: 14px;
+  font-size: 18px;
   font-style: normal;
-  font-weight: 500;
+  font-weight: 400;
   line-height: 160%; /* 22.4px */
 }
 
 .title--sub {
-  grid-area: title-sub;
   color: #000;
-  font-size: 20px;
+  width: 273px;
+  font-size: 32px;
   font-style: normal;
   font-weight: 700;
   line-height: 160%; /* 32px */
+  margin-bottom: 20px;
 }
 
 .button-container {
-  grid-area: button-container;
   display: flex;
   align-items: center;
   justify-content: flex-end;

src/pages/Coop/components/DiningDownload/DiningDownload.module.scss

@@ -0,0 +1,27 @@
+.button-container {
+  display: flex;
+  background: #fff;
+  max-width: 173px;
+  width: 100%;
+  padding: 8px 12px;
+  gap: 8px;
+  border-radius: 8px;
+  height: 26px;
+}
+
+.dining-download-button {
+  display: flex;
+  background: #fff;
+  border: none;
+  color: #171717;
+  font-size: 14px;
+  font-weight: 400;
+  width: 119px;
+  height: 26px;
+  text-align: center;
+  padding: 2px 0 0 4px;
+}
+
+.exel-icon {
+  padding-top: 3px;
+}

src/pages/Coop/components/DiningDownload/index.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+
+import DownloadIcon from 'assets/svg/common/download.svg?react';
+import ExcelIcon from 'assets/svg/common/excel.svg?react';
+import DownloadModal from 'pages/Coop/components/DownloadModal';
+
+import styles from './DiningDownload.module.scss';
+
+export default function DiningDownload() {
+  const [isModalOpen, setIsModalOpen] = useState(false); // 모달 상태
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className={styles.container}>
+      <div className={styles['button-container']}>
+        <ExcelIcon className={styles['exel-icon']} />
+        <button type="button" onClick={openModal} className={styles['dining-download-button']}>식단 파일 다운로드</button>
+        <DownloadIcon className={styles['download-button']} />
+      </div>
+
+      {isModalOpen && <DownloadModal closeModal={closeModal} />}
+
+    </div>
+  );
+}

src/pages/Coop/components/DiningTypeSelect/DiningTypeSelect.module.scss

@@ -1,73 +1,33 @@
 .container {
   display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-left: 16px;
+  justify-content: center;
+  gap: 20px; // 버튼 간의 간격을 조절
+  margin-top: 16px;
+  background-color: #fff;
+  border-radius: 12px 12px 0 0;
 }
 
-.type-title {
-  color: #10477a;
+.dining-type-button {
+  max-width: 200px;
+  width: 100%;
+  height: 56px;
+  background: none;
+  border: none;
+  color: #666;
   font-size: 18px;
-  font-style: normal;
-  font-weight: 700;
-  line-height: 160%; /* 28.8px */
-}
-
-.dropdown {
-  position: relative;
-
-  &__trigger {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 6px 16px;
-    border-radius: 8px;
-    background: none;
-    color: #000;
-    font-size: 16px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 160%; /* 25.6px */
-
-    &:active {
-      background: #eee;
-    }
-  }
-}
-
-.arrow-icon {
-  transition: all 0.4s ease;
-
-  &__transform {
-    transform: rotate(-180deg);
+  font-weight: 600;
+  cursor: pointer;
+  padding: 16px 12px 16px 16px;
+  transition: color 0.3s ease;
+  gap: 8px;
+
+  &:hover {
+    color: #10477a; // hover 시 텍스트 색 변경
   }
 }
 
-.dropdown-list {
-  z-index: 5;
-  position: absolute;
-  bottom: -122px;
-  left: 0;
-  display: flex;
-  flex-direction: column;
-  width: 84px;
-  border-radius: 8px;
-  background: #fff;
-  box-shadow: 0 2px 20px 0 rgba(0 0 0 / 4%), 0 8px 32px 0 rgba(0 0 0 / 8%);
-}
-
-.dropdown-item {
-  display: flex;
-  align-items: center;
-  color: #000;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 160%; /* 25.6px */
-  padding: 6px 16px;
-  background: none;
-
-  &--selected {
-    background: #f5f5f5;
-  }
+.dining-type-button--selected {
+  color: #10477a;
+  font-weight: 700; // 선택된 버튼의 텍스트를 강조
+  border-bottom: 2px solid #10477a; // 선택된 버튼 아래쪽에 강조선 추가
 }