Feat/home comment

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,
 };

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;
   }

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;

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%);
+`;

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 (
+    <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;

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;

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;
+`;