feat: (#741) 공지사항 세부 페이지 구현

frontend/src/components/common/Dashboard/index.tsx

@@ -5,6 +5,10 @@ import { AuthContext } from '@hooks/context/auth';
 
 import ErrorBoundary from '@pages/ErrorBoundary';
 
+import { PATH } from '@constants/path';
+
+import arrowRight from '@assets/arrow-right.png';
+
 import Skeleton from '../Skeleton';
 import SquareButton from '../SquareButton';
 
@@ -29,6 +33,10 @@ export default function Dashboard() {
  <ErrorBoundary>
  {userInfo ? <UserProfile userInfo={userInfo} /> : <GuestProfile />}
  </ErrorBoundary>
+ <S.NoticeListLink to={PATH.NOTICES}>
+ <span>공지사항 보러가기</span>
+ <S.Image src={arrowRight} alt="작성글 페이지 이동 화살표" />
+ </S.NoticeListLink>
  <S.CategorySectionWrapper>
  <ErrorBoundary>
  <Suspense fallback={<Skeleton isLarge={true} />}>

frontend/src/components/common/Dashboard/style.ts

@@ -1,3 +1,5 @@
+import { Link } from 'react-router-dom';
+
 import { styled } from 'styled-components';
 
 import { theme } from '@styles/theme';
@@ -17,6 +19,24 @@ export const Container = styled.div`
  }
 `;
 
+export const NoticeListLink = styled(Link)`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+
+ width: 100%;
+ margin-top: 20px;
+
+ font: var(--text-body);
+`;
+
+export const Image = styled.img`
+ width: 10px;
+ height: 10px;
+
+ margin-left: 10px;
+`;
+
 export const CategorySectionWrapper = styled.div`
  width: 100%;
  margin-top: 32px;

frontend/src/components/notice/NoticeDetail/NoticeDetail.stories.tsx

@@ -37,6 +37,7 @@ const MOCK_NOTICE_DETAIL = {
  앞으로도 보투게더 서비스에 많은 관심과 사랑 부탁드립니다. 감사합니다😊😄`,
  createdAt: '2023-09-23 18:23',
 };
+
 export default meta;
 type Story = StoryObj<typeof NoticeDetail>;
 

frontend/src/components/notice/NoticeDetail/style.ts

@@ -8,16 +8,14 @@ export const Container = styled.div`
 
  width: 100%;
  max-width: 600px;
- padding-top: 30px;
+ padding-top: 48px;
 
  @media (min-width: ${theme.breakpoint.sm}) {
- padding-top: 55px;
+ padding-top: 30px;
  }
 `;
 
 export const Category = styled.span`
- margin-top: 18px;
-
  font: var(--text-body);
 `;
 

frontend/src/pages/notice/NoticeDetailPage/NoticeDetailPage.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import NoticeDetailPage from '.';
+
+const meta: Meta<typeof NoticeDetailPage> = {
+ component: NoticeDetailPage,
+};
+
+export default meta;
+type Story = StoryObj<typeof NoticeDetailPage>;
+
+export const Default: Story = {
+ render: () => <NoticeDetailPage />,
+};

frontend/src/pages/notice/NoticeDetailPage/index.tsx

@@ -0,0 +1,46 @@
+import Layout from '@components/common/Layout';
+import NoticeDetail from '@components/notice/NoticeDetail';
+
+import * as S from './style';
+
+export default function NoticeDetailPage() {
+ const MOCK_NOTICE_DETAIL = {
+ title: '🎉보투게더 출시 기념 이벤트 종료',
+ content: `안녕하세요, 보투게더(VoTogether)는 우아한테크코스에서 진행한 프로젝트로, 투표 중심의 커뮤니티 플랫폼입니다!
+ 
+🤷‍♂️: 돈이 부족한 취준생인데 알바를 병행하는게 좋을까요, 최대한 절약하는게 좋을까요?
+🤷‍♀️: 요즘 체력이 떨어지는데 어떤 운동을 시작하면 좋을까요?
+🤷‍♂️: 오늘의 점심 메뉴는 뭐가 좋을까?
+다 함께, 즐겁게, 심플하게! 보투게더를 이용해 보세요!
+
+✅ 보투게더(VoTogether)는 투표를 통해 의견을 공유하고, 일상의 재미를 발견하는 커뮤니티 서비스예요.
+
+🖋 고민이 있으신가요? 글을 써보세요!
+😆 심심하신가요? 투표를 해보세요!
+❔ 궁금하신가요? 관심사를 탐색해 보세요!
+
+보투게더는 사람들의 다양한 주제로 질문하고 답변하면서, 사람들의 반응을 확인할 수 있다는 점에서 특별해요.
+자, 이제 보투게더를 이용할 준비되셨나요? 😆😃
+나의 이야기가 우리의 이야기가 되는 공간, 보투게더에서 우리 함께해요! 👍
+
+🚀보투게더 출시 이벤트 종료 및 상품 수령 대상자 공지
+보투게더 서비스의 런칭 기념 이벤트에 참여해주신 많은 분들 감사드립니다!!
+랭킹 순위에서 보투게더 팀원(관리자)은 제외하고 집계되었으며, 상품 수령 대상 닉네임은 아래와 같습니다.
+
+⭐ 게시글을 가장 많이 작성🖋️해주신 이용자! - Swimminggoggles
+⭐ 작성한 게시글에 가장 많은 투표✅를 해주신 이용자! - 익명의스내기
+⭐ 최고 인기글🔥을 작성하신 이용자! - 익명의익명
+
+위 닉네임들에 해당하시는 분들은 상품 수령을 위하여,보투게더 사이트에 로그인된 화면 인증샷을 채널톡으로 보내주시기 바랍니다!
+앞으로도 보투게더 서비스에 많은 관심과 사랑 부탁드립니다. 감사합니다😊😄`,
+ createdAt: '2023-09-23 18:23',
+ };
+
+ return (
+ <Layout isSidebarVisible>
+ <S.Container>
+ <NoticeDetail {...MOCK_NOTICE_DETAIL} />
+ </S.Container>
+ </Layout>
+ );
+}

frontend/src/pages/notice/NoticeDetailPage/style.ts

@@ -0,0 +1,5 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.div`
+ padding-bottom: 30px;
+`;

frontend/src/pages/notice/NoticeListPage/index.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import Layout from '@components/common/Layout';
 import SquareButton from '@components/common/SquareButton';
 import NoticeList from '@components/notice/NoticeList';

frontend/src/pages/notice/NoticeListPage/style.ts

@@ -1,18 +1,12 @@
 import { styled } from 'styled-components';
 
-import { theme } from '@styles/theme';
-
 export const Container = styled.div`
  display: flex;
  align-items: center;
  flex-direction: column;
 
  width: 100%;
- padding: 0 30px 30px 30px;
-
- @media (min-width: ${theme.breakpoint.sm}) {
- padding: 0 0 30px 0;
- }
+ padding-bottom: 30px;
 `;
 
 export const Title = styled.span`