작성된 게시글 컴포넌트 구현_Feat/#24

frontend/.storybook/preview.tsx

@@ -5,12 +5,14 @@ import { initialize, mswDecorator } from 'msw-storybook-addon';
 import { GlobalStyle } from '../src/styles/globalStyle';
 import React from 'react';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { handlers } from '../src/mocks/handlers';
 
 const queryClient = new QueryClient();
 initialize();
 
 const preview: Preview = {
  parameters: {
+ msw: handlers,
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
  matchers: {

frontend/src/CONSTATNS/index.ts

@@ -0,0 +1,3 @@
+export const POST = {
+ NOT_VOTE: 0,
+};

frontend/src/api/sua/post.ts

@@ -0,0 +1,14 @@
+import { patchFetch, postFetch } from '@utils/fetch';
+
+export const votePost = async (postId: number, optionId: number) => {
+ return await postFetch(`/posts/${postId}/options/${optionId}`, '');
+};
+
+export const changeVotedOption = async (
+ postId: number,
+ { originOptionId, newOptionId }: { originOptionId: number; newOptionId: number }
+) => {
+ return await patchFetch(
+ `/posts/${postId}/options?source=${originOptionId}&target=${newOptionId}`
+ );
+};

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { mockNotVotedPost, mockVotedPost } from './mockData';
+
+import Post from '.';
+
+const meta: Meta<typeof Post> = {
+ component: Post,
+ decorators: [storyFn => <div style={{ width: '576px' }}>{storyFn()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof Post>;
+
+export const PreviewNotVotedPost: Story = {
+ render: () => <Post postInfo={mockNotVotedPost} isPreview={true} />,
+};
+
+export const PreviewVotedPost: Story = {
+ render: () => <Post postInfo={mockVotedPost} isPreview={true} />,
+};
+
+export const NotVotedPost: Story = {
+ render: () => <Post postInfo={mockNotVotedPost} isPreview={false} />,
+};
+
+export const VotedPost: Story = {
+ render: () => <Post postInfo={mockVotedPost} isPreview={false} />,
+};

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

@@ -0,0 +1,53 @@
+import { POST } from 'CONSTATNS';
+
+import { PostInfo } from '@type/post';
+
+import { changeVotedOption, votePost } from '@api/sua/post';
+
+import WrittenVoteOptionList from '@components/optionList/WrittenVoteOptionList';
+
+import * as S from './style';
+
+interface PostProps {
+ postInfo: PostInfo;
+ isPreview: boolean;
+}
+
+export default function Post({ postInfo, isPreview }: PostProps) {
+ const { postId, category, title, writer, startTime, endTime, content, voteInfo } = postInfo;
+
+ const handleVoteClick = (newOptionId: number) => {
+ if (voteInfo.selectedOptionId === newOptionId) return;
+
+ if (voteInfo.selectedOptionId === POST.NOT_VOTE) {
+ votePost(postId, newOptionId);
+ return;
+ }
+
+ changeVotedOption(postId, {
+ originOptionId: voteInfo.selectedOptionId,
+ newOptionId,
+ });
+ };
+
+ return (
+ <S.Container>
+ <S.Category>{category.map(category => category.name).join(' | ')}</S.Category>
+ <S.Title $isPreview={isPreview}>{title}</S.Title>
+ <S.Wrapper>
+ <S.Writer>{writer.nickname}</S.Writer>
+ <S.Wrapper>
+ <S.Time>{startTime}</S.Time>
+ <S.Time>{endTime}</S.Time>
+ </S.Wrapper>
+ </S.Wrapper>
+ <S.Content $isPreview={isPreview}>{content}</S.Content>
+ <WrittenVoteOptionList
+ selectedOptionId={voteInfo.selectedOptionId}
+ handleVoteClick={handleVoteClick}
+ isPreview={isPreview}
+ voteOptionList={voteInfo.options}
+ />
+ </S.Container>
+ );
+}

frontend/src/components/common/Post/mockData.ts

@@ -0,0 +1,119 @@
+import { PostInfo } from '@type/post';
+
+export const mockNotVotedPost: PostInfo = {
+ postId: 1111111,
+ title:
+ '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트',
+ writer: {
+ id: 121212212,
+ nickname: '우아한 잔치국수',
+ },
+ content:
+ '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.',
+ category: [
+ {
+ id: 76767,
+ name: '개발',
+ },
+ {
+ id: 74632,
+ name: '연애',
+ },
+ {
+ id: 71347,
+ name: '상담',
+ },
+ ],
+ startTime: '2023-07-12 12:40',
+ endTime: '2023-07-13 18:40',
+ voteInfo: {
+ selectedOptionId: 0,
+ allPeopleCount: 100,
+ options: [
+ {
+ id: 12312,
+ text: '당선',
+ peopleCount: -1,
+ percent: -1,
+ },
+ {
+ id: 12314,
+ text: 'votogether',
+ peopleCount: -1,
+ percent: -1,
+ },
+ {
+ id: 123152,
+ text: '인스타그램, 블라인드와 같은 SNS의 형식을 차용합니다. 누군가는 글을 쓰고, 누군가는 반응합니다. 다만, 댓글은 없습니다. 투표로 자신의 의견을 표현하고 이를 사람들에게 보여줍니다.',
+ peopleCount: -1,
+ percent: -1,
+ },
+ {
+ id: 123122,
+ text: 'fun from choice, 오늘도 즐거운 한 표 ',
+ imageUrl: 'https://source.unsplash.com/random',
+ peopleCount: -1,
+ percent: -1,
+ },
+ ],
+ },
+};
+
+export const mockVotedPost: PostInfo = {
+ postId: 1111112,
+ title:
+ '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트',
+ writer: {
+ id: 12121221,
+ nickname: '우아한 잔치국수',
+ },
+ content:
+ '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.',
+ category: [
+ {
+ id: 76767,
+ name: '개발',
+ },
+ {
+ id: 74632,
+ name: '연애',
+ },
+ {
+ id: 71347,
+ name: '상담',
+ },
+ ],
+ startTime: '2023-07-12 12:40',
+ endTime: '2023-07-13 18:40',
+ voteInfo: {
+ selectedOptionId: 12312,
+ allPeopleCount: 123,
+ options: [
+ {
+ id: 12312,
+ text: '당선',
+ peopleCount: 30,
+ percent: 30,
+ },
+ {
+ id: 12314,
+ text: 'votogether',
+ peopleCount: 40,
+ percent: 40,
+ },
+ {
+ id: 123152,
+ text: '인스타그램, 블라인드와 같은 SNS의 형식을 차용합니다. 누군가는 글을 쓰고, 누군가는 반응합니다. 다만, 댓글은 없습니다. 투표로 자신의 의견을 표현하고 이를 사람들에게 보여줍니다.',
+ peopleCount: 20,
+ percent: 20,
+ },
+ {
+ id: 123122,
+ text: 'fun from choice, 오늘도 즐거운 한 표 ',
+ imageUrl: 'https://source.unsplash.com/random',
+ peopleCount: 10,
+ percent: 10,
+ },
+ ],
+ },
+};

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

@@ -0,0 +1,79 @@
+import { styled } from 'styled-components';
+
+export const Container = styled.li`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+
+ font-size: 1.2rem;
+ letter-spacing: 0.5px;
+ line-height: 1.5;
+
+ @media (min-width: 576px) {
+ font-size: 1.4rem;
+ }
+`;
+
+export const Category = styled.span`
+ font-size: 1.2rem;
+
+ @media (min-width: 576px) {
+ font-size: 1.4rem;
+ }
+`;
+
+export const Title = styled.p<{ $isPreview: boolean }>`
+ display: -webkit-box;
+
+ font-size: 2rem;
+ text-overflow: ellipsis;
+ word-break: break-word;
+
+ overflow: hidden;
+
+ -webkit-line-clamp: ${props => props.$isPreview && '2'};
+ -webkit-box-orient: vertical;
+
+ @media (min-width: 576px) {
+ font-size: 2.2rem;
+ }
+`;
+
+export const Writer = styled.span``;
+
+export const Wrapper = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ font-size: 1.2rem;
+
+ :nth-child(2) {
+ margin-left: 10px;
+ }
+
+ @media (min-width: 576px) {
+ font-size: 1.4rem;
+ }
+`;
+
+export const Time = styled.span``;
+
+export const Content = styled.p<{ $isPreview: boolean }>`
+ display: -webkit-box;
+
+ font-size: 1.4rem;
+ text-overflow: ellipsis;
+ word-break: break-word;
+
+ margin: 10px 0;
+
+ overflow: hidden;
+
+ -webkit-line-clamp: ${props => props.$isPreview && '10'};
+ -webkit-box-orient: vertical;
+
+ @media (min-width: 576px) {
+ font-size: 1.6rem;
+ }
+`;

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/index.tsx

@@ -10,7 +10,7 @@ interface ProgressBarProps {
 export default function ProgressBar({ percent, isSelected }: ProgressBarProps) {
  return (
  <S.Container>
- <S.Bar progress={percent} isSelected={isSelected} />
+ <S.Bar progress={percent} $isSelected={isSelected} />
  </S.Container>
  );
 }

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts

@@ -8,11 +8,11 @@ export const Container = styled.div`
  background-color: rgba(0, 0, 0, 0.3);
 `;
 
-export const Bar = styled.div<{ progress: number; isSelected: boolean }>`
+export const Bar = styled.div<{ progress: number; $isSelected: boolean }>`
  border-radius: 4px;
 
  width: ${({ progress }) => `${progress}%`};
  height: 8px;
 
- background-color: ${({ isSelected }) => (isSelected ? '#ff7877' : '#9F9F9F')};
+ background-color: ${({ $isSelected }) => ($isSelected ? '#ff7877' : '#9F9F9F')};
 `;

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx

@@ -25,7 +25,7 @@ export default function WrittenVoteOption({
  imageUrl,
 }: WrittenVoteOptionProps) {
  return (
- <S.Container isSelected={isSelected} onClick={handleVoteClick}>
+ <S.Container $isSelected={isSelected} onClick={handleVoteClick}>
  {!isPreview && imageUrl && <S.Image src={imageUrl} alt={text} />}
  {isPreview ? (
  <S.PreviewContent>{text}</S.PreviewContent>

frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts

@@ -1,11 +1,11 @@
 import { styled } from 'styled-components';
 
-export const Container = styled.li<{ isSelected: boolean }>`
+export const Container = styled.li<{ $isSelected: boolean }>`
  display: flex;
  flex-direction: column;
 
- border: ${({ isSelected }) =>
- isSelected ? '2px solid #ff7877' : '1px solid rgba(0, 0, 0, 0.1)'};
+ border: ${({ $isSelected }) =>
+ $isSelected ? '2px solid #ff7877' : '1px solid rgba(0, 0, 0, 0.1)'};
  border-radius: 4px;
  padding: 15px 20px;