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

frontend/__test__/api/notice.test.ts

@@ -46,6 +46,13 @@ 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: NoticeRequest = {
  title: '아이폰입니다',

frontend/src/api/notice.ts

@@ -1,4 +1,5 @@
 import { Notice, NoticeList } from '@type/notice';
+import { StringDate, StringDateOnly } from '@type/time';
 
 import { deleteFetch, getFetch, patchFetch, postFetch } from '@utils/fetch';
 
@@ -10,22 +11,32 @@ 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 NoticeResponse {
+ id: number;
+ title: string;
+ content: string;
+ createdAt: StringDate;
+ deadline: StringDate;
+ bannerTitle: string;
+ bannerSubtitle: string;
+}
+
 export interface NoticeListResponse {
  totalPageNumber: number;
  currentPageNumber: number;
- notices: Notice[];
+ notices: NoticeResponse[];
 }
 
 export type NoticeRequest = Omit<Notice, 'createdAt' | 'id'>;
@@ -37,7 +48,7 @@ export const createNotice = async (notice: NoticeRequest) => {
 };
 
 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 +64,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

@@ -12,5 +12,5 @@ export default meta;
 type Story = StoryObj<typeof NoticeDetail>;
 
 export const Default: Story = {
- render: () => <NoticeDetail {...MOCK_TRANSFORM_NOTICE} />,
+ render: () => <NoticeDetail notice={MOCK_TRANSFORM_NOTICE} />,
 };

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

@@ -1,6 +1,6 @@
 import { useNavigate } from 'react-router-dom';
 
-import { StringDate } from '@type/time';
+import { Notice } from '@type/notice';
 
 import SquareButton from '@components/common/SquareButton';
 
@@ -9,20 +9,17 @@ import { PATH } from '@constants/path';
 import * as S from './style';
 
 interface NoticeDetailProps {
- title: string;
- content: string;
- createdAt: StringDate;
+ notice: Notice;
 }
 
-export default function NoticeDetail({ title, content, createdAt }: NoticeDetailProps) {
+export default function NoticeDetail({ notice: { title, content, createdAt } }: NoticeDetailProps) {
  const navigate = useNavigate();
- const createdDate = createdAt.slice(0, 10);
 
  return (
  <S.Container>
  <S.Category tabIndex={0}>VoTogether 공지사항</S.Category>
  <S.Title tabIndex={0}>{title}</S.Title>
- <S.CreatedAt tabIndex={0}>작성일 : {createdDate}</S.CreatedAt>
+ <S.CreatedAt tabIndex={0}>작성일 : {createdAt}</S.CreatedAt>
  <S.Content tabIndex={0}>{content}</S.Content>
  <S.ButtonContainer>
  <S.ButtonWrapper>

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

@@ -13,5 +13,5 @@ export default meta;
 type Story = StoryObj<typeof NoticeItem>;
 
 export const Default: Story = {
- render: () => <NoticeItem {...MOCK_TRANSFORM_NOTICE} />,
+ render: () => <NoticeItem notice={MOCK_TRANSFORM_NOTICE} />,
 };

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

@@ -1,22 +1,18 @@
-import { StringDate } from '@type/time';
+import { Notice } from '@type/notice';
 
 import { PATH } from '@constants/path';
 
 import * as S from './style';
 
 interface NoticeItemProps {
- id: number;
- title: string;
- createdAt: StringDate;
+ notice: Notice;
 }
-export default function NoticeItem({ id, title, createdAt }: NoticeItemProps) {
- const createdDate = createdAt.slice(0, 10);
-
+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>{createdDate}</S.CreatedAt>
+ <S.CreatedAt>{createdAt}</S.CreatedAt>
  </S.DetailLink>
  </S.Container>
  );

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

@@ -1,21 +1,17 @@
-import { StringDate } from '@type/time';
+import { Notice } from '@type/notice';
 
 import NoticeItem from './NoticeItem';
 import * as S from './style';
 
 interface NoticeListProps {
- noticeList: {
- id: number;
- title: string;
- createdAt: StringDate;
- }[];
+ noticeList: Notice[];
 }
 
 export default function NoticeList({ noticeList }: NoticeListProps) {
  return (
  <S.Container>
  {noticeList.map(notice => (
- <NoticeItem key={notice.id} {...notice} />
+ <NoticeItem key={notice.id} notice={notice} />
  ))}
  </S.Container>
  );

frontend/src/mocks/mockData/notice.ts

@@ -1,7 +1,7 @@
 import { Notice, NoticeList } from '@type/notice';
 import { StringDate } from '@type/time';
 
-import { NoticeListResponse, transformNotice } from '@api/notice';
+import { NoticeListResponse, NoticeResponse, transformNotice } from '@api/notice';
 
 const noticeTitleList = [
  '방방뛰는 코끼리',
@@ -54,7 +54,7 @@ const noticeDeadlineList: StringDate[] = [
  '2023-10-11 12:23',
 ];
 
-const getMockNoticeResponse = (): Notice => ({
+const getMockNoticeResponse = (): NoticeResponse => ({
  id: Math.floor(Math.random() * 30),
  title: noticeTitleList[Math.floor(Math.random() * 8)],
  content: noticeContentList[Math.floor(Math.random() * 11)],
@@ -64,7 +64,7 @@ const getMockNoticeResponse = (): Notice => ({
  deadline: noticeDeadlineList[Math.floor(Math.random() * 9)],
 });
 
-export const MOCK_NOTICE_RESPONSE: Notice = getMockNoticeResponse();
+export const MOCK_NOTICE_RESPONSE: NoticeResponse = getMockNoticeResponse();
 
 export const MOCK_TRANSFORM_NOTICE: Notice = transformNotice(MOCK_NOTICE_RESPONSE);
 

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

@@ -9,7 +9,7 @@ export default function NoticeDetailPage() {
  return (
  <Layout isSidebarVisible>
  <S.Container>
- <NoticeDetail {...MOCK_TRANSFORM_NOTICE} />
+ <NoticeDetail notice={MOCK_TRANSFORM_NOTICE} />
  </S.Container>
  </Layout>
  );

frontend/src/types/notice.ts

@@ -1,15 +1,7 @@
-import { NoticeListResponse } from '@api/notice';
+import { NoticeListResponse, NoticeResponse } from '@api/notice';
 
-import { StringDate } from './time';
+import { StringDateOnly } from './time';
 
-export interface Notice {
- id: number;
- title: string;
- content: string;
- createdAt: StringDate;
- deadline: StringDate;
- bannerTitle: string;
- bannerSubtitle: string;
-}
+export type Notice = Omit<NoticeResponse, 'createdAt'> & { createdAt: StringDateOnly };
 
 export type NoticeList = Omit<NoticeListResponse, 'notices'> & { noticeList: Notice[] };

frontend/src/types/time.ts

@@ -7,4 +7,12 @@ export interface DHMTime {
  minute: number;
 }
 
+/**
+ * yyyy-mm-dd HH-MM
+ */
 export type StringDate = `${number}-${number}-${number} ${number}:${number}`;
+
+/**
+ * yyyy-mm-dd
+ */
+export type StringDateOnly = `${number}-${number}-${number}`;