feat : style

Author: flamecommit

package/src/assets/ReactDatepicker.css

@@ -5,10 +5,11 @@
 
 .react-datepicker__datepicker-container {
   position: absolute;
-  width: 360px;
+  width: 252px;
   top: 50px;
   left: 0;
   background-color: #fff;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 4px;
 }
 
 /* controller */
@@ -20,6 +21,10 @@
   flex-grow: 1;
   border: none;
   background-color: transparent;
+  cursor: pointer;
+}
+.react-datepicker__label:hover {
+  background-color: #f7f7f7;
 }
 .react-datepicker__controller-arrow {
   width: 36px;
@@ -29,6 +34,10 @@
   background-position: center;
   border: none;
   background-color: transparent;
+  cursor: pointer;
+}
+.react-datepicker__controller-arrow:hover {
+  background-color: #f7f7f7;
 }
 .react-datepicker__controller-extra-prev {
   background-image: url(./extra-prev.svg);
@@ -42,3 +51,25 @@
 .react-datepicker__controller-next {
   background-image: url(./next.svg);
 }
+.react-datepicker__century-view,
+.react-datepicker__decade-view,
+.react-datepicker__year-view {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+}
+.react-datepicker__month-view {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+}
+.react-datepicker__datepicker-button {
+  border: none;
+  background-color: transparent;
+  height: 36px;
+  cursor: pointer;
+}
+.react-datepicker__datepicker-button:hover {
+  background-color: #f7f7f7;
+}
+.react-datepicker__neighbor-button {
+  color: #ccc;
+}

package/src/components/Container.tsx

@@ -66,9 +66,6 @@ function Container() {
           value={getFormatDatetime(activeDate, 'YYYY-MM-DD')}
           readOnly
         />
-        {activeDate.toString()}
-        <br />
-        {viewDate}
       </div>
       <div className={`${NAME_SPACE}__datepicker-container`}>
         <Controller
@@ -102,11 +99,21 @@ function Container() {
           )}
         </div>
       </div>
-      <div className="dashboard">
+      <div
+        className="dashboard"
+        style={{
+          position: 'fixed',
+          top: 50,
+          right: 50,
+          textAlign: 'right',
+        }}
+      >
         <div>Century : {centuryPage}</div>
         <div>Decade : {decadePage}</div>
         <div>Year : {yearPage}</div>
         <div>Month : {monthPage}</div>
+        <div>activeDate : {activeDate.toString()}</div>
+        <div>viewDate : {viewDate}</div>
       </div>
     </div>
   );

package/src/components/view/Century.tsx

@@ -25,6 +25,7 @@ function ViewCentury({ centuryPage, setViewDateByType, setViewType }: IProps) {
         return (
           <button
             type="button"
+            className={`${NAME_SPACE}__datepicker-button`}
             key={i}
             onClick={() => handleViewDateType(startYear)}
           >

package/src/components/view/Decade.tsx

@@ -23,6 +23,7 @@ function ViewDecade({ decadePage, setViewDateByType, setViewType }: IProps) {
         return (
           <button
             type="button"
+            className={`${NAME_SPACE}__datepicker-button`}
             key={i}
             onClick={() => handleViewDateType(year)}
           >

package/src/components/view/Month.tsx

@@ -33,6 +33,7 @@ function ViewMonth({ monthPage, setActiveDate }: Iprops) {
         return (
           <button
             type="button"
+            className={`${NAME_SPACE}__datepicker-button ${NAME_SPACE}__neighbor-button`}
             key={i}
             title={title}
             data-day={day}
@@ -52,6 +53,7 @@ function ViewMonth({ monthPage, setActiveDate }: Iprops) {
         return (
           <button
             type="button"
+            className={`${NAME_SPACE}__datepicker-button`}
             key={i}
             title={title}
             data-day={day}
@@ -70,6 +72,7 @@ function ViewMonth({ monthPage, setActiveDate }: Iprops) {
         return (
           <button
             type="button"
+            className={`${NAME_SPACE}__datepicker-button ${NAME_SPACE}__neighbor-button`}
             key={i}
             title={title}
             data-day={day}

package/src/components/view/Year.tsx

@@ -22,6 +22,7 @@ function ViewYear({ setViewDateByType, setViewType }: Iprops) {
         return (
           <button
             type="button"
+            className={`${NAME_SPACE}__datepicker-button`}
             key={i}
             onClick={() => handleViewDateType(month)}
           >