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

…ature/#265-project-modify-delete-role-setting
GU-99 · Nov 28, 2024 · ad0acdf · ad0acdf
2 parents e8da37e + 9023023
commit ad0acdf
Show file tree

Hide file tree

Showing 42 changed files with 648 additions and 463 deletions.
diff --git a/.github/workflows/vitest.yaml b/.github/workflows/vitest.yaml
@@ -0,0 +1,29 @@
+name: vitest-workflow
+
+on:
+  pull_request: 
+    types: [opened, reopened, synchronize, ready_for_review]
+    branches:
+      - main
+      - develop
+    paths:
+      - 'src/**'
+
+jobs:
+  vitest:
+    if: github.event.pull_request.draft == false
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      - name: Install node.js v20
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+
+      - name: Install yarn dependencies
+        run: yarn install
+
+      - name: Run tests with vitest
+        run: yarn run test -- --passWithNoTests
diff --git a/.gitignore b/.gitignore
@@ -35,6 +35,10 @@ dist-ssr
 .env.test.local
 .env.production.local
 
+# https local cert
+localhost-key.pem
+localhost.pem
+
 # etc
 .history
 .eslintcache

diff --git a/index.html b/index.html
@@ -2,9 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React + TS</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package.json b/package.json
@@ -5,12 +5,13 @@
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "staging": "tsc --project tsconfig.prod.json && vite build --mode staging",
+    "build:staging": "tsc --project tsconfig.prod.json && vite build --mode staging",
+    "serve:staging": "serve -s dist -l 5713 --ssl-cert localhost.pem --ssl-key localhost-key.pem",
     "build": "tsc --project tsconfig.prod.json && vite build",
-    "serve:dist": "serve -s dist -l 5713",
     "lint": "eslint . --ext ts,tsx,js,jsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
-    "test": "vitest --watch",
+    "test": "vitest",
+    "test:watch": "vitest --watch",
     "test-ui": "vitest --ui",
     "coverage": "vitest run --coverage",
     "prepare": "husky"
@@ -28,6 +29,7 @@
     "react": "^18.2.0",
     "react-big-calendar": "^1.13.0",
     "react-dom": "^18.2.0",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.51.4",
     "react-icons": "^5.2.1",
     "react-markdown": "^9.0.1",

diff --git a/public/.gitkeep b/public/.gitkeep
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/src/assets/og_logo.png b/src/assets/og_logo.png
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -45,9 +45,9 @@ export default function Header() {
         <button
           type="button"
           className="ml-10 h-20 rounded-md bg-white px-4 tracking-tight hover:brightness-90"
-          onClick={isAuthenticated || userInfoData.userId ? handleLogout : () => navigate('/signin')}
+          onClick={isAuthenticated ? handleLogout : () => navigate('/signin')}
         >
-          {isAuthenticated || userInfoData.userId ? 'Logout' : 'Login'}
+          {isAuthenticated ? 'Logout' : 'Login'}
         </button>
       </nav>
     </header>

diff --git a/src/components/common/Meta.tsx b/src/components/common/Meta.tsx
@@ -0,0 +1,20 @@
+import { Helmet } from 'react-helmet-async';
+import logo from '@assets/og_logo.png';
+
+type MetaProps = {
+  title?: string;
+};
+
+export default function Meta({ title = 'Grow up' }: MetaProps) {
+  return (
+    <Helmet>
+      <title>{title}</title>
+      <meta name="description" content="팀원과 함께 프로젝트를 진행하며 개인 역량을 성장시켜 보세요" />
+      <meta property="og:title" content="Grow Up" />
+      <meta property="og:description" content="팀원과 함께 프로젝트를 진행하며 개인 역량을 성장시켜 보세요" />
+      <meta property="og:image" content={logo} />
+      <meta property="og:url" content={import.meta.env.BASE_URL} />
+      <meta property="og:type" content="website" />
+    </Helmet>
+  );
+}
diff --git a/src/components/common/RoleTooltip.tsx b/src/components/common/RoleTooltip.tsx
@@ -9,7 +9,7 @@ type RoleTooltipProps = {
 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'}`}
+      className={`absolute left-0 top-full z-10 mt-2 w-max space-y-10 rounded-lg bg-gray-500 p-10 leading-5 text-white shadow-lg ${!showTooltip && 'hidden'}`}
     >
       {rolesInfo.map((role) => (
         <div key={role.roleName}>

diff --git a/src/components/common/UserRoleSelectBox.tsx b/src/components/common/UserRoleSelectBox.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { IoMdCloseCircle } from 'react-icons/io';
-import { PROJECT_ROLES, TEAM_ROLES } from '@constants/role';
+import { PROJECT_ROLES, TEAM_CREATE_ROLES, TEAM_ROLES } from '@constants/role';
 import type { User } from '@/types/UserType';
 import type { RoleName } from '@/types/RoleType';
 
 type UserRoleSelectBoxProps<T extends RoleName> = {
   userId: User['userId'];
   nickname: User['nickname'];
   defaultValue: RoleName;
-  roles: typeof TEAM_ROLES | typeof PROJECT_ROLES;
+  roles: typeof TEAM_CREATE_ROLES | typeof TEAM_ROLES | typeof PROJECT_ROLES;
   onRoleChange: (userId: number, roleName: T) => void;
   onRemoveUser: (userId: number) => void;
 };

diff --git a/src/components/modal/team/ModalTeamForm.tsx b/src/components/modal/team/ModalTeamForm.tsx
@@ -3,7 +3,7 @@ import { FormProvider, useForm } from 'react-hook-form';
 import useAxios from '@hooks/useAxios';
 import useToast from '@hooks/useToast';
 import { useReadTeams } from '@hooks/query/useTeamQuery';
-import { TEAM_DEFAULT_ROLE, TEAM_ROLE_INFO, TEAM_ROLES } from '@constants/role';
+import { TEAM_CREATE_ROLES, TEAM_DEFAULT_ROLE, TEAM_ROLE_INFO } from '@constants/role';
 import { TEAM_VALIDATION_RULES } from '@constants/formValidationRules';
 import { findUser } from '@services/userService';
 import Spinner from '@components/common/Spinner';
@@ -150,7 +150,7 @@ export default function ModalTeamForm({ formId, onSubmit }: ModalTeamFormProps)
                 key={userId}
                 userId={userId}
                 nickname={nickname}
-                roles={TEAM_ROLES}
+                roles={TEAM_CREATE_ROLES}
                 defaultValue={TEAM_DEFAULT_ROLE}
                 onRoleChange={handleRoleChange}
                 onRemoveUser={handleRemoveUser}

diff --git a/src/components/user/auth-form/ProfileImageContainer.tsx b/src/components/user/auth-form/ProfileImageContainer.tsx
@@ -61,9 +61,6 @@ export default function ProfileImageContainer({ imageUrl, setImageUrl }: Profile
     }
 
     uploadImageMutate({ file });
-
-    const localImageUrl = URL.createObjectURL(file);
-    setImageUrl(localImageUrl);
   };
 
   const handleRemoveImg = () => {

diff --git a/src/constants/role.ts b/src/constants/role.ts
@@ -2,27 +2,45 @@ import { deepFreeze } from '@utils/deepFreeze';
 import type { RoleInfo } from '@/types/RoleType';
 
 export const TEAM_ROLES = deepFreeze(['HEAD', 'LEADER', 'MATE'] as const);
+export const TEAM_CREATE_ROLES = deepFreeze(['LEADER', 'MATE'] as const);
 export const PROJECT_ROLES = deepFreeze(['ADMIN', 'LEADER', 'ASSIGNEE'] as const);
 
 export const PROJECT_DEFAULT_ROLE = 'ASSIGNEE';
 export const TEAM_DEFAULT_ROLE = 'MATE';
 
 export const TEAM_ROLE_INFO: RoleInfo[] = [
-  { roleName: 'HEAD', label: 'HEAD', description: '모든 권한 가능' },
+  {
+    roleName: 'HEAD',
+    label: 'HEAD',
+    description: '- 팀: 수정 | 삭제\n- 팀원: 초대 | 추방\n- 프로젝트: 생성 | 수정 | 삭제\n- 모든 프로젝트의 ADMIN 권한',
+  },
   {
     roleName: 'LEADER',
     label: 'LEADER',
-    description: '팀원 탈퇴(Mate만)\n프로젝트 생성 권한\n프로젝트 삭제(본인이 생성한 것만)',
+    description: '- 프로젝트: 생성 | 수정 | 삭제',
+  },
+  {
+    roleName: 'MATE',
+    label: 'Mate',
+    description: '- 팀: 읽기만 가능',
   },
-  { roleName: 'MATE', label: 'Mate', description: '프로젝트 읽기만 가능, 수정 및 생성 불가' },
 ];
 
 export const PROJECT_ROLE_INFO: RoleInfo[] = [
-  { roleName: 'ADMIN', label: 'ADMIN', description: '프로젝트 모든 권한 가능' },
+  {
+    roleName: 'ADMIN',
+    label: 'ADMIN',
+    description:
+      '- 프로젝트: 수정 | 삭제\n- 프로젝트원: 초대 | 추방\n- 상태: 생성 | 수정 | 삭제\n- 일정: 생성 | 수정 | 삭제',
+  },
   {
     roleName: 'LEADER',
     label: 'LEADER',
-    description: '상태 및 일정 생성 권한\n수행자 할당 가능\n',
+    description: '- 상태: 생성 | 수정 | 삭제\n- 일정: 생성 | 수정 | 삭제',
+  },
+  {
+    roleName: 'ASSIGNEE',
+    label: 'ASSIGNEE',
+    description: '- 일정: 생성 | 수정 | 삭제',
   },
-  { roleName: 'ASSIGNEE', label: 'ASSIGNEE', description: '일정 쓰기\n일정 삭제(본인 것만) ' },
 ];
diff --git a/src/hooks/query/useTeamQuery.ts b/src/hooks/query/useTeamQuery.ts
@@ -42,8 +42,8 @@ export function useReadTeams() {
     },
   });
 
-  const joinedTeamList = teamList.filter((team) => team.isPendingApproval === true);
-  const invitedTeamList = teamList.filter((team) => team.isPendingApproval === false);
+  const joinedTeamList = teamList.filter((team) => team.isPendingApproval === false);
+  const invitedTeamList = teamList.filter((team) => team.isPendingApproval === true);
 
   return { joinedTeamList, invitedTeamList, teamList, isLoading, isError, error };
 }

diff --git a/src/main.tsx b/src/main.tsx
@@ -5,6 +5,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import MainRouter from '@routes/MainRouter.tsx';
 import { queryClient } from '@hooks/query/queryClient';
 import '@/globals.css';
+import { HelmetProvider } from 'react-helmet-async';
 
 async function enableMocking() {
   if (!import.meta.env.DEV) return;
@@ -16,10 +17,12 @@ async function enableMocking() {
 enableMocking().then(() => {
   ReactDOM.createRoot(document.getElementById('root')!).render(
     <React.StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <MainRouter />
-        <ReactQueryDevtools />
-      </QueryClientProvider>
+      <HelmetProvider>
+        <QueryClientProvider client={queryClient}>
+          <MainRouter />
+          <ReactQueryDevtools />
+        </QueryClientProvider>
+      </HelmetProvider>
     </React.StrictMode>,
   );
 });
diff --git a/src/mocks/mockData.ts b/src/mocks/mockData.ts
@@ -327,123 +327,123 @@ export const TEAM_USER_DUMMY: TeamUser[] = [
     teamId: 1,
     userId: 1,
     roleId: 1,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 3,
     roleId: 2,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 4,
     roleId: 3,
-    isPendingApproval: false,
+    isPendingApproval: true,
   },
   {
     teamId: 1,
     userId: 8,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 9,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 11,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 12,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 13,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 14,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 1,
     userId: 15,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   // 팀2 소속 유저 정보
   {
     teamId: 2,
     userId: 1,
     roleId: 2,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 2,
     userId: 3,
     roleId: 2,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 2,
     userId: 4,
     roleId: 1,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 2,
     userId: 5,
     roleId: 3,
-    isPendingApproval: false,
+    isPendingApproval: true,
   },
   {
     teamId: 2,
     userId: 7,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 2,
     userId: 10,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   // 팀3 소속 유저 정보
   {
     teamId: 3,
     userId: 1,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 3,
     userId: 2,
     roleId: 3,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
   {
     teamId: 3,
     userId: 5,
     roleId: 2,
-    isPendingApproval: false,
+    isPendingApproval: true,
   },
   {
     teamId: 3,
     userId: 6,
     roleId: 1,
-    isPendingApproval: true,
+    isPendingApproval: false,
   },
 ] as const;