내가 참여한/생성한 프로젝트에 평가하기 링크 추가 ( issue feat/#309 )

src/api/http.api.ts

@@ -30,7 +30,7 @@ export const createClient = (config?: AxiosRequestConfig) => {
       return config;
     },
     (error) => {
-      console.log('interceptors request error:', error);
+      console.error('interceptors request error:', error);
       return Promise.reject(error);
     }
   );

src/components/common/header/Notification/Notification.styled.ts

@@ -26,7 +26,7 @@ export const NotificationHeader = styled.div`
   display: flex;
   justify-content: right;
   align-items: center;
-  height: fix-content;
+  height: fit-content;
   margin-right: 15px;
 `;
 

src/components/user/customerService/inquiry/Inquiry.tsx

@@ -65,8 +65,6 @@ export default function Inquiry() {
       content: form.content.trim() !== '',
     };
 
-    console.log(isCategoryOpen);
-
     if (!isValid.category) {
       return handleModalOpen(INQUIRY_MESSAGE.selectCategory);
     }

src/components/user/manageProjects/Card.styled.ts

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const CardWrapper = styled.div`
@@ -31,7 +32,7 @@ export const ButtonWrapper = styled.div`
   margin-top: 1rem;
   width: 100%;
   display: flex;
-  justify-content: end;
+  justify-content: space-between;
 `;
 
 export const CardTitle = styled.h3`
@@ -89,3 +90,18 @@ export const RecruitmentEnd = styled.span`
   font-size: 0.8rem;
   font-weight: 800;
 `;
+
+export const EvaluateButton = styled(Link)`
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0.2rem 0.65rem;
+  background-color: #3e5879;
+  font-size: 0.9rem;
+  color: ${({ theme }) => theme.color.white};
+  border-radius: 10px;
+  text-align: center;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.78rem;
+  }
+`;

src/components/user/manageProjects/Card.tsx

@@ -2,6 +2,7 @@ import * as S from './Card.styled';
 import type { ManagedProject } from '../../../models/manageMyProject';
 import AvatarList from '../../common/avatar/AvatarList';
 import { formatDate } from '../../../util/formatDate';
+import { ROUTES } from '../../../constants/user/routes';
 interface CardProps {
   project: ManagedProject;
 }
@@ -17,6 +18,14 @@ function Card({ project }: CardProps) {
       <AvatarList maxCount={5} avatars={project.skills} />
 
       <S.ButtonWrapper>
+        {project.canEvaluate && (
+          <S.EvaluateButton
+            key={project.id}
+            to={`${ROUTES.evaluation}/${project.id}`}
+          >
+            평가하기
+          </S.EvaluateButton>
+        )}
         {project.isDone && <S.RecruitmentEnd>모집 종료</S.RecruitmentEnd>}
       </S.ButtonWrapper>
     </S.CardWrapper>

src/components/user/mypage/joinedProject/MyJoinProjects.styled.ts

@@ -45,7 +45,7 @@ export const WrapperProject = styled.div`
     padding: 1rem;
   }
 
-  a {
+  & > a {
     display: inline-block;
     width: 46%;
   }

src/components/user/mypage/joinedProject/MyJoinProjects.tsx

@@ -27,7 +27,7 @@ const MyJoinProjects = () => {
                 key={project.id}
                 to={`${ROUTES.projectDetail}/${project.id}`}
               >
-                <Project project={project} />
+                <Project project={project} canEvaluate={project.canEvaluate} />
               </Link>
             ))}
           </S.WrapperProject>

src/components/user/mypage/joinedProject/Project.styled.ts

@@ -1,3 +1,4 @@
+import { Link } from 'react-router-dom';
 import styled from 'styled-components';
 
 export const Container = styled.div`
@@ -115,6 +116,7 @@ export const State = styled.span`
 export const Skill = styled.div`
   display: flex;
   flex-wrap: wrap;
+  justify-content: space-between;
   align-items: center;
   gap: 0.6rem;
 
@@ -129,12 +131,30 @@ export const Skill = styled.div`
     border-radius: 50%;
 
     @media ${({ theme }) => theme.mediaQuery.tablet} {
-      width: 20px;
-      height: 20px;
+      width: 27px;
+      height: 27px;
     }
   }
 
   svg {
     color: rgb(196 196 196);
   }
 `;
+
+export const SkillArea = styled.div``;
+
+export const EvaluateButton = styled(Link)`
+  display: inline-flex;
+  flex-shrink: 0;
+  padding: 0.2rem 0.65rem;
+  background-color: #3e5879;
+  font-size: 0.9rem;
+  color: ${({ theme }) => theme.color.white};
+  border-radius: 10px;
+  text-align: center;
+  margin-left: auto;
+
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.78rem;
+  }
+`;

src/components/user/mypage/joinedProject/Project.tsx

@@ -2,12 +2,14 @@ import * as S from './Project.styled';
 import { EllipsisHorizontalIcon } from '@heroicons/react/24/outline';
 import type { JoinedProject } from '../../../../models/userProject';
 import beginner from '../../../../assets/beginner.svg';
+import { ROUTES } from '../../../../constants/user/routes';
 
 interface ProjectProps {
   project: JoinedProject;
+  canEvaluate?: boolean;
 }
 
-const Project = ({ project }: ProjectProps) => {
+const Project = ({ project, canEvaluate }: ProjectProps) => {
   const maxSkills = 4;
   const skillsShow = project.skills.slice(0, maxSkills);
   return (
@@ -29,11 +31,21 @@ const Project = ({ project }: ProjectProps) => {
         <S.State>{project.isDone ? '모집 마감' : '모집 중'}</S.State>
       </S.Member>
       <S.Skill>
-        {skillsShow.map((skill) => (
-          <img key={skill.id} src={skill.img} />
-        ))}
-        {project.skills.length > maxSkills && (
-          <EllipsisHorizontalIcon width='20' height='20' />
+        <S.SkillArea>
+          {skillsShow.map((skill) => (
+            <img key={skill.id} src={skill.img} />
+          ))}
+          {project.skills.length > maxSkills && (
+            <EllipsisHorizontalIcon width='20' height='20' />
+          )}
+        </S.SkillArea>
+        {canEvaluate && (
+          <S.EvaluateButton
+            key={project.id}
+            to={`${ROUTES.evaluation}/${project.id}`}
+          >
+            평가하기
+          </S.EvaluateButton>
         )}
       </S.Skill>
     </S.Container>

src/components/user/mypage/myProfile/profile/Profile.tsx

@@ -30,8 +30,6 @@ export default function Profile() {
     ],
   };
 
-  console.log(userInfoData.averageScores);
-
   useEffect(() => {
     if (scrollRef.current) {
       scrollRef.current.scrollTop = 0;

src/constants/user/modalMessage.ts

@@ -25,4 +25,5 @@ export const MODAL_MESSAGE = {
   applyProjectFail: '해당 공고에 지원을 실패 되었습니다.',
   projectDetailFail: '해당 공고가 존재하지 않습니다.',
   alreadyApply: '이미 참여한/지원하신 공고 입니다.',
+  noMemberToEvaluate: '평가 할 멤버가 없습니다.',
 } as const;

src/hooks/user/CommentHooks/usePatchReply.ts

@@ -18,7 +18,7 @@ const usePatchReply = (
       });
     },
     onError: (error) => {
-      console.log(error);
+      console.error(error);
     },
   });
 

src/hooks/user/CommentHooks/usePostComment.ts

@@ -14,7 +14,7 @@ const usePostComment = (id: number) => {
       });
     },
     onError: (error) => {
-      console.log(error);
+      console.error(error);
     },
   });
 

src/hooks/user/CommentHooks/usePutComment.ts

@@ -13,7 +13,7 @@ const usePutComment = (id: number, commentId: number) => {
       });
     },
     onError: (error) => {
-      console.log(error);
+      console.error(error);
     },
   });
 

src/hooks/user/ProjectHooks/useApplyProject.ts

@@ -35,7 +35,7 @@ const useApplyProject = ({ id, handleModalOpen }: UseApplyProjectProps) => {
       }, 3000);
     },
     onError: (error) => {
-      console.log(error);
+      console.error(error);
       handleModalOpen(MODAL_MESSAGE.applyProjectFail);
     },
   });

src/hooks/user/ProjectHooks/useCreateProject.ts

@@ -28,7 +28,7 @@ const useCreateProject = ({ handleModalOpen }: UseCreateProjectProps) => {
       }, 3000);
     },
     onError: (error) => {
-      console.log(error);
+      console.error(error);
       handleModalOpen(MODAL_MESSAGE.createProjectFail);
     },
   });

src/hooks/user/ProjectHooks/useUpdateProject.ts

@@ -30,7 +30,7 @@ const useUpdateProject = ({ id, handleModalOpen }: UseUpdateProjectProps) => {
     },
     onError: (error) => {
       handleModalOpen(MODAL_MESSAGE.ModifyProjectFail);
-      console.log(error);
+      console.error(error);
     },
   });
 

src/hooks/user/evaluationHooks/useGetEvaluation.ts

@@ -1,14 +1,32 @@
 import { useQuery } from '@tanstack/react-query';
 import { getEvaluation } from '../../../api/evaluation.api';
 import { ProjectMemberListEval } from '../../queries/user/keys';
+import { useEffect } from 'react';
+import { MODAL_MESSAGE } from '../../../constants/user/modalMessage';
+import { useNavigate } from 'react-router-dom';
 
-const useGetCompletedEvaluation = (id: number) => {
+interface useGetCompletedEvaluationProps {
+  projectId: number;
+  handleModalOpen: (newMessage: string, callback?: () => void) => void;
+}
+
+const useGetCompletedEvaluation = ({
+  projectId,
+  handleModalOpen,
+}: useGetCompletedEvaluationProps) => {
+  const navigate = useNavigate();
   const { data, isLoading, isFetching, isError } = useQuery({
-    queryKey: [ProjectMemberListEval.MemberListEval, id],
-    queryFn: () => getEvaluation(id),
+    queryKey: [ProjectMemberListEval.MemberListEval, projectId],
+    queryFn: () => getEvaluation(projectId),
     staleTime: 1000 * 60 * 5,
   });
 
+  useEffect(() => {
+    if (data && (!data.userData || data.userData.length === 0)) {
+      handleModalOpen(MODAL_MESSAGE.noMemberToEvaluate, () => navigate(-1));
+    }
+  }, [data, handleModalOpen, navigate]);
+
   return {
     memberList: data,
     isLoading,

src/hooks/user/useNotification.ts

@@ -48,7 +48,6 @@ const useNotification = () => {
     eventSource.addEventListener('alarm', (e) => {
       const event = e as MessageEvent;
       try {
-        console.log(JSON.parse(event.data));
         const eventData: AlarmLive = JSON.parse(event.data);
 
         if (eventData) {
@@ -63,7 +62,7 @@ const useNotification = () => {
       }
     });
     eventSource.onerror = (e) => {
-      console.log(e);
+      console.error(e);
     };
   }, [queryClient, userId]);
 

src/models/manageMyProject.ts

@@ -19,6 +19,7 @@ export interface ManagedProject {
   methodType: MethodType;
   positions: PositionTag[];
   skills: SkillTag[];
+  canEvaluate: boolean;
 }
 
 export interface MethodType {

src/models/userProject.ts

@@ -9,6 +9,7 @@ export interface JoinedProject {
   recruitmentEndDate: string;
   totalMember: number;
   skills: Omit<SkillTag, 'createdAt'>[];
+  canEvaluate: boolean;
 }
 
 export interface ApiJoinedProject extends ApiCommonType {

src/pages/user/evaluation/Evaluation.tsx

@@ -3,30 +3,41 @@ import * as S from './Evaluation.styled';
 import useGetCompletedEvaluation from '../../../hooks/user/evaluationHooks/useGetEvaluation';
 import LoadingSpinner from '../../../components/common/loadingSpinner/LoadingSpinner';
 import EvaluationContent from '../../../components/user/evaluation/EvaluationContent';
+import Modal from '../../../components/common/modal/Modal';
+import { useModal } from '../../../hooks/useModal';
 
 const Evaluation = () => {
   const { projectId: projectIdParam } = useParams();
   const projectId = Number(projectIdParam);
+  const { isOpen, message, handleModalOpen, handleModalClose, handleConfirm } =
+    useModal();
 
-  const { memberList, isLoading, isFetching } =
-    useGetCompletedEvaluation(projectId);
+  const { memberList, isLoading, isFetching } = useGetCompletedEvaluation({
+    projectId,
+    handleModalOpen,
+  });
 
   if (isLoading || isFetching) {
     return <LoadingSpinner />;
   }
 
-  if (!memberList.userData.length) {
-    return <S.Container>평가할 멤버가 없습니다.</S.Container>;
-  }
-
   return (
-    <S.Container>
-      <EvaluationContent
-        projectId={projectId}
-        projectName={memberList.projectName}
-        memberList={memberList.userData!}
-      />
-    </S.Container>
+    <>
+      <S.Container>
+        <EvaluationContent
+          projectId={projectId}
+          projectName={memberList.projectName}
+          memberList={memberList.userData!}
+        />
+      </S.Container>
+      <Modal
+        isOpen={isOpen}
+        onClose={handleModalClose}
+        onConfirm={handleConfirm}
+      >
+        {message}
+      </Modal>
+    </>
   );
 };
 

src/pages/user/projectDetail/ProjectDetail.tsx

@@ -25,10 +25,10 @@ const ProjectDetail = () => {
   const { userData } = useAuthStore((state) => state);
 
   useEffect(() => {
-    if (!data) {
+    if (!isLoading && !isFetching && !data) {
       handleModalOpen(MODAL_MESSAGE.projectDetailFail);
     }
-  }, [data, handleModalOpen]);
+  }, [data, handleModalOpen, isLoading, isFetching]);
 
   if (isLoading || isFetching) return <LoadingSpinner />;