-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor: separate CommentBox from TopicCard
- Loading branch information
Showing
4 changed files
with
178 additions
and
131 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| import { colors } from '@styles/theme'; | ||
|
|
||
| export const CommentContainer = styled.div` | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| width: 100%; | ||
| padding: 41px 20px 0; | ||
| `; | ||
|
|
||
| export const CommentHeader = styled.div` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
| height: 22px; | ||
| `; | ||
|
|
||
| export const KeywordContainer = styled.div` | ||
| display: flex; | ||
| gap: 6px; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| `; | ||
|
|
||
| export const CommentInfoContainer = styled.div` | ||
| display: flex; | ||
| gap: 12px; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| width: 100%; | ||
| height: 40px; | ||
| padding: 0 16px; | ||
| margin-top: 11px; | ||
| background-color: #64519b; | ||
| border-radius: 10px 10px 0 0; | ||
| `; | ||
|
|
||
| export const Comment = styled.div` | ||
| position: relative; | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| gap: 10px; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| width: 100%; | ||
| height: 57px; | ||
| padding: 0 16px; | ||
| background-color: ${colors.navy2}; | ||
| border-radius: 0 0 10px 10px; | ||
| `; | ||
|
|
||
| export const Blur = styled.div<{ isVote: boolean }>` | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| gap: 10px; | ||
| align-items: center; | ||
| justify-content: flex-start; | ||
| width: 100%; | ||
| height: 29px; | ||
| background-color: transparent; | ||
| filter: ${(props) => (!props.isVote ? 'blur(2px)' : 'blur(0px)')}; | ||
| `; | ||
|
|
||
| export const HighlightText = styled.span` | ||
| color: white; | ||
| `; | ||
|
|
||
| export const CommentButton = styled.button` | ||
| position: absolute; | ||
| top: 50%; | ||
| left: 50%; | ||
| display: inline-flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 140px; | ||
| height: 30px; | ||
| padding: 4px 14px; | ||
| font-size: 1.5rem; | ||
| font-weight: 700; | ||
| line-height: 0%; | ||
| color: ${colors.white}; | ||
| text-align: center; | ||
| background-color: ${colors.purple}; | ||
| border-radius: 91px; | ||
| transform: translate(-50%, -50%); | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,75 @@ | ||
| import React from 'react'; | ||
|
|
||
| import Text from '@components/Text/Text'; | ||
| import { UserProfileImage } from '@components/TopicCard/TopicCard.styles'; | ||
|
|
||
| import { colors } from '@styles/theme'; | ||
|
|
||
| import { MeatballIcon } from '@icons/index'; | ||
|
|
||
| import { | ||
| CommentContainer, | ||
| CommentHeader, | ||
| KeywordContainer, | ||
| CommentInfoContainer, | ||
| Comment, | ||
| HighlightText, | ||
| Blur, | ||
| CommentButton, | ||
| } from './CommentBox.styles'; | ||
|
|
||
| interface CommentBoxProps { | ||
| hasVoted: boolean; | ||
| side: 'A' | 'B'; | ||
| keyword: string; | ||
| commentCount: number; | ||
| voteCount: number; | ||
| topComment: string; | ||
| } | ||
|
|
||
| const CommentBox = ({ | ||
| side, | ||
| keyword, | ||
| commentCount, | ||
| voteCount, | ||
| topComment, | ||
| hasVoted, | ||
| }: CommentBoxProps) => { | ||
| return ( | ||
| <CommentContainer> | ||
| <CommentHeader> | ||
| <KeywordContainer> | ||
| <Text size={13} weight={'regular'} color={colors.purple}> | ||
| {side} 사이드 | ||
| </Text> | ||
| <Text size={14} weight={'regular'} color={colors.white_20}> | ||
| | | ||
| </Text> | ||
| <Text size={13} weight={'regular'} color={colors.white_60}> | ||
| {keyword} | ||
| </Text> | ||
| </KeywordContainer> | ||
| <MeatballIcon /> | ||
| </CommentHeader> | ||
| <CommentInfoContainer> | ||
| <Text size={14} weight={600} color={colors.white_60}> | ||
| <HighlightText>{commentCount}천개</HighlightText>의 댓글 | ||
| </Text> | ||
| <Text size={14} weight={600} color={colors.white_60}> | ||
| <HighlightText>{voteCount}명</HighlightText>이 선택했어요 | ||
| </Text> | ||
| </CommentInfoContainer> | ||
| <Comment> | ||
| <Blur isVote={hasVoted}> | ||
| <UserProfileImage /> | ||
| <Text size={15} weight={'regular'} color={colors.white}> | ||
| {topComment} | ||
| </Text> | ||
| </Blur> | ||
| {!hasVoted && <CommentButton>선택하고 댓글 보기</CommentButton>} | ||
| </Comment> | ||
| </CommentContainer> | ||
| ); | ||
| }; | ||
|
|
||
| export default CommentBox; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters