fix: 카테고리 관련 수정 (0405) (#67) #patch

young-do · web-flow · commit f73a186dfae5 · 2025-04-05T12:52:22.000+09:00
* 카테고리칩 클릭가능하면 마우스 포인터 되도록

* 카테고리 바텀시트 불필요하게 열리는 현상 방지

* 포커스되는 경우 Outline 생성되는 것 제거 시도

* 서버에서 받은 에러 메시지 표시

* 카테고리 칩에는 아예 텍스트 선택 안되게

* 카테고리 너무 긴경우 말줄임 처리

* 삭제하기 버튼 색상 변경
diff --git a/src/renderer/features/category/ui/category-chip.tsx b/src/renderer/features/category/ui/category-chip.tsx
@@ -1,6 +1,6 @@
 import { Category } from '@/entities/category';
 import { Icon } from '@/shared/ui';
-import { getCategoryIconName } from '@/shared/utils';
+import { cn, getCategoryIconName } from '@/shared/utils';
 
 type CategoryChipProps = {
   category: Category;
@@ -10,7 +10,10 @@ type CategoryChipProps = {
 export const CategoryChip = ({ category, onClick }: CategoryChipProps) => {
   return (
     <div
-      className="subBody-sb flex min-w-[80px] gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary"
+      className={cn(
+        'subBody-sb flex min-w-[80px] select-none gap-sm rounded-xs bg-background-secondary p-md text-text-tertiary',
+        onClick && 'cursor-pointer',
+      )}
       onClick={onClick}
     >
       <Icon name={getCategoryIconName(category.iconType)} size="sm" />
diff --git a/src/renderer/features/category/ui/change-category-drawer.tsx b/src/renderer/features/category/ui/change-category-drawer.tsx
@@ -17,17 +17,23 @@ import {
   Button,
   DrawerFooter,
   Dialog,
-  // useToast,
+  useToast,
 } from '@/shared/ui';
 import { cn, getCategoryIconName } from '@/shared/utils';
+import { isErrorResponse } from '@/shared/utils/error';
 
 type ChangeCategoryDrawerProps = {
   open: boolean;
   onOpenChange: (isOpen: boolean) => void;
+  onClose: () => void;
 };
 type ChangeCategoryDrawerMode = 'select' | 'edit' | 'delete';
 
-export const ChangeCategoryDrawer = ({ open, onOpenChange }: ChangeCategoryDrawerProps) => {
+export const ChangeCategoryDrawer = ({
+  open,
+  onOpenChange,
+  onClose,
+}: ChangeCategoryDrawerProps) => {
   const [mode, setMode] = useState<ChangeCategoryDrawerMode>('select');
 
   useEffect(() => {
@@ -37,7 +43,7 @@ export const ChangeCategoryDrawer = ({ open, onOpenChange }: ChangeCategoryDrawe
   }, [open]);
 
   return (
-    <Drawer open={open} onOpenChange={onOpenChange}>
+    <Drawer open={open} onOpenChange={onOpenChange} onClose={onClose}>
       <DrawerContent>
         {mode === 'select' && (
           <SelectModeDrawerContent setMode={setMode} onClose={() => onOpenChange(false)} />
@@ -144,7 +150,7 @@ const SelectModeDrawerContent = ({ setMode, onClose }: SelectModeDrawerContentPr
               className="flex w-full flex-row items-center justify-start gap-2 p-5"
             >
               <Icon name={getCategoryIconName(category.iconType)} size="sm" />
-              <span className="body-sb text-text-primary">{category.title}</span>
+              <span className="body-sb truncate text-text-primary">{category.title}</span>
             </SelectGroupItem>
           ))}
         </SelectGroup>
@@ -201,7 +207,10 @@ const EditModeDrawerContent = ({ setMode }: EditModeDrawerContentProps) => {
               >
                 <Icon name={disabled ? 'lock' : getCategoryIconName(category.iconType)} size="sm" />
                 <span
-                  className={cn('body-sb', disabled ? 'text-text-disabled' : 'text-text-primary')}
+                  className={cn(
+                    'body-sb truncate',
+                    disabled ? 'text-text-disabled' : 'text-text-primary',
+                  )}
                 >
                   {category.title}
                 </span>
@@ -225,6 +234,7 @@ const DeleteModeDrawerContent = ({ setMode }: DeleteModeDrawerContentProps) => {
 
   const { mutateAsync: deleteCategories } = useDeleteCategories();
   const confirmDeleteDialogProps = useDisclosure();
+  const { toast } = useToast();
 
   const [selectedCategoryIds, setSelectedCategoryIds] = useState<string[]>([]);
   const isDisabledCompleteButton = selectedCategoryIds.length === 0;
@@ -233,9 +243,16 @@ const DeleteModeDrawerContent = ({ setMode }: DeleteModeDrawerContentProps) => {
     confirmDeleteDialogProps.setIsOpen(true);
   };
   const handleDeleteCategories = async () => {
-    // TODO: api 호출 실패시 에러 처리
-    await deleteCategories({ body: { no: selectedCategoryIds.map(Number) } });
-    setMode('select');
+    try {
+      await deleteCategories({ body: { no: selectedCategoryIds.map(Number) } });
+      setMode('select');
+    } catch (error) {
+      const errorMessage = isErrorResponse(error)
+        ? error.message
+        : '알 수 없는 오류가 발생했습니다.';
+      // TODO: 토스트 아이콘 적용?
+      toast({ message: errorMessage });
+    }
   };
 
   return (
@@ -280,7 +297,10 @@ const DeleteModeDrawerContent = ({ setMode }: DeleteModeDrawerContentProps) => {
                   size="md"
                 />
                 <span
-                  className={cn('body-sb', disabled ? 'text-text-disabled' : 'text-text-primary')}
+                  className={cn(
+                    'body-sb truncate',
+                    disabled ? 'text-text-disabled' : 'text-text-primary',
+                  )}
                 >
                   {category.title}
                 </span>
@@ -292,6 +312,7 @@ const DeleteModeDrawerContent = ({ setMode }: DeleteModeDrawerContentProps) => {
       <DrawerFooter>
         <Button
           className="w-full"
+          variant="secondary"
           disabled={isDisabledCompleteButton}
           onClick={handleClickDeleteButton}
         >
diff --git a/src/renderer/pages/category.tsx b/src/renderer/pages/category.tsx
@@ -3,12 +3,7 @@ import { useEffect, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { CategoryIconType } from '@/entities/category';
-import {
-  useUpdateCategory,
-  useCategory,
-  useCreateCategory,
-  useCategories,
-} from '@/features/category';
+import { useUpdateCategory, useCategory, useCreateCategory } from '@/features/category';
 import { PATH } from '@/shared/constants';
 import { useDisclosure } from '@/shared/hooks';
 import {
@@ -21,6 +16,7 @@ import {
   SimpleLayout,
 } from '@/shared/ui';
 import { CategoryIconTypeMap, cn } from '@/shared/utils';
+import { isErrorResponse } from '@/shared/utils/error';
 
 const CATEGORY_NAME_MAX_LENGTH = 10;
 
@@ -32,7 +28,6 @@ const CategoryPage = () => {
   const drawerProps = useDisclosure();
 
   const { data: category } = useCategory(categoryNo);
-  const { data: categories } = useCategories();
   const { mutateAsync: createCategory, isPending: isCreating } = useCreateCategory();
   const { mutateAsync: updateCategory, isPending: isUpdating } = useUpdateCategory();
   const isPending = isCreating || isUpdating;
@@ -59,52 +54,46 @@ const CategoryPage = () => {
     }
   }, [category]);
 
-  useEffect(() => {
-    const isTooLong = trimmedCategoryName.length > CATEGORY_NAME_MAX_LENGTH;
-    const isDuplicated = isPending
-      ? // @note: 낙관적 업데이트를 하기 때문에 카테고리 생성 중에 중복 에러 메시지 보이지 않도록 함
-        false
-      : categories?.some(
-          (category) => category.title === trimmedCategoryName && category.no !== categoryNo,
-        );
-    if (isTooLong) {
-      return setErrorMessage(`최대 ${CATEGORY_NAME_MAX_LENGTH}글자까지 입력할 수 있어요.`);
-    }
-    if (isDuplicated) {
-      return setErrorMessage('이미 존재하는 카테고리예요.');
+  const handleInput = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setTypedCategoryName(e.target.value);
+    if (e.target.value.length > CATEGORY_NAME_MAX_LENGTH) {
+      setErrorMessage(`카테고리 이름은 ${CATEGORY_NAME_MAX_LENGTH}자 이내로 입력해주세요.`);
+    } else {
+      setErrorMessage(null);
     }
-    setErrorMessage(null);
-  }, [trimmedCategoryName, categories, categoryNo, isPending]);
-
+  };
   const handleClickChangeIconButton = () => {
     drawerProps.setIsOpen(true);
   };
   const handleClickBackButton = () => {
     navigate(PATH.POMODORO, { state: { openChangeCategoryDrawer: true } });
   };
   const handleClickCompleteButton = async () => {
-    // TODO:
-    // - 카테고리 api 호출 에러 처리
-    //  - 이미 존재하는 카테고리인 경우
-    //  - 카테고리 이름이 너무 긴 경우
-
-    if (isEditMode) {
-      await updateCategory({
-        no: categoryNo,
-        body: {
-          title: trimmedCategoryName,
-          iconType: selectedCategoryIconType,
-        },
-      });
-    } else {
-      await createCategory({
-        body: {
-          title: trimmedCategoryName,
-          iconType: selectedCategoryIconType,
-        },
-      });
+    try {
+      if (isEditMode) {
+        await updateCategory({
+          no: categoryNo,
+          body: {
+            title: trimmedCategoryName,
+            iconType: selectedCategoryIconType,
+          },
+        });
+      } else {
+        await createCategory({
+          body: {
+            title: trimmedCategoryName,
+            iconType: selectedCategoryIconType,
+          },
+        });
+      }
+      navigate(PATH.POMODORO, { state: { openChangeCategoryDrawer: true } });
+    } catch (error) {
+      const errorMessage = isErrorResponse(error)
+        ? error.message
+        : '알 수 없는 오류가 발생했습니다.';
+
+      setErrorMessage(errorMessage);
     }
-    navigate(PATH.POMODORO, { state: { openChangeCategoryDrawer: true } });
   };
 
   return (
@@ -130,7 +119,7 @@ const CategoryPage = () => {
 
           <input
             value={typedCategoryName}
-            onChange={(e) => setTypedCategoryName(e.target.value)}
+            onChange={handleInput}
             type="text"
             placeholder="카테고리 이름"
             className="body-sb mt-6 w-full rounded-sm bg-white p-lg text-text-primary caret-text-accent-1 placeholder:text-text-disabled"
diff --git a/src/renderer/shared/api/httpClient.ts b/src/renderer/shared/api/httpClient.ts
@@ -42,6 +42,9 @@ const __fetch = async <T = unknown, D = unknown>(
   });
 
   if (!response.ok) {
+    if (response.headers.get('Content-type')?.includes('application/json')) {
+      throw await response.json();
+    }
     const error = new Error();
     const text = await response.text();
     error.message = text;
diff --git a/src/renderer/shared/ui/drawer.tsx b/src/renderer/shared/ui/drawer.tsx
@@ -39,7 +39,7 @@ const DrawerContent = React.forwardRef<
     <DrawerPrimitive.Content
       ref={ref}
       className={cn(
-        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[24px] border bg-background-primary',
+        'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[24px] border bg-background-primary outline-none',
         className,
       )}
       {...props}
diff --git a/src/renderer/shared/utils/error.ts b/src/renderer/shared/utils/error.ts
@@ -0,0 +1,12 @@
+export type ErrorResponse = {
+  type: string;
+  message: string;
+  errorTraceId: string;
+};
+
+export const isErrorResponse = (error: unknown): error is ErrorResponse => {
+  if (typeof error !== 'object' || error == null) {
+    return false;
+  }
+  return 'type' in error && 'message' in error && 'errorTraceId' in error;
+};
diff --git a/src/renderer/widgets/pomodoro/ui/home-screen.tsx b/src/renderer/widgets/pomodoro/ui/home-screen.tsx
@@ -73,6 +73,12 @@ export const HomeScreen = ({
     }
   }, [openChangeCategoryDrawer]);
 
+  const handleCloseDrawer = () => {
+    if (openChangeCategoryDrawer) {
+      location.state = { openChangeCategoryDrawer: false };
+    }
+  };
+
   const showRandomMessage = () => {
     const messages = getTooltipMessages(user?.cat?.type);
     const randomIndex = Math.floor(Math.random() * messages.length);
@@ -146,6 +152,7 @@ export const HomeScreen = ({
       <ChangeCategoryDrawer
         open={changeCategoryDrawerProps.isOpen}
         onOpenChange={changeCategoryDrawerProps.setIsOpen}
+        onClose={handleCloseDrawer}
       />
 
       {showGuide && (
