@tipp/ui 2.1.31 → 2.1.32

package/dist/molecules/index.js

@@ -40,10 +40,10 @@ import {
 } from "../chunk-TKD7AJ2T.js";
 import {
   DatePickerButton
-} from "../chunk-IPF2UOFH.js";
+} from "../chunk-JHXDNCGN.js";
 import {
   DatePicker
-} from "../chunk-GWJMQBPR.js";
+} from "../chunk-GCOMTYEP.js";
 import {
   ExpandTable,
   createColumnHelper

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.1.31",
+  "version": "2.1.32",
   "private": false,
   "type": "module",
   "exports": {

package/src/app/platform/reservation-card.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { setHours, setMinutes } from 'date-fns';
+import { format } from 'date-fns';
+import { ko } from 'date-fns/locale';
 import {
   Badge,
   Box,
@@ -15,8 +16,7 @@ import {
   Typo,
 } from '../../atoms';
 import { ArrowRightIcon, Cross1Icon } from '../../icon';
-import { DatePickerButton, TimeSelect } from '../../molecules';
-import { getTimeOption, parseTimeOption } from '../../utils';
+import { DatePickerButton } from '../../molecules';
 import { OnOfflineRadioCard } from './on-offline-radio-card';
 
 type Type = 'onlineCoaching' | 'offlineCoaching';
@@ -41,9 +41,7 @@ export interface ReservationCardProps {
   maxTime?: Date;
 }
 
-export function ReservationCard(
-  props: ReservationCardProps
-): React.ReactNode {
+export function ReservationCard(props: ReservationCardProps): React.ReactNode {
   const {
     sessionNumber,
     customerName,
@@ -65,7 +63,6 @@ export function ReservationCard(
 
   const date = readonly ? defaultTime : editValues.date;
   const type = readonly ? defaultType : editValues.type;
-  const time = date && getTimeOption(date);
 
   const onClickSave = useCallback(() => {
     props.onClickSave?.(editValues);
@@ -93,19 +90,15 @@ export function ReservationCard(
     );
   }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
 
-  const onChangeDate = useCallback(
-    (newDate: Date | null) => {
-      if (!newDate) return;
-      const { hour = 0, minute = 0 } = time ? parseTimeOption(time) : {};
-      setEditValues((prev) => {
-        return {
-          ...prev,
-          date: setMinutes(setHours(newDate, hour), minute),
-        };
-      });
-    },
-    [time]
-  );
+  const onChangeDate = useCallback((newDate: Date | null) => {
+    if (!newDate) return;
+    setEditValues((prev) => {
+      return {
+        ...prev,
+        date: newDate,
+      };
+    });
+  }, []);
 
   const onChangeType = useCallback((newType: string) => {
     setEditValues((prev) => {
@@ -116,26 +109,9 @@ export function ReservationCard(
     });
   }, []);
 
-  const onChangeTime = useCallback(
-    (v?: string) => {
-      const { hour, minute } = parseTimeOption(v);
-      if (typeof v === 'undefined') {
-        setEditValues((prev) => {
-          return {
-            ...prev,
-            date: v,
-          };
-        });
-      }
-      setEditValues((prev) => {
-        return {
-          ...prev,
-          date: setMinutes(setHours(date || new Date(), hour), minute),
-        };
-      });
-    },
-    [date]
-  );
+  const formatDate = useCallback((v: Date) => {
+    return format(v, 'yyyy년 MM월 dd일(EEE) aa h:mm', { locale: ko });
+  }, []);
 
   useEffect(() => {
     if (!minTime || !editValues.date || readonly) return;
@@ -191,73 +167,48 @@ export function ReservationCard(
       </Flex>
 
       <Box>
-        <Form.Root
-          onSubmit={(e) => {
-            e.preventDefault();
-          }}
-        >
-          <Flex direction="column" gap="5">
-            <Form.Field name="date">
-              <Form.Label asChild>
-                <Heading mb="2" variant="heading5" weight="regular">
-                  세션 일자와 시각
-                </Heading>
-                <Grid columns="1fr auto" gap="4">
-                  <DatePickerButton
-                    disabled={readonly}
-                    maxDate={maxTime}
-                    minDate={minTime}
-                    onChange={onChangeDate}
-                    placeholder="일자를 선택해주세요"
-                    selected={date}
-                    size="large"
-                  />
-                  <TimeSelect
-                    disabled={readonly}
-                    maxTime={maxTime}
-                    minTime={minTime}
-                    onValueChange={onChangeTime}
-                    size="3"
-                    time={date}
-                    value={time}
-                  />
-                </Grid>
-              </Form.Label>
-            </Form.Field>
-
-            <Form.Field name="type">
-              <Form.Label asChild>
-                <Heading mb="2" variant="heading5" weight="regular">
-                  온/오프라인 진행 여부
-                </Heading>
-              </Form.Label>
-              <Form.Control asChild>
-                <OnOfflineRadioCard
-                  disabled={readonly}
-                  onValueChange={onChangeType}
-                  size="1"
-                  value={type}
-                />
-              </Form.Control>
-            </Form.Field>
-
-            {readonly ? null : (
-              <Flex align="center" gap="3" justify="end">
-                <Button
-                  color="gray"
-                  onClick={onClickReset}
-                  size="small"
-                  variant="transparent"
-                >
-                  초기화하기
-                </Button>
-                <Button onClick={onClickSave} size="small">
-                  저장하기
-                </Button>
-              </Flex>
-            )}
-          </Flex>
-        </Form.Root>
+        <Flex direction="column" gap="5">
+          <Heading mb="2" variant="heading5" weight="regular">
+            세션 일자와 시각
+          </Heading>
+          <DatePickerButton
+            disabled={readonly}
+            format={formatDate}
+            maxDate={maxTime}
+            minDate={minTime}
+            onChange={onChangeDate}
+            placeholder="일자를 선택해주세요"
+            selected={date}
+            showTimeSelect
+            size="large"
+          />
+
+          <Heading mb="2" variant="heading5" weight="regular">
+            온/오프라인 진행 여부
+          </Heading>
+          <OnOfflineRadioCard
+            disabled={readonly}
+            onValueChange={onChangeType}
+            size="1"
+            value={type}
+          />
+
+          {readonly ? null : (
+            <Flex align="center" gap="3" justify="end">
+              <Button
+                color="gray"
+                onClick={onClickReset}
+                size="small"
+                variant="transparent"
+              >
+                초기화하기
+              </Button>
+              <Button onClick={onClickSave} size="small">
+                저장하기
+              </Button>
+            </Flex>
+          )}
+        </Flex>
       </Box>
 
       {readonly ? (

package/src/molecules/date-picker/index.tsx

@@ -64,7 +64,7 @@ export const DatePicker = forwardRef<DatePickerRef, DatePickerProps>(
           renderCustomHeader={renderCustomHeader}
           showPopperArrow={false}
           timeCaption="시간"
-          timeFormat="h:mm aa"
+          timeFormat="aa h:mm"
           timeIntervals={10}
           {...rest}
           calendarClassName={`tipp_datePicker_calendar ${rest.calendarClassName || ''}`}
@@ -189,7 +189,7 @@ const getRenderCustomHeader: (
     const month = date ? new Date(date).getMonth() + 1 : '-';
 
     return (
-      <Flex align="center" justify="between" pl="2" pr="2">
+      <Flex align="center"  justify="between" pl="2" pr="2">
         <IconButton
           disabled={prevMonthButtonDisabled}
           onClick={decreaseMonth}