공지사항 목록 컴포넌트 / 공지사항 상세 컴포넌트 UI 구현 / 공지사항 ROUTER 설정

frontend/__test__/api/notice.test.ts

@@ -1,3 +1,5 @@
+import { NoticeRequest } from '@type/notice';
+
 import {
  createNotice,
  deleteNotice,
@@ -12,7 +14,7 @@ import { MOCK_NOTICE_TEST } from '@mocks/notice';
 
 describe('서버와 통신하여 공지사항 관련된 api를 통신할 수 있어야 한다. ', () => {
  test('공지사항을 생성한다.', async () => {
- const data = {
+ const data: NoticeRequest = {
  title: '갤럭시',
  content: '공지사항입니다',
  deadline: '2023-10-12 15:13',
@@ -45,8 +47,15 @@ describe('서버와 통신하여 공지사항 관련된 api를 통신할 수 있
  expect(result).toEqual(MOCK_TRANSFORM_NOTICE);
  });
 
+ test('공지 사항의 createdAt을 날짜만 받도록 변환시킨다.', async () => {
+ const createdAt = '2023-08-19 08:23';
+ const result = '2023-08-19';
+
+ expect(createdAt.split(' ')[0]).toBe(result);
+ });
+
  test('공지 사항을 수정한다.', async () => {
- const data = {
+ const data: NoticeRequest = {
  title: '아이폰입니다',
  content: '공지사항입니다',
  deadline: '2023-10-12 15:13',

frontend/__test__/hooks/query/notice/useCreateNotice.test.tsx

@@ -3,6 +3,8 @@ import React, { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { NoticeRequest } from '@type/notice';
+
 import { useCreateNotice } from '@hooks';
 
 import { MOCK_NOTICE_TEST } from '@mocks/notice';
@@ -15,7 +17,7 @@ const wrapper = ({ children }: { children: ReactNode }) => (
 
 describe('공지 사항을 생성하는 지 확인한다.', () => {
  test('공지 사항을 생성한다.', async () => {
- const data = {
+ const data: NoticeRequest = {
  title: '갤럭시',
  content: '공지사항입니다',
  deadline: '2023-10-12 15:13',

frontend/__test__/hooks/query/notice/useModifyNotice.test.tsx

@@ -3,6 +3,8 @@ import React, { ReactNode } from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { renderHook, waitFor } from '@testing-library/react';
 
+import { NoticeRequest } from '@type/notice';
+
 import { useModifyNotice } from '@hooks';
 
 import { MOCK_NOTICE_TEST } from '@mocks/notice';
@@ -15,7 +17,7 @@ const wrapper = ({ children }: { children: ReactNode }) => (
 
 describe('요청을 통해 공지 사항을 수정하는 지 확인한다.', () => {
  test('공지 사항을 생성한다.', async () => {
- const data = {
+ const data: NoticeRequest = {
  title: '아이폰입니다',
  content: '공지사항입니다',
  deadline: '2023-10-12 15:13',

frontend/src/api/notice.ts

@@ -1,4 +1,11 @@
-import { Notice, NoticeList } from '@type/notice';
+import {
+ Notice,
+ NoticeList,
+ NoticeListResponse,
+ NoticeRequest,
+ NoticeResponse,
+} from '@type/notice';
+import { StringDateOnly } from '@type/time';
 
 import { deleteFetch, getFetch, patchFetch, postFetch } from '@utils/fetch';
 
@@ -10,34 +17,26 @@ export const transformNotice = ({
  deadline,
  bannerTitle,
  bannerSubtitle,
-}: Notice): Notice => {
+}: NoticeResponse): Notice => {
  return {
  id,
  title,
  content,
- createdAt,
+ createdAt: createdAt.split(' ')[0] as StringDateOnly,
  deadline,
  bannerTitle,
  bannerSubtitle,
  };
 };
 
-export interface NoticeListResponse {
- totalPageNumber: number;
- currentPageNumber: number;
- notices: Notice[];
-}
-
-export type NoticeRequest = Omit<Notice, 'createdAt' | 'id'>;
-
 const BASE_URL = process.env.VOTOGETHER_BASE_URL ?? '';
 
 export const createNotice = async (notice: NoticeRequest) => {
  await postFetch(`${BASE_URL}/notices`, notice);
 };
 
 export const getBannerNotice = async () => {
- const bannerNotice = await getFetch<Notice>(`${BASE_URL}/notices/progress`);
+ const bannerNotice = await getFetch<NoticeResponse>(`${BASE_URL}/notices/progress`);
 
  return transformNotice(bannerNotice);
 };
@@ -53,7 +52,7 @@ export const getNoticeList = async (page: number): Promise<NoticeList> => {
 };
 
 export const getNoticeDetail = async (noticeId: number) => {
- const noticeDetail = await getFetch<Notice>(`${BASE_URL}/notices/${noticeId}`);
+ const noticeDetail = await getFetch<NoticeResponse>(`${BASE_URL}/notices/${noticeId}`);
 
  return transformNotice(noticeDetail);
 };

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

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

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

@@ -0,0 +1,48 @@
+import { useNavigate } from 'react-router-dom';
+
+import { Notice } from '@type/notice';
+
+import SquareButton from '@components/common/SquareButton';
+
+import { PATH } from '@constants/path';
+
+import * as S from './style';
+
+interface NoticeDetailProps {
+ notice: Notice;
+}
+
+export default function NoticeDetail({ notice: { title, content, createdAt } }: NoticeDetailProps) {
+ const navigate = useNavigate();
+
+ return (
+ <S.Container>
+ <S.Category tabIndex={0}>VoTogether 공지사항</S.Category>
+ <S.Title tabIndex={0}>{title}</S.Title>
+ <S.CreatedAt tabIndex={0}>작성일 : {createdAt}</S.CreatedAt>
+ <S.Content tabIndex={0}>{content}</S.Content>
+ <S.ButtonContainer>
+ <S.ButtonWrapper>
+ <SquareButton
+ theme="fill"
+ onClick={() => {
+ navigate(PATH.HOME);
+ }}
+ >
+ 홈으로 가기
+ </SquareButton>
+ </S.ButtonWrapper>
+ <S.ButtonWrapper>
+ <SquareButton
+ theme="blank"
+ onClick={() => {
+ navigate(PATH.NOTICES);
+ }}
+ >
+ {`공지사항\n목록으로 가기`}
+ </SquareButton>
+ </S.ButtonWrapper>
+ </S.ButtonContainer>
+ </S.Container>
+ );
+}

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

@@ -0,0 +1,77 @@
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+
+ width: 100%;
+ max-width: 600px;
+ padding-top: 48px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ padding-top: 30px;
+ }
+`;
+
+export const Category = styled.span`
+ font: var(--text-body);
+`;
+
+export const Title = styled.h1`
+ margin-top: 20px;
+
+ font: var(--text-title);
+`;
+
+export const CreatedAt = styled.span`
+ margin: 20px 0;
+
+ font: var(--text-body);
+ font-size: 1.4rem;
+ text-align: right;
+
+ color: var(--text-dark-gray);
+`;
+
+export const Content = styled.p`
+ font: var(--text-body);
+
+ white-space: pre-wrap;
+`;
+
+export const ButtonContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ align-items: center;
+ gap: 20px;
+
+ margin-top: 50px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ flex-direction: row;
+ justify-content: center;
+ gap: 80px;
+
+ padding: 0 100px;
+ }
+`;
+
+export const ButtonWrapper = styled.div`
+ display: flex;
+ width: 100%;
+ height: 40px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ width: 140px;
+ height: 60px;
+
+ white-space: pre-wrap;
+
+ &:first-child {
+ display: none;
+ }
+ }
+`;

frontend/src/components/notice/NoticeList/NoticeItem/NoticeItem.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MOCK_TRANSFORM_NOTICE } from '@mocks/mockData/notice';
+
+import NoticeItem from '.';
+
+const meta: Meta<typeof NoticeItem> = {
+ component: NoticeItem,
+ decorators: [storyFn => <div style={{ width: '576px' }}>{storyFn()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoticeItem>;
+
+export const Default: Story = {
+ render: () => <NoticeItem notice={MOCK_TRANSFORM_NOTICE} />,
+};

frontend/src/components/notice/NoticeList/NoticeItem/index.tsx

@@ -0,0 +1,19 @@
+import { Notice } from '@type/notice';
+
+import { PATH } from '@constants/path';
+
+import * as S from './style';
+
+interface NoticeItemProps {
+ notice: Notice;
+}
+export default function NoticeItem({ notice: { id, title, createdAt } }: NoticeItemProps) {
+ return (
+ <S.Container>
+ <S.DetailLink to={`${PATH.NOTICES}/${id}`}>
+ <S.Title>{title}</S.Title>
+ <S.CreatedAt>{createdAt}</S.CreatedAt>
+ </S.DetailLink>
+ </S.Container>
+ );
+}

frontend/src/components/notice/NoticeList/NoticeItem/style.ts

@@ -0,0 +1,56 @@
+import { Link } from 'react-router-dom';
+
+import { styled } from 'styled-components';
+
+import { theme } from '@styles/theme';
+
+export const Container = styled.li``;
+
+export const DetailLink = styled(Link)`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+
+ padding: 10px 15px;
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ flex-direction: row;
+ justify-content: space-between;
+
+ padding: 16px 20px;
+ }
+`;
+
+export const Title = styled.span`
+ width: 100%;
+ display: -webkit-box;
+
+ text-overflow: ellipsis;
+ word-break: break-word;
+
+ overflow: hidden;
+
+ -webkit-line-clamp: 1;
+ -webkit-box-orient: vertical;
+
+ font: var(--text-body);
+
+ transition: color 0.2s ease-in-out;
+
+ &:hover {
+ color: rgba(51, 122, 183, 1);
+ }
+`;
+
+export const CreatedAt = styled.span`
+ font: var(--text-body);
+ font-size: 1.4rem;
+
+ text-align: right;
+
+ color: var(--text-dark-gray);
+
+ @media (min-width: ${theme.breakpoint.sm}) {
+ width: 90px;
+ }
+`;

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { MOCK_TRANSFORM_NOTICE_LIST } from '@mocks/mockData/notice';
+
+import NoticeList from '.';
+
+const meta: Meta<typeof NoticeList> = {
+ component: NoticeList,
+ decorators: [storyFn => <div style={{ width: '576px' }}>{storyFn()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof NoticeList>;
+
+export const Default: Story = {
+ render: () => (
+ <div style={{ width: '100vw', padding: '15px' }}>
+ <NoticeList noticeList={MOCK_TRANSFORM_NOTICE_LIST.noticeList} />
+ </div>
+ ),
+};