refactor: QA 반영

BCSDLab · Oct 14, 2024 · 7b09aa9 · 7b09aa9
1 parent d30f1e3
commit 7b09aa9
Show file tree

Hide file tree

Showing 16 changed files with 263 additions and 72 deletions.
diff --git a/src/layout/Header/Dropdown.module.scss b/src/layout/Header/Dropdown.module.scss
@@ -1,16 +1,21 @@
 .container {
   position: absolute;
-  top: 100px;
+  display: flex;
+  top: 80px;
   right: 0;
   width: 100%;
   background-color: #f5f5f5;
   box-shadow: 0 5px 7px rgb(0 0 0 / 10%);
   z-index: 1000;
-  display: flex;
   flex-direction: column;
 }
 
-.setting-item__link,
+.setting-item__link {
+  padding: 10px;
+  text-align: left;
+  width: calc(100% - 20px);
+}
+
 .setting-item__button {
   padding: 10px;
   text-align: left;

diff --git a/src/layout/Header/Header.module.scss b/src/layout/Header/Header.module.scss
@@ -35,6 +35,10 @@
   margin-right: 24px;
 }
 
+.menu-icon {
+  background: none;
+}
+
 .search,
 .menu {
   cursor: pointer;

diff --git a/src/layout/Header/index.tsx b/src/layout/Header/index.tsx
@@ -3,7 +3,7 @@ import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import Menu from 'assets/svg/auth/menu.svg?react';
-import SearchIcon from 'assets/svg/auth/search-icon.svg?react';
+// import SearchIcon from 'assets/svg/auth/search-icon.svg?react';
 import Logo from 'assets/svg/common/koin-logo.svg?react';
 import useMediaQuery from 'hooks/useMediaQuery';
 import Setting1 from 'pages/Coop/components/Setting';
@@ -23,16 +23,17 @@ function Header() {
           <div>
             <ul>
               <div className={styles['menu-container']}>
-                <SearchIcon className={styles.search} />
-                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions,
-                jsx-a11y/click-events-have-key-events */}
-                <div
-                  onClick={() => setView(!view)}
+                {/* 월간조회 기능 추가 시 활성화 */}
+                {/* <SearchIcon className={styles.search} /> */}
+                <button
+                  type="button"
+                  onClick={() => setView((prev) => !prev)}
                   className={styles['menu-icon']}
                   style={{ position: 'relative' }}
+                  aria-label="메뉴 버튼"
                 >
                   <Menu className={styles.menu} />
-                </div>
+                </button>
                 {view && <MobileDropdown />}
               </div>
             </ul>

diff --git a/src/pages/Coop/components/Calendar/Calendar.module.scss b/src/pages/Coop/components/Calendar/Calendar.module.scss
@@ -134,13 +134,18 @@
 }
 
 .title-wrapper-mobile {
-  width: calc(100% - 48px);
+  width: 100%;
   margin: 8px 24px;
+
+  @include media.media-breakpoint-down(mobile) {
+    margin: 0;
+  }
 }
 
 .move-wrapper-mobile {
   display: flex;
   justify-content: space-between;
+  width: calc(100% - 48px);
 }
 
 .button-container-mobile {

diff --git a/src/pages/Coop/components/Calendar/hooks/useCalendar.ts b/src/pages/Coop/components/Calendar/hooks/useCalendar.ts
@@ -59,7 +59,13 @@ function useCalendar() {
     return setMonth((p) => p + 1);
   };
 
+  const goToday = () => {
+    setYear(today.getFullYear());
+    setMonth(today.getMonth() + 1);
+  };
+
   return {
+    goToday,
     today,
     year,
     month,

diff --git a/src/pages/Coop/components/Calendar/index.tsx b/src/pages/Coop/components/Calendar/index.tsx
@@ -23,27 +23,16 @@ interface CalendarProps {
 }
 
 export default function Calendar({ selectedDate, setSelectedDate }: CalendarProps) {
-  const { dateList, isToday } = useCalendar();
+  const {
+    dateList,
+    isToday,
+    prevMonth: prevCalendarMonth,
+    nextMonth: nextCalendarMonth,
+    goToday,
+  } = useCalendar();
   const [dateListFormState, setdateListFormState] = useState<'week' | 'month'>('week');
   const { isMobile } = useMediaQuery();
 
-  const handlePrevNext = (direction: 'prev' | 'next') => {
-    let newDate;
-    if (dateListFormState === 'week') {
-      newDate = new Date(selectedDate);
-      newDate.setDate(newDate.getDate() + (direction === 'prev' ? -WEEK : WEEK)); // 주 단위 이동
-    } else {
-      newDate = new Date(selectedDate);
-      newDate.setMonth(newDate.getMonth() + (direction === 'prev' ? -1 : 1)); // 월 단위 이동
-    }
-    setSelectedDate(newDate); // 선택된 날짜 업데이트
-  };
-
-  const handleTodayClick = () => {
-    const today = new Date();
-    setSelectedDate(today);
-  };
-
   const getDateList = (form: 'week' | 'month') => {
     if (form === 'week') {
       const todayDateIndex = dateList.findIndex((date) => isSameDate(selectedDate, date));
@@ -59,6 +48,53 @@ export default function Calendar({ selectedDate, setSelectedDate }: CalendarProp
     return [];
   };
 
+  const prevMonth = () => {
+    const prevMonthDate = new Date(selectedDate);
+    prevMonthDate.setMonth(selectedDate.getMonth() - 1);
+    prevCalendarMonth();
+    setSelectedDate(prevMonthDate);
+  };
+
+  const nextMonth = () => {
+    const nextMonthDate = new Date(selectedDate);
+    nextMonthDate.setMonth(selectedDate.getMonth() + 1);
+    nextCalendarMonth();
+    setSelectedDate(nextMonthDate);
+  };
+
+  const prevWeek = () => {
+    const prevWeekDate = new Date(selectedDate);
+    prevWeekDate.setDate(selectedDate.getDate() - WEEK);
+
+    const todayDateIndex = dateList.findIndex((date) => isSameDate(selectedDate, date));
+    const rowIndex = Math.floor(todayDateIndex / WEEK);
+
+    if (rowIndex === 0) {
+      prevCalendarMonth();
+    }
+
+    setSelectedDate(prevWeekDate);
+  };
+
+  const nextWeek = () => {
+    const prevWeekDate = new Date(selectedDate);
+    prevWeekDate.setDate(selectedDate.getDate() + WEEK);
+
+    const todayDateIndex = dateList.findIndex((date) => isSameDate(selectedDate, date));
+    const rowIndex = Math.floor(todayDateIndex / WEEK);
+
+    if (rowIndex === 5) {
+      nextCalendarMonth();
+    }
+    setSelectedDate(prevWeekDate);
+  };
+
+  const handleTodayClick = () => {
+    const today = new Date();
+    goToday();
+    setSelectedDate(today);
+  };
+
   return (
     <div>
       {isMobile ? (
@@ -101,9 +137,9 @@ export default function Calendar({ selectedDate, setSelectedDate }: CalendarProp
           </div>
 
           <DateMover
-            onPrevClick={() => handlePrevNext('prev')}
-            onNextClick={() => handlePrevNext('next')}
-            onTodayClick={() => handleTodayClick()}
+            onPrevClick={dateListFormState === 'week' ? prevWeek : prevMonth}
+            onNextClick={dateListFormState === 'week' ? nextWeek : nextMonth}
+            onTodayClick={handleTodayClick}
           />
 
           <div className={styles['calendar-body']}>
@@ -144,9 +180,9 @@ export default function Calendar({ selectedDate, setSelectedDate }: CalendarProp
             </div>
             <div className={styles['move-wrapper']}>
               <DateMover
-                onPrevClick={() => handlePrevNext('prev')}
-                onNextClick={() => handlePrevNext('next')}
-                onTodayClick={() => handleTodayClick()}
+                onPrevClick={dateListFormState === 'week' ? prevWeek : prevMonth}
+                onNextClick={dateListFormState === 'week' ? nextWeek : nextMonth}
+                onTodayClick={handleTodayClick}
               />
               <div className={styles['button-container']}>
                 <button

diff --git a/src/pages/Coop/components/DateMover/DateMover.module.scss b/src/pages/Coop/components/DateMover/DateMover.module.scss
@@ -1,7 +1,11 @@
 .button-container {
   display: flex;
   gap: 16px;
-  margin-top: 5px;
+  align-items: center;
+
+  & > button {
+    background: none;
+  }
 }
 
 .button-prev,
@@ -18,6 +22,12 @@
   text-align: center;
   cursor: default;
 
+  color: #000;
+  font-family: Pretendard;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 160%; /* 28.8px */
+
   &:hover {
     background-color: #e1e1e1;
     border-radius: 999px;

diff --git a/src/pages/Coop/components/DateMover/index.tsx b/src/pages/Coop/components/DateMover/index.tsx
@@ -13,36 +13,22 @@ export default function DateMover({ onPrevClick, onNextClick, onTodayClick }: Da
   return (
     <div className={styles['button-container']}>
 
-      <div
-        role="button"
-        tabIndex={0}
-        onClick={onPrevClick}
-        onKeyDown={onPrevClick}
-        aria-label="이전 버튼"
-      >
+      <button type="button" onClick={onPrevClick} aria-label="이전 버튼">
         <ArrowLeftIcon className={styles['button-prev']} />
-      </div>
+      </button>
 
-      <div
+      <button
         className={styles['button-today']}
-        role="button"
-        tabIndex={0}
+        type="button"
         onClick={onTodayClick}
-        onKeyDown={onTodayClick}
         aria-label="오늘 버튼"
       >
         오늘
-      </div>
+      </button>
 
-      <div
-        role="button"
-        tabIndex={0}
-        onClick={onNextClick}
-        onKeyDown={onNextClick}
-        aria-label="다음 버튼"
-      >
+      <button type="button" onClick={onNextClick} aria-label="이전 버튼">
         <ArrowRightIcon className={styles['button-next']} />
-      </div>
+      </button>
 
     </div>
   );

diff --git a/src/pages/Coop/components/DiningBlocks/DiningBlocks.module.scss b/src/pages/Coop/components/DiningBlocks/DiningBlocks.module.scss
@@ -179,4 +179,5 @@
 
 .diet-image {
   width: 100%;
+  -webkit-user-drag: none;
 }
diff --git a/src/pages/Coop/components/DiningDownload/DiningDownload.module.scss b/src/pages/Coop/components/DiningDownload/DiningDownload.module.scss
@@ -4,6 +4,7 @@
   padding: 8px 12px;
   gap: 8px;
   border-radius: 8px;
+  align-items: center;
 
   &:hover {
     cursor: pointer;
@@ -18,7 +19,6 @@
   font-size: 14px;
   font-weight: 400;
   text-align: center;
-  padding: 2px 0 0 4px;
 }
 
 .exel-icon {

diff --git a/src/pages/Coop/components/DiningDownload/index.tsx b/src/pages/Coop/components/DiningDownload/index.tsx
@@ -18,7 +18,7 @@ export default function DiningDownload() {
   };
 
   return (
-    <div className={styles.container}>
+    <>
       <div
         className={styles['button-container']}
         role="button"
@@ -30,9 +30,7 @@ export default function DiningDownload() {
         <div className={styles['dining-download-button']}>식단 파일 다운로드</div>
         <DownloadIcon className={styles['download-button']} />
       </div>
-
       {isModalOpen && <DownloadModal closeModal={closeModal} />}
-
-    </div>
+    </>
   );
 }