feat : business

Author: flamecommit

package/.gitignore

@@ -0,0 +1,27 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# lock
+yarn.lock
+package-lock.json

package/package.json

@@ -39,10 +39,11 @@
   ],
   "license": "MIT",
   "scripts": {
-    "watch": "concurrently \"npm run clean\" \"npm run watch:esm\" \"npm run watch:cjs\" \"npm run copy-styles\"",
+    "watch": "concurrently \"npm run clean\" \"npm run copy-assets\" \"npm run watch:esm\" \"npm run watch:cjs\" \"npm run copy-styles\"",
     "watch:esm": "tsc --project tsconfig.json --outDir dist/esm --module esnext --watch",
     "watch:cjs": "tsc --project tsconfig.json --outDir dist/cjs --module commonjs --watch",
     "clean": "rm -rf dist",
+    "copy-assets": "cpy \"src/assets/**/*.*\" dist/assets",
     "copy-styles": "node ./devops/copyStyles.js"
   },
   "browserslist": {

package/src/ReactDatepicker.css

@@ -0,0 +1,44 @@
+.react-datepicker__wrapper {
+  position: relative;
+  background: #fff;
+}
+
+.react-datepicker__datepicker-container {
+  position: absolute;
+  width: 360px;
+  top: 50px;
+  left: 0;
+  background-color: #fff;
+}
+
+/* controller */
+.react-datepicker__controller {
+  display: flex;
+}
+.react-datepicker__label {
+  height: 36px;
+  flex-grow: 1;
+  border: none;
+  background-color: transparent;
+}
+.react-datepicker__controller-arrow {
+  width: 36px;
+  height: 36px;
+  font-size: 0;
+  background-repeat: no-repeat;
+  background-position: center;
+  border: none;
+  background-color: transparent;
+}
+.react-datepicker__controller-extra-prev {
+  background-image: url(./extra-prev.svg);
+}
+.react-datepicker__controller-extra-next {
+  background-image: url(./extra-next.svg);
+}
+.react-datepicker__controller-prev {
+  background-image: url(./prev.svg);
+}
+.react-datepicker__controller-next {
+  background-image: url(./next.svg);
+}

package/src/assets/ReactDatepicker.css

@@ -3,7 +3,6 @@
 import * as React from 'react';
 import { useState, useMemo } from 'react';
 import { getFormatDatetime } from '../utils/datetime';
-import DevController from './dev/Controller';
 import {
   setCenturyPage,
   setDecadePage,
@@ -14,8 +13,10 @@ import ViewCentury from './view/Century';
 import { NAME_SPACE } from './constants/core';
 import Controller from './Controller';
 import ViewDecade from './view/Decade';
+import ViewYear from './view/Year';
+import ViewMonth from './view/Month';
 
-function DatepickerContainer() {
+function Container() {
   // 인수가 없을 땐 LOCAL 기준 현재 시간을 반환한다.
   const NEW_DATE = new Date();
   const [activeDate, setActiveDate] = useState<Date>(NEW_DATE);
@@ -31,7 +32,10 @@ function DatepickerContainer() {
   const yearPage = useMemo(() => setYearPage(viewDate), [viewDate]);
   const monthPage = useMemo(() => setMonthPage(viewDate), [viewDate]);
 
-  const setViewDateType = (value: string, type: 'year' | 'month' | 'date') => {
+  const setViewDateByType = (
+    value: string,
+    type: 'year' | 'month' | 'date'
+  ) => {
     const split = viewDate.split('-');
 
     if (type === 'year') split[0] = value;
@@ -55,51 +59,57 @@ function DatepickerContainer() {
   console.log(NEW_DATE);
 
   return (
-    <>
+    <div className={`${NAME_SPACE}__wrapper`}>
       <div className={`${NAME_SPACE}__input-container`}>
-        <input type="text" />
+        <input
+          type="text"
+          value={getFormatDatetime(activeDate, 'YYYY-MM-DD')}
+          readOnly
+        />
         {activeDate.toString()}
         <br />
         {viewDate}
       </div>
-      <div className={`${NAME_SPACE}__wrapper`}>
+      <div className={`${NAME_SPACE}__datepicker-container`}>
         <Controller
           viewType={viewType}
           setViewType={setViewType}
           viewDate={viewDate}
         />
-        <div className={`${NAME_SPACE}__container`}>
+        <div className={`${NAME_SPACE}__datepicker`}>
           {viewType === 'month' && (
-            <div className={`${NAME_SPACE}__month-view`}>month</div>
+            <ViewMonth monthPage={monthPage} setActiveDate={setActiveDate} />
           )}
           {viewType === 'year' && (
-            <div className={`${NAME_SPACE}__year-view`}>year</div>
+            <ViewYear
+              setViewDateByType={setViewDateByType}
+              setViewType={setViewType}
+            />
           )}
           {viewType === 'decade' && (
             <ViewDecade
               decadePage={decadePage}
-              setViewDateType={setViewDateType}
+              setViewDateByType={setViewDateByType}
               setViewType={setViewType}
             />
           )}
           {viewType === 'century' && (
             <ViewCentury
               centuryPage={centuryPage}
-              setViewDateType={setViewDateType}
+              setViewDateByType={setViewDateByType}
               setViewType={setViewType}
             />
           )}
         </div>
       </div>
-      <DevController setViewDate={setViewDate} />
       <div className="dashboard">
         <div>Century : {centuryPage}</div>
         <div>Decade : {decadePage}</div>
         <div>Year : {yearPage}</div>
         <div>Month : {monthPage}</div>
       </div>
-    </>
+    </div>
   );
 }
 
-export default DatepickerContainer;
+export default Container;

package/src/assets/extra-next.svg

@@ -1,9 +1,15 @@
 'use client';
 
 import * as React from 'react';
-import { useMemo, useState } from 'react';
+import { useMemo } from 'react';
 import { NAME_SPACE } from './constants/core';
-import { setCenturyPage, setDecadePage, setYearPage } from '../utils/page';
+import {
+  setCenturyPage,
+  setDecadePage,
+  setMonthPage,
+  setYearPage,
+} from '../utils/page';
+import { addLeadingZero } from '../utils/string';
 
 type TviewType = 'century' | 'decade' | 'year' | 'month';
 
@@ -34,6 +40,13 @@ function Controller({ viewDate, viewType, setViewType }: IProps) {
 
       return `${yearPage}`;
     }
+    if (type === 'month') {
+      const monthPage = setMonthPage(date);
+      const year = Math.ceil(monthPage / 12);
+      const month = addLeadingZero(monthPage % 12 || 12);
+
+      return `${year}-${month}`;
+    }
     return '';
   };
 
@@ -56,14 +69,34 @@ function Controller({ viewDate, viewType, setViewType }: IProps) {
 
   return (
     <div className={`${NAME_SPACE}__controller`}>
+      <button
+        className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-extra-prev`}
+      >
+        Extra Previous
+      </button>
+      <button
+        className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-prev`}
+      >
+        Previous
+      </button>
       <button
         type="button"
-        className={`${NAME_SPACE}__controller-label`}
+        className={`${NAME_SPACE}__label`}
         onClick={handleLabelClick}
         disabled={viewType === 'century'}
       >
         {label}
       </button>
+      <button
+        className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-next`}
+      >
+        Extra Next
+      </button>
+      <button
+        className={`${NAME_SPACE}__controller-arrow ${NAME_SPACE}__controller-extra-next`}
+      >
+        Next
+      </button>
     </div>
   );
 }