참여한/생성한 프로젝트의 "평가완료" 추가 ( issue #316 )

src/api/myProjectList.api.ts

@@ -5,7 +5,7 @@ import type {
 import { httpClient } from './http.api';
 
 export const getMyProjectLists = async () => {
-  const response = await httpClient.get<ApiManagedProjects>(`/project/my`);
+  const response = await httpClient.get<ApiManagedProjects>(`/user/project`);
   return response.data;
 };
 

src/api/mypage.api.ts

@@ -55,7 +55,9 @@ export const patchMyProfileImg = async (file: File) => {
 
 export const getMyJoinedProjectList = async () => {
   try {
-    const response = await httpClient.get<ApiJoinedProject>('/user/project');
+    const response = await httpClient.get<ApiJoinedProject>(
+      '/user/joinProject'
+    );
 
     return response.data;
   } catch (error) {

src/components/admin/mainCard/MainCard.styled.ts

@@ -0,0 +1,39 @@
+import { Link } from 'react-router-dom';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  border: 1px solid #ccc;
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
+`;
+
+export const CardHeader = styled.div`
+  min-height: 50px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const Title = styled.h3`
+  margin-left: 20px;
+`;
+
+export const ShowAllArea = styled(Link)`
+  display: flex;
+  margin-left: 10px;
+  margin-right: 10px;
+`;
+
+export const ShowAllButton = styled.span`
+  font-size: 13px;
+  margin-right: 6px;
+`;
+
+export const ArrowRight = styled.img``;
+
+export const Line = styled.hr``;
+
+export const Wrapper = styled.div``;
+
+export const MainContent = styled.div``;

src/components/admin/mainCard/MainCard.tsx

@@ -0,0 +1,31 @@
+import * as S from './MainCard.styled';
+import arrowRight from '../../../assets/ArrowRight.svg';
+import React from 'react';
+
+interface MainCardProps {
+  title: string;
+  moreLink?: string;
+  children: React.ReactNode;
+}
+
+const MainCard = ({ title, moreLink, children }: MainCardProps) => {
+  return (
+    <S.Container>
+      <S.CardHeader>
+        <S.Title>{title}</S.Title>
+        {moreLink && (
+          <S.ShowAllArea to={moreLink}>
+            <S.ShowAllButton>전체 보기</S.ShowAllButton>
+            <S.ArrowRight src={arrowRight} />
+          </S.ShowAllArea>
+        )}
+      </S.CardHeader>
+      <S.Line />
+      <S.Wrapper>
+        <S.MainContent>{children}</S.MainContent>
+      </S.Wrapper>
+    </S.Container>
+  );
+};
+
+export default MainCard;

src/components/admin/mainCard/graphCard/GraphCard.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

src/components/admin/mainCard/graphCard/GraphCard.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as S from './GraphCard.styled';
+
+const GraphCard = () => {
+  return <S.Container>GraphCard Component</S.Container>;
+};
+
+export default GraphCard;

src/components/admin/previewComponent/allUserPreview/AllUserPreview.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

src/components/admin/previewComponent/allUserPreview/AllUserPreview.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as S from './AllUserPreview.styled';
+
+const AllUserPreview = () => {
+  return <S.Container>AllUserPreview Component</S.Container>;
+};
+
+export default AllUserPreview;

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

src/components/admin/previewComponent/inquiresPreview/InquiresPreview.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as S from './InquiresPreview.styled';
+
+const InquiresPreview = () => {
+  return <S.Container>InquiresPreview Component</S.Container>;
+};
+
+export default InquiresPreview;

src/components/admin/previewComponent/noticePreview/NoticePreview.styled.ts

@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding: 20px;
+`;
+
+export const Wrapper = styled.div`
+  display: flex;
+`;
+
+export const Dot = styled.img`
+  margin-right: 7px;
+`;
+
+export const NoticeTitle = styled.p`
+  font-size: 18px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;

src/components/admin/previewComponent/noticePreview/NoticePreview.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import * as S from './NoticePreview.styled';
+import { useGetNotice } from '../../../../hooks/user/useGetNotice';
+import line from '../../../../assets/line.svg';
+
+const NoticePreview = () => {
+  const { noticeData } = useGetNotice({ keyword: '', page: 1 });
+
+  return (
+    <S.Container>
+      {noticeData?.notices.map((notice) => (
+        <S.Wrapper key={notice.id}>
+          <S.Dot src={line} />
+          <S.NoticeTitle>{notice.title}</S.NoticeTitle>
+        </S.Wrapper>
+      ))}
+    </S.Container>
+  );
+};
+
+export default NoticePreview;

src/components/admin/previewComponent/reportsPreview/ReportsPreview.styled.ts

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const Container = styled.div``;

src/components/admin/previewComponent/reportsPreview/ReportsPreview.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import * as S from './ReportsPreview.styled';
+
+const ReportsPreview = () => {
+  return <S.Container>ReportsPreview Component</S.Container>;
+};
+
+export default ReportsPreview;

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

@@ -6,8 +6,6 @@ export const Container = styled.div`
   overflow: hidden;
   display: flex;
   flex-direction: column;
-  justify-content: center;
-  align-items: center;
   padding: 3px;
 `;
 
@@ -40,6 +38,12 @@ export const Arrow = styled.img`
   margin-bottom: 3px;
 `;
 
+export const NoAlarmContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 export const NonContentsMessage = styled.p`
   display: flex;
   justify-content: center;

src/components/common/header/Notification/Notification.tsx

@@ -13,9 +13,9 @@ const Notification = () => {
 
   if (!AlarmData) {
     return (
-      <S.Container>
+      <S.NoAlarmContainer>
         <S.NonContentsMessage>알림이 없습니다.</S.NonContentsMessage>
-      </S.Container>
+      </S.NoAlarmContainer>
     );
   }
 

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

@@ -1,13 +1,12 @@
 import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
-  padding: 8px 0;
+  padding: 10px;
   font-size: 14px;
 `;
 
 export const TypeArea = styled.div`
   display: flex;
-  margin-left: 6px;
 `;
 
 export const Type = styled.p``;
@@ -22,13 +21,11 @@ export const ItemContent = styled.p`
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  margin-left: 6px;
 `;
 
 export const Time = styled.span`
   color: #999;
   font-size: 12px;
-  margin-left: 6px;
   margin-right: 5px;
 `;
 

src/components/common/header/Notification/NotificationItem/NotificationItem.tsx

@@ -16,7 +16,7 @@ const NotificationItem = ({ item }: NotificationItemProps) => {
   return (
     <Link to={route} onClick={close}>
       <S.Container>
-        <S.ItemContent>{item.content}</S.ItemContent>
+        <S.ItemContent>{item.content} | </S.ItemContent>
         <S.TypeArea>
           <S.Time>{timeAgo(item.createdAt)}</S.Time>
           <S.TypeFilter>

src/components/user/evaluation/EvaluationContent.styled.ts

@@ -177,10 +177,10 @@ export const CompletedButton = styled.button<{ $active?: boolean }>`
   color: ${({ $active }) => ($active ? '#fff' : '#999')};
   border: none;
   border-radius: 4px;
-  cursor: ${({ $active }) => ($active ? 'pointer' : 'default')};
+  cursor: pointer;
   transition: background-color 0.2s;
 
   &:hover {
-    background-color: ${({ $active }) => ($active ? '#2f4a6b' : '#e0e0e0')};
+    background-color: '#e0e0e0';
   }
 `;

src/components/user/evaluation/EvaluationContent.tsx

@@ -7,19 +7,23 @@ interface EvaluationContentProps {
   projectId: number;
   projectName: string;
   memberList: MemberList[];
+  isAllEvaluated: boolean;
 }
 
 const EvaluationContent = ({
   projectId,
   projectName,
   memberList,
+  isAllEvaluated,
 }: EvaluationContentProps) => {
   const {
     step,
     notDone,
+    completedMember,
     handleClickLeftUser,
     handleClickOption,
     handleNextStep,
+    handleCompletedMember,
     currentScores,
     isNotFill,
   } = useEvaluationStep({ projectId, memberList });
@@ -42,18 +46,26 @@ const EvaluationContent = ({
 
         <S.MainContent>
           <S.Header>
-            <S.Title>{notDone[step]?.nickname}님 평가하기</S.Title>
-            <S.SubmitButton
-              size='primary'
-              schema='primary'
-              radius='primary'
-              onClick={handleNextStep}
-            >
-              제출하기
-            </S.SubmitButton>
+            <S.Title>
+              {isAllEvaluated
+                ? '평가가 완료 되었습니다. '
+                : completedMember
+                ? `${completedMember.nickname}님 평가 결과`
+                : `${notDone[step]?.nickname}님 평가하기`}
+            </S.Title>
+            {!completedMember && (
+              <S.SubmitButton
+                size='primary'
+                schema='primary'
+                radius='primary'
+                onClick={handleNextStep}
+              >
+                제출하기
+              </S.SubmitButton>
+            )}
           </S.Header>
           <S.MessageContainer>
-            {isNotFill && (
+            {isNotFill && !completedMember && (
               <S.ErrorMessage>모든 질문에 답변해주세요.</S.ErrorMessage>
             )}
           </S.MessageContainer>
@@ -78,6 +90,7 @@ const EvaluationContent = ({
                           handleClickOption(questionNumber, optionValue)
                         }
                         value={optionValue + 1}
+                        disabled={!!completedMember}
                       />
                       <S.RadioLabel>{optionValue + 1}</S.RadioLabel>
                       <S.OptionLabel>{label}</S.OptionLabel>
@@ -94,7 +107,16 @@ const EvaluationContent = ({
           {memberList
             .filter((memberData) => memberData.evaluated)
             .map((memberData) => (
-              <S.CompletedButton key={memberData.userId}>
+              <S.CompletedButton
+                key={memberData.userId}
+                onClick={() =>
+                  handleCompletedMember(
+                    memberData.userId,
+                    memberData.nickname,
+                    memberData.scores
+                  )
+                }
+              >
                 {memberData.nickname}
               </S.CompletedButton>
             ))}

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

@@ -91,11 +91,12 @@ export const RecruitmentEnd = styled.span`
   font-weight: 800;
 `;
 
-export const EvaluateButton = styled(Link)`
+export const EvaluateButton = styled(Link)<{ $isCompleted: boolean }>`
   display: inline-flex;
   flex-shrink: 0;
   padding: 0.2rem 0.65rem;
-  background-color: #3e5879;
+  background-color: ${({ $isCompleted }) =>
+    $isCompleted ? `#2ADE1D` : `#3e5879`};
   font-size: 0.9rem;
   color: ${({ theme }) => theme.color.white};
   border-radius: 10px;

src/components/user/manageProjects/Card.tsx

@@ -22,8 +22,10 @@ function Card({ project }: CardProps) {
           <S.EvaluateButton
             key={project.id}
             to={`${ROUTES.evaluation}/${project.id}`}
+            state={{ isAllCompleted: project.isAllEvaluated }}
+            $isCompleted={project.isAllEvaluated}
           >
-            평가하기
+            {project.isAllEvaluated ? '평가완료' : '평가하기'}
           </S.EvaluateButton>
         )}
         {project.isDone && <S.RecruitmentEnd>모집 종료</S.RecruitmentEnd>}