Merge pull request #130 from capstone-five-ai/develop

hotfix: 편집 아이콘 클릭 시 input 창이 focus 되도록 수정
capstone-five-ai · Jun 16, 2024 · 7a48918 · 7a48918
2 parents a2efb4b + 47cbb16
commit 7a48918
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 23 deletions.
diff --git a/src/components/InputField/CommentInputField.tsx b/src/components/InputField/CommentInputField.tsx
@@ -1,6 +1,5 @@
 import { ReactComponent as ArrowIcon } from '@/assets/icons/arrow-up.svg';
 import { ReactComponent as CommentIcon } from '@/assets/icons/commentary.svg';
-import { ReactComponent as EditIcon } from '@/assets/icons/edit.svg';
 import getCircleNum from '@/utils/getCircleNum';
 import textareaAdjustHeight from '@/utils/textareaAdjustHeight';
 import { useEffect, useRef } from 'react';
@@ -19,7 +18,6 @@ interface CommentEditInputFieldProps extends CommentInputFieldProps {
   showWarning?: boolean;
   warningMessage?: string;
   onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  setIsEdit?: (value: boolean) => void;
 }
 
 export function CommentDefaultInputField({
@@ -72,7 +70,6 @@ export function CommentEditInputField({
   warningMessage,
   setIsCommentOpen,
   onChange,
-  setIsEdit,
 }: CommentEditInputFieldProps) {
   const textareaRef = useRef<HTMLTextAreaElement>(null);
 
@@ -109,14 +106,6 @@ export function CommentEditInputField({
                 }}
                 disabled={!isEdit}
               />
-              {!isEdit && (
-                <EditIcon
-                  className="icon"
-                  onClick={() => {
-                    setIsEdit && setIsEdit(true);
-                  }}
-                />
-              )}
             </StyledEditContent>
             <ErrorMessage $show={showWarning}>{warningMessage}</ErrorMessage>
           </div>

diff --git a/src/components/InputField/QuizInputField.tsx b/src/components/InputField/QuizInputField.tsx
@@ -1,4 +1,3 @@
-import { ReactComponent as EditIcon } from '@/assets/icons/edit.svg';
 import DeleteIcon from '@/components/Icon/DeleteIcon';
 import styled, { css } from 'styled-components';
 
@@ -14,7 +13,6 @@ interface QuizInputFieldProps
   isEdit?: boolean;
   showWarning?: boolean;
   warningMessage?: string;
-  setIsEdit?: (value: boolean) => void;
   onChange: (event: React.ChangeEvent<HTMLInputElement>, index: number) => void;
   onDelete?: (index: number) => void;
 }
@@ -25,7 +23,6 @@ function QuizInputField({
   isEdit,
   showWarning = false,
   warningMessage,
-  setIsEdit,
   onChange,
   onDelete,
   ...props
@@ -42,14 +39,6 @@ function QuizInputField({
           {...props}
         />
         <StyledIconContainer>
-          {!isEdit && (
-            <EditIcon
-              className="icon"
-              onClick={() => {
-                setIsEdit && setIsEdit(true);
-              }}
-            />
-          )}
           {type === 'choice' && (
             <DeleteIcon
               className="icon"

diff --git a/src/containers/CategoryPage/Category.tsx b/src/containers/CategoryPage/Category.tsx
@@ -99,6 +99,7 @@ function Category({
                 onClick={() => {
                   setNewCategoryName(category.categoryName);
                   setEditMode(true);
+                  setTimeout(() => inputRef.current?.focus(), 0);
                 }}
                 style={{ cursor: 'pointer' }}
               />

diff --git a/src/containers/HistoryPage/HistoryItem.tsx b/src/containers/HistoryPage/HistoryItem.tsx
@@ -15,7 +15,7 @@ import {
 import useToast from '@/hooks/useToast';
 import { HistoryType } from '@/types/history.type';
 import { convertToKRTime } from '@/utils/convertToKRTime';
-import { useState } from 'react';
+import { useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 
@@ -25,6 +25,7 @@ type Props = {
 };
 
 function HistoryItem({ history, updateList }: Props) {
+  const inputRef = useRef<HTMLInputElement>(null);
   const navigate = useNavigate();
   const [editMode, setEditMode] = useState(false);
   const [showDeleteModal, setShowDeleteModal] = useState(false);
@@ -45,6 +46,9 @@ function HistoryItem({ history, updateList }: Props) {
 
   const handleClickEdit = () => {
     setEditMode(true);
+    setTimeout(() => {
+      inputRef.current?.focus();
+    }, 0);
   };
 
   const handleClickDelete = () => {
@@ -77,6 +81,7 @@ function HistoryItem({ history, updateList }: Props) {
         {editMode ? (
           <>
             <Input
+              ref={inputRef}
               value={newFileName}
               onChange={(e) => setNewFileName(e.target.value)}
               placeholder="제목을 입력해주세요."