@tipp/ui 2.1.31 → 2.1.33

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/atoms/dialog.tsx

@@ -1,10 +1,10 @@
 import * as RadixDialog from '@radix-ui/react-dialog';
 import { Cross1Icon } from '@radix-ui/react-icons';
 import { Flex, Theme } from '@radix-ui/themes';
+import { useEffect } from 'react';
 import { usePortalContainer } from '@/theme/portal-provider';
 import { Heading } from './heading';
 import { IconButton } from './icon-button';
-import { ToastContainer } from 'react-toastify';
 
 type ContentProps = RadixDialog.DialogContentProps & {
   width?: string;
@@ -84,7 +84,7 @@ function Content(props: ContentProps): React.ReactNode {
                 {buttons}
               </Flex>
             ) : null}
-          </RadixDialog.Content> 
+          </RadixDialog.Content>
         </RadixDialog.Overlay>
       </Theme>
     </RadixDialog.Portal>
@@ -113,8 +113,35 @@ function Trigger({
   );
 }
 
+function Root(props: RadixDialog.DialogProps): React.ReactNode {
+
+  // 모달이 닫힌 후 포커스 복원 및 이벤트 정리
+  useEffect(() => {
+    if (!props.open) {
+      // 모달이 닫힌 후 약간의 지연을 두고 포커스 복원
+      const timer = setTimeout(() => {
+        // 활성 요소에 포커스 복원
+        const activeElement = document.activeElement as HTMLElement | null;
+        // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- 어떤 dom인지 확실하지 않음
+        activeElement?.blur?.();
+
+        // body의 pointer-events 복원
+        document.body.style.pointerEvents = '';
+
+        // 이벤트 리스너 정리
+        // document.removeEventListener('click', () => {
+        //   // 이벤트 리스너 정리
+        // });
+      }, 100);
+
+      return () => { clearTimeout(timer); };
+    }
+  }, [props.open]);
+  return <RadixDialog.Root {...props} />;
+}
+
 export const Dialog = {
-  Root: RadixDialog.Root,
+  Root,
   Trigger,
   Content,
   Close,

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}