diff --git a/src/assets/fonts/MontserratMedium.woff2 b/src/assets/fonts/MontserratMedium.woff2 new file mode 100644 index 0000000..c017adc Binary files /dev/null and b/src/assets/fonts/MontserratMedium.woff2 differ diff --git a/src/assets/icons/index.ts b/src/assets/icons/index.ts index 91e7184..6d6353c 100644 --- a/src/assets/icons/index.ts +++ b/src/assets/icons/index.ts @@ -5,9 +5,12 @@ import AppleLoginIcon from './apple-login.svg?react'; import GoogleLoginIcon from './google-login.svg?react'; import SelectedHomeIcon from './home-selected.svg?react'; import KakaoLoginIcon from './kakao-login.svg?react'; +import LeftDoubleArrowIcon from './left-double-arrow.svg?react'; +import MeatballIcon from './meatball.svg?react'; import PlusBoxIcon from './plus-box.svg?react'; import ProfileIcon from './profile.svg?react'; import RightChevronIcon from './right-chevron.svg?react'; +import RightDoubleArrowIcon from './right-double-arrow.svg?react'; import WriteBoxIcon from './write-box.svg?react'; export { @@ -22,4 +25,7 @@ export { KakaoLoginIcon, AppleLoginIcon, GoogleLoginIcon, + LeftDoubleArrowIcon, + RightDoubleArrowIcon, + MeatballIcon, }; diff --git a/src/assets/icons/left-double-arrow.svg b/src/assets/icons/left-double-arrow.svg new file mode 100644 index 0000000..c5aba71 --- /dev/null +++ b/src/assets/icons/left-double-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/meatball.svg b/src/assets/icons/meatball.svg new file mode 100644 index 0000000..317be90 --- /dev/null +++ b/src/assets/icons/meatball.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/icons/right-double-arrow.svg b/src/assets/icons/right-double-arrow.svg new file mode 100644 index 0000000..2f088ab --- /dev/null +++ b/src/assets/icons/right-double-arrow.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/styles/global.tsx b/src/assets/styles/global.tsx index b6452b2..5d563fc 100644 --- a/src/assets/styles/global.tsx +++ b/src/assets/styles/global.tsx @@ -1,8 +1,8 @@ +import MontserratMedium from '@fonts/MontserratMedium.woff2'; +import PretendardVariable from '@fonts/PretendardVariable.woff2'; import { createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; -import PretendardVariable from '@fonts/PretendardVariable.woff2'; - const styled = { createGlobalStyle }; const GlobalStyle = styled.createGlobalStyle` @@ -17,6 +17,15 @@ const GlobalStyle = styled.createGlobalStyle` font-display: block; } + @font-face { + font-family: 'Montserrat Medium'; + font-style: medium; + font-weight: 500; + src: local('Montserrat Medium'), local('Montserrat Medium'); + src: url(${MontserratMedium}) format('woff2'); + font-display: block; + } + * { box-sizing: inherit; } diff --git a/src/assets/styles/theme.ts b/src/assets/styles/theme.ts index b3a6751..0a39a18 100644 --- a/src/assets/styles/theme.ts +++ b/src/assets/styles/theme.ts @@ -8,6 +8,10 @@ export const colors = { B: '#1498AA', black: '#000000', white: '#FFFFFF', + white_20: 'rgba(255, 255, 255, 0.20)', + white_40: 'rgba(255, 255, 255, 0.40)', + white_60: 'rgba(255, 255, 255, 0.60)', + white_80: 'rgba(255, 255, 255, 0.80)', }; export type ColorsTypes = typeof colors; diff --git a/src/components/CommentBox/CommentBox.styles.tsx b/src/components/CommentBox/CommentBox.styles.tsx new file mode 100644 index 0000000..c92c8db --- /dev/null +++ b/src/components/CommentBox/CommentBox.styles.tsx @@ -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%); +`; diff --git a/src/components/CommentBox/CommentBox.tsx b/src/components/CommentBox/CommentBox.tsx new file mode 100644 index 0000000..bbac126 --- /dev/null +++ b/src/components/CommentBox/CommentBox.tsx @@ -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 ( + + + + + {side} 사이드 + + + | + + + {keyword} + + + + + + + {commentCount}천개의 댓글 + + + {voteCount}명이 선택했어요 + + + + + + + {topComment} + + + {!hasVoted && 선택하고 댓글 보기} + + + ); +}; + +export default CommentBox; diff --git a/src/components/Timer/Timer.tsx b/src/components/Timer/Timer.tsx index da8a767..f14744a 100644 --- a/src/components/Timer/Timer.tsx +++ b/src/components/Timer/Timer.tsx @@ -1,6 +1,8 @@ import React from 'react'; import { styled } from 'styled-components'; +import { colors } from '@styles/theme'; + import useTimer from '@hooks/useTimer'; interface TimerProps { @@ -25,18 +27,19 @@ export const TimerContainer = styled.div` justify-content: center; width: 100%; height: 37px; - margin-top: 37px; `; export const TimerChip = styled.div<{ isLessThanOneHour: boolean }>` display: flex; align-items: center; justify-content: center; - width: 115px; - height: 37px; - font-size: 1.5rem; - font-weight: 700; - color: ${(props) => (props.isLessThanOneHour ? '#3C3457' : 'rgb(255 255 255 / 40%)')}; + width: 112px; + height: 30px; + padding: 2px 0 0; + font-family: 'Montserrat Medium', 'Noto Sans KR', sans-serif; + font-size: 1.6rem; + line-height: 0%; + color: ${(props) => (props.isLessThanOneHour ? colors.navy2 : 'rgba(255, 255, 255, 0.80)')}; text-align: center; background-color: ${(props) => (props.isLessThanOneHour ? props.theme.colors.purple : '#3c3457')}; border-radius: 50px; diff --git a/src/components/TopicCard/TopicCard.styles.tsx b/src/components/TopicCard/TopicCard.styles.tsx index 4408624..55b14fe 100644 --- a/src/components/TopicCard/TopicCard.styles.tsx +++ b/src/components/TopicCard/TopicCard.styles.tsx @@ -1,5 +1,7 @@ import { styled } from 'styled-components'; +import { colors } from '@styles/theme'; + export const Container = styled.div` height: 100%; background-color: ${(props) => props.theme.colors.navy}; @@ -8,6 +10,7 @@ export const Container = styled.div` export const TopicCardContainer = styled.div` display: flex; flex-direction: column; + align-items: center; height: 100%; `; @@ -22,7 +25,7 @@ export const BestTopicCotainer = styled.div` align-items: center; justify-content: center; width: 100%; - height: 28px; + height: 25px; `; export const TopicContainer = styled.div` @@ -33,7 +36,7 @@ export const TopicContainer = styled.div` width: 100%; height: 68px; padding: 0 12px; - margin-top: 12px; + margin-top: 20px; `; export const Topic = styled.div` @@ -46,31 +49,14 @@ export const Topic = styled.div` letter-spacing: 0.2px; `; -export const SkipButtonContainer = styled.div` - display: flex; - align-items: center; - justify-content: center; - width: 100%; - margin-top: 4px; - cursor: pointer; -`; - -export const SkipButton = styled.button` - font-size: 1.3rem; - font-weight: 400; - color: rgb(255 255 255 / 40%); - text-align: center; - text-decoration: underline; - cursor: pointer; -`; - export const SelectContainer = styled.div` display: flex; align-items: center; justify-content: center; width: 100%; - height: 188px; - margin-top: 37px; + height: 220px; + margin-top: 20px; + margin-bottom: 7px; `; export const UserInfoContainer = styled.div` @@ -80,12 +66,21 @@ export const UserInfoContainer = styled.div` justify-content: center; width: 100%; height: 25px; - margin-top: 49px; + margin-top: 4px; `; export const UserProfileImage = styled.div` width: 20px; height: 20px; - background-color: #bcbcbc; + background-color: #555; border-radius: 50%; `; + +export const SelectTextContainer = styled.div` + display: flex; + gap: 6px; + align-items: center; + justify-content: space-between; + height: 25px; + margin: 4px 0 0; +`; diff --git a/src/components/TopicCard/TopicCard.tsx b/src/components/TopicCard/TopicCard.tsx index 61518df..a8f59d3 100644 --- a/src/components/TopicCard/TopicCard.tsx +++ b/src/components/TopicCard/TopicCard.tsx @@ -1,36 +1,35 @@ -import React from 'react'; +import React, { useState } from 'react'; import { useNavigate } from 'react-router'; +import CommentBox from '@components/CommentBox/CommentBox'; import Text from '@components/Text/Text'; import Timer from '@components/Timer/Timer'; import { colors } from '@styles/theme'; +import { LeftDoubleArrowIcon, MeatballIcon, RightDoubleArrowIcon } from '@icons/index'; + import { BestTopicCotainer, TopicContainer, Topic, - SkipButtonContainer, - SkipButton, SelectContainer, UserInfoContainer, UserProfileImage, TopicCardContainer, + SelectTextContainer, } from './TopicCard.styles'; const TopicCard = () => { - const profileName = '체리체리체리체리'; + const [hasVoted, setHasVoted] = useState(false); + + const profileName = '닉네임닉네임'; const topic = '10년전 또는 후로 갈 수 있다면?'; const endTime = new Date(); endTime.setHours(endTime.getHours() + 4); const navigate = useNavigate(); - const handleSkipButton = () => { - /*현재토픽 skip 후 다음토픽 으로 이동*/ - navigate('/login'); - }; - return ( @@ -41,17 +40,29 @@ const TopicCard = () => { {topic} - - 이런 토픽은 안볼래요 - - - - - {profileName} 님의 토픽 + + {profileName} + + + + + + 밀어서 선택하기 + + + + ); };