Clean and re-organize post table refactoring (#1000)

* Clean and re-organize post table refactoring

* Fix tests

front/src/modules/ui/input/date/components/DateInputEdit.tsx

@@ -0,0 +1,63 @@
+import { forwardRef } from 'react';
+import styled from '@emotion/styled';
+
+import { formatToHumanReadableDate } from '~/utils';
+
+import DatePicker from './DatePicker';
+
+export type StyledCalendarContainerProps = {
+  editModeHorizontalAlign?: 'left' | 'right';
+};
+
+const StyledInputContainer = styled.div`
+  display: flex;
+
+  padding: ${({ theme }) => theme.spacing(2)};
+`;
+
+const StyledCalendarContainer = styled.div<StyledCalendarContainerProps>`
+  background: ${({ theme }) => theme.background.secondary};
+  border: 1px solid ${({ theme }) => theme.border.color.light};
+  border-radius: ${({ theme }) => theme.border.radius.md};
+  box-shadow: ${({ theme }) => theme.boxShadow.strong};
+
+  margin-top: 1px;
+
+  position: absolute;
+
+  z-index: 1;
+`;
+
+type DivProps = React.HTMLProps<HTMLDivElement>;
+
+export const DateDisplay = forwardRef<HTMLDivElement, DivProps>(
+  ({ value, onClick }, ref) => (
+    <StyledInputContainer onClick={onClick} ref={ref}>
+      {value && formatToHumanReadableDate(new Date(value as string))}
+    </StyledInputContainer>
+  ),
+);
+
+type DatePickerContainerProps = {
+  children: React.ReactNode;
+};
+
+export const DatePickerContainer = ({ children }: DatePickerContainerProps) => {
+  return <StyledCalendarContainer>{children}</StyledCalendarContainer>;
+};
+
+type OwnProps = {
+  value: Date | null | undefined;
+  onChange: (newDate: Date) => void;
+};
+
+export function DateInputEdit({ onChange, value }: OwnProps) {
+  return (
+    <DatePicker
+      date={value ?? new Date()}
+      onChangeHandler={onChange}
+      customInput={<DateDisplay />}
+      customCalendarContainer={DatePickerContainer}
+    />
+  );
+}