Feat: 개발 QA 1차(카테고리 팝업 수정)

apps/client/src/shared/components/sidebar/PopupPortal.tsx

@@ -1,5 +1,6 @@
 import { createPortal } from 'react-dom';
-import { Popup } from '@pinback/design-system/ui';
+import { useState } from 'react';
+import { AutoDismissToast, Popup, Toast } from '@pinback/design-system/ui';
 import type { PopupState } from '@shared/hooks/useCategoryPopups';
 
 interface Props {
@@ -9,6 +10,9 @@ interface Props {
   onCreateConfirm?: () => void;
   onEditConfirm?: (id: number, draft?: string) => void;
   onDeleteConfirm?: (id: number) => void;
+  categoryList?: { id: number; name: string }[];
+  isToastOpen?: boolean;
+  onToastClose?: () => void;
 }
 
 export default function PopupPortal({
@@ -18,9 +22,54 @@ export default function PopupPortal({
   onCreateConfirm,
   onEditConfirm,
   onDeleteConfirm,
+  categoryList,
+  isToastOpen,
+  onToastClose,
 }: Props) {
+  const [draft, setDraft] = useState('');
+
   if (!popup) return null;
 
+  const error = (() => {
+    if (popup.kind === 'delete') return null;
+
+    const value = draft.trim();
+    if (!value) return null;
+
+    if (value.length > 10) return '카테고리 이름은 10자 이내로 입력해주세요.';
+
+    const isDuplicate = !!categoryList?.some(
+      (category) =>
+        category.name === value &&
+        (popup.kind === 'create' || category.id !== popup.id)
+    );
+    return isDuplicate ? '이미 존재하는 카테고리 이름입니다.' : null;
+  })();
+
+  const handleInputChange = (value: string) => {
+    setDraft(value);
+    onChange?.(value);
+  };
+
+  const handleCreate = () => {
+    if (error) return;
+    onCreateConfirm?.();
+  };
+
+  const handleEdit = () => {
+    if (error || popup.kind !== 'edit') return;
+    onEditConfirm?.(popup.id, draft.trim());
+  };
+
+  const handleDelete = () => {
+    if (popup.kind === 'delete') {
+      onDeleteConfirm?.(popup.id);
+    }
+  };
+
+  const actionLabel =
+    popup.kind === 'create' ? '추가' : popup.kind === 'edit' ? '수정' : '삭제';
+
   return createPortal(
     <div className="fixed inset-0 z-[11000]">
       <div className="absolute inset-0 bg-black/60" onClick={onClose} />
@@ -31,10 +80,12 @@ export default function PopupPortal({
             title="카테고리 추가하기"
             left="취소"
             right="추가"
-            onInputChange={onChange}
+            isError={Boolean(error)}
+            helperText={error ?? ''}
+            onInputChange={handleInputChange}
             placeholder="카테고리 제목을 입력해주세요"
             onLeftClick={onClose}
-            onRightClick={() => onCreateConfirm?.()}
+            onRightClick={handleCreate}
           />
         )}
 
@@ -44,10 +95,12 @@ export default function PopupPortal({
             title="카테고리 수정하기"
             left="취소"
             right="확인"
-            onInputChange={onChange}
+            isError={Boolean(error)}
+            helperText={error ?? ''}
+            onInputChange={handleInputChange}
             defaultValue={popup.name}
             onLeftClick={onClose}
-            onRightClick={() => onEditConfirm?.(popup.id)}
+            onRightClick={handleEdit}
           />
         )}
 
@@ -59,9 +112,21 @@ export default function PopupPortal({
             left="취소"
             right="삭제"
             onLeftClick={onClose}
-            onRightClick={() => onDeleteConfirm?.(popup.id)}
+            onRightClick={handleDelete}
           />
         )}
+
+        {isToastOpen && (
+          <div className="absolute bottom-[23.4rem] left-1/2 -translate-x-1/2">
+            <AutoDismissToast
+              duration={1000}
+              fadeMs={1000}
+              onClose={onToastClose}
+            >
+              <Toast text={`${actionLabel}에 실패했어요.\n다시 시도해주세요`} />
+            </AutoDismissToast>
+          </div>
+        )}
       </div>
     </div>,
     document.body

apps/client/src/shared/components/sidebar/Sidebar.tsx

@@ -58,6 +58,8 @@ export function Sidebar() {
     setNewCategoryName(name);
   };
 
+  const [toastIsOpen, setToastIsOpen] = useState(false);
+
   const handleCreateCategory = () => {
     createCategory(newCategoryName, {
       onSuccess: () => {
@@ -67,6 +69,7 @@ export function Sidebar() {
       },
       onError: (error) => {
         console.error('카테고리 생성 실패:', error);
+        setToastIsOpen(true);
       },
     });
   };
@@ -79,7 +82,10 @@ export function Sidebar() {
           queryClient.invalidateQueries({ queryKey: ['dashboardCategories'] });
           close();
         },
-        onError: (error) => console.error('카테고리 수정 실패:', error),
+        onError: (error) => {
+          console.error('카테고리 수정 실패:', error);
+          setToastIsOpen(true);
+        },
       }
     );
   };
@@ -92,6 +98,7 @@ export function Sidebar() {
       },
       onError: (error) => {
         console.error('카테고리 삭제 실패:', error);
+        setToastIsOpen(true);
       },
     });
   };
@@ -185,6 +192,8 @@ export function Sidebar() {
         onCreateConfirm={handleCreateCategory}
         onEditConfirm={(id) => handlePatchCategory(id)}
         onDeleteConfirm={(id) => handleDeleteCategory(id)}
+        categoryList={categories?.categories ?? []}
+        isToastOpen={toastIsOpen}
       />
     </aside>
   );