Refactor: #87 팀 권한 정보 툴팁 component 분리 및 경로 정리

GU-99 · Sep 26, 2024 · 1003b60 · 1003b60
1 parent 473d860
commit 1003b60
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 31 deletions.
diff --git a/src/components/common/RoleTooltip.tsx b/src/components/common/RoleTooltip.tsx
@@ -0,0 +1,25 @@
+import RoleIcon from '@components/common/RoleIcon';
+import { RoleInfo } from '@/types/RoleType';
+
+type RoleTooltipProps = {
+  showTooltip: boolean;
+  rolesInfo: RoleInfo[];
+};
+
+export default function RoleTooltip({ showTooltip, rolesInfo }: RoleTooltipProps) {
+  return (
+    <div
+      className={`absolute left-0 top-full z-10 mt-2 w-max rounded-lg bg-gray-500 p-10 text-white shadow-lg ${!showTooltip && 'hidden'}`}
+    >
+      {rolesInfo.map((role) => (
+        <div key={role.roleName}>
+          <div className="flex items-center">
+            <RoleIcon roleName={role.roleName} />
+            <strong>{role.label}</strong>
+          </div>
+          <p className="whitespace-pre-line">{role.description}</p>
+        </div>
+      ))}
+    </div>
+  );
+}
diff --git a/src/components/modal/team/CreateModalTeam.tsx b/src/components/modal/team/CreateModalTeam.tsx
@@ -3,9 +3,9 @@ import ModalPortal from '@components/modal/ModalPortal';
 import ModalFormButton from '@components/modal/ModalFormButton';
 import ModalTeamForm from '@components/modal/team/ModalTeamForm';
 
+import { createTeam } from '@services/teamService';
 import type { SubmitHandler } from 'react-hook-form';
 import type { TeamForm } from '@/types/TeamType';
-import { createTeam } from '@/services/teamService';
 
 type CreateModalProjectStatusProps = {
   onClose: () => void;

diff --git a/src/components/modal/team/ModalTeamForm.tsx b/src/components/modal/team/ModalTeamForm.tsx
@@ -6,13 +6,14 @@ import DuplicationCheckInput from '@components/common/DuplicationCheckInput';
 import SearchUserInput from '@components/common/SearchUserInput';
 import useAxios from '@hooks/useAxios';
 import { findUser } from '@services/userService';
+import useToast from '@hooks/useToast';
+import SelectedUserWithRole from '@components/common/SelectedUserWithRole';
+import RoleTooltip from '@components/common/RoleTooltip';
+import { TEAM_VALIDATION_RULES } from '@constants/formValidationRules';
 import type { SearchUser } from '@/types/UserType';
 import type { Team, TeamForm } from '@/types/TeamType';
-import { AllSearchCallback } from '@/types/SearchCallbackType';
-import useToast from '@/hooks/useToast';
-import SelectedUserWithRole from '@/components/common/SelectedUserWithRole';
-import RoleIcon from '@/components/common/RoleIcon';
-import { TEAM_VALIDATION_RULES } from '@/constants/formValidationRules';
+import type { AllSearchCallback } from '@/types/SearchCallbackType';
+import type { RoleInfo } from '@/types/RoleType';
 
 type ModalTeamFormProps = {
   formId: string;
@@ -36,6 +37,16 @@ export default function ModalTeamForm({ formId, teamId, onSubmit }: ModalTeamFor
     [],
   );
 
+  const rolesInfo: RoleInfo[] = [
+    { roleName: 'HEAD', label: 'HEAD', description: '모든 권한 가능' },
+    {
+      roleName: 'LEADER',
+      label: 'Leader',
+      description: '팀원 탈퇴(Mate만)\n프로젝트 생성 권한\n프로젝트 삭제(본인이 생성한 것만)',
+    },
+    { roleName: 'MATE', label: 'Mate', description: '프로젝트 읽기만 가능, 수정 및 생성 불가' },
+  ];
+
   const handleRoleChange = (userId: number, role: 'HEAD' | 'LEADER' | 'MATE') => {
     setSelectedUsers((prev) => prev.map((item) => (item.user.userId === userId ? { ...item, role } : item)));
   };
@@ -99,34 +110,11 @@ export default function ModalTeamForm({ formId, teamId, onSubmit }: ModalTeamFor
   return (
     <FormProvider {...methods}>
       <form id={formId} className="mb-10 flex grow flex-col justify-center" onSubmit={handleSubmit(handleSubmitForm)}>
-        {/* TODO: component 분리 하기 */}
         <div className="relative" onMouseEnter={() => setShowTooltip(true)} onMouseLeave={() => setShowTooltip(false)}>
           <p className="text-sky-700">
             <strong>팀 권한 정보</strong>
           </p>
-          {showTooltip && (
-            <div className="absolute left-0 top-full z-10 mt-2 w-max rounded-lg bg-gray-500 p-10 text-white shadow-lg">
-              <div className="flex items-center">
-                <RoleIcon roleName="HEAD" />
-                <strong>HEAD</strong>{' '}
-              </div>
-              <p>모든 권한 가능</p>
-              <div className="flex items-center">
-                <RoleIcon roleName="LEADER" />
-                <strong>Leader</strong> <br />
-              </div>
-              <p>
-                팀원 탈퇴(Mate만)
-                <br /> 프로젝트 생성 권한
-                <br /> 프로젝트 삭제(본인이 생성한 것만)
-              </p>
-              <div className="flex items-center">
-                <RoleIcon roleName="MATE" />
-                <strong>Mate</strong>
-              </div>
-              <p>프로젝트 읽기만 가능, 수정 및 생성 불가</p>
-            </div>
-          )}
+          <RoleTooltip showTooltip={showTooltip} rolesInfo={rolesInfo} />
         </div>
 
         <DuplicationCheckInput

diff --git a/src/types/RoleType.tsx b/src/types/RoleType.tsx
@@ -1,5 +1,13 @@
+export type RoleName = 'HEAD' | 'LEADER' | 'MATE' | 'ADMIN' | 'ASSIGNEE';
+
+export type RoleInfo = {
+  roleName: RoleName;
+  label: string;
+  description: string;
+};
+
 export type Role = {
   roleId: number;
-  roleName: 'HEAD' | 'LEADER' | 'MATE' | 'ADMIN' | 'ASSIGNEE';
+  roleName: RoleName;
   roleType: 'TEAM' | 'PROJECT';
 };