diff --git a/src/components/answerlist/AnswerComp.tsx b/src/components/answerlist/AnswerItem.tsx similarity index 84% rename from src/components/answerlist/AnswerComp.tsx rename to src/components/answerlist/AnswerItem.tsx index 4f04330..ccaa936 100644 --- a/src/components/answerlist/AnswerComp.tsx +++ b/src/components/answerlist/AnswerItem.tsx @@ -1,6 +1,7 @@ import React, { useState } from 'react' import styled from 'styled-components' import { Answer } from 'types/Answer' +import heart from './../../assets/heart.svg' function AnswerComp({ name, contents, time, likeNum }: Answer) { const [like, setLike] = useState(likeNum) @@ -9,11 +10,12 @@ function AnswerComp({ name, contents, time, likeNum }: Answer) { return ( <> -
{name}
+
{name}
{contents}
{time}
+ heart icon {like}
@@ -31,34 +33,34 @@ const AnswerBlock = styled.div` margin: 15px 15px 0px; text-align: left; border-bottom: 1px solid #5e5474; + font-weight: normal; + font-size: 14px; - .userName { - font-weight: 400; - } .contents { display: inline-block; width: 328px; height: fit-content; margin: 10px 0px; line-height: 130%; - font-size: 11pt; } ` const AnswerInfoBlock = styled.div` display: flex; margin-bottom: 10px; + font-weight: normal; + font-size: 12px; .time { display: inline-block; color: #716d74; align-items: center; justify-content: center; - padding-right: 80px; + padding-right: 120px; padding-top: 10px; } .likeButton { - display: felx; + display: flex; width: 80px; height: 24px; align-items: center; diff --git a/src/components/answerlist/AnswerList.tsx b/src/components/answerlist/AnswerList.tsx index 25ba940..09b1e5d 100644 --- a/src/components/answerlist/AnswerList.tsx +++ b/src/components/answerlist/AnswerList.tsx @@ -1,5 +1,5 @@ import React, { useState } from 'react' -import AnswerComp from './AnswerComp' +import AnswerComp from './AnswerItem' import styled from 'styled-components' import { AnswerListProps } from 'types/Answer' @@ -28,8 +28,10 @@ const AnswerListLayout = styled.div` position: relative; width: 360px; height: fit-content; + margin-top: 20px; + padding-top: 40px; background-color: #514184; - border-radius: 16px 16px 0px 0px; + border-radius: 32px 32px 0px 0px; color: white; ` const AnswerInput = styled.textarea` @@ -45,7 +47,13 @@ const AnswerInput = styled.textarea` ::placeholder { color: white; padding: 10px; + font-weight: normal; + font-size: 12px; } + padding: 10px; + font-weight: normal; + font-size: 12px; + color: white; ` const AnswerInputButton = styled.button` width: 360px; diff --git a/src/pages/Concern.tsx b/src/pages/Concern.tsx index 9a88cc5..2bd58d8 100644 --- a/src/pages/Concern.tsx +++ b/src/pages/Concern.tsx @@ -24,7 +24,7 @@ const dummy: Answer[] = [ { name: '로또', contents: - '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데...', + '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...', time: '2010.02.12 오전 08:01', likeNum: 20, },