From b3e751a94aa6f656752ef086817c77481e0815c9 Mon Sep 17 00:00:00 2001 From: chsua Date: Fri, 14 Jul 2023 23:37:21 +0900 Subject: [PATCH 01/17] =?UTF-8?q?feat:=20(#24)=20post=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20type=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WrittenVoteOptionList/index.tsx | 10 +-------- frontend/src/types/post.ts | 22 +++++++++++++++++++ 2 files changed, 23 insertions(+), 9 deletions(-) create mode 100644 frontend/src/types/post.ts diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx index 92ea3eea5..12895b6a2 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx @@ -1,16 +1,8 @@ -import React from 'react'; +import { WrittenVoteOptionType } from '@type/post'; import * as S from './style'; import WrittenVoteOption from './WrittenVoteOption'; -interface WrittenVoteOptionType { - id: number; - text: string; - peopleCount: number; - percent: number; - imageUrl?: string; -} - interface WrittenVoteOptionListProps { isPreview: boolean; selectedOptionId: number; diff --git a/frontend/src/types/post.ts b/frontend/src/types/post.ts new file mode 100644 index 000000000..065cc63c0 --- /dev/null +++ b/frontend/src/types/post.ts @@ -0,0 +1,22 @@ +export interface WrittenVoteOptionType { + id: number; + text: string; + peopleCount: number; + percent: number; + imageUrl?: string; +} + +export interface PostInfo { + postId: number; + title: string; + writer: { id: number; nick: string }; + content: string; + category: { id: number; name: string }[]; + startTime: string; + endTime: string; + voteInfo: { + selectedOptionId: number; + allPeopleCount: number; + options: WrittenVoteOptionType[]; + }; +} From 2ee11b8d590f14bf3f0059d03b34a2c28b0e2eff Mon Sep 17 00:00:00 2001 From: chsua Date: Fri, 14 Jul 2023 23:37:51 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20(#24)=20post=20=EA=B4=80=EB=A0=A8?= =?UTF-8?q?=20mockData=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Post/mockData.ts | 119 ++++++++++++++++++ 1 file changed, 119 insertions(+) create mode 100644 frontend/src/components/common/Post/mockData.ts diff --git a/frontend/src/components/common/Post/mockData.ts b/frontend/src/components/common/Post/mockData.ts new file mode 100644 index 000000000..eb575527c --- /dev/null +++ b/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, + nick: '우아한 잔치국수', + }, + content: + '제가 말이죠. 연애를 하고 싶은데 말이죠. 제가 연애를 못할 성격도 아니고 돈이 없는 것도 아니고 그렇다고 이성친구가 없는것도 아닌데 말이죠. 근데 저는 연애를 못하고 있습니다. 왜인지 아시나요. 그것은 바로 개발자이기 때문입니다. 개발자는 왜이렇게 바쁠까요? 이렇게 한없이 바빠서 무엇을 할 수는 있는 걸까요? 연애는 커녕 취미생활조차도 못하는 거 같은데 이렇게 계속 살아가야 하는 걸까요? 사실 싫지는 않습니다만 진지하게 연애를 할 수 있을 지에 대해서는 의구심이 들기 시작한 시점입니다. 사람들은 말이죠, 연애도 하고 결혼도 한다던데 이렇게 살다가는 혼자 영원히 개발과 함께 살 것 같다는 생각이 간혹가다 들기도 합니다. 물론 이런 생각은 과대망상은 아닙니다. 진지하고요. 근데 한편으로는 나쁘지 않다는 말이죠. 개발뿐인 삶, 얼마나 멋집니까. 이런 삶은 행복하기도 하겠지요. 오, 이런 생각을 하는 것은 위험합니다. 삶에는 친구와 가족이 필요합니다. 나에게 남은 것은 무엇입니까? 그것은 해결해야 하는 기술부채와 나와 똑같은 상황의 개발자들뿐입니다. 그래서 개발자는 개발자와 노나 봅니다. 그렇지 않습니다. 여튼간에 이러한 말들을 다 버리고 제가 묻고 싶은건 말이죠. 개발자 여러분 중 연애하는 비율이 얼마나 많은가 입니다. 또, 한다면 같은 개발자랑 연애하고 있는지 궁금합니다.', + 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: '연애 짱좋. 근데 개발자 니니함', + peopleCount: -1, + percent: -1, + }, + { + id: 123152, + text: '개발자 애인 짱좋. 둘이 만나면 개발만 하고 삼.', + peopleCount: -1, + percent: -1, + }, + { + id: 123122, + text: '남의 연애사 관심 ㄴㄴ함', + imageUrl: 'https://source.unsplash.com/random', + peopleCount: -1, + percent: -1, + }, + ], + }, +}; + +export const mockVotedPost: PostInfo = { + postId: 1111111, + title: + '개발자로 살면서 연애를 과연 할 수 있을까요? 저는 이런 생각을 굉장히 많이 합니다만, 언제나 같은 결론에 도달하고는 하죠. 그건 말이죠. 궁금하신가요 그럼 어서 들어와.', + writer: { + id: 121212212, + nick: '우아한 잔치국수', + }, + content: + '제가 말이죠. 연애를 하고 싶은데 말이죠. 제가 연애를 못할 성격도 아니고 돈이 없는 것도 아니고 그렇다고 이성친구가 없는것도 아닌데 말이죠. 근데 저는 연애를 못하고 있습니다. 왜인지 아시나요. 그것은 바로 개발자이기 때문입니다. 개발자는 왜이렇게 바쁠까요? 이렇게 한없이 바빠서 무엇을 할 수는 있는 걸까요? 연애는 커녕 취미생활조차도 못하는 거 같은데 이렇게 계속 살아가야 하는 걸까요? 사실 싫지는 않습니다만 진지하게 연애를 할 수 있을 지에 대해서는 의구심이 들기 시작한 시점입니다. 사람들은 말이죠, 연애도 하고 결혼도 한다던데 이렇게 살다가는 혼자 영원히 개발과 함께 살 것 같다는 생각이 간혹가다 들기도 합니다. 물론 이런 생각은 과대망상은 아닙니다. 진지하고요. 근데 한편으로는 나쁘지 않다는 말이죠. 개발뿐인 삶, 얼마나 멋집니까. 이런 삶은 행복하기도 하겠지요. 오, 이런 생각을 하는 것은 위험합니다. 삶에는 친구와 가족이 필요합니다. 나에게 남은 것은 무엇입니까? 그것은 해결해야 하는 기술부채와 나와 똑같은 상황의 개발자들뿐입니다. 그래서 개발자는 개발자와 노나 봅니다. 그렇지 않습니다. 여튼간에 이러한 말들을 다 버리고 제가 묻고 싶은건 말이죠. 개발자 여러분 중 연애하는 비율이 얼마나 많은가 입니다. 또, 한다면 같은 개발자랑 연애하고 있는지 궁금합니다.', + category: [ + { + id: 76767, + name: '개발', + }, + { + id: 74632, + name: '연애', + }, + { + id: 71347, + name: '상담', + }, + ], + startTime: '2023-07-12 12:40', + endTime: '2023-07-13 18:40', + voteInfo: { + selectedOptionId: 12314, + allPeopleCount: 123, + options: [ + { + id: 12312, + text: '연애 그게 뭐임', + peopleCount: 30, + percent: 30, + }, + { + id: 12314, + text: '연애 짱좋. 근데 개발자 니니함', + peopleCount: 40, + percent: 40, + }, + { + id: 123152, + text: '개발자 애인 짱좋. 둘이 만나면 개발만 하고 삼.', + peopleCount: 20, + percent: 20, + }, + { + id: 123122, + text: '남의 연애사 관심 ㄴㄴ함', + imageUrl: 'https://source.unsplash.com/random', + peopleCount: 10, + percent: 10, + }, + ], + }, +}; From 2b6d322c2d13da0941274335d78b95d31c40b28b Mon Sep 17 00:00:00 2001 From: chsua Date: Fri, 14 Jul 2023 23:38:35 +0900 Subject: [PATCH 03/17] =?UTF-8?q?feat:=20(#24)=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=EB=AC=BC=20=ED=95=98=EB=82=98=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/common/Post/index.tsx | 33 ++++++++ frontend/src/components/common/Post/style.ts | 79 +++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 frontend/src/components/common/Post/index.tsx create mode 100644 frontend/src/components/common/Post/style.ts diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx new file mode 100644 index 000000000..331a8d33e --- /dev/null +++ b/frontend/src/components/common/Post/index.tsx @@ -0,0 +1,33 @@ +import { PostInfo } from '@type/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) { + return ( + + {postInfo.category.map(category => category.name).join(' | ')} + {postInfo.title} + + {postInfo.writer.nick} + + {postInfo.startTime} + {postInfo.endTime} + + + {postInfo.content} + {}} + isPreview={isPreview} + voteOptionList={postInfo.voteInfo.options} + /> + + ); +} diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts new file mode 100644 index 000000000..bbec00dab --- /dev/null +++ b/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; + } +`; From 8a9032c13344e701f4da2f4dcdbed9743660bcd0 Mon Sep 17 00:00:00 2001 From: chsua Date: Fri, 14 Jul 2023 23:39:46 +0900 Subject: [PATCH 04/17] =?UTF-8?q?test:=20(#24)=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=EB=AC=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=85=8C?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 미리보기 여부, 투표 여부에 따라 4가지 테스트 생성 --- .../components/common/Post/Post.stories.tsx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) create mode 100644 frontend/src/components/common/Post/Post.stories.tsx diff --git a/frontend/src/components/common/Post/Post.stories.tsx b/frontend/src/components/common/Post/Post.stories.tsx new file mode 100644 index 000000000..b3751cea2 --- /dev/null +++ b/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 = { + component: Post, + decorators: [storyFn =>
{storyFn()}
], +}; + +export default meta; +type Story = StoryObj; + +export const PreviewNotVotedPost: Story = { + render: () => , +}; + +export const PreviewVotedPost: Story = { + render: () => , +}; + +export const NotVotedPost: Story = { + render: () => , +}; + +export const VotedPost: Story = { + render: () => , +}; From fb2832f3b0be587cae8adeb4ebfc8f646a2a08da Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 02:04:38 +0900 Subject: [PATCH 05/17] =?UTF-8?q?refactor:=20(#24)=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=EB=AC=BC=20mockData=20=EB=82=B4=EC=9A=A9=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/common/Post/mockData.ts | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/common/Post/mockData.ts b/frontend/src/components/common/Post/mockData.ts index eb575527c..b4c0afc29 100644 --- a/frontend/src/components/common/Post/mockData.ts +++ b/frontend/src/components/common/Post/mockData.ts @@ -3,13 +3,13 @@ import { PostInfo } from '@type/post'; export const mockNotVotedPost: PostInfo = { postId: 1111111, title: - '개발자로 살면서 연애를 과연 할 수 있을까요? 저는 이런 생각을 굉장히 많이 합니다만, 언제나 같은 결론에 도달하고는 하죠. 그건 말이죠. 궁금하신가요 그럼 어서 들어와.', + '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트', writer: { id: 121212212, nick: '우아한 잔치국수', }, content: - '제가 말이죠. 연애를 하고 싶은데 말이죠. 제가 연애를 못할 성격도 아니고 돈이 없는 것도 아니고 그렇다고 이성친구가 없는것도 아닌데 말이죠. 근데 저는 연애를 못하고 있습니다. 왜인지 아시나요. 그것은 바로 개발자이기 때문입니다. 개발자는 왜이렇게 바쁠까요? 이렇게 한없이 바빠서 무엇을 할 수는 있는 걸까요? 연애는 커녕 취미생활조차도 못하는 거 같은데 이렇게 계속 살아가야 하는 걸까요? 사실 싫지는 않습니다만 진지하게 연애를 할 수 있을 지에 대해서는 의구심이 들기 시작한 시점입니다. 사람들은 말이죠, 연애도 하고 결혼도 한다던데 이렇게 살다가는 혼자 영원히 개발과 함께 살 것 같다는 생각이 간혹가다 들기도 합니다. 물론 이런 생각은 과대망상은 아닙니다. 진지하고요. 근데 한편으로는 나쁘지 않다는 말이죠. 개발뿐인 삶, 얼마나 멋집니까. 이런 삶은 행복하기도 하겠지요. 오, 이런 생각을 하는 것은 위험합니다. 삶에는 친구와 가족이 필요합니다. 나에게 남은 것은 무엇입니까? 그것은 해결해야 하는 기술부채와 나와 똑같은 상황의 개발자들뿐입니다. 그래서 개발자는 개발자와 노나 봅니다. 그렇지 않습니다. 여튼간에 이러한 말들을 다 버리고 제가 묻고 싶은건 말이죠. 개발자 여러분 중 연애하는 비율이 얼마나 많은가 입니다. 또, 한다면 같은 개발자랑 연애하고 있는지 궁금합니다.', + '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.', category: [ { id: 76767, @@ -32,25 +32,25 @@ export const mockNotVotedPost: PostInfo = { options: [ { id: 12312, - text: '연애 그게 뭐임', + text: '당선', peopleCount: -1, percent: -1, }, { id: 12314, - text: '연애 짱좋. 근데 개발자 니니함', + text: 'votogether', peopleCount: -1, percent: -1, }, { id: 123152, - text: '개발자 애인 짱좋. 둘이 만나면 개발만 하고 삼.', + text: '인스타그램, 블라인드와 같은 SNS의 형식을 차용합니다. 누군가는 글을 쓰고, 누군가는 반응합니다. 다만, 댓글은 없습니다. 투표로 자신의 의견을 표현하고 이를 사람들에게 보여줍니다.', peopleCount: -1, percent: -1, }, { id: 123122, - text: '남의 연애사 관심 ㄴㄴ함', + text: 'fun from choice, 오늘도 즐거운 한 표 ', imageUrl: 'https://source.unsplash.com/random', peopleCount: -1, percent: -1, @@ -60,15 +60,15 @@ export const mockNotVotedPost: PostInfo = { }; export const mockVotedPost: PostInfo = { - postId: 1111111, + postId: 1111112, title: - '개발자로 살면서 연애를 과연 할 수 있을까요? 저는 이런 생각을 굉장히 많이 합니다만, 언제나 같은 결론에 도달하고는 하죠. 그건 말이죠. 궁금하신가요 그럼 어서 들어와.', + '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트', writer: { - id: 121212212, + id: 12121221, nick: '우아한 잔치국수', }, content: - '제가 말이죠. 연애를 하고 싶은데 말이죠. 제가 연애를 못할 성격도 아니고 돈이 없는 것도 아니고 그렇다고 이성친구가 없는것도 아닌데 말이죠. 근데 저는 연애를 못하고 있습니다. 왜인지 아시나요. 그것은 바로 개발자이기 때문입니다. 개발자는 왜이렇게 바쁠까요? 이렇게 한없이 바빠서 무엇을 할 수는 있는 걸까요? 연애는 커녕 취미생활조차도 못하는 거 같은데 이렇게 계속 살아가야 하는 걸까요? 사실 싫지는 않습니다만 진지하게 연애를 할 수 있을 지에 대해서는 의구심이 들기 시작한 시점입니다. 사람들은 말이죠, 연애도 하고 결혼도 한다던데 이렇게 살다가는 혼자 영원히 개발과 함께 살 것 같다는 생각이 간혹가다 들기도 합니다. 물론 이런 생각은 과대망상은 아닙니다. 진지하고요. 근데 한편으로는 나쁘지 않다는 말이죠. 개발뿐인 삶, 얼마나 멋집니까. 이런 삶은 행복하기도 하겠지요. 오, 이런 생각을 하는 것은 위험합니다. 삶에는 친구와 가족이 필요합니다. 나에게 남은 것은 무엇입니까? 그것은 해결해야 하는 기술부채와 나와 똑같은 상황의 개발자들뿐입니다. 그래서 개발자는 개발자와 노나 봅니다. 그렇지 않습니다. 여튼간에 이러한 말들을 다 버리고 제가 묻고 싶은건 말이죠. 개발자 여러분 중 연애하는 비율이 얼마나 많은가 입니다. 또, 한다면 같은 개발자랑 연애하고 있는지 궁금합니다.', + '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.', category: [ { id: 76767, @@ -86,30 +86,30 @@ export const mockVotedPost: PostInfo = { startTime: '2023-07-12 12:40', endTime: '2023-07-13 18:40', voteInfo: { - selectedOptionId: 12314, + selectedOptionId: 12312, allPeopleCount: 123, options: [ { id: 12312, - text: '연애 그게 뭐임', + text: '당선', peopleCount: 30, percent: 30, }, { id: 12314, - text: '연애 짱좋. 근데 개발자 니니함', + text: 'votogether', peopleCount: 40, percent: 40, }, { id: 123152, - text: '개발자 애인 짱좋. 둘이 만나면 개발만 하고 삼.', + text: '인스타그램, 블라인드와 같은 SNS의 형식을 차용합니다. 누군가는 글을 쓰고, 누군가는 반응합니다. 다만, 댓글은 없습니다. 투표로 자신의 의견을 표현하고 이를 사람들에게 보여줍니다.', peopleCount: 20, percent: 20, }, { id: 123122, - text: '남의 연애사 관심 ㄴㄴ함', + text: 'fun from choice, 오늘도 즐거운 한 표 ', imageUrl: 'https://source.unsplash.com/random', peopleCount: 10, percent: 10, From a3444b75b70c18a320cccafce805af4717c35f52 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 02:09:45 +0900 Subject: [PATCH 06/17] =?UTF-8?q?fix:=20(#15)=20style=20component=20props?= =?UTF-8?q?=EB=A5=BC=20=EC=9D=B8=EC=8B=9D=ED=95=98=EC=A7=80=20=EB=AA=BB?= =?UTF-8?q?=ED=95=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 오류메세지: React does not recognize the `isSelected` prop on a DOM element - 해결방법: style을 위한 props은 앞에 $처리를 한다. --- frontend/src/components/common/Post/index.tsx | 4 ++-- frontend/src/components/common/Post/style.ts | 8 ++++---- .../WrittenVoteOption/ProgressBar/index.tsx | 2 +- .../WrittenVoteOption/ProgressBar/style.ts | 6 +++--- .../WrittenVoteOptionList/WrittenVoteOption/index.tsx | 2 +- .../WrittenVoteOptionList/WrittenVoteOption/style.ts | 6 +++--- 6 files changed, 14 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index 331a8d33e..7797dbb24 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -13,7 +13,7 @@ export default function Post({ postInfo, isPreview }: PostProps) { return ( {postInfo.category.map(category => category.name).join(' | ')} - {postInfo.title} + {postInfo.title} {postInfo.writer.nick} @@ -21,7 +21,7 @@ export default function Post({ postInfo, isPreview }: PostProps) { {postInfo.endTime} - {postInfo.content} + {postInfo.content} {}} diff --git a/frontend/src/components/common/Post/style.ts b/frontend/src/components/common/Post/style.ts index bbec00dab..920803dba 100644 --- a/frontend/src/components/common/Post/style.ts +++ b/frontend/src/components/common/Post/style.ts @@ -22,7 +22,7 @@ export const Category = styled.span` } `; -export const Title = styled.p<{ isPreview: boolean }>` +export const Title = styled.p<{ $isPreview: boolean }>` display: -webkit-box; font-size: 2rem; @@ -31,7 +31,7 @@ export const Title = styled.p<{ isPreview: boolean }>` overflow: hidden; - -webkit-line-clamp: ${props => props.isPreview && '2'}; + -webkit-line-clamp: ${props => props.$isPreview && '2'}; -webkit-box-orient: vertical; @media (min-width: 576px) { @@ -59,7 +59,7 @@ export const Wrapper = styled.div` export const Time = styled.span``; -export const Content = styled.p<{ isPreview: boolean }>` +export const Content = styled.p<{ $isPreview: boolean }>` display: -webkit-box; font-size: 1.4rem; @@ -70,7 +70,7 @@ export const Content = styled.p<{ isPreview: boolean }>` overflow: hidden; - -webkit-line-clamp: ${props => props.isPreview && '10'}; + -webkit-line-clamp: ${props => props.$isPreview && '10'}; -webkit-box-orient: vertical; @media (min-width: 576px) { diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/index.tsx index e1baca71a..332c6403d 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/index.tsx @@ -10,7 +10,7 @@ interface ProgressBarProps { export default function ProgressBar({ percent, isSelected }: ProgressBarProps) { return ( - + ); } diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts index 63fd43d4f..021140f05 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts +++ b/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}%`}; + width: ${({ progress }) => `${progress}%`};ㄴ height: 8px; - background-color: ${({ isSelected }) => (isSelected ? '#ff7877' : '#9F9F9F')}; + background-color: ${({ $isSelected }) => ($isSelected ? '#ff7877' : '#9F9F9F')}; `; diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx index e687d0729..89e4b15bf 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx @@ -25,7 +25,7 @@ export default function WrittenVoteOption({ imageUrl, }: WrittenVoteOptionProps) { return ( - + {!isPreview && imageUrl && } {isPreview ? ( {text} diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts index 7fe8e210f..d26b33e24 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts +++ b/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; From e717a40362d519c2734b051340e1fb15efd114d9 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 02:12:04 +0900 Subject: [PATCH 07/17] =?UTF-8?q?refactor:=20=EC=84=A0=ED=83=9D=EC=A7=80?= =?UTF-8?q?=20=EB=A6=AC=EC=8A=A4=ED=8A=B8=20=ED=94=84=EB=A1=AD=EC=8A=A4=20?= =?UTF-8?q?=EC=A4=91=20handleVoteClick=20=EC=9D=B8=EC=88=98=EB=AA=85=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 수정전: voteId - 수정후: optionId --- .../src/components/optionList/WrittenVoteOptionList/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx index 12895b6a2..69a6d1e6a 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx @@ -7,7 +7,7 @@ interface WrittenVoteOptionListProps { isPreview: boolean; selectedOptionId: number; voteOptionList: WrittenVoteOptionType[]; - handleVoteClick: (voteId: number) => void; + handleVoteClick: (optionId: number) => void; } const NOT_VOTED = 0; From 264e7454c634cb90d91348078a7b1619bab4c1e9 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 02:32:02 +0900 Subject: [PATCH 08/17] =?UTF-8?q?feat:=20(#24)=20msw=20=EA=B2=8C=EC=8B=9C?= =?UTF-8?q?=EA=B8=80=20=ED=88=AC=ED=91=9C,=20=ED=88=AC=ED=91=9C=EC=88=98?= =?UTF-8?q?=EC=A0=95=20api=20=EB=AA=A8=ED=82=B9=EC=BD=94=EB=93=9C=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/mocks/handlers.ts | 3 ++- frontend/src/mocks/sua/vote.ts | 43 ++++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 frontend/src/mocks/sua/vote.ts diff --git a/frontend/src/mocks/handlers.ts b/frontend/src/mocks/handlers.ts index f6e89fef8..5368f1e53 100644 --- a/frontend/src/mocks/handlers.ts +++ b/frontend/src/mocks/handlers.ts @@ -1,3 +1,4 @@ import { example } from './example/get'; +import { votePostTest } from './sua/vote'; -export const handlers = [...example]; +export const handlers = [...example, ...votePostTest]; diff --git a/frontend/src/mocks/sua/vote.ts b/frontend/src/mocks/sua/vote.ts new file mode 100644 index 000000000..497a1c40b --- /dev/null +++ b/frontend/src/mocks/sua/vote.ts @@ -0,0 +1,43 @@ +import { rest } from 'msw'; + +export const votePostTest = [ + //투표 + rest.post(`/posts/1111111/options/12312`, (req, res, ctx) => { + console.log('투표 ㅇㅋ'); + return res(ctx.status(200)); + }), + + rest.post(`/posts/1111111/options/12314`, (req, res, ctx) => { + console.log('투표 ㅇㅋ'); + return res(ctx.status(200)); + }), + + rest.post(`/posts/1111111/options/123152`, (req, res, ctx) => { + console.log('투표 ㅇㅋ'); + return res(ctx.status(200)); + }), + + rest.post(`/posts/1111111/options/123122`, (req, res, ctx) => { + console.log('투표 ㅇㅋ'); + return res(ctx.status(200)); + }), + + //선택지 수정 + rest.patch(`/posts/1111112//options?source=12312&target=12314`, (req, res, ctx) => { + console.log('투표 변경ㅇㅋ'); + + return res(ctx.status(200)); + }), + + rest.patch(`/posts/1111112//options?source=12312&target=123152`, (req, res, ctx) => { + console.log('투표 변경ㅇㅋ'); + + return res(ctx.status(200)); + }), + + rest.patch(`/posts/1111112//options?source=12312&target=123122`, (req, res, ctx) => { + console.log('투표 변경ㅇㅋ'); + + return res(ctx.status(200)); + }), +]; From 436534618dadaa8037f7d172d24a630b3f192d7d Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 02:33:27 +0900 Subject: [PATCH 09/17] =?UTF-8?q?feat:=20=EC=84=A0=ED=83=9D=EC=A7=80=20?= =?UTF-8?q?=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20api=ED=86=B5=EC=8B=A0=ED=95=98?= =?UTF-8?q?=EB=8A=94=20=EC=9D=B4=EB=B2=A4=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 현재 모킹이 원활하지 않음 - 모킹의 문제인지, 기존 코드의 문제인지 모름 --- frontend/src/api/sua/post.ts | 15 +++++++++ frontend/src/components/common/Post/index.tsx | 33 ++++++++++++++----- 2 files changed, 39 insertions(+), 9 deletions(-) create mode 100644 frontend/src/api/sua/post.ts diff --git a/frontend/src/api/sua/post.ts b/frontend/src/api/sua/post.ts new file mode 100644 index 000000000..ad9fff238 --- /dev/null +++ b/frontend/src/api/sua/post.ts @@ -0,0 +1,15 @@ +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: number, + newOptionId: number +) => { + return await patchFetch( + `/posts/${postId}/options?source=${originOptionId}&target=${newOptionId}` + ); +}; diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index 7797dbb24..63240691c 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -1,5 +1,7 @@ import { PostInfo } from '@type/post'; +import { changeVotedOption, votePost } from '@api/sua/post'; + import WrittenVoteOptionList from '@components/optionList/WrittenVoteOptionList'; import * as S from './style'; @@ -10,23 +12,36 @@ interface PostProps { } export default function Post({ postInfo, isPreview }: PostProps) { + const { postId, category, title, writer, startTime, endTime, content, voteInfo } = postInfo; + + const handleVoteClick = (optionId: number) => { + if (voteInfo.selectedOptionId === optionId) return; + + if (voteInfo.selectedOptionId === 0) { + votePost(postId, optionId); + return; + } + + changeVotedOption(postId, voteInfo.selectedOptionId, optionId); + }; + return ( - {postInfo.category.map(category => category.name).join(' | ')} - {postInfo.title} + {category.map(category => category.name).join(' | ')} + {title} - {postInfo.writer.nick} + {writer.nick} - {postInfo.startTime} - {postInfo.endTime} + {startTime} + {endTime} - {postInfo.content} + {content} {}} + selectedOptionId={voteInfo.selectedOptionId} + handleVoteClick={handleVoteClick} isPreview={isPreview} - voteOptionList={postInfo.voteInfo.options} + voteOptionList={voteInfo.options} /> ); From d136f7981c1d57dfaecc9a72e5dc80a6bfb0325c Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 02:37:42 +0900 Subject: [PATCH 10/17] =?UTF-8?q?fix:=20(#24)=20=EC=98=A4=ED=83=80?= =?UTF-8?q?=EB=A1=9C=20=EC=9D=B8=ED=95=9C=20=EC=8A=A4=ED=83=80=EC=9D=BC=20?= =?UTF-8?q?=EB=AF=B8=EC=A0=81=EC=9A=A9=20=EC=98=A4=EB=A5=98=20=ED=95=B4?= =?UTF-8?q?=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../WrittenVoteOption/ProgressBar/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts index 021140f05..79fd92f58 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts +++ b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/ProgressBar/style.ts @@ -11,7 +11,7 @@ export const Container = styled.div` export const Bar = styled.div<{ progress: number; $isSelected: boolean }>` border-radius: 4px; - width: ${({ progress }) => `${progress}%`};ㄴ + width: ${({ progress }) => `${progress}%`}; height: 8px; background-color: ${({ $isSelected }) => ($isSelected ? '#ff7877' : '#9F9F9F')}; From cb1a1ba0305b3be4b383ef8747b34007693612dc Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 16:16:15 +0900 Subject: [PATCH 11/17] =?UTF-8?q?fix:=20=EC=98=A4=ED=83=80=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B8=ED=95=9C=20patch=20mock=EC=9D=B4=20=EC=95=88=EB=90=98?= =?UTF-8?q?=EB=8A=94=20=EC=98=A4=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 원인: url 오타 --- frontend/src/mocks/sua/vote.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/frontend/src/mocks/sua/vote.ts b/frontend/src/mocks/sua/vote.ts index 497a1c40b..f2e620954 100644 --- a/frontend/src/mocks/sua/vote.ts +++ b/frontend/src/mocks/sua/vote.ts @@ -23,19 +23,19 @@ export const votePostTest = [ }), //선택지 수정 - rest.patch(`/posts/1111112//options?source=12312&target=12314`, (req, res, ctx) => { + rest.patch(`/posts/1111112/options?source=12312&target=12314`, (req, res, ctx) => { console.log('투표 변경ㅇㅋ'); return res(ctx.status(200)); }), - rest.patch(`/posts/1111112//options?source=12312&target=123152`, (req, res, ctx) => { + rest.patch(`/posts/1111112/options?source=12312&target=123152`, (req, res, ctx) => { console.log('투표 변경ㅇㅋ'); return res(ctx.status(200)); }), - rest.patch(`/posts/1111112//options?source=12312&target=123122`, (req, res, ctx) => { + rest.patch(`/posts/1111112/options?source=12312&target=123122`, (req, res, ctx) => { console.log('투표 변경ㅇㅋ'); return res(ctx.status(200)); From a360d3ae3687b80b4d87bbd6a0cd998c7b9606dd Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 16:18:16 +0900 Subject: [PATCH 12/17] =?UTF-8?q?fix:=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B6=81=EC=97=90=EC=84=9C=20mocking=EC=9D=B4=20=EC=95=88?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EC=98=A4=EB=A5=98=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - parameters에 핸들러를 추가하여 해결 --- frontend/.storybook/preview.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/.storybook/preview.tsx b/frontend/.storybook/preview.tsx index d35ff88c1..c573afc2e 100644 --- a/frontend/.storybook/preview.tsx +++ b/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: { From ef1a7f833bac4c1a6bce966c973c09d3cc8cfa71 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 16:39:42 +0900 Subject: [PATCH 13/17] =?UTF-8?q?style:=20(#24)=20=EB=B6=88=ED=95=84?= =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/sua/post.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/api/sua/post.ts b/frontend/src/api/sua/post.ts index ad9fff238..6ed085f15 100644 --- a/frontend/src/api/sua/post.ts +++ b/frontend/src/api/sua/post.ts @@ -1,7 +1,7 @@ import { patchFetch, postFetch } from '@utils/fetch'; export const votePost = async (postId: number, optionId: number) => { - return await postFetch<'', ''>(`/posts/${postId}/options/${optionId}`, ''); + return await postFetch(`/posts/${postId}/options/${optionId}`, ''); }; export const changeVotedOption = async ( From a89a17e5805a0320e0e481497d0bc02ae95a4c94 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 16:43:38 +0900 Subject: [PATCH 14/17] =?UTF-8?q?refactor:=20(#24)=20=EB=B6=88=EB=B6=84?= =?UTF-8?q?=EB=AA=85=ED=95=9C=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20=ED=81=B4=EB=A6=AD?= =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=20=EC=9D=B8=EC=9E=90=EB=AA=85=20?= =?UTF-8?q?=EC=88=98=EC=A0=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 수정전: optionId - 수정후: newOptionId --- frontend/src/components/common/Post/index.tsx | 8 ++++---- .../components/optionList/WrittenVoteOptionList/index.tsx | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index 63240691c..5615a6c87 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -14,15 +14,15 @@ interface PostProps { export default function Post({ postInfo, isPreview }: PostProps) { const { postId, category, title, writer, startTime, endTime, content, voteInfo } = postInfo; - const handleVoteClick = (optionId: number) => { - if (voteInfo.selectedOptionId === optionId) return; + const handleVoteClick = (newOptionId: number) => { + if (voteInfo.selectedOptionId === newOptionId) return; if (voteInfo.selectedOptionId === 0) { - votePost(postId, optionId); + votePost(postId, newOptionId); return; } - changeVotedOption(postId, voteInfo.selectedOptionId, optionId); + changeVotedOption(postId, voteInfo.selectedOptionId, newOptionId); }; return ( diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx index 69a6d1e6a..3221f2514 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx @@ -7,7 +7,7 @@ interface WrittenVoteOptionListProps { isPreview: boolean; selectedOptionId: number; voteOptionList: WrittenVoteOptionType[]; - handleVoteClick: (optionId: number) => void; + handleVoteClick: (newOptionId: number) => void; } const NOT_VOTED = 0; From d6d00f616b702fe8f6dbf341521f79df8ccf6022 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 16:44:39 +0900 Subject: [PATCH 15/17] =?UTF-8?q?refactor:=20(#24)=20=EB=B6=88=EB=B6=84?= =?UTF-8?q?=EB=AA=85=ED=95=9C=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20=EA=B2=8C?= =?UTF-8?q?=EC=82=AC=EC=9E=90=20=EC=86=8D=EC=84=B1=EB=AA=85=20=EC=88=98?= =?UTF-8?q?=EC=A0=95.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 수정전: nick - 수정후: nickname --- frontend/src/components/common/Post/index.tsx | 2 +- frontend/src/components/common/Post/mockData.ts | 4 ++-- frontend/src/types/post.ts | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index 5615a6c87..48c65a24b 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -30,7 +30,7 @@ export default function Post({ postInfo, isPreview }: PostProps) { {category.map(category => category.name).join(' | ')} {title} - {writer.nick} + {writer.nickname} {startTime} {endTime} diff --git a/frontend/src/components/common/Post/mockData.ts b/frontend/src/components/common/Post/mockData.ts index b4c0afc29..4a098edc1 100644 --- a/frontend/src/components/common/Post/mockData.ts +++ b/frontend/src/components/common/Post/mockData.ts @@ -6,7 +6,7 @@ export const mockNotVotedPost: PostInfo = { '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트', writer: { id: 121212212, - nick: '우아한 잔치국수', + nickname: '우아한 잔치국수', }, content: '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.', @@ -65,7 +65,7 @@ export const mockVotedPost: PostInfo = { '어느 곳에서 정보를 찾아야 할지도 막막한 사람들을 위한, 심심풀이로 나의 취향과 남의 취향을 비교해보고 싶은 사람들을 위한 프로젝트', writer: { id: 12121221, - nick: '우아한 잔치국수', + nickname: '우아한 잔치국수', }, content: '이는 사람들에게 재미와 정보, 두 가지를 줄 수 있습니다. 사람들은 MBTI, 밸런스게임처럼 나와 같은 사람들을 찾고, 나와 다른 사람들과 비교하는 것을 즐깁니다. 이를 컨텐츠화하여 보다 빠르게 질문하고 답변하며, 사람들의 반응을 확인할 수 있다면 사람들은 충분한 즐거움을 느낄 것입니다. 또한 20대가 많은 대학가에 창업을 하고 싶지만 20대의 의견을 모르겠을 때, 확실한 답은 아닐지라도 어느 정도의 가이드를 줄 수 있을 것입니다. 질문자에게 제공되는 성별/나이대별 투표 결과 정보는 질문자가 하고자 하는 의사결정의 근거가 될 수 있을 것입니다.', diff --git a/frontend/src/types/post.ts b/frontend/src/types/post.ts index 065cc63c0..bcb96f59a 100644 --- a/frontend/src/types/post.ts +++ b/frontend/src/types/post.ts @@ -9,7 +9,7 @@ export interface WrittenVoteOptionType { export interface PostInfo { postId: number; title: string; - writer: { id: number; nick: string }; + writer: { id: number; nickname: string }; content: string; category: { id: number; name: string }[]; startTime: string; From 76dad130d3e65e1881ca10b1fbeb422537bf05d2 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 17:23:20 +0900 Subject: [PATCH 16/17] =?UTF-8?q?refactor:=20(#24)=20=ED=88=AC=ED=91=9C?= =?UTF-8?q?=ED=95=98=EC=A7=80=20=EC=95=8A=EC=95=98=EC=9D=84=20=EA=B2=BD?= =?UTF-8?q?=EC=9A=B0=EC=9D=98=20selectOptionID=EC=9D=B8=200=20=EC=83=81?= =?UTF-8?q?=EC=88=98=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/CONSTATNS/index.ts | 3 +++ frontend/src/components/common/Post/index.tsx | 4 +++- .../components/optionList/WrittenVoteOptionList/index.tsx | 6 +++--- 3 files changed, 9 insertions(+), 4 deletions(-) create mode 100644 frontend/src/CONSTATNS/index.ts diff --git a/frontend/src/CONSTATNS/index.ts b/frontend/src/CONSTATNS/index.ts new file mode 100644 index 000000000..143371efb --- /dev/null +++ b/frontend/src/CONSTATNS/index.ts @@ -0,0 +1,3 @@ +export const POST = { + NOT_VOTE: 0, +}; diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index 48c65a24b..af2bc5443 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -1,3 +1,5 @@ +import { POST } from 'CONSTATNS'; + import { PostInfo } from '@type/post'; import { changeVotedOption, votePost } from '@api/sua/post'; @@ -17,7 +19,7 @@ export default function Post({ postInfo, isPreview }: PostProps) { const handleVoteClick = (newOptionId: number) => { if (voteInfo.selectedOptionId === newOptionId) return; - if (voteInfo.selectedOptionId === 0) { + if (voteInfo.selectedOptionId === POST.NOT_VOTE) { votePost(postId, newOptionId); return; } diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx index 3221f2514..475fa53a8 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx @@ -1,3 +1,5 @@ +import { POST } from 'CONSTATNS'; + import { WrittenVoteOptionType } from '@type/post'; import * as S from './style'; @@ -10,8 +12,6 @@ interface WrittenVoteOptionListProps { handleVoteClick: (newOptionId: number) => void; } -const NOT_VOTED = 0; - export default function WrittenVoteOptionList({ isPreview, voteOptionList, @@ -25,7 +25,7 @@ export default function WrittenVoteOptionList({ key={voteOption.id} {...voteOption} isPreview={isPreview} - isVoted={selectedOptionId !== NOT_VOTED} + isVoted={selectedOptionId !== POST.NOT_VOTE} isSelected={selectedOptionId === voteOption.id} handleVoteClick={() => handleVoteClick(voteOption.id)} /> From 7568d69daeb15a421532599fad53bb8011e0eb18 Mon Sep 17 00:00:00 2001 From: chsua Date: Sat, 15 Jul 2023 17:28:02 +0900 Subject: [PATCH 17/17] =?UTF-8?q?refactor:=20=ED=88=AC=ED=91=9C=20?= =?UTF-8?q?=EC=84=A0=ED=83=9D=EC=A7=80=20=EC=88=98=EC=A0=95=20api=20?= =?UTF-8?q?=ED=95=A8=EC=88=98=20=EC=9D=B8=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/api/sua/post.ts | 3 +-- frontend/src/components/common/Post/index.tsx | 5 ++++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/api/sua/post.ts b/frontend/src/api/sua/post.ts index 6ed085f15..bb0d9f4c7 100644 --- a/frontend/src/api/sua/post.ts +++ b/frontend/src/api/sua/post.ts @@ -6,8 +6,7 @@ export const votePost = async (postId: number, optionId: number) => { export const changeVotedOption = async ( postId: number, - originOptionId: number, - newOptionId: number + { originOptionId, newOptionId }: { originOptionId: number; newOptionId: number } ) => { return await patchFetch( `/posts/${postId}/options?source=${originOptionId}&target=${newOptionId}` diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index af2bc5443..3e81b346a 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -24,7 +24,10 @@ export default function Post({ postInfo, isPreview }: PostProps) { return; } - changeVotedOption(postId, voteInfo.selectedOptionId, newOptionId); + changeVotedOption(postId, { + originOptionId: voteInfo.selectedOptionId, + newOptionId, + }); }; return (