알림창, 마이페이지 드롭다운 공용 컴포넌트 구현 + 알림 기능 추가

frontend/cypress/e2e/app.cy.ts

@@ -69,7 +69,8 @@ describe('러너 E2E 테스트', () => {
 
     cy.get('div[aria-label="에러 메시지"]').should('be.visible');
 
-    cy.get('input[value="주소주소"]').clear().type('https://github.com/woowacourse-teams/2023-baton/pull/1');
+    cy.get('input[value="주소주소"]').clear();
+    cy.get('input[value=""]').type('https://github.com/woowacourse-teams/2023-baton/pull/1');
 
     cy.get('button[aria-label="리뷰 요청 글 생성"]').click();
 
@@ -78,11 +79,17 @@ describe('러너 E2E 테스트', () => {
     cy.get('div[aria-label="알림 메시지"]').should('be.visible');
   });
 
-  it('마이페이지 게시글을 불러온다', () => {
+  it('러너 마이페이지 대기중인 리뷰 게시글을 불러온다', () => {
     cy.get('img[alt="프로필"]').click();
 
     cy.wait(500);
 
+    cy.get('li[aria-label="러너 마이페이지"]').should('be.visible');
+    cy.get('li[aria-label="서포터 마이페이지"]').should('be.visible');
+    cy.get('li[aria-label="로그아웃"]').should('be.visible');
+
+    cy.get('li[aria-label="러너 마이페이지"]').click();
+
     cy.contains('더보기').click();
 
     cy.wait(500);
@@ -102,12 +109,17 @@ describe('러너 E2E 테스트', () => {
     });
   });
 
-  it('마이페이지 추가 게시글을 불러온다.', () => {
+  it('서포터 마이페이지 진행중인 리뷰 게시글을 불러온다.', () => {
     cy.get('img[alt="프로필"]').click();
 
     cy.wait(500);
 
-    cy.contains('button', '서포터').click();
+    cy.get('li[aria-label="러너 마이페이지"]').should('be.visible');
+    cy.get('li[aria-label="서포터 마이페이지"]').should('be.visible');
+    cy.get('li[aria-label="로그아웃"]').should('be.visible');
+
+    cy.get('li[aria-label="서포터 마이페이지"]').click();
+
     cy.contains('button', '진행중인 리뷰').click();
 
     cy.wait(500);

frontend/package.json

@@ -7,6 +7,7 @@
     "dev": "webpack-dev-server --config webpack/webpack.dev.js",
     "build": "webpack --config webpack/webpack.prod.js",
     "test": "cypress run",
+    "cypress": "cypress open",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "chromatic": "npx chromatic --project-token=chpt_2be44b6342a5cae"

frontend/src/apis/apis.ts

@@ -16,6 +16,7 @@ import {
 import { GetMyPagePostResponse } from '@/types/myPage';
 import { PostFeedbackRequest } from '@/types/feedback';
 import { GetSupporterCandidateResponse } from '@/types/supporterCandidate';
+import { GetAlarmResponse } from '@/types/alarm';
 
 export const getRunnerPost = (limit: number, reviewStatus?: ReviewStatus, cursor?: number, tagName?: string) => {
   const params = new URLSearchParams({
@@ -72,6 +73,10 @@ export const getRunnerPostDetail = (runnerPostId: number, isLogin: boolean) => {
   return request.get<GetDetailedRunnerPostResponse>(`/posts/runner/${runnerPostId}`, isLogin);
 };
 
+export const getAlram = (isLogin: boolean) => {
+  return request.get<GetAlarmResponse>(`/alarms`, isLogin);
+};
+
 export const postRunnerPostCreation = (formData: CreateRunnerPostRequest) => {
   const body = JSON.stringify(formData);
   return request.post<void>(`/posts/runner`, body);
@@ -110,10 +115,18 @@ export const patchProposedSupporterSelection = (runnerPostId: number, supporterI
   return request.patch<void>(`/posts/runner/${runnerPostId}/supporters`, body);
 };
 
+export const patchAlarmCheck = (alarmId: number) => {
+  return request.patch<void>(`/alarms/${alarmId}`, undefined);
+};
+
 export const deleteRunnerPost = (runnerPostId: number) => {
   return request.delete<void>(`/posts/runner/${runnerPostId}`);
 };
 
+export const deleteAlarm = (alarmsId: number) => {
+  return request.delete<void>(`/alarms/${alarmsId}`);
+};
+
 export const postMissionBranchCreation = (repoName: string) => {
   const body = JSON.stringify({ repoName });
   return request.post<void>(`/branch`, body);

frontend/src/components/AlarmDropdown/AlarmDropdown.tsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import styled from 'styled-components';
+import { Alarm } from '@/types/alarm';
+import { usePageRouter } from '@/hooks/usePageRouter';
+import { useAlarmDelete } from '@/hooks/query/useAlarmDelete';
+import { useAlarmCheck } from '@/hooks/query/useAlarmCheck';
+
+interface Props {
+  alarmList: Alarm[];
+}
+
+const AlarmDropdown = ({ alarmList }: Props) => {
+  const { mutate: deleteAlarm } = useAlarmDelete();
+  const { mutate: patchAlarmCheck } = useAlarmCheck();
+  const { goToRunnerPostPage } = usePageRouter();
+
+  const handlePostClick = (alarmId: number, runnerPostId: number) => {
+    patchAlarmCheck(alarmId);
+    goToRunnerPostPage(runnerPostId);
+  };
+
+  const handleDeleteAlarm = (e: React.MouseEvent, alarmId: number) => {
+    e.stopPropagation();
+
+    deleteAlarm(alarmId);
+  };
+
+  return (
+    <S.DropdownContainer>
+      {alarmList?.length > 0 ? (
+        alarmList?.map((alarm) => {
+          return (
+            <S.DropdownList key={alarm.alarmId} onClick={() => handlePostClick(alarm.alarmId, alarm.referencedId)}>
+              <S.AlarmTitleContainer>
+                <S.AlarmTitle>{alarm.title}</S.AlarmTitle>
+                <S.CloseButton onClick={(e) => handleDeleteAlarm(e, alarm.alarmId)}>삭제</S.CloseButton>
+              </S.AlarmTitleContainer>
+              <S.AlarmContents>{alarm.message}</S.AlarmContents>
+              <S.AlarmTime>{alarm.createdAt}</S.AlarmTime>
+            </S.DropdownList>
+          );
+        })
+      ) : (
+        <S.EmptyMessage>새로운 알림이 없습니다.</S.EmptyMessage>
+      )}
+    </S.DropdownContainer>
+  );
+};
+
+export default AlarmDropdown;
+
+const S = {
+  DropdownContainer: styled.ul`
+    width: 414px;
+    max-height: 427px;
+
+    overflow-y: scroll;
+
+    & > li {
+      border-bottom: 1px solid var(--gray-400);
+    }
+
+    & > li:last-child {
+      border-bottom: none;
+      border-radius: 0 0 10px 10px;
+    }
+
+    @media (max-width: 768px) {
+      width: 290px;
+    }
+  `,
+
+  DropdownList: styled.li`
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px 35px;
+
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--gray-100);
+    }
+  `,
+
+  AlarmTitleContainer: styled.div`
+    display: flex;
+    justify-content: space-between;
+  `,
+
+  CloseButton: styled.button`
+    font-size: 12px;
+
+    &:hover {
+      color: var(--baton-red);
+    }
+
+    @media (max-width: 768px) {
+      font-size: 10px;
+    }
+  `,
+
+  AlarmTitle: styled.p`
+    font-size: 16px;
+    font-weight: 700;
+    position: relative;
+
+    &::before {
+      content: '';
+      position: absolute;
+      width: 4px;
+      height: 4px;
+      left: -10px;
+      top: 50%;
+      transform: translateY(-50%);
+
+      background-color: var(--baton-red);
+      border-radius: 50%;
+    }
+
+    @media (max-width: 768px) {
+      font-size: 14px;
+    }
+  `,
+
+  AlarmContents: styled.p`
+    font-size: 14px;
+    color: var(--gray-700);
+
+    @media (max-width: 768px) {
+      font-size: 12px;
+    }
+  `,
+
+  AlarmTime: styled.p`
+    font-size: 12px;
+    color: var(--gray-700);
+
+    text-align: end;
+
+    @media (max-width: 768px) {
+      font-size: 10px;
+    }
+  `,
+
+  EmptyMessage: styled.p`
+    height: 427px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  `,
+};

frontend/src/components/MyPage/MyPagePostButton/MyPagePostButton.tsx

@@ -5,7 +5,6 @@ import { useReviewCancelation } from '@/hooks/query/useReviewCancelation';
 import { useReviewComplete } from '@/hooks/query/useReviewComplete';
 import { usePageRouter } from '@/hooks/usePageRouter';
 import useViewport from '@/hooks/useViewport';
-
 import { ReviewStatus } from '@/types/runnerPost';
 import React, { useContext } from 'react';
 import styled from 'styled-components';
@@ -42,11 +41,13 @@ const MyPagePostButton = ({ runnerPostId, reviewStatus, isRunner, supporterId, a
 
   const handleClickSupportSelectButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+
     goToSupportSelectPage(runnerPostId);
   };
 
   const handleClickSupportFeedbackButton = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
+
     if (!supporterId) {
       showErrorToast({ title: ERROR_TITLE.ERROR, description: ERROR_DESCRIPTION.NO_SUPPORTER });
       return;

frontend/src/components/ProfileDropdown/ProfileDropdown.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled from 'styled-components';
+import MyPageIcon from '@/assets/my-page-icon.svg';
+import LogoutIcon from '@/assets/logout-icon.svg';
+import { useLogin } from '@/hooks/useLogin';
+import { usePageRouter } from '@/hooks/usePageRouter';
+
+const ProfileDropdown = () => {
+  const { logout } = useLogin();
+  const { goToMainPage, goToRunnerMyPage, goToSupporterMyPage } = usePageRouter();
+
+  const handleClickRunnerMyPage = () => {
+    goToRunnerMyPage();
+  };
+
+  const handleClickSupporterMyPage = () => {
+    goToSupporterMyPage();
+  };
+
+  const handleClickLogoutButton = () => {
+    logout();
+
+    goToMainPage();
+    window.location.reload();
+  };
+
+  return (
+    <S.DropdownContainer>
+      <S.DropdownList aria-label="러너 마이페이지" onClick={handleClickRunnerMyPage}>
+        <img width="18px" height="18px" src={MyPageIcon} />
+        <S.DropdownListTitle>러너 마이페이지</S.DropdownListTitle>
+      </S.DropdownList>
+      <S.DropdownList aria-label="서포터 마이페이지" onClick={handleClickSupporterMyPage}>
+        <img width="18px" height="18px" src={MyPageIcon} />
+        <S.DropdownListTitle>서포터 마이페이지</S.DropdownListTitle>
+      </S.DropdownList>
+      <S.DropdownList aria-label="로그아웃" onClick={handleClickLogoutButton}>
+        <img width="18px" height="18px" src={LogoutIcon} />
+        <S.DropdownListTitle>로그아웃</S.DropdownListTitle>
+      </S.DropdownList>
+    </S.DropdownContainer>
+  );
+};
+
+export default ProfileDropdown;
+
+const S = {
+  DropdownContainer: styled.ul`
+    width: max-content;
+    height: max-content;
+
+    & > li {
+      border-bottom: 1px solid var(--gray-400);
+    }
+
+    & > li:last-child {
+      border-bottom: none;
+      border-radius: 0 0 10px 10px;
+    }
+  `,
+
+  DropdownList: styled.li`
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    padding: 15px 25px;
+
+    cursor: pointer;
+
+    &:hover {
+      background-color: var(--gray-100);
+    }
+  `,
+
+  DropdownListTitle: styled.p``,
+};

frontend/src/components/common/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Dropdown from './Dropdown';
+import Button from '../Button/Button';
+
+const meta = {
+  title: 'common/Dropdown',
+  component: Dropdown,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Dropdown>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    trigger: <Button colorTheme="RED">Button</Button>,
+    children: (
+      <ul style={{ display: 'flex', flexDirection: 'column', gap: '10px', width: '180px', padding: '10px' }}>
+        <li>첫 번째 리스트</li>
+        <li>두 번째 리스트</li>
+        <li>세 번째 리스트</li>
+      </ul>
+    ),
+    isDropdownOpen: true,
+    gapFromTrigger: '40px',
+    onClose: () => {},
+  },
+};