-
-
- 월간 식단
-
- {`${selectedDate.getMonth() + 1}월 ${selectedDate.getDate()}일 ${DAYS[selectedDate.getDay()]}요일`}
-
-
-
-
-
-
-
- {DAYS.map((day) => (
- 
}
+ {dining.image_url && }
{!dining.image_url && (
(null);
+
+ useOnClickOutside(ref, () => setTypeOpen(false));
+
+ return (
+ ({ year: '', month: '', day: '' });
const [endDate, setEndDate] = useState({ year: '', month: '', day: '' });
const [isStudentCafeteriaOnly, setIsStudentCafeteriaOnly] = useState(false);
+ const [isDownloading, setIsDownloading] = useBooleanState(false);
const handleDateChange = (
setDate: React.Dispatch>,
@@ -32,7 +35,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
) => {
setDate((prev) => ({
...prev,
- [field]: e.target.value,
+ [field]: e.target.valueAsNumber || '',
}));
};
@@ -42,25 +45,11 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
}
}, [closeModal]);
- const handleKeyDown = useCallback((e: KeyboardEvent) => {
- if (e.key === 'Escape') {
- closeModal();
- }
- }, [closeModal]);
-
- useEffect(() => {
- window.addEventListener('keydown', handleKeyDown);
-
- return () => {
- window.removeEventListener('keydown', handleKeyDown);
- };
- }, [handleKeyDown]);
-
const formatDate = (date: DateInput) => {
if (!date.year || !date.month || !date.day) {
return '';
}
- return `${date.year}-${date.month.padStart(2, '0')}-${date.day.padStart(2, '0')}`;
+ return `${date.year.toString()}-${date.month.toString().padStart(2, '0')}-${date.day.toString().padStart(2, '0')}`;
};
const showToast = (message: string) => {
@@ -79,11 +68,6 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
const formattedStartDate = formatDate(startDate);
const formattedEndDate = formatDate(endDate);
- if (!formattedStartDate || !formattedEndDate) {
- showToast('날짜를 모두 입력해 주세요.');
- return;
- }
-
const requestBody = {
startDate: formattedStartDate,
endDate: formattedEndDate,
@@ -91,12 +75,14 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
};
try {
+ setIsDownloading(true);
const response = await getExcel(requestBody);
let filename = `dining_${requestBody.startDate}~${requestBody.endDate}.xlsx`;
if (response && response.headers) {
const contentDisposition = response.headers['content-disposition'];
+
if (contentDisposition) {
const match = contentDisposition.match(/filename="?(.+)"?/);
if (match) {
@@ -107,6 +93,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
}
const downloadUrl = URL.createObjectURL(response.data);
+
const link = document.createElement('a');
link.href = downloadUrl;
link.download = filename;
@@ -114,8 +101,16 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
link.click();
document.body.removeChild(link);
URL.revokeObjectURL(downloadUrl);
+ setIsDownloading(false);
} catch (error) {
- showToast('파일 다운로드에 실패했습니다. 다시 시도해 주세요.');
+ // backend 수정 시 반영
+ // if (error?.response?.data instanceof Blob) {
+ // const errorText = await error.response.data.text();
+ // const errorJson = JSON.parse(errorText);
+ // showToast(errorJson.message);
+ // }
+
+ showToast('다운로드에 실패했습니다.');
}
};
@@ -123,14 +118,13 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
+ (getDiningTypeOnTime());
+ const { isMobile } = useMediaQuery();
return (
{day}
- ))}
+
+ {isMobile ? (
+ // 모바일 뷰
+
+
);
}
diff --git a/src/pages/Coop/components/DateMover/DateMover.module.scss b/src/pages/Coop/components/DateMover/DateMover.module.scss
new file mode 100644
index 0000000..311d017
--- /dev/null
+++ b/src/pages/Coop/components/DateMover/DateMover.module.scss
@@ -0,0 +1,35 @@
+.button-container {
+ display: flex;
+ gap: 16px;
+ align-items: center;
+
+ & > button {
+ background: none;
+ }
+}
+
+.button-prev,
+.button-next {
+ &:hover {
+ background-color: #e1e1e1;
+ border-radius: 999px;
+ cursor: pointer;
+ }
+}
+
+.button-today {
+ min-width: 48px;
+ text-align: center;
+ cursor: default;
+ color: #000;
+ font-family: Pretendard, sans-serif;
+ font-size: 18px;
+ font-weight: 500;
+ line-height: 160%; /* 28.8px */
+
+ &:hover {
+ background-color: #e1e1e1;
+ border-radius: 999px;
+ cursor: pointer;
+ }
+}
diff --git a/src/pages/Coop/components/DateMover/index.tsx b/src/pages/Coop/components/DateMover/index.tsx
new file mode 100644
index 0000000..4137f0b
--- /dev/null
+++ b/src/pages/Coop/components/DateMover/index.tsx
@@ -0,0 +1,35 @@
+import ArrowLeftIcon from 'assets/svg/common/arrow-left.svg?react';
+import ArrowRightIcon from 'assets/svg/common/arrow-right.svg?react';
+
+import styles from './DateMover.module.scss';
+
+interface DateMoverProps {
+ onPrevClick: () => void;
+ onNextClick: () => void;
+ onTodayClick: () => void;
+}
+
+export default function DateMover({ onPrevClick, onNextClick, onTodayClick }: DateMoverProps) {
+ return (
+
+
+
-
+
+
+
+
+
+
+
+ {dateListFormState === 'month' ? '월간 식단' : '주간 식단'}
+
+
+ {getSelectedDate()}
+
+
+
+
+
+
+
+ {DAYS.map((day) => (
+
+ {day}
+ ))}
+
+ {getDateList(dateListFormState).map((date) => (
+
+ ))}
+
+
- {getDateList(dateListFormState).map((date) => (
-
- ))}
+ ) : (
+ // 데스크탑 뷰
+
+
+ )}
+
-
+
+
+ {dateListFormState === 'month' ? '월간 식단' : '주간 식단'}
+
+
+ {getSelectedDate()}
+
+
+
+
+
+
+
+
+
+
+ {DAYS.map((day) => (
+
+ {day}
+ ))}
+
+ {getDateList(dateListFormState).map((date) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/Coop/components/DiningBlocks/DiningBlocks.module.scss b/src/pages/Coop/components/DiningBlocks/DiningBlocks.module.scss
index ff7c419..56ebe55 100644
--- a/src/pages/Coop/components/DiningBlocks/DiningBlocks.module.scss
+++ b/src/pages/Coop/components/DiningBlocks/DiningBlocks.module.scss
@@ -176,3 +176,8 @@
transform: rotate(180deg);
}
}
+
+.diet-image {
+ width: 100%;
+ -webkit-user-drag: none;
+}
diff --git a/src/pages/Coop/components/DiningBlocks/index.tsx b/src/pages/Coop/components/DiningBlocks/index.tsx
index 46b3e3c..bd43376 100644
--- a/src/pages/Coop/components/DiningBlocks/index.tsx
+++ b/src/pages/Coop/components/DiningBlocks/index.tsx
@@ -107,7 +107,7 @@ export default function DiningBlocks({ diningType, date }: DiningBlocksProps) {
className={styles['image-trigger']}
onClick={() => fileInputRefs.current[dining.id]?.click()}
>
- {dining.image_url &&
-
+
);
}
diff --git a/src/pages/Coop/components/DiningTypeSelect/MobileDiningTypeSelect/MobileDiningTypeSelect.module.scss b/src/pages/Coop/components/DiningTypeSelect/MobileDiningTypeSelect/MobileDiningTypeSelect.module.scss
new file mode 100644
index 0000000..ec80a79
--- /dev/null
+++ b/src/pages/Coop/components/DiningTypeSelect/MobileDiningTypeSelect/MobileDiningTypeSelect.module.scss
@@ -0,0 +1,73 @@
+.container {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-left: 16px;
+}
+
+.type-title {
+ color: #10477a;
+ 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);
+ }
+}
+
+.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;
+ }
+}
diff --git a/src/pages/Coop/components/DiningTypeSelect/MobileDiningTypeSelect/index.tsx b/src/pages/Coop/components/DiningTypeSelect/MobileDiningTypeSelect/index.tsx
new file mode 100644
index 0000000..1c73249
--- /dev/null
+++ b/src/pages/Coop/components/DiningTypeSelect/MobileDiningTypeSelect/index.tsx
@@ -0,0 +1,59 @@
+import { useRef, useState } from 'react';
+
+import ArrowDown from 'assets/svg/common/arrow-down.svg?react';
+import useOnClickOutside from 'hooks/useOnclickOutside';
+import { DiningType, DINING_TYPES, DINING_TYPE_MAP } from 'models/dinings';
+import cn from 'utils/className';
+
+import styles from './MobileDiningTypeSelect.module.scss';
+
+interface MobileDiningTypeSelectProps {
+ selectedDiningType: DiningType;
+ setSelectedDiningType: (diningType: DiningType) => void;
+}
+
+export default function MobileDiningTypeSelect({
+ selectedDiningType, setSelectedDiningType,
+}: MobileDiningTypeSelectProps) {
+ const [typeOpen, setTypeOpen] = useState(false);
+ const ref = useRef
+ <>
+
-
+
{isModalOpen &&
+
+ );
+}
diff --git a/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss b/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss
index 4601580..eae2edd 100644
--- a/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss
+++ b/src/pages/Coop/components/DownloadModal/DownloadModal.module.scss
@@ -8,6 +8,7 @@
width: 100vw;
height: 100vh;
background-color: #00000066;
+ z-index: 1000;
}
.date-container {
@@ -18,7 +19,6 @@
display: flex;
flex-direction: column;
width: 485px;
- height: 345px;
padding: 24px 32px;
box-sizing: border-box;
background-color: #fff;
@@ -81,27 +81,36 @@
.toggle-container {
display: flex;
gap: 24px;
- margin: 7px 0 30px;
+ justify-content: flex-end;
+ align-items: center;
position: relative;
- left: 162px;
+ margin: 8px 0;
+
+ & > label {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
}
-.button-wrapper {
+.button-container {
display: flex;
- justify-content: center;
+ justify-content: flex-end;
align-items: center;
- margin: 0 auto;
- max-width: 160px;
- width: 100%;
- gap: 8px;
+ margin: 24px auto 0;
+ padding: 8px 36px;
+ color: #fff;
background-color: #175c8e;
border-radius: 4px;
+ gap: 8px;
}
-.buttons-confirm {
- height: 42px;
- border: none;
- background-color: #175c8e;
- color: #fff;
- margin-left: 10px;
+.button-title {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 24px;
+ font-size: 16px;
+ font-weight: 600;
}
diff --git a/src/pages/Coop/components/DownloadModal/index.tsx b/src/pages/Coop/components/DownloadModal/index.tsx
index b722139..df3f0d1 100644
--- a/src/pages/Coop/components/DownloadModal/index.tsx
+++ b/src/pages/Coop/components/DownloadModal/index.tsx
@@ -1,7 +1,9 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useCallback } from 'react';
import { getExcel } from 'api/dinings';
import DownloadIcon from 'assets/svg/common/download-white.svg?react';
+import LoadingSpinner from 'assets/svg/common/loading.svg?react';
+import useBooleanState from 'hooks/useBooleanState';
import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
@@ -15,15 +17,16 @@ interface DownloadModalProps {
}
interface DateInput {
- year: string;
- month: string;
- day: string;
+ year: number | '';
+ month: number | '';
+ day: number | '';
}
export default function DownloadModal({ closeModal }: DownloadModalProps) {
const [startDate, setStartDate] = useState{`${DINING_TYPE_MAP[selectedDiningType]} 식단`}
+
+
+ {typeOpen && (
+
+
+ {DINING_TYPES.map((type: DiningType) => (
+
+ ))}
+
+ )}
+ 식단 파일 다운로드
- 다운로드 할 식단의 기간을 설정해 주세요
-
+ 식단은 2022/11/29 부터 다운받을 수 있어요.
시작일
handleDateChange(setStartDate, 'year', e)}
className={styles['date-input-box']}
@@ -138,7 +132,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
/>
/
handleDateChange(setStartDate, 'month', e)}
className={styles['date-input-box']}
@@ -146,7 +140,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
/>
/
handleDateChange(setStartDate, 'day', e)}
className={styles['date-input-box']}
@@ -159,7 +153,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
- 종료일
handleDateChange(setEndDate, 'year', e)}
className={styles['date-input-box']}
@@ -167,7 +161,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
/>
/
handleDateChange(setEndDate, 'month', e)}
className={styles['date-input-box']}
@@ -175,7 +169,7 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
/>
/
handleDateChange(setEndDate, 'day', e)}
className={styles['date-input-box']}
@@ -183,11 +177,9 @@ export default function DownloadModal({ closeModal }: DownloadModalProps) {
/>
+
-
diff --git a/src/pages/Coop/index.tsx b/src/pages/Coop/index.tsx
index bea53b0..db32bc4 100644
--- a/src/pages/Coop/index.tsx
+++ b/src/pages/Coop/index.tsx
@@ -1,5 +1,6 @@
import { Suspense, useState } from 'react';
+import useMediaQuery from 'hooks/useMediaQuery';
import ErrorBoundary from 'layout/ErrorBoundary';
import Calendar from 'pages/Coop/components/Calendar';
import DiningBlocks from 'pages/Coop/components/DiningBlocks';
@@ -7,6 +8,7 @@ import DiningDownload from 'pages/Coop/components/DiningDownload';
import DiningTypeSelect from 'pages/Coop/components/DiningTypeSelect';
import { getDiningTypeOnTime } from 'utils/operate';
+import MobileDiningTypeSelect from './components/DiningTypeSelect/MobileDiningTypeSelect';
import styles from './Coop.module.scss';
import type { DiningType } from 'models/dinings';
@@ -14,6 +16,7 @@ import type { DiningType } from 'models/dinings';
export default function Coop() {
const [date, setDate] = useState(new Date());
const [diningType, setDiningType] = useState
-
-
-
-
+
+
@@ -21,15 +24,24 @@ export default function Coop() {
-
+ ) : (
+
-
-
-
+
+ )}
+ {isMobile ? (
+
+
+ )}