diff --git a/frontend/src/components/common/Post/index.tsx b/frontend/src/components/common/Post/index.tsx index 8e58aa984..766432273 100644 --- a/frontend/src/components/common/Post/index.tsx +++ b/frontend/src/components/common/Post/index.tsx @@ -1,3 +1,5 @@ +import { MouseEvent } from 'react'; + import { PostInfo } from '@type/post'; import { changeVotedOption, votePost } from '@api/post'; @@ -31,19 +33,37 @@ export default function Post({ postInfo, isPreview }: PostProps) { }); }; + const handleLinkClick = (e: MouseEvent) => { + if (!isPreview) e.preventDefault(); + }; + return ( - - {category?.map(category => category.name).join(' | ')} - {title} + + + {category.map(category => category.name).join(' | ')} + + + {title} + - {writer.nickname} + {writer.nickname} - {createTime} - {deadline} + {startTime} + {endTime} - {content} + + {content} + ( {}} isPreview={true} text="자유를 찾게 냅둔다" @@ -36,6 +37,7 @@ export const NotSelectAndLongText: Story = { render: () => ( {}} isPreview={true} text="또는 JavaScript로 컴포넌트의 텍스트를 가져와서 원하는 길이로 자르고, 생략 부호를" @@ -53,6 +55,7 @@ export const ImageAndSelect: Story = { render: () => ( {}} isPreview={true} imageUrl="https://source.unsplash.com/random" @@ -70,6 +73,7 @@ export const NotVote: Story = { render: () => ( {}} isPreview={true} text="또는 JavaScript로 컴포넌트의 텍스트를 가져와서 원하는 길이로 자르고, 생략 부호를" @@ -87,6 +91,7 @@ export const ImageAndNotVote: Story = { render: () => ( {}} isPreview={true} imageUrl="https://source.unsplash.com/random" @@ -104,6 +109,7 @@ export const PreviewContent: Story = { render: () => ( {}} isPreview={true} imageUrl="https://source.unsplash.com/random" @@ -121,6 +127,7 @@ export const DetailContent: Story = { render: () => ( {}} isPreview={false} imageUrl="https://source.unsplash.com/random" @@ -138,6 +145,7 @@ export const NoImageAndDetailContent: Story = { render: () => ( {}} isPreview={false} text="isVote는 변수명으로서는 영문법상으로 볼 때는 어색하진 않습니다. is는 보통 boolean 타입을 나타낼 때 사용되는 접두사이며, Vote는 투표를 의미하는 명사입니다. 따라서 isVote는 투표 여부를 나타내는지를 의미하는 변수명으로 적합합니다. 그러나 개인적인 취향에 따라 다른 변수명을 선호할 수도 있습니다. 예를 들면 hasVoted와 같이 투표를 했는지 여부를 나타내는 변수명을 사용하는 것도 가능합니다. 중요한 것은 코드의 가독성과 일관성을 유지하는 것이며, 개발자들과의 커뮤니케이션을 원활하게 하기 위해 명확하고 이해하기 쉬운 변수명을 선택하는 것이 좋습니다." @@ -155,6 +163,7 @@ export const ImageAndSelectAndDetailContent: Story = { render: () => ( {}} isPreview={false} imageUrl="https://source.unsplash.com/random" diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx index 355d57505..5f3ab62db 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/index.tsx @@ -1,5 +1,3 @@ -import React from 'react'; - import ProgressBar from './ProgressBar'; import * as S from './style'; @@ -12,6 +10,7 @@ interface WrittenVoteOptionProps { isSelected: boolean; isPreview: boolean; imageUrl: string; + ariaLabel: string; } export default function WrittenVoteOption({ @@ -23,23 +22,30 @@ export default function WrittenVoteOption({ isSelected, isPreview, imageUrl, + ariaLabel, }: WrittenVoteOptionProps) { return ( - + {!isPreview && imageUrl && } {isPreview ? ( - {text} + {text} ) : ( - {text} + {text} )} {isVoted && ( <> - + - {peopleCount}명 - ({percent.toFixed(1)}%) + {peopleCount}명 + + ({percent.toFixed(1)}%) + )} diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts index bed283a8c..56e1860b0 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts +++ b/frontend/src/components/optionList/WrittenVoteOptionList/WrittenVoteOption/style.ts @@ -2,9 +2,10 @@ import { styled } from 'styled-components'; import { theme } from '@styles/theme'; -export const Container = styled.li<{ $isSelected: boolean }>` +export const Container = styled.button<{ $isSelected: boolean }>` display: flex; flex-direction: column; + align-items: stretch; border: ${({ $isSelected }) => $isSelected ? '2px solid var(--primary-color)' : '1px solid rgba(0, 0, 0, 0.1)'}; @@ -13,6 +14,8 @@ export const Container = styled.li<{ $isSelected: boolean }>` color: #5b5b5b; + text-align: left; + cursor: pointer; @media (min-width: ${theme.breakpoint.md}) { diff --git a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx index f6f73f7ca..4d27b9469 100644 --- a/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx +++ b/frontend/src/components/optionList/WrittenVoteOptionList/index.tsx @@ -19,9 +19,10 @@ export default function WrittenVoteOptionList({ handleVoteClick, }: WrittenVoteOptionListProps) { return ( - - {voteOptionList.map(voteOption => ( + + {voteOptionList.map((voteOption, index) => (