참여한/생성한 프로젝트의 "평가완료" 추가 ( 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.button`
+  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/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/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';
   }
 `;