From d8e53b221f714913f9129ed0bba88bbdfb86e924 Mon Sep 17 00:00:00 2001 From: Suk Woo Date: Tue, 20 Aug 2024 22:42:03 +0900 Subject: [PATCH 1/4] =?UTF-8?q?Feat:=20#63=20=EC=88=98=ED=96=89=EC=A0=80?= =?UTF-8?q?=20=EA=B6=8C=ED=95=9C=EC=9D=84=20=EC=95=84=EC=9D=B4=EC=BD=98?= =?UTF-8?q?=EC=9C=BC=EB=A1=9C=20=EB=B3=80=EA=B2=BD=20&=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=ED=88=B4=ED=8C=81=20=EC=84=A4=EB=AA=85=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#81)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/RoleIcon.tsx | 38 +++++++++++++++++++++ src/components/modal/task/ModalTaskForm.tsx | 17 +++++---- src/mocks/mockData.ts | 2 +- 3 files changed, 47 insertions(+), 10 deletions(-) create mode 100644 src/components/common/RoleIcon.tsx diff --git a/src/components/common/RoleIcon.tsx b/src/components/common/RoleIcon.tsx new file mode 100644 index 00000000..3db59a16 --- /dev/null +++ b/src/components/common/RoleIcon.tsx @@ -0,0 +1,38 @@ +import { TbChess, TbChessKnight, TbChessQueen } from 'react-icons/tb'; +import { Role } from '@/types/RoleType'; + +type RoleIconProps = { + roleName: Role['roleName']; +}; + +function getRoleIcon(roleName: Role['roleName']) { + switch (roleName) { + case 'HEAD': + case 'ADMIN': + return ; + case 'LEADER': + return ; + case 'MATE': + case 'ASSIGNEE': + return ; + default: + return null; + } +} + +export default function RoleIcon({ roleName }: RoleIconProps) { + return ( +
+ {getRoleIcon(roleName)} + {/* prettier-ignore */} +

+ {roleName} +

+
+ ); +} diff --git a/src/components/modal/task/ModalTaskForm.tsx b/src/components/modal/task/ModalTaskForm.tsx index 258f5885..11c25c6b 100644 --- a/src/components/modal/task/ModalTaskForm.tsx +++ b/src/components/modal/task/ModalTaskForm.tsx @@ -5,6 +5,7 @@ import { IoSearch } from 'react-icons/io5'; import { IoMdCloseCircle } from 'react-icons/io'; import { TASK_VALIDATION_RULES } from '@constants/formValidationRules'; +import RoleIcon from '@components/common/RoleIcon'; import ToggleButton from '@components/common/ToggleButton'; import DuplicationCheckInput from '@components/common/DuplicationCheckInput'; import useToast from '@hooks/useToast'; @@ -70,7 +71,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod }, [fetchData, projectId, keyword]); useEffect(() => { - if (keyword.trim()) { + if (keyword) { debounceRef.current = setTimeout(() => searchUsers(), 500); } return () => { @@ -85,7 +86,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod setHasDeadline((prev) => !prev); }; - const handleKeywordChange = (e: React.ChangeEvent) => setKeyword(e.target.value); + const handleKeywordChange = (e: React.ChangeEvent) => setKeyword(e.target.value.trim()); const handleSearchClick = () => searchUsers(); @@ -100,9 +101,9 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod const isIncludedUser = workers.find((worker) => worker.userId === user.userId); if (isIncludedUser) return toastInfo('이미 포함된 수행자입니다'); - const newWorkers = [...workers, user]; - const workersIdList = newWorkers.map((worker) => worker.userId); - setWorkers(newWorkers); + const updatedWorkers = [...workers, user]; + const workersIdList = updatedWorkers.map((worker) => worker.userId); + setWorkers(updatedWorkers); setValue('userId', workersIdList); setKeyword(''); clearData(); @@ -211,7 +212,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod {keyword && !loading && ( -
    +
      {data && data.length === 0 ? (
      '{keyword}' 의 검색 결과가 없습니다.
      ) : ( @@ -237,7 +238,7 @@ export default function ModalTaskForm({ formId, project, taskId, onSubmit }: Mod
      {workers.map((user) => (
      -
      {user.roleName}
      +
      {user.nickname}
      -