Merge branch 'develop' of https://github.com/GU-99/grow-up-fe into fe…

…ature/#63-task-modal

src/components/modal/team/CreateModalTeam.tsx

@@ -0,0 +1,28 @@
+import ModalLayout from '@layouts/ModalLayout';
+import ModalPortal from '@components/modal/ModalPortal';
+import ModalFormButton from '@components/modal/ModalFormButton';
+import ModalTeamForm from '@components/modal/team/ModalTeamForm';
+
+import type { SubmitHandler } from 'react-hook-form';
+import type { Team } from '@/types/TeamType';
+
+type CreateModalProjectStatusProps = {
+  onClose: () => void;
+};
+
+export default function CreateModalTeam({ onClose: handleClose }: CreateModalProjectStatusProps) {
+  const handleSubmit: SubmitHandler<Team> = async (data) => {
+    console.log('팀 생성 폼 제출');
+    console.log(data);
+    handleClose();
+  };
+
+  return (
+    <ModalPortal>
+      <ModalLayout onClose={handleClose}>
+        <ModalTeamForm formId="createTeamForm" onSubmit={handleSubmit} />
+        <ModalFormButton formId="createTeamForm" isCreate onClose={handleClose} />
+      </ModalLayout>
+    </ModalPortal>
+  );
+}

src/components/modal/team/ModalTeamForm.tsx

@@ -0,0 +1,19 @@
+import { useForm } from 'react-hook-form';
+
+import type { SubmitHandler } from 'react-hook-form';
+import type { Team } from '@/types/TeamType';
+
+type ModalTeamFormProps = {
+  formId: string;
+  onSubmit: SubmitHandler<Team>;
+};
+
+export default function ModalTeamForm({ formId, onSubmit }: ModalTeamFormProps) {
+  const { handleSubmit } = useForm<Team>();
+
+  return (
+    <form id={formId} className="mb-10 flex grow flex-col justify-center" onSubmit={handleSubmit(onSubmit)}>
+      123123123
+    </form>
+  );
+}

src/components/sidebar/ListSidebar.tsx

@@ -3,18 +3,33 @@ import type { ReactNode } from 'react';
 type ListSidebarProps = {
   label?: string;
   title: string;
-  children?: ReactNode | undefined;
+  children?: ReactNode;
+  showButton?: boolean;
+  text?: string;
+  onClick?: () => void;
 };
 
-// ToDo: 프로젝트 생성 등과 같은 버튼 기능 추가할 것
-export default function ListSidebar({ label, title, children }: ListSidebarProps) {
+export default function ListSidebar({ label, title, children, showButton, text, onClick }: ListSidebarProps) {
+  const handleClick = () => {
+    if (onClick) onClick();
+  };
+
   return (
     <aside className="mr-10 flex w-1/3 flex-col border border-list bg-contents-box">
       <div className="flex min-h-30 items-center justify-between bg-sub px-10">
         <div>
           {label && <small className="mr-5 font-bold text-main">{label}</small>}
           <span className="text-emphasis">{title}</span>
         </div>
+        {showButton && (
+          <button
+            type="button"
+            className="rounded-md bg-main px-4 py-2 text-white outline-none hover:brightness-90"
+            onClick={handleClick}
+          >
+            {text}
+          </button>
+        )}
       </div>
       {children}
     </aside>

src/components/sidebar/ListTeam.tsx

@@ -0,0 +1,25 @@
+import { Link } from 'react-router-dom';
+import type { Team } from '@/types/TeamType';
+
+type ListTeamProps = {
+  data: Team[];
+  targetId?: string;
+};
+
+export default function ListTeam({ data, targetId }: ListTeamProps) {
+  return (
+    <ul className="grow overflow-auto">
+      {data.map((team) => (
+        <li
+          key={team.teamId}
+          className={`relative cursor-pointer border-b bg-white hover:brightness-90 ${targetId === team.teamId.toString() ? 'selected' : ''}`}
+        >
+          <Link to={`/teams/${team.teamId}`} className="flex h-30 flex-col justify-center px-10">
+            <small className="font-bold text-category">Team</small>
+            <span>{team.name}</span>
+          </Link>
+        </li>
+      ))}
+    </ul>
+  );
+}

src/layouts/page/TeamLayout.tsx

@@ -1,15 +1,43 @@
-import { Outlet, useLocation } from 'react-router-dom';
+import { Navigate, Outlet, useLocation, useParams } from 'react-router-dom';
+import ListSidebar from '@components/sidebar/ListSidebar';
+import ListTeam from '@components/sidebar/ListTeam';
+import CreateModalTeam from '@components/modal/team/CreateModalTeam';
+import useModal from '@hooks/useModal';
+import { TEAM_DUMMY } from '@mocks/mockData';
+import { useMemo } from 'react';
+import { Team } from '@/types/TeamType';
 
 export default function TeamLayout() {
+  const { showModal: showTeamModal, openModal: openTeamModal, closeModal: closeTeamModal } = useModal();
   const location = useLocation();
-
+  const { teamId } = useParams();
+  const teamData: Team[] = TEAM_DUMMY;
+  const selectedTeam = useMemo(() => teamData.find((team) => team.teamId.toString() === teamId), [teamId, teamData]);
   const hasProjectRoute = location.pathname.split('/').includes('projects');
+
+  if (!selectedTeam && teamId) return <Navigate to="/error" replace />;
+
   if (hasProjectRoute) return <Outlet />;
 
   return (
     <>
-      <h3>Team Layout</h3>
-      <Outlet />
+      <section className="flex h-full p-15">
+        <ListSidebar title="팀 목록" showButton text="팀 생성" onClick={openTeamModal}>
+          {/* ToDo: 사이드바 팀정보 추가 예정 */}
+          <div />
+        </ListSidebar>
+        <section className="flex w-2/3 flex-col border border-list bg-contents-box">
+          {teamData.length === 0 ? (
+            <div className="flex h-full items-center justify-center text-center">
+              소속된 팀이 없습니다! <br />
+              팀을 생성하여 다른 사람들과 함께 프로젝트를 관리해보세요 😄
+            </div>
+          ) : (
+            <Outlet />
+          )}
+        </section>
+      </section>
+      {showTeamModal && <CreateModalTeam onClose={closeTeamModal} />}
     </>
   );
 }

src/mocks/mockData.ts

@@ -1,6 +1,7 @@
 import type { ProjectStatus } from '@/types/ProjectStatusType';
 import { Project } from '@/types/ProjectType';
 import type { TaskListWithStatus } from '@/types/TaskType';
+import { Team } from '@/types/TeamType';
 
 export const USER_DUMMY = [
   {
@@ -23,6 +24,24 @@ export const USER_DUMMY = [
   },
 ];
 
+export const TEAM_DUMMY: Team[] = [
+  {
+    teamId: 1,
+    name: 'Grow Up',
+    content: '프로젝트 관리 사이드 프로젝트 진행중!',
+  },
+  {
+    teamId: 2,
+    name: 'With Me',
+    content: '모임 / 이벤트 관리 프로젝트',
+  },
+  {
+    teamId: 3,
+    name: 'Game World',
+    content: '게임 리뷰 / 정보 공유 프로젝트',
+  },
+];
+
 export const PROJECT_DUMMY: Project[] = [
   {
     projectId: 1,

src/types/TeamType.tsx

@@ -0,0 +1,6 @@
+// ToDo: API 설계 완료시 데이터 타입 변경할 것
+export type Team = {
+  teamId: number;
+  name: string;
+  content: string;
+};