(#0) InputDatePicker 반응형

thebbodek · Feb 28, 2024 · 014a26a · 014a26a
1 parent 59512b1
commit 014a26a
Show file tree

Hide file tree

Showing 9 changed files with 29 additions and 18 deletions.
diff --git a/src/core/components/Calendar/DatePickerCalendar/index.tsx b/src/core/components/Calendar/DatePickerCalendar/index.tsx
@@ -179,7 +179,7 @@ const DatePickerCalendar = ({
  const isExceptionDate = exceptionDay ? exceptionDate === currentDate : false;
 
  return (
- <div key = {index} className = {clsx("h-[3.75rem]")}>
+ <div key = {index} className = {"h-[3rem] md:h-[3.75rem]"}>
  <button
  type = "button"
  className = {"w-full h-full"}

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDaySubText.tsx
@@ -32,7 +32,7 @@ export const CalendarComponentDaySubText = ({
 
  return (
  <div
- className = {clsx("flex justify-center items-center text-sm font-light mt-0.5 z-10 whitespace-nowrap",
+ className = {clsx("flex justify-center items-center text-body-03-regular md:text-body-02-regular font-light mt-0.5 z-10 whitespace-nowrap",
  isActiveDate ? "text-[#007BC7]" : "text-black",
  )}
  >

diff --git a/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx b/src/core/components/Calendar/DatePickerCalendar/subs/CalendarComponentDayText.tsx
@@ -41,10 +41,10 @@ export const CalendarComponentDayText = ({
  )}>
  <div
  className = {clsx(
- "relative z-20 flex justify-center items-center leading-none text-body-01-bold text-black h-[2.375rem]",
- isMarkedDate && "rounded-full w-[2.375rem] !text-white",
+ "relative z-20 flex justify-center items-center leading-none text-body-03-bold md:text-body-01-bold text-black h-[2rem] md:h-[2.375rem]",
+ isMarkedDate && "rounded-full w-[2rem] h-[2rem] md:w-[2.375rem] !text-white md:h-[2.375rem]",
  isActiveDate && "bg-primary-03",
- calendarDate.isToday && "bg-gray-03 w-[2.375rem]",
+ calendarDate.isToday && "bg-gray-03 w-[2rem] h-[2rem] md:w-[2.375rem] md:h-[2.375rem]",
  isExceptionDate && "bg-gray-05",
  isMarkedPeriod && "w-full bg-primary-00 rounded-none",
  isActiveDate && disabled && "bg-primary-01",

diff --git a/src/core/components/Calendar/common/subs/CalendarHeader.tsx b/src/core/components/Calendar/common/subs/CalendarHeader.tsx
@@ -26,7 +26,7 @@ export const CalendarHeader = ({
  >
  <CaretLeft size = {24} className = {iconClassNames}/>
  </button>
- <Typography className = "w-[7.5rem] text-center" color = "black" theme = "head-01-regular" text = {currentMonth} />
+ <Typography className = "text-center md:text-head-01-regular" color = "black" theme = "subhead-01-regular" text = {currentMonth} />
  <button
  type = "button"
  className = {buttonClassNames}

diff --git a/src/core/components/Input/InputDatePicker/DatePicker.tsx b/src/core/components/Input/InputDatePicker/DatePicker.tsx
@@ -1,5 +1,6 @@
 import { useEffect, useId, useState } from "react";
 
+import clsx from "clsx";
 import Button from "../../Button";
 import DatePickerCalendar from "../../Calendar/DatePickerCalendar";
 import { DATE_PICKER_TYPE } from "../../Calendar/DatePickerCalendar/constants";
@@ -25,6 +26,7 @@ const DatePicker = ({
  useHoliday = false,
  closeButtonText = "닫기",
  dateLabel,
+ hasDatePickerTitle = true,
 }: DatePickerProps) => {
  const id = useId();
  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
@@ -67,11 +69,19 @@ const DatePicker = ({
 
  return (
  <ModalPopUp isOpen = {isOpen}>
- <div className = {"w-[35.5rem] pt-8 rounded-xl bg-white"}>
- <div className = 'px-6'>
- <div className = "px-5 mb-6">
- <Typography className = "mb-6" element = 'h6' text = '날짜 선택' theme = 'subhead-01-bold' />
- {useTab && <GeneralTab items = {tabItems} />}
+ <div
+ className = {clsx("min-w-[20rem] w-[calc(100vw-1rem)] max-w-[30rem] pt-6 md:pt-8 rounded-xl bg-white", { "pt-4 md:pt-6 max-w-[35rem]": useTab })}>
+ <div className = 'px-2 pb-2'>
+ <div className = "px-2 md:px-5">
+ {hasDatePickerTitle &&
+ <Typography element = 'h6' text = '날짜 선택' className = "!text-body-02-bold md:!text-subhead-01-bold md:mb-2"/>
+ }
+ {useTab &&
+ <GeneralTab
+ items = {tabItems}
+ className = "[&_span]:text-body-03-bold md:[&_span]:text-subhead-02-bold md:[&_span]:p-2 [&_span]:p-1.5 !p-1.5 md:!p-2 !rounded-lg [&_li]:rounded-lg mb-6 md:mb-8"
+ />
+ }
  </div>
  <DatePickerCalendar
  isFixStartDate = {isFixStartDate}
@@ -89,12 +99,12 @@ const DatePicker = ({
  />
  </div>
  <Divider className = "mt-5" />
- <div className = 'flex py-5 px-6'>
+ <div className = 'flex py-3 md:py-5 px-4 md:px-6'>
  <Button
  backgroundColor = 'white'
  color = 'gray-06'
  content = {closeButtonText}
- size = 'h-60'
+ size = 'h-52'
  rounded = 'rounded-12'
  className = 'w-full border'
  onClick = {handleClose}

diff --git a/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx b/src/core/components/Input/InputDatePicker/InputDatePicker.stories.tsx
@@ -37,7 +37,7 @@ const DefaultLayout = () => {
  >
  <div className = "w-[500px]">
  <button type = "button" onClick = {onDatesClick}>전체 날짜 변경</button>
- <InputDatePicker overlay = {overlay} useTab getPeriodDates = {getDate} externalDates = {myDates} label = "날짜 선택" initialDate = "2024-02-05" required dateLabel = {["복구일"]}/>
+ <InputDatePicker variants = "period" overlay = {overlay} getPeriodDates = {getDate} externalDates = {myDates} label = "날짜 선택" initialDate = "2024-02-05" required dateLabel = {["복구일"]}/>
  <Button type = "submit" backgroundColor = "primary-03" color = "white" size = "h-48" className = "px-7 mt-4" content = "전송"/>
  </div>
  </form>

diff --git a/src/core/components/Input/InputDatePicker/index.tsx b/src/core/components/Input/InputDatePicker/index.tsx
@@ -33,6 +33,7 @@ const InputDatePicker = ({
  placeholder,
  feedback,
  feedbackColor,
+ hasDatePickerTitle,
 }: InputDatePickerProps & Omit<HTMLAttributes<HTMLInputElement>, "disabled" | "readOnly">) => {
  const id = useId();
  const [ periodDates, setPeriodDates ] = useState<PeriodDates>({
@@ -47,6 +48,7 @@ const InputDatePicker = ({
  return new Promise(resolve => {
  overlay.open(({ isOpen, close }) => (
  <DatePicker
+ hasDatePickerTitle = {hasDatePickerTitle}
  isFixStartDate = {isFixStartDate}
  variants = {variants}
  disabled = {isDisabled}

diff --git a/src/core/components/Input/InputDatePicker/types/index.ts b/src/core/components/Input/InputDatePicker/types/index.ts
@@ -10,6 +10,7 @@ export interface DatePickerProps extends Pick<DatePickerCalendarProps, "useHolid
  close: DatePickerCalendarProps["onDateClick"];
  useTab?: boolean;
  dateLabel?: DatePickerCalendarProps["label"];
+ hasDatePickerTitle?: boolean;
 }
 
 type CreateOverlayElement = (props: {
@@ -25,12 +26,10 @@ export interface ExternalDates {
 
 export interface InputDatePickerProps extends
  Omit<DatePickerProps, "isOpen"| "close" | "periodDates" | "setPeriodDates" | "setIsAfterAllDate">,
- Pick<InputBaseProps<"div">, "feedback" | "feedbackColor" | "disabled" | "readOnly"> {
- required?: boolean;
+ Pick<InputBaseProps<"input">, "feedback" | "feedbackColor" | "disabled" | "readOnly" | "required"> {
  inputClassName?: string;
  label?: string;
  getPeriodDates: DatePickerCalendarProps["onDateClick"];
- dateLabel?: DatePickerCalendarProps["label"];
  overlay: {
  open: (overlayElement: CreateOverlayElement) => void;
  close: () => void;

diff --git a/src/core/components/Tab/TableTab/TableTab/index.tsx b/src/core/components/Tab/TableTab/TableTab/index.tsx
@@ -26,5 +26,5 @@ const TableTab = forwardRef((
 
 export default TableTab;
 
-TableTab.displayName = "TableTab";
 TableTab.Item = TableTabItem;
+TableTab.displayName = "TableTab";