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

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

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

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

@@ -0,0 +1,47 @@
+import { useNavigate } from 'react-router-dom';
+
+import SquareButton from '@components/common/SquareButton';
+
+import * as S from './style';
+
+interface NoticeDetailProps {
+ title: string;
+ content: string;
+ createdAt: string;
+}
+
+export default function NoticeDetail({ 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.Content tabIndex={0}>{content}</S.Content>
+ <S.ButtonContainer>
+ <S.ButtonWrapper>
+ <SquareButton
+ theme="fill"
+ onClick={() => {
+ navigate('/');
+ }}
+ >
+ 홈으로 가기
+ </SquareButton>
+ </S.ButtonWrapper>
+ <S.ButtonWrapper>
+ <SquareButton
+ theme="blank"
+ onClick={() => {
+ navigate('/notices');
+ }}
+ >
+ {`공지사항\n목록으로 가기`}
+ </SquareButton>
+ </S.ButtonWrapper>
+ </S.ButtonContainer>
+ </S.Container>
+ );
+}

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

@@ -0,0 +1,72 @@
+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;
+ 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;
+ }
+`;

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

@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+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>;
+
+const MOCK_NOTICE_ITEM = {
+ id: 1,
+ title: '방방뛰는 코끼리',
+ createdAt: '2022-01-11 12:23',
+};
+
+export const Default: Story = {
+ render: () => <NoticeItem {...MOCK_NOTICE_ITEM} />,
+};

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

@@ -0,0 +1,24 @@
+import { PATH } from '@constants/path';
+
+import * as S from './style';
+
+interface NoticeItemProps {
+ id: number;
+ title: string;
+ /**
+ * yyyy-mm-dd 형식
+ */
+ createdAt: string;
+}
+export default function NoticeItem({ id, title, createdAt }: NoticeItemProps) {
+ const createdDate = createdAt.slice(0, 10);
+
+ return (
+ <S.Container>
+ <S.DetailLink to={`${PATH.NOTICES}/${id}`}>
+ <S.Title>{title}</S.Title>
+ <S.CreatedAt>{createdDate}</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,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import NoticeList from '.';
+
+const meta: Meta<typeof NoticeList> = {
+ component: NoticeList,
+ decorators: [storyFn => <div style={{ width: '576px' }}>{storyFn()}</div>],
+};
+
+const MOCK_NOTICE_LIST = [
+ {
+ id: 1,
+ title: '방방뛰는 코끼리 엄청나게 긴 게시글 공지사항입니다.',
+ createdAt: '2022-01-11 12:23',
+ },
+ {
+ id: 2,
+ title: '방방뛰는 코끼리',
+ createdAt: '2022-01-11 12:23',
+ },
+ {
+ id: 3,
+ title: '방방뛰는 코끼리',
+ createdAt: '2022-01-11 12:23',
+ },
+ {
+ id: 4,
+ title: '방방뛰는 코끼리',
+ createdAt: '2022-01-11 12:23',
+ },
+ {
+ id: 5,
+ title: '방방뛰는 코끼리',
+ createdAt: '2022-01-11 12:23',
+ },
+];
+
+export default meta;
+type Story = StoryObj<typeof NoticeList>;
+
+export const Default: Story = {
+ render: () => (
+ <div style={{ width: '100vw', padding: '15px' }}>
+ <NoticeList noticeList={MOCK_NOTICE_LIST} />
+ </div>
+ ),
+};

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

@@ -0,0 +1,23 @@
+import NoticeItem from './NoticeItem';
+import * as S from './style';
+
+interface NoticeListProps {
+ noticeList: {
+ id: number;
+ title: string;
+ /**
+ * yyyy-mm-dd 형식
+ */
+ createdAt: string;
+ }[];
+}
+
+export default function NoticeList({ noticeList }: NoticeListProps) {
+ return (
+ <S.Container>
+ {noticeList.map(notice => (
+ <NoticeItem key={notice.id} {...notice} />
+ ))}
+ </S.Container>
+ );
+}

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

@@ -0,0 +1,16 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.ul`
+ width: 100%;
+
+ border-radius: 5px;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+
+ > li {
+ border-bottom: 1px solid rgba(0, 0, 0, 0.2);
+
+ &:last-child {
+ border-bottom: none;
+ }
+ }
+`;

frontend/src/constants/path.ts

@@ -8,6 +8,7 @@ export const BASE_PATH = {
  SEARCH: '/search',
  RANKING: '/ranking',
  ANNOUNCEMENT: '/announcements',
+ NOTICES: '/notices',
 };
 
 export const PATH = {

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 />,
+};