feat : 변수명 변경, activeDate => value

Author: flamecommit

package/src/components/Container.tsx

@@ -21,7 +21,7 @@ interface Iprops {
 
 function Container({ initValue = new Date(), onChange }: Iprops) {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
-  const [activeDate, setActiveDate] = useState<Date>(initValue);
+  const [value, setValue] = useState<Date>(initValue);
   const [viewDate, setViewDate] = useState<string>(
     getFormatDatetime(initValue, 'YYYY-MM-DD')
   );
@@ -81,9 +81,9 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
   useEffect(() => {
     setIsVisible(false);
     if (onChange) {
-      onChange(activeDate);
+      onChange(value);
     }
-  }, [activeDate, onChange]);
+  }, [value, onChange]);
 
   // const [centuryPage, setCenturyPage] = useState<number>(0);
   // const [decadePage, setDecadePage] = useState<number>(0);
@@ -101,7 +101,7 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
       <div className={`${NAME_SPACE}__input-container`}>
         <input
           type="text"
-          value={getFormatDatetime(activeDate, 'YYYY-MM-DD')}
+          value={getFormatDatetime(value, 'YYYY-MM-DD')}
           readOnly
           onFocus={handleFocus}
         />
@@ -116,7 +116,7 @@ function Container({ initValue = new Date(), onChange }: Iprops) {
           />
           <div className={`${NAME_SPACE}__datepicker`}>
             {viewType === 'month' && (
-              <ViewMonth monthPage={monthPage} setActiveDate={setActiveDate} />
+              <ViewMonth monthPage={monthPage} setValue={setValue} />
             )}
             {viewType === 'year' && (
               <ViewYear

package/src/components/view/Month.tsx

@@ -6,10 +6,10 @@ import { getFormatDatetime } from '../../utils/datetime';
 
 interface Iprops {
   monthPage: number;
-  setActiveDate: (value: Date) => void;
+  setValue: (value: Date) => void;
 }
 
-function ViewMonth({ monthPage, setActiveDate }: Iprops) {
+function ViewMonth({ monthPage, setValue }: Iprops) {
   const year = Math.ceil(monthPage / 12);
   const month = monthPage % 12 || 12;
   const firstDay = new Date(year, month - 1, 1).getDay(); // 이달 1일의 요일
@@ -35,7 +35,7 @@ function ViewMonth({ monthPage, setActiveDate }: Iprops) {
             key={i}
             title={title}
             data-day={day}
-            onClick={() => setActiveDate(value)}
+            onClick={() => setValue(value)}
           >
             {date}
           </button>
@@ -55,7 +55,7 @@ function ViewMonth({ monthPage, setActiveDate }: Iprops) {
             key={i}
             title={title}
             data-day={day}
-            onClick={() => setActiveDate(value)}
+            onClick={() => setValue(value)}
           >
             {date}
           </button>
@@ -74,7 +74,7 @@ function ViewMonth({ monthPage, setActiveDate }: Iprops) {
             key={i}
             title={title}
             data-day={day}
-            onClick={() => setActiveDate(value)}
+            onClick={() => setValue(value)}
           >
             {date}
           </button>

test/src/App.tsx

@@ -9,8 +9,8 @@ function App() {
     <div>
       <Datepicker
         initValue={dateValue}
-        onChange={(activeDate) => {
-          console.log('activeDate', activeDate);
+        onChange={(value) => {
+          console.log('value', value);
         }}
       />
     </div>