[FE] fix: category icon click 버그 수정 (#234)

* fix: 아이콘 클릭 에러 해결 * refactor: category input 비제어 컴포넌트로 수정
woowacourse-teams · Aug 11, 2023 · e1fd86b · e1fd86b
1 parent 7f44998
commit e1fd86b
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 25 deletions.
diff --git a/frontend/src/assets/icons/index.ts b/frontend/src/assets/icons/index.ts
@@ -19,3 +19,4 @@ export { ReactComponent as DeleteIcon } from './delete.svg';
 export { ReactComponent as PencilIcon } from './pencil.svg';
 export { ReactComponent as WritingIcon } from './writing.svg';
 export { ReactComponent as ImportIcon } from './import.svg';
+export { ReactComponent as PlusIcon } from './plus.svg';
diff --git a/frontend/src/assets/icons/plus.svg b/frontend/src/assets/icons/plus.svg
diff --git a/frontend/src/components/Category/Category/Category.tsx b/frontend/src/components/Category/Category/Category.tsx
@@ -15,12 +15,10 @@ type Props = {
 
 const Category = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
   const {
-    value,
     inputRef,
-    handleOnChange,
     escapeInput: escapeRename,
     isInputOpen,
-    setIsInputOpen,
+    openInput,
     resetInput,
     isError,
     setIsError,
@@ -31,22 +29,21 @@ const Category = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
   const requestChangedName: KeyboardEventHandler<HTMLInputElement> = (e) => {
     if (e.key !== 'Enter') return;
 
-    if (!isValidCategoryName(value)) {
+    const categoryName = e.currentTarget.value.trim();
+
+    if (!isValidCategoryName(categoryName)) {
       setIsError(true);
       return;
     }
 
-    resetInput();
     patchCategory({
       categoryId,
       body: {
-        categoryName: value.trim(),
+        categoryName,
       },
     });
-  };
 
-  const openRenamingInput: MouseEventHandler<SVGSVGElement> = (e) => {
-    setIsInputOpen(true);
+    resetInput();
   };
 
   return (
@@ -57,11 +54,9 @@ const Category = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
           variant='underlined'
           size='small'
           placeholder='Change category name ...'
-          value={value}
           ref={inputRef}
           isError={isError}
           onBlur={resetInput}
-          onChange={handleOnChange}
           onKeyDown={escapeRename}
           onKeyUp={requestChangedName}
         />
@@ -75,11 +70,14 @@ const Category = ({ categoryId, categoryName, isDefaultCategory }: Props) => {
           </S.CategoryButton>
           {!isDefaultCategory && (
             <S.IconContainer>
-              <S.Button aria-label={`${categoryName} 카테고리 이름 수정`}>
-                <PencilIcon onClick={openRenamingInput} width={12} height={12} />
+              <S.Button aria-label={`${categoryName} 카테고리 이름 수정`} onClick={openInput}>
+                <PencilIcon width={12} height={12} />
               </S.Button>
-              <S.Button aria-label={`${categoryName} 카테고리 삭제`}>
-                <DeleteIcon onClick={() => deleteCategory(categoryId)} width={12} height={12} />
+              <S.Button
+                aria-label={`${categoryName} 카테고리 삭제`}
+                onClick={() => deleteCategory(categoryId)}
+              >
+                <DeleteIcon width={12} height={12} />
               </S.Button>
             </S.IconContainer>
           )}

diff --git a/frontend/src/components/Category/CategorySection/CategorySection.tsx b/frontend/src/components/Category/CategorySection/CategorySection.tsx
@@ -1,6 +1,6 @@
 import Accordion from 'components/@common/Accordion/Accordion';
 import { styled } from 'styled-components';
-import { PlusCircleIcon } from 'assets/icons';
+import { PlusIcon } from 'assets/icons';
 import { KeyboardEventHandler } from 'react';
 import useCategoryInput from '../useCategoryInput';
 import Category from '../Category/Category';
@@ -13,12 +13,10 @@ import { isValidCategoryName } from '../isValidCategoryName';
 const CategorySection = () => {
   const { categoryDetails, setSelectedCategoryId } = useCategoryDetails();
   const {
-    value,
     inputRef,
-    handleOnChange,
     escapeInput: escapeAddCategory,
     isInputOpen,
-    setIsInputOpen,
+    openInput,
     resetInput,
     isError,
     setIsError,
@@ -28,7 +26,7 @@ const CategorySection = () => {
   const requestAddCategory: KeyboardEventHandler<HTMLInputElement> = async (e) => {
     if (e.key !== 'Enter') return;
 
-    const categoryName = value.trim();
+    const categoryName = e.currentTarget.value.trim();
 
     if (!isValidCategoryName(categoryName)) {
       setIsError(true);
@@ -51,17 +49,15 @@ const CategorySection = () => {
             variant='underlined'
             size='small'
             placeholder='Add category ...'
-            value={value}
             ref={inputRef}
             isError={isError}
             onBlur={resetInput}
-            onChange={handleOnChange}
             onKeyDown={escapeAddCategory}
             onKeyUp={requestAddCategory}
           />
         ) : (
-          <S.Button onClick={() => setIsInputOpen(true)} aria-label='카테고리 추가 입력 창 열기'>
-            <PlusCircleIcon width={12} height={12} />
+          <S.Button aria-label='카테고리 추가 입력 창 열기' onClick={openInput}>
+            <PlusIcon width={12} height={12} />
           </S.Button>
         )}
       </S.Header>

diff --git a/frontend/src/components/Category/useCategoryInput.ts b/frontend/src/components/Category/useCategoryInput.ts
@@ -14,6 +14,8 @@ const useCategoryInput = (initialValue: string) => {
 
   const handleOnChange: ChangeEventHandler<HTMLInputElement> = (e) => setValue(e.target.value);
 
+  const openInput = () => setIsInputOpen(true);
+
   const resetInput = () => {
     setIsError(false);
     setIsInputOpen(false);
@@ -32,7 +34,7 @@ const useCategoryInput = (initialValue: string) => {
     handleOnChange,
     escapeInput,
     isInputOpen,
-    setIsInputOpen,
+    openInput,
     resetInput,
     isError,
     setIsError,