feat: popportal에 onChange interface 추가 및 inputChange 연결

Author: constantly-dev

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

@@ -5,6 +5,7 @@ import type { PopupState } from '@shared/hooks/useCategoryPopups';
 interface Props {
   popup: PopupState;
   onClose: () => void;
+  onChange?: (value: string) => void;
   onCreateConfirm?: () => void;
   onEditConfirm?: (id: number, draft?: string) => void;
   onDeleteConfirm?: (id: number) => void;
@@ -13,6 +14,7 @@ interface Props {
 export default function PopupPortal({
   popup,
   onClose,
+  onChange,
   onCreateConfirm,
   onEditConfirm,
   onDeleteConfirm,
@@ -29,6 +31,7 @@ export default function PopupPortal({
             title="카테고리 추가하기"
             left="취소"
             right="추가"
+            onInputChange={onChange}
             placeholder="카테고리 제목을 입력해주세요"
             onLeftClick={onClose}
             onRightClick={() => onCreateConfirm?.()}

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

@@ -11,8 +11,12 @@ import { useCategoryPopups } from '@shared/hooks/useCategoryPopups';
 import OptionsMenuPortal from './OptionsMenuPortal';
 import PopupPortal from './PopupPortal';
 import { useGetDashboardCategories } from '@shared/components/sidebar/apis/queries';
+import { useState } from 'react';
 
 export function Sidebar() {
+  const [newCategoryName, setNewCategoryName] = useState('');
+  console.log(newCategoryName); // 임시 로그
+
   const { data: categories } = useGetDashboardCategories();
   const {
     activeTab,
@@ -39,6 +43,10 @@ export function Sidebar() {
     categories?.categories.find((category) => category.categoryId === id)
       ?.categoryName ?? '';
 
+  const handleCategoryChange = (name: string) => {
+    setNewCategoryName(name);
+  };
+
   return (
     <aside className="bg-white-bg sticky top-0 h-screen w-[24rem] border-r border-gray-300">
       <div className="flex h-full flex-col px-[0.8rem]">
@@ -122,6 +130,7 @@ export function Sidebar() {
       <PopupPortal
         popup={popup}
         onClose={close}
+        onChange={handleCategoryChange}
         onCreateConfirm={() => {
           // TODO: 생성 API
           close();