자잘한 기능 및 스타일 수정 ( issue #293 )

src/api/applicant.api.ts

@@ -1,4 +1,4 @@
-import { ApiApplicantInfo, ApiApplicants } from '../models/applicant';
+import type { ApiApplicantInfo, ApiApplicants } from '../models/applicant';
 import { httpClient } from './http.api';
 
 export const getApplicantList = async (projectId: number) => {

src/api/auth.api.ts

@@ -1,4 +1,4 @@
-import { ApiVerifyNickname, VerifyEmail } from '../models/auth';
+import type { ApiVerifyNickname, VerifyEmail } from '../models/auth';
 import { httpClient } from './http.api';
 import { loginFormValues } from '../pages/login/Login';
 import { registerFormValues } from '../pages/user/register/Register';

src/api/comment.api.ts

@@ -1,4 +1,4 @@
-import { CommentType } from '../models/comment';
+import type { CommentType } from '../models/comment';
 import { httpClient } from './http.api';
 
 export const postComment = async (id: number, content: string) => {

src/api/evaluation.api.ts

@@ -1,4 +1,4 @@
-import { apiEvaluatedUser } from '../models/evaluation';
+import type { apiEvaluatedUser } from '../models/evaluation';
 import { httpClient } from './http.api';
 
 export const postEvaluation = async (userEvaluation: apiEvaluatedUser) => {

src/api/joinProject.api.ts

@@ -1,6 +1,6 @@
-import { FormData } from '../models/createProject';
-import { joinProject } from '../models/joinProject';
-import { ProjectDetailPlusExtended } from '../models/projectDetail';
+import type { FormData } from '../models/createProject';
+import type { joinProject } from '../models/joinProject';
+import type { ProjectDetailPlusExtended } from '../models/projectDetail';
 import { httpClient } from './http.api';
 
 export const getProjectData = async (

src/api/myProjectList.api.ts

@@ -1,4 +1,7 @@
-import { ManagedProject, ApiManagedProjects } from '../models/manageMyProject';
+import type {
+  ManagedProject,
+  ApiManagedProjects,
+} from '../models/manageMyProject';
 import { httpClient } from './http.api';
 
 export const getMyProjectLists = async () => {

src/api/mypage.api.ts

@@ -1,5 +1,12 @@
-import { ApiUserInfo, ApiUserInfoImg, EditMyInfo } from '../models/userInfo';
-import { ApiAppliedProject, ApiJoinedProject } from '../models/userProject';
+import type {
+  ApiUserInfo,
+  ApiUserInfoImg,
+  EditMyInfo,
+} from '../models/userInfo';
+import type {
+  ApiAppliedProject,
+  ApiJoinedProject,
+} from '../models/userProject';
 import { httpClient } from './http.api';
 
 export const getMyInfo = async () => {

src/api/projectLists.api.ts

@@ -2,7 +2,7 @@ import type {
   ApiProjectLists,
   ApiProjectStatistic,
 } from '../models/mainProjectLists';
-import { SearchFilters } from '../models/SearchFilters';
+import type { SearchFilters } from '../models/SearchFilters';
 import { httpClient } from './http.api';
 
 export const getProjectLists = async (params: SearchFilters) => {

src/api/reply.api.ts

@@ -1,4 +1,4 @@
-import { ReplyType } from '../models/comment';
+import type { ReplyType } from '../models/comment';
 import { httpClient } from './http.api';
 
 export const getReply = async (

src/api/report.api.ts

@@ -1,4 +1,4 @@
-import { ApiPostContent } from '../models/report';
+import type { ApiPostContent } from '../models/report';
 import { httpClient } from './http.api';
 
 export const postReport = async (formData: ApiPostContent) => {

src/components/common/Toast/Toast.styled.ts

@@ -21,25 +21,39 @@ export const Container = styled.div`
 `;
 
 export const Item = styled.div<{ $exiting: boolean }>`
-  background-color: ${({ theme }) => theme.buttonScheme.grey.color};
+  background-color: #ffffff;
+  border: 6px solid ${({ theme }) => theme.color.border};
   padding: 12px 20px;
-  border-radius: ${({ theme }) => theme.borderRadius.small};
+  border-radius: ${({ theme }) => theme.borderRadius.primary};
   animation: ${fadeInUp} 0.3s ease-out,
     ${({ $exiting }) => $exiting && fadeOut} 0.3s ease-in forwards;
 `;
 
 export const LiveMessage = styled.p`
-  color: ${({ theme }) => theme.color.white};
+  color: ${({ theme }) => theme.color.primary};
   font-size: 0.95rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 `;
 
 export const LiveDate = styled.p`
-  color: ${({ theme }) => theme.color.white};
+  color: ${({ theme }) => theme.color.primary};
   font-size: 0.95rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  margin-right: 5px;
+  opacity: 80%;
+`;
+
+export const TypeArea = styled.div`
+  display: flex;
+  margin-left: 1px;
+`;
+
+export const Type = styled.p``;
+
+export const TypeFilter = styled.p`
+  color: ${({ theme }) => theme.color.primary};
+  font-size: 0.95rem;
+  opacity: 80%;
+  margin-right: 6px;
 `;

src/components/common/Toast/ToastItem.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import * as S from './Toast.styled';
-import { AlarmLive } from '../../../models/alarm';
+import type { AlarmLive } from '../../../models/alarm';
 import { Link } from 'react-router-dom';
 import { routeSelector } from '../../../util/routeSelector';
 import { timeAgo } from '../../../util/timeAgo';
@@ -29,7 +29,18 @@ const ToastItem = ({ content, duration, onRemove }: ToastItemProps) => {
     <Link to={route}>
       <S.Item $exiting={exiting} onAnimationEnd={handleAnimationEnd}>
         <S.LiveMessage>{content.message}</S.LiveMessage>
-        <S.LiveDate>{timeAgo(content.createAt)}</S.LiveDate>
+        <S.TypeArea>
+          <S.LiveDate>{timeAgo(content.createAt)} | </S.LiveDate>
+          <S.TypeFilter>
+            {content.alarmFilterId === 1
+              ? '문의 답변'
+              : content.alarmFilterId === 2
+              ? '지원자 확인'
+              : content.alarmFilterId === 3
+              ? '댓글 답변'
+              : '기타'}
+          </S.TypeFilter>
+        </S.TypeArea>
       </S.Item>
     </Link>
   );

src/components/common/Toast/ToastProvider.tsx

@@ -1,7 +1,7 @@
 import { PropsWithChildren, useCallback, useEffect, useState } from 'react';
 import { ToastContext, ToastMessage } from '../../../context/ToastContext';
 import ToastContainer from './ToastContainer';
-import { AlarmLive } from '../../../models/alarm';
+import type { AlarmLive } from '../../../models/alarm';
 
 export const ToastProvider = ({ children }: PropsWithChildren) => {
   const [toasts, setToasts] = useState<ToastMessage[]>([]);

src/components/common/avatar/AvatarList.tsx

@@ -1,7 +1,7 @@
 import * as S from './AvatarList.styled';
 import Avatar from './Avatar';
 import { formatImgPath } from '../../../util/formatImgPath';
-import { SkillTag } from '../../../models/tags';
+import type { SkillTag } from '../../../models/tags';
 export interface AvatarListProps {
   avatars: SkillTag[] | null;
   size?: string;

src/components/common/dropDown/DropDown.styled.ts

@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const DropDownContainer = styled.div`
   position: relative;
@@ -11,12 +11,20 @@ export const DropDownButtonWrapper = styled.div`
   outline: none;
 `;
 
-export const Panel = styled.div`
+export const Panel = styled.div<{ $comment: boolean }>`
   position: absolute;
-  top: 50px;
+  top: 40px;
   right: 0;
   background-color: ${({ theme }) => theme.color.white};
   border-radius: ${({ theme }) => theme.borderRadius.primary};
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
   z-index: 100;
+
+  ${({ $comment }) =>
+    $comment &&
+    css`
+      position: absolute;
+      top: 0px;
+      right: 30px;
+    `}
 `;

src/components/common/dropDown/DropDown.tsx

@@ -7,12 +7,14 @@ interface DropDownProps {
   children: React.ReactNode;
   toggleButton: React.ReactNode;
   isOpen?: boolean;
+  comment: boolean;
 }
 
 const DropDown = ({
   children,
   toggleButton,
   isOpen = false,
+  comment,
   ...props
 }: DropDownProps) => {
   const [open, setOpen] = useState(isOpen);
@@ -31,7 +33,7 @@ const DropDown = ({
         >
           {toggleButton}
         </S.DropDownButtonWrapper>
-        {open && <S.Panel>{children}</S.Panel>}
+        {open && <S.Panel $comment={comment}>{children}</S.Panel>}
       </S.DropDownContainer>
     </DropDownContext.Provider>
   );

src/components/common/header/Header.tsx

@@ -83,6 +83,7 @@ function Header() {
               <UserCircleIcon color='#6D6D6D' width='48' height='48' />
             )
           }
+          comment={false}
         >
           <>
             {isLoggedIn && (

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

@@ -22,7 +22,26 @@ export const ScrollArea = styled.div`
   }
 `;
 
+export const NotificationHeader = styled.div`
+  display: flex;
+  justify-content: right;
+  align-items: center;
+  height: fix-content;
+  margin-right: 15px;
+`;
+
+export const MoreArea = styled.button``;
+
+export const More = styled.span``;
+
+export const Arrow = styled.img`
+  margin-bottom: 3px;
+`;
+
 export const NonContentsMessage = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
   margin-left: 6px;
 `;
 

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

@@ -3,8 +3,12 @@ import * as S from './Notification.styled';
 import NotificationItem from './NotificationItem/NotificationItem';
 import LoadingSpinner from '../../loadingSpinner/LoadingSpinner';
 import useAlarmList from '../../../../hooks/user/useAlarmList';
+import arrow_right from '../../../../assets/ArrowRight.svg';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '../../../../constants/user/routes';
 
 const Notification = () => {
+  const navigate = useNavigate();
   const { alarmListData: AlarmData, isLoading, isFetching } = useAlarmList();
 
   if (!AlarmData) {
@@ -21,6 +25,17 @@ const Notification = () => {
 
   return (
     <S.Container>
+      <S.NotificationHeader>
+        <S.MoreArea
+          onClick={() =>
+            navigate(`${ROUTES.mypage}/${ROUTES.myPageNotifications}`)
+          }
+        >
+          <S.More>더보기</S.More>
+          <S.Arrow src={arrow_right} />
+        </S.MoreArea>
+      </S.NotificationHeader>
+      <S.Line />
       <S.ScrollArea>
         {AlarmData.map((item, index) => (
           <React.Fragment key={index || item.id}>

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

@@ -1,16 +1,47 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 export const Container = styled.div`
   padding: 8px 0;
   font-size: 14px;
 `;
 
+export const TypeArea = styled.div`
+  display: flex;
+  margin-left: 6px;
+`;
+
+export const Type = styled.p``;
+
+export const TypeFilter = styled.p`
+  font-size: 12px;
+  opacity: 50%;
+  margin-right: 6px;
+`;
+
 export const ItemContent = styled.p`
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
   margin-left: 6px;
 `;
 
 export const Time = styled.span`
-  margin-left: 6px;
   color: #999;
   font-size: 12px;
+  margin-left: 6px;
+  margin-right: 5px;
+`;
+
+export const Dot = styled.span<{ $isRead: boolean }>`
+  width: 5px;
+  height: 5px;
+  background-color: #ff3b30;
+  border-radius: 50%;
+  margin-top: 6px;
+
+  ${({ $isRead }) =>
+    $isRead &&
+    css`
+      background-color: #00db42;
+    `}
 `;

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

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Alarm } from '../../../../../models/alarm';
+import type { Alarm } from '../../../../../models/alarm';
 import * as S from './NotificationItem.styled';
 import { routeSelector } from '../../../../../util/routeSelector';
 import { useContext } from 'react';
@@ -17,7 +17,19 @@ const NotificationItem = ({ item }: NotificationItemProps) => {
     <Link to={route} onClick={close}>
       <S.Container>
         <S.ItemContent>{item.content}</S.ItemContent>
-        <S.Time>{timeAgo(item.createdAt)}</S.Time>
+        <S.TypeArea>
+          <S.Time>{timeAgo(item.createdAt)}</S.Time>
+          <S.TypeFilter>
+            {item.alarmFilterId === 1
+              ? '문의 답변'
+              : item.alarmFilterId === 2
+              ? '지원자 확인'
+              : item.alarmFilterId === 3
+              ? '댓글 답변'
+              : '기타'}
+          </S.TypeFilter>
+          <S.Dot $isRead={item.enabled} />
+        </S.TypeArea>
       </S.Container>
     </Link>
   );

src/components/user/comment/CommentLayout.styled.ts

@@ -17,6 +17,7 @@ export const Count = styled.span`
 export const CommentContainer = styled.div``;
 
 export const CommentInput = styled.div`
+  display: flex;
   margin-bottom: 40px;
 `;