feat : value 날짜 버튼 활성화

Author: flamecommit

package/src/assets/ReactDatepicker.css

@@ -70,6 +70,10 @@
   height: 36px;
   cursor: pointer;
 }
+.react-datepicker__datepicker-button[data-active='true'] {
+  background-color: #333;
+  color: #fff;
+}
 .react-datepicker__datepicker-button:hover {
   background-color: #f7f7f7;
 }

package/src/components/Container.tsx

@@ -85,17 +85,6 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
     }
   }, [value, onChange]);
 
-  // const [centuryPage, setCenturyPage] = useState<number>(0);
-  // const [decadePage, setDecadePage] = useState<number>(0);
-  // const [yearPage, setYearPage] = useState<number>(0);
-  // const [monthPage, setMonthPage] = useState<number>(0);
-
-  // 2041-07-15
-  // centuryPage 21
-  // decadePage 205
-  // yearPage 2041
-  // monthPage 24487
-
   return (
     <div className={`${NAME_SPACE}__wrapper`}>
       <div className={`${NAME_SPACE}__input-container`}>
@@ -116,7 +105,11 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
           />
           <div className={`${NAME_SPACE}__datepicker`}>
             {viewType === 'month' && (
-              <ViewMonth monthPage={monthPage} setValue={setValue} />
+              <ViewMonth
+                monthPage={monthPage}
+                value={value}
+                setValue={setValue}
+              />
             )}
             {viewType === 'year' && (
               <ViewYear

package/src/components/view/Month.tsx

@@ -6,78 +6,69 @@ import { getFormatDatetime } from '../../utils/datetime';
 
 interface Iprops {
   monthPage: number;
+  value: Date;
   setValue: (value: Date) => void;
 }
 
-function ViewMonth({ monthPage, setValue }: Iprops) {
+function ViewMonth({ monthPage, value, setValue }: Iprops) {
   const year = Math.ceil(monthPage / 12);
   const month = monthPage % 12 || 12;
   const firstDay = new Date(year, month - 1, 1).getDay(); // 이달 1일의 요일
   const lastDateValue = new Date(year, month, 0); // 이달 말 일의 Date 객체
   const lastDate = lastDateValue.getDate(); // 이달 말 일
   const lastDay = lastDateValue.getDay(); // 이달 말 일의 요일
   const prevLastDate = new Date(year, month - 1, 0).getDate(); // 이전달의 말 일
+  const formatedValue = getFormatDatetime(value, 'YYYY-MM-DD');
+
+  const renderDateButton = (
+    date: number,
+    thisValue: Date,
+    classNameModifier = ''
+  ) => {
+    const day = thisValue.getDay();
+    const formatedThisValue = getFormatDatetime(thisValue, 'YYYY-MM-DD');
+
+    return (
+      <button
+        type="button"
+        className={`${NAME_SPACE}__datepicker-button ${classNameModifier}`}
+        key={date}
+        title={formatedThisValue}
+        data-day={day}
+        data-active={formatedValue === formatedThisValue}
+        onClick={() => setValue(thisValue)}
+      >
+        {date}
+      </button>
+    );
+  };
 
   return (
     <div className={`${NAME_SPACE}__month-view`}>
       {Array.apply(0, Array(firstDay)).map((x, i) => {
-        // prevMonth
-
         const date = prevLastDate - (firstDay - i - 1);
-        const value = new Date(-1, monthPage + 22, date);
-        const day = value.getDay();
-        const title = getFormatDatetime(value, 'YYYY-MM-DD');
+        const thisValue = new Date(-1, monthPage + 22, date);
 
-        return (
-          <button
-            type="button"
-            className={`${NAME_SPACE}__datepicker-button ${NAME_SPACE}__neighbor-button`}
-            key={i}
-            title={title}
-            data-day={day}
-            onClick={() => setValue(value)}
-          >
-            {date}
-          </button>
+        return renderDateButton(
+          date,
+          thisValue,
+          `${NAME_SPACE}__neighbor-button`
         );
       })}
       {Array.apply(0, Array(lastDate)).map((x, i) => {
-        // thisMonth
         const date = i + 1;
-        const value = new Date(-1, monthPage + 23, date);
-        const day = value.getDay();
-        const title = getFormatDatetime(value, 'YYYY-MM-DD');
+        const thisValue = new Date(-1, monthPage + 23, date);
 
-        return (
-          <button
-            type="button"
-            className={`${NAME_SPACE}__datepicker-button`}
-            key={i}
-            title={title}
-            data-day={day}
-            onClick={() => setValue(value)}
-          >
-            {date}
-          </button>
-        );
+        return renderDateButton(date, thisValue);
       })}
       {Array.apply(0, Array(6 - lastDay)).map((x, i) => {
         const date = i + 1;
-        const value = new Date(-1, monthPage + 24, date);
-        const day = value.getDay();
-        const title = getFormatDatetime(value, 'YYYY-MM-DD');
+        const thisValue = new Date(-1, monthPage + 24, date);
 
-        return (
-          <button
-            type="button"
-            className={`${NAME_SPACE}__datepicker-button ${NAME_SPACE}__neighbor-button`}
-            key={i}
-            title={title}
-            data-day={day}
-            onClick={() => setValue(value)}
-          >
-            {date}
-          </button>
+        return renderDateButton(
+          date,
+          thisValue,
+          `${NAME_SPACE}__neighbor-button`
         );
       })}
     </div>

test/src/App.tsx

@@ -13,6 +13,7 @@ function App() {
           console.log('value', value);
         }}
       />
+      <Datepicker />
     </div>
   );
 }