Merge pull request #126 from Step3-kakao-tech-campus/feat/#119

fix: Calendar 컴포넌트 날짜 이동 오류 해결
Step3-kakao-tech-campus · Oct 21, 2023 · d69d2ce · d69d2ce
2 parents 98c2ed0 + 80508eb
commit d69d2ce
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 52 deletions.
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -8,8 +8,8 @@
     <meta
       name="description"
       content="Web site created using create-react-app"
-      />
-    <title>React App</title>
+    />
+    <title>애니모리</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/commons/MonthDays.tsx b/src/commons/MonthDays.tsx
@@ -29,16 +29,16 @@ export const CurrentMonthDays = ({
   handleClick,
 }: CurrentDaysProps) => {
   return (
-    <td key={index} className={className}>
+    <td key={index} className="flex justify-center items-center">
       <button
-        className="w-full h-full"
+        className={className}
         onClick={() => {
           const dateFormat = `${day.getFullYear()}-${String(
             day.getMonth() + 1 < 9
               ? `0${day.getMonth() + 1}`
               : day.getMonth() + 1,
           )}-${String(
-            day.getDate() + 1 < 9 ? `0${day.getDate() + 1}` : day.getDate() + 1,
+            day.getDate() < 9 ? `0${day.getDate()}` : day.getDate(),
           )}`;
           setProtectionDate((prev) => ({
             ...prev,

diff --git a/src/pages/register/Calendar.tsx b/src/pages/register/Calendar.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import registerState from 'recoil/registerState';
 import {
@@ -103,31 +103,29 @@ const Calendar = ({ handleClick }: CalendarProps) => {
   };
 
   // 이전 달로 이동
-  const prevMonth = (month: number) => {
+  const prevMonth = (year: number, month: number) => {
     const prevIndex = month - 1;
-    if (prevIndex < 0) {
-      // 1월 이전은 12월로 넘어가야 됨
-      // 날짜도 변경해야 됨
+    const prevYear = currentDate.getFullYear() - 1;
+    if (prevIndex > 11 && prevYear !== year) {
       setCurrentYear((prev) => prev - 1);
-      setCurrentMonth(prevIndex + 12);
-      setCurrentDate(new Date(currentYear, prevIndex + 12));
+      setCurrentMonth((prev) => prev + 11);
+      setCurrentDate(new Date(prevYear, prevIndex + 12));
     } else {
-      setCurrentMonth(prevIndex);
-      setCurrentDate(new Date(currentYear, prevIndex)); // 시작, 끝나는 요일 정하기
+      setCurrentMonth((prev) => prev - 1);
+      setCurrentDate(new Date(currentYear, prevIndex));
     }
   };
 
   // 다음 달로 이동
-  const nextMonth = (month: number) => {
+  const nextMonth = (year: number, month: number) => {
     const nextIndex = month + 1;
-    if (nextIndex > 11) {
-      // 12월 다음은 다음 연도 1월로 넘어가야 됨
-      // 날짜도 변경해야 됨
+    const nextYear = currentDate.getFullYear() + 1;
+    if (nextIndex > 11 && nextYear !== year) {
       setCurrentYear((prev) => prev + 1);
-      setCurrentMonth(nextIndex - 12);
-      setCurrentDate(new Date(currentYear, nextIndex - 12));
+      setCurrentMonth((prev) => prev - 11);
+      setCurrentDate(new Date(nextYear, nextIndex - 12));
     } else {
-      setCurrentMonth(nextIndex);
+      setCurrentMonth((prev) => prev + 1);
       setCurrentDate(new Date(currentYear, nextIndex));
     }
   };
@@ -137,31 +135,71 @@ const Calendar = ({ handleClick }: CalendarProps) => {
     const today = new Date();
     today.setHours(0, 0, 0, 0);
 
+    // 리팩토링 필요
     return days.map((day: Date, index: number) => {
       // 지난 달에서 가져온 날짜
-      if (day.getMonth() < currentDate.getMonth()) {
-        return (
-          <PrevMonthDays
-            key={index}
-            day={day}
-            index={index}
-            className={'prevMonthDay text-gray-400 py-2'}
-            prevMonth={() => prevMonth(currentDate.getMonth())}
-          />
-        );
+      // 연도가 같을 때
+      if (day.getFullYear() === currentDate.getFullYear()) {
+        if (day.getMonth() < currentDate.getMonth()) {
+          return (
+            <PrevMonthDays
+              key={index}
+              day={day}
+              index={index}
+              className={'prevMonthDay text-gray-400 py-2'}
+              prevMonth={() =>
+                prevMonth(currentDate.getFullYear(), currentDate.getMonth())
+              }
+            />
+          );
+        }
+
+        // 다음 달에서 가져온 날짜
+        if (day.getMonth() > currentDate.getMonth()) {
+          return (
+            <NextMonthDays
+              key={index}
+              day={day}
+              index={index}
+              className={'nextMonthDay text-gray-400 py-2'}
+              nextMonth={() =>
+                nextMonth(currentDate.getFullYear(), currentDate.getMonth())
+              }
+            />
+          );
+        }
       }
 
-      // 다음 달에서 가져온 날짜
-      if (day.getMonth() > currentDate.getMonth()) {
-        return (
-          <NextMonthDays
-            key={index}
-            day={day}
-            index={index}
-            className={'nextMonthDay text-gray-400 py-2'}
-            nextMonth={() => nextMonth(currentDate.getMonth())}
-          />
-        );
+      // 연도가 다를 때
+      if (day.getFullYear() !== currentDate.getFullYear()) {
+        if (day.getMonth() < currentDate.getMonth()) {
+          return (
+            <NextMonthDays
+              key={index}
+              day={day}
+              index={index}
+              className={'nextMonthDay2 text-gray-400 py-2'}
+              nextMonth={() =>
+                nextMonth(currentDate.getFullYear(), currentDate.getMonth())
+              }
+            />
+          );
+        }
+
+        // 다음 달에서 가져온 날짜
+        if (day.getMonth() > currentDate.getMonth()) {
+          return (
+            <PrevMonthDays
+              key={index}
+              day={day}
+              index={index}
+              className={'prevMonthDay2 text-gray-400 py-2'}
+              prevMonth={() =>
+                prevMonth(currentDate.getFullYear(), currentDate.getMonth())
+              }
+            />
+          );
+        }
       }
 
       // 이번달 중 날짜가 지난 날
@@ -193,7 +231,7 @@ const Calendar = ({ handleClick }: CalendarProps) => {
             key={index}
             day={day}
             index={index}
-            className={'today bg-brand-color rounded-full text-white py-2'}
+            className={'today bg-brand-color rounded-full text-white w-8 h-8'}
             setProtectionDate={setProtectionDate}
             handleClick={handleClick}
           />
@@ -238,16 +276,16 @@ const Calendar = ({ handleClick }: CalendarProps) => {
         <div className="calendarNav-title flex flex-row justify-around p-4">
           <button
             className="calendarNav-arrow px-6"
-            onClick={() => prevMonth(currentMonth)}
+            onClick={() => prevMonth(currentDate.getFullYear(), currentMonth)}
           >
             {'<'}
           </button>
           <div className="current-month-year text-2xl font-bold">
-            {months[currentMonth]} {currentYear}
+            {months[currentDate.getMonth()]} {currentDate.getFullYear()}
           </div>
           <button
             className="calendarNav-arrow px-6"
-            onClick={() => nextMonth(currentMonth)}
+            onClick={() => nextMonth(currentDate.getFullYear(), currentMonth)}
           >
             {'>'}
           </button>

diff --git a/src/pages/register/StatusSelectGroup.tsx b/src/pages/register/StatusSelectGroup.tsx
@@ -15,7 +15,7 @@ const StatusSelectGroup = () => {
 
   const handleOptionChange = (status: string, option: number) => {
     switch (status) {
-      case 'intelligence':
+      case '영리함':
         setIntelligenceOption(option);
         setProfileStatus((prev) => ({
           ...prev,
@@ -25,7 +25,7 @@ const StatusSelectGroup = () => {
           },
         }));
         break;
-      case 'affinity':
+      case '친화력':
         setAffinityOption(option);
         setProfileStatus((prev) => ({
           ...prev,
@@ -35,7 +35,7 @@ const StatusSelectGroup = () => {
           },
         }));
         break;
-      case 'athletic':
+      case '운동신경':
         setAthleticOption(option);
         setProfileStatus((prev) => ({
           ...prev,
@@ -45,7 +45,7 @@ const StatusSelectGroup = () => {
           },
         }));
         break;
-      case 'adaptability':
+      case '적응력':
         setAdaptabilityOption(option);
         setProfileStatus((prev) => ({
           ...prev,
@@ -55,7 +55,7 @@ const StatusSelectGroup = () => {
           },
         }));
         break;
-      case 'activeness':
+      case '활발함':
         setActivenessOption(option);
         setProfileStatus((prev) => ({
           ...prev,

diff --git a/src/pages/register/VDayModalInput.tsx b/src/pages/register/VDayModalInput.tsx
@@ -27,7 +27,10 @@ const VDayModalInput = ({ open, handleClick }: DayModalProps) => {
         autoComplete="off"
         readOnly
       />
-      <dialog open={open} className="absolute top-10 mt-2">
+      <dialog
+        open={open}
+        className="absolute top-10 mt-2 border-2 border-gray-300 rounded-md"
+      >
         <Calendar handleClick={handleClick} />
       </dialog>
     </div>