Redesign DatePicker (#108)

front/src/components/table/editable-cell/EditableDate.tsx

@@ -2,6 +2,8 @@ import styled from '@emotion/styled';
 import { forwardRef, useState } from 'react';
 import EditableCellWrapper from './EditableCellWrapper';
 import DatePicker from '../../form/DatePicker';
+import { CalendarContainer } from 'react-datepicker';
+import { modalBackground } from '../../../layout/styles/themes';
 
 export type EditableDateProps = {
   value: Date;
@@ -13,6 +15,21 @@ const StyledContainer = styled.div`
   display: flex;
   align-items: center;
 `;
+
+export type StyledCalendarContainerProps = {
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
+  position: absolute;
+  border: 1px solid ${(props) => props.theme.primaryBorder};
+  border-radius: 8px;
+  width: 280px;
+  box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.09);
+  z-index: 1;
+  left: -10px;
+  ${modalBackground};
+`;
 function EditableDate({
   value,
   changeHandler,
@@ -36,6 +53,24 @@ function EditableDate({
     ),
   );
 
+  interface DatePickerContainerProps {
+    className?: string;
+    children: React.ReactNode;
+  }
+
+  const DatePickerContainer = ({
+    className,
+    children,
+  }: DatePickerContainerProps) => {
+    return (
+      <StyledCalendarContainer>
+        <CalendarContainer className={className}>
+          <div style={{ position: 'relative' }}>{children}</div>
+        </CalendarContainer>
+      </StyledCalendarContainer>
+    );
+  };
+
   return (
     <EditableCellWrapper
       isEditMode={isEditMode}
@@ -51,6 +86,7 @@ function EditableDate({
               setInputValue(date);
             }}
             customInput={<DateDisplay />}
+            customContainer={DatePickerContainer}
           />
         </StyledContainer>
       }