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

src/api/myProjectList.api.ts

@@ -5,7 +5,8 @@ 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`);
+  console.log(response);
   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,41 @@
+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.button`
+  font-size: 13px;
+  margin-right: 6px;
+`;
+
+export const ArrowRight = styled.img`
+  font-size: 13px;
+`;
+
+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>
+          <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/Header.tsx

@@ -11,12 +11,13 @@ import loadingImg from '../../../assets/loadingImg.svg';
 import { useModal } from '../../../hooks/useModal';
 import Modal from '../modal/Modal';
 import { formatImgPath } from '../../../util/formatImgPath';
-// import bell from '../../../assets/bell.svg';
-// import Notification from './Notification/Notification';
-// import bellLogined from '../../../assets/bellLogined.svg';
-// import { useEffect } from 'react';
-// import { testLiveAlarm } from '../../../api/alarm.api';
+import bell from '../../../assets/bell.svg';
+import Notification from './Notification/Notification';
+import bellLogined from '../../../assets/bellLogined.svg';
 import { useMyProfileInfo } from '../../../hooks/user/useMyInfo';
+import { useNotificationContext } from '../../../context/SseContext';
+import { useEffect } from 'react';
+import { testLiveAlarm } from '../../../api/alarm.api';
 import { ROUTES } from '../../../constants/routes';
 
 function Header() {
@@ -26,24 +27,26 @@ function Header() {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn);
   const { myData, isLoading } = useMyProfileInfo();
 
+  const { signalData, clearSignal } = useNotificationContext();
+
   const handleClickLogout = () => {
     userLogout();
     useAuthStore.persist.clearStorage();
     localStorage.clear();
   };
 
-  // const { signalData, setSignalData } = useNotification();
-
-  // useEffect(() => {
-  //   testLiveAlarm();
-  // }, []);
-
   const profileImg = myData?.profileImg
     ? `${import.meta.env.VITE_APP_IMAGE_CDN_URL}/${formatImgPath(
         myData.profileImg
       )}?w=86&h=86&fit=crop&crop=entropy&auto=format,enhance&q=60`
     : DefaultImg;
 
+  useEffect(() => {
+    if (process.env.NODE_ENV === 'deployment') {
+      testLiveAlarm();
+    }
+  }, []);
+
   return (
     <S.HeaderContainer>
       <Link to={ROUTES.main}>
@@ -58,26 +61,23 @@ function Header() {
             <S.HeaderLink>공지사항</S.HeaderLink>
           </Link>
         </S.HeaderLinkContainer>
-        {/* <S.Alarm role='button' tabIndex={0} aria-label='알림 메세지'>
+        <S.Alarm role='button' tabIndex={0} aria-label='알림 메세지'>
           {isLoggedIn ? (
             <DropDown
               toggleButton={
-                signalData ? (
-                  <S.BellButton onClick={() => setSignalData(null)}>
-                    <img src={bellLogined} alt='알림' />
-                    {signalData && <S.Dot />}
-                  </S.BellButton>
-                ) : (
+                <S.BellButton onClick={clearSignal}>
                   <img src={bellLogined} alt='알림' />
-                )
+                  {signalData && <S.Dot />}
+                </S.BellButton>
               }
+              comment={false}
             >
               <Notification />
             </DropDown>
           ) : (
             <img src={bell} alt='알림' />
           )}
-        </S.Alarm> */}
+        </S.Alarm>
         <DropDown
           aria-label='프로필 드롭다운'
           toggleButton={

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>
             ))}