@tipp/ui 1.5.6 → 1.5.7

package/src/app/platform/goal-manage-card-read.tsx

@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { format } from 'date-fns';
+import type { BadgeProps } from '../../atoms';
 import {
   Box,
   Button,
@@ -32,7 +33,7 @@ export interface GoalManageCardProps {
   onClickDelete?: () => void;
   onClickEdit?: () => void;
   onClickComplete?: () => void;
-  onCompleteChange?: (completed: boolean) => void;
+  onClickIncomplete?: () => void;
 }
 
 export function GoalManageCardRead(
@@ -47,7 +48,8 @@ export function GoalManageCardRead(
     onClickDelete,
     onClickEdit,
     defaultOpen,
-    onCompleteChange,
+    onClickIncomplete,
+    onClickComplete,
   } = props;
   const [open, setOpen] = useState<boolean>(Boolean(defaultOpen));
   const onClickOpen = useCallback(() => {
@@ -56,18 +58,17 @@ export function GoalManageCardRead(
 
   const icon = open ? <ChevronUpIcon /> : <ChevronDownIcon />;
 
-  const status = useMemo<string | undefined>(() => {
-    if (completed) return;
-    if (!dueDate) return '미정';
-    if (dueDate < new Date()) return '미달성';
-    return '진행 중';
+  const badgeMeta = useMemo<BadgeProps | null>(() => {
+    if (!completed && dueDate) {
+      if (dueDate < new Date()) return { color: 'error', children: '미달성' };
+      return {
+        color: 'success',
+        children: '진행 중',
+      } as const;
+    }
+    return null;
   }, [completed, dueDate]);
 
-  const statusColor = useMemo(() => {
-    if (status === '진행 중') return 'success';
-    if (status === '미달성') return 'error';
-  }, [status]);
-
   const renderSubTitle = useCallback((subTitle: string) => {
     return (
       <Heading mb="2" variant="heading5">
@@ -87,42 +88,38 @@ export function GoalManageCardRead(
   const renderCompleteButton = useCallback(() => {
     if (completed) {
       return (
-        <Popover.Root>
-          <Popover.Trigger>
-            <Button size="small">
-              <RocketIcon />
-              달성하기
-            </Button>
-          </Popover.Trigger>
-          <Popover.Content>
-            <Typo color="gray">목표를 달성하시겠습니까?</Typo>
-            <Flex gap="3" justify="end" mt="3">
-              <Popover.Close>
-                <Button color="gray" size="small" variant="outline">
-                  아니요
-                </Button>
-              </Popover.Close>
-              <Popover.Close>
-                <Button onClick={props.onClickComplete} size="small">
-                  예
-                </Button>
-              </Popover.Close>
-            </Flex>
-          </Popover.Content>
-        </Popover.Root>
+        <Button onClick={onClickIncomplete} size="small" variant="surface">
+          진행중인 과제로 돌려놓기
+        </Button>
       );
     }
 
     return (
-      <Button
-        onClick={() => onCompleteChange?.(false)}
-        size="small"
-        variant="surface"
-      >
-        진행중인 과제로 돌려놓기
-      </Button>
+      <Popover.Root>
+        <Popover.Trigger>
+          <Button size="small">
+            <RocketIcon />
+            달성하기
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content>
+          <Typo color="gray">목표를 달성하시겠습니까?</Typo>
+          <Flex gap="3" justify="end" mt="3">
+            <Popover.Close>
+              <Button color="gray" size="small" variant="outline">
+                아니요
+              </Button>
+            </Popover.Close>
+            <Popover.Close>
+              <Button onClick={onClickComplete} size="small">
+                예
+              </Button>
+            </Popover.Close>
+          </Flex>
+        </Popover.Content>
+      </Popover.Root>
     );
-  }, [completed, onCompleteChange, props.onClickComplete]);
+  }, [completed, onClickIncomplete, onClickComplete]);
 
   return (
     <Card>
@@ -134,7 +131,7 @@ export function GoalManageCardRead(
 
         <Flex align="center" gridColumnStart="2" justify="between" mt="2">
           <Flex align="center" gap="3">
-            <Badge color={statusColor}>{status}</Badge>
+            {badgeMeta ? <Badge {...badgeMeta} /> : null}
             <Typo color="gray">
               {dueDate ? format(dueDate, 'yyyy년 MM월 dd일') : null}
             </Typo>
@@ -164,16 +161,30 @@ export function GoalManageCardRead(
               </Box>
             </Flex>
             <Flex align="center" gap="3" justify="end" mt="3">
-              <Button
-                color="gray"
-                onClick={onClickEdit}
-                size="small"
-                variant="ghost"
-              >
-                <TrashIcon />
-                삭제하기
-              </Button>
-              <Button onClick={onClickDelete} size="small" variant="surface">
+              <Popover.Root>
+                <Popover.Trigger>
+                  <Button color="gray" size="small" variant="ghost">
+                    <TrashIcon />
+                    삭제하기
+                  </Button>
+                </Popover.Trigger>
+                <Popover.Content>
+                  <Typo color="gray">목표를 삭제하시겠습니까?</Typo>
+                  <Flex gap="3" justify="end" mt="3">
+                    <Popover.Close>
+                      <Button color="gray" size="small" variant="outline">
+                        아니요
+                      </Button>
+                    </Popover.Close>
+                    <Popover.Close>
+                      <Button onClick={onClickDelete} size="small">
+                        예
+                      </Button>
+                    </Popover.Close>
+                  </Flex>
+                </Popover.Content>
+              </Popover.Root>
+              <Button onClick={onClickEdit} size="small" variant="surface">
                 <Pencil1Icon />
                 수정하기
               </Button>

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

@@ -1,25 +1,57 @@
-import React from 'react';
-import { Card, Flex, Heading } from '@/atoms';
+import React, { useCallback } from 'react';
+import { Button, Card, Flex, Heading } from '@/atoms';
 import type { Attachment } from '@/molecules';
-import { DownloadCard } from '@/molecules';
+import { DownloadIcon } from '@/icon';
 
+type File = Attachment & { buttonName: string };
 export interface ReportCardProps {
   title?: string;
-  file?: Attachment[];
-  status?: React.ReactElement;
+  file?: File;
+  status?: React.ReactNode;
 }
 
 export function ReportCard(props: ReportCardProps): React.ReactElement {
   const { title, file, status } = props;
+
+  const onClickDownload = useCallback(() => {
+    if (!file) return;
+    const { url, fileName } = file;
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.target = '_blank';
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  }, [file]);
+
+  if (status) {
+    return (
+      <Card>
+        <Flex align="center" justify="between">
+          <Heading variant="heading4">{title}</Heading>
+          {status}
+        </Flex>
+      </Card>
+    );
+  }
+
   return (
     <Card>
-      <Flex align="center" justify="between">
+      <Flex
+        direction={{ initial: 'column', xs: 'row' }}
+        gapY="2"
+        justify="between"
+      >
         <Heading variant="heading4">{title}</Heading>
-        {status}
+        <Button key={file?.url} onClick={onClickDownload} variant="surface">
+          <Flex gap="2" width="100%">
+            <DownloadIcon />
+            {file?.buttonName}
+          </Flex>
+        </Button>
       </Flex>
-      {file?.map((el) => {
-        return <DownloadCard key={el.url} {...el} />;
-      })}
     </Card>
   );
 }

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

@@ -77,7 +77,7 @@ export function ReservationCard(
     if (readonly) {
       return (
         <Button onClick={onClickReserve} size="small" variant="surface">
-          예약하기
+          {defaultTime && defaultType ? '예약 수정하기' : '예약하기'}
         </Button>
       );
     }
@@ -86,7 +86,7 @@ export function ReservationCard(
         <Cross1Icon />
       </Button>
     );
-  }, [onClickCancel, onClickReserve, readonly]);
+  }, [defaultTime, defaultType, onClickCancel, onClickReserve, readonly]);
 
   const onChangeDate = useCallback(
     (newDate: Date | null) => {

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

@@ -23,10 +23,10 @@ export type SessionCardProps = Omit<CardProps, 'error'> & {
   error?: string;
   startAt?: Date;
   endAt?: Date;
-  sessionType: ServiceType;
+  sessionType?: ServiceType;
   userName?: string;
   sessionNumber?: number;
-  ExtraButtons: React.ReactNode;
+  ExtraButtons?: React.ReactNode;
   editable?: boolean;
   TitleExtra?: React.ReactNode;
   onSaveDate?: (startTime: Date, endTime: Date) => void;
@@ -88,6 +88,7 @@ export function SessionCard(props: SessionCardProps): React.ReactElement {
                   <Dialog.Content
                     onOpenAutoFocus={preventDefault}
                     style={{ overflow: 'visible' }}
+                    title={`${sessionNumber}회차 세션 일시 변경하기`}
                   >
                     <EditCoachingTime
                       defaultEndAt={endAt}
@@ -107,7 +108,9 @@ export function SessionCard(props: SessionCardProps): React.ReactElement {
                 {editable ? (
                   <Dialog.Root>
                     <Dialog.Trigger>{renderEditButton()}</Dialog.Trigger>
-                    <Dialog.Content>
+                    <Dialog.Content
+                      title={`${sessionNumber}회차 세션 진행 방식 변경하기`}
+                    >
                       <EditServiceType
                         defaultServiceType={sessionType}
                         onClickSave={onSaveSessionType}

package/src/app/platform/session-review-simple-read.tsx

@@ -5,8 +5,6 @@ import { Badge, Box, Card, Flex, Heading, Typo } from '../../atoms';
 export interface SessionReviewSimpleReadProps {
   helpfulness?: boolean;
   review?: string;
-  sessionNumber?: number;
-  customerName?: string;
 }
 
 function SubTitleWrapper({
@@ -30,8 +28,6 @@ function SubTitleWrapper({
 export function SessionReviewSimpleRead({
   helpfulness,
   review,
-  sessionNumber,
-  customerName,
 }: SessionReviewSimpleReadProps): React.ReactElement {
   const helpfulnessMeta = useMemo<{
     text: string;
@@ -57,9 +53,6 @@ export function SessionReviewSimpleRead({
 
   return (
     <Box>
-      <Heading mb="5" variant="heading5">
-        {customerName || '-'}님의 {sessionNumber || '-'}회차 세션 후기
-      </Heading>
       <Flex direction="column" gap="5">
         <SubTitleWrapper title="이번 코칭이 목표 달성에 도움이 되었나요?">
           <Badge color={helpfulnessMeta.color}>{helpfulnessMeta.text}</Badge>

package/src/app/platform/userInfos/utils.tsx

@@ -24,7 +24,7 @@ export interface Customer {
 export interface Session {
   state?: ProjectStatus;
   totalSession?: number;
-  restSession?: number;
+  currentSession?: number;
   nextSessionDate?: Date;
   nextSessionType?: string;
   expiredAt?: Date;
@@ -69,7 +69,7 @@ export const sessionList: DataListItems<Session>[] = [
   {
     label: '진행중인 세션',
     getValue: (session) =>
-      `${session?.restSession || '-'}회차/${session?.totalSession || '-'}회차`,
+      `${session?.currentSession || '-'}회차/${session?.totalSession || '-'}회차`,
   },
   {
     label: '다음 세션 일시',

package/src/atoms/dialog.tsx

@@ -12,7 +12,7 @@ type ContentProps = RadixDialog.DialogContentProps & {
   height?: string;
   maxHeight?: string;
   minHeight?: string;
-  title?: React.ReactNode;
+  title?: string;
   buttons?: React.ReactElement;
 };
 
@@ -58,7 +58,9 @@ function Content(props: ContentProps): React.ReactElement {
             <Flex gap="2" justify="between">
               <RadixDialog.Title asChild>
                 {typeof title === 'string' ? (
-                  <Heading variant="heading3">{title}</Heading>
+                  <Heading align="center" mb="2" variant="heading3">
+                    {title}
+                  </Heading>
                 ) : (
                   title
                 )}

package/src/atoms/drawer.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
 import * as Dialog from '@radix-ui/react-dialog';
-import { Theme } from '@radix-ui/themes';
+import { Grid, Theme } from '@radix-ui/themes';
 import { ClosePanelArrowIcon } from '../icons/close-panel-arrow';
 import { Flex } from './flex';
 import { Separator } from './separator';
@@ -29,6 +29,10 @@ export function Content(props: ContentProps): React.ReactElement {
     containerRef.current = document.getElementsByClassName('radix-themes')[0];
   }, []);
 
+  const mobileHeaderSize = 48;
+  const desktopHeaderSize = 64;
+  const separatorSize = 1;
+
   return (
     <Dialog.Portal container={containerRef.current}>
       <Theme>
@@ -38,19 +42,24 @@ export function Content(props: ContentProps): React.ReactElement {
           onPointerDownOutside={preventDefault}
           {...rest}
         >
-          <Flex
-            align="center"
-            px={{ initial: '4', md: '6' }}
-            py={{ initial: '2', md: '4' }}
+          <Grid
+            height="100%"
+            overflow="hidden"
+            rows={{
+              initial: `${mobileHeaderSize}px ${separatorSize}px calc(100% - ${mobileHeaderSize + separatorSize}px)`,
+              sm: `${desktopHeaderSize}px ${separatorSize}px calc(100% - ${desktopHeaderSize + separatorSize}px)`,
+            }}
           >
-            <Dialog.Close asChild>
-              <IconButton color="gray" variant="outline">
-                <ClosePanelArrowIcon />
-              </IconButton>
-            </Dialog.Close>
-          </Flex>
-          <Separator orientation="horizontal" size="4" />
-          {children}
+            <Flex align="center" px={{ initial: '4', md: '6' }}>
+              <Dialog.Close asChild>
+                <IconButton color="gray" variant="outline">
+                  <ClosePanelArrowIcon />
+                </IconButton>
+              </Dialog.Close>
+            </Flex>
+            <Separator orientation="horizontal" size="4" />
+            {children}
+          </Grid>
         </Dialog.Content>
       </Theme>
     </Dialog.Portal>

package/src/icon.ts

@@ -40,4 +40,7 @@ export {
   ArrowRightIcon,
   CopyIcon,
   Pencil2Icon,
+  TargetIcon,
+  UpdateIcon,
+  DownloadIcon,
 } from '@radix-ui/react-icons';

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

@@ -63,9 +63,9 @@ const renderCustomHeader: ReactDatePickerProps['renderCustomHeader'] = (
   } = props;
 
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음
-  const year = date ? date.getFullYear() : '-';
+  const year = date ? new Date(date).getFullYear() : '-';
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- date가 undefined일 수 있음
-  const month = date ? date.getMonth() + 1 : '-';
+  const month = date ? new Date(date).getMonth() + 1 : '-';
 
   return (
     <Flex align="center" justify="between" pb="2" pl="2" pr="2">

package/src/molecules/radio-button-card.tsx

@@ -27,11 +27,7 @@ function Root(props: RadioCards.RootProps): React.ReactElement {
 
   return (
     <RadioCardContext.Provider value={{ ...props, value }}>
-      <RadioCards.Root
-        color="yellow"
-        {...props}
-        onValueChange={onValueChange}
-      />
+      <RadioCards.Root {...props} onValueChange={onValueChange} />
     </RadioCardContext.Provider>
   );
 }