답변 리스트 UI 수정 (mash-up-kr#2)

* feat: AnswerItem UI 수정 * wip: AnswerList UI 수정
godjoy · Feb 27, 2021 · c8456cf · c8456cf
1 parent 9701e1d
commit c8456cf
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/src/components/answerlist/AnswerComp.tsx → src/components/answerlist/AnswerItem.tsx b/src/components/answerlist/AnswerComp.tsx → 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<number>(likeNum)
@@ -9,11 +10,12 @@ function AnswerComp({ name, contents, time, likeNum }: Answer) {
   return (
     <>
       <AnswerBlock>
-        <div className="userName">{name}</div>
+        <div>{name}</div>
         <div className="contents">{contents}</div>
         <AnswerInfoBlock>
           <div className="time">{time}</div>
           <div className="likeButton" onClick={addLike}>
+            <img src={heart} alt="heart icon" />
             {like}
           </div>
         </AnswerInfoBlock>
@@ -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
@@ -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
@@ -24,7 +24,7 @@ const dummy: Answer[] = [
   {
     name: '로또',
     contents:
-      '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데...',
+      '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...',
     time: '2010.02.12 오전 08:01',
     likeNum: 20,
   },