mash-up-kr#2 AnswerItem export styled file

godjoy · Mar 26, 2021 · c25e04e · c25e04e
1 parent 373cf78
commit c25e04e
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 57 deletions.
diff --git a/src/components/answerlist/AnswerItem.Styled.ts b/src/components/answerlist/AnswerItem.Styled.ts
@@ -0,0 +1,45 @@
+import styled from 'styled-components'
+
+export const AnswerArea = styled.div`
+  display: inline-block;
+  width: 328px;
+  height: fit-content;
+  margin: 15px 15px 0px;
+  text-align: left;
+  border-bottom: 1px solid #5e5474;
+  font-weight: normal;
+  font-size: 14px;
+
+  .contents {
+    margin: 10px 0px;
+    line-height: 130%;
+  }
+`
+
+export const AnswerInfoBlock = styled.div`
+  display: flex;
+  margin-bottom: 10px;
+  font-weight: normal;
+  font-size: 12px;
+
+  .time {
+    display: inline-block;
+    color: ${props => props.theme.colors.gray07};
+    align-items: center;
+    justify-content: center;
+    padding-right: 120px;
+    padding-top: 10px;
+  }
+
+  .likeButton {
+    display: flex;
+    width: 80px;
+    height: 24px;
+    align-items: center;
+    justify-content: center;
+    background-color: ${props => props.theme.colors.purpleGray};
+    border-radius: 5px;
+    text-align: center;
+    cursor: pointer;
+  }
+`
diff --git a/src/components/answerlist/AnswerItem.tsx b/src/components/answerlist/AnswerItem.tsx
@@ -1,71 +1,29 @@
 import React, { useState } from 'react'
-import styled from 'styled-components'
-import { Answer } from 'types/Answer'
+import * as Styled from './AnswerItem.Styled'
+import { Answer, AnswerListProps } from 'types/Answer'
 import heart from './../../assets/heart.svg'
 
-function AnswerItem({ name, contents, time, likeNum }: Answer) {
-  const [like, setLike] = useState<number>(likeNum)
+interface AnswerItemProps {
+  answer: any
+}
+
+function AnswerItem({ answer }: AnswerItemProps) {
+  const [like, setLike] = useState<number>(answer.likeNum)
   const addLike = () => setLike(like + 1)
 
   return (
-    <AnswerBlock>
-      <div>{name}</div>
-      <div className="contents">{contents}</div>
-      <AnswerInfoBlock>
-        <div className="time">{time}</div>
+    <Styled.AnswerArea>
+      <div>{answer.name}</div>
+      <div className="contents">{answer.contents}</div>
+      <Styled.AnswerInfoBlock>
+        <div className="time">{answer.time}</div>
         <div className="likeButton" onClick={addLike}>
           <img src={heart} alt="heart icon" />
           {like}
         </div>
-      </AnswerInfoBlock>
-    </AnswerBlock>
+      </Styled.AnswerInfoBlock>
+    </Styled.AnswerArea>
   )
 }
 
 export default AnswerItem
-
-const AnswerBlock = styled.div`
-  display: inline-block;
-  width: 328px;
-  height: fit-content;
-  margin: 15px 15px 0px;
-  text-align: left;
-  border-bottom: 1px solid #5e5474;
-  font-weight: normal;
-  font-size: 14px;
-
-  .contents {
-    display: inline-block;
-    width: 328px;
-    height: fit-content;
-    margin: 10px 0px;
-    line-height: 130%;
-  }
-`
-const AnswerInfoBlock = styled.div`
-  display: flex;
-  margin-bottom: 10px;
-  font-weight: normal;
-  font-size: 12px;
-
-  .time {
-    display: inline-block;
-    color: ${props => props.theme.colors.gray07};
-    align-items: center;
-    justify-content: center;
-    padding-right: 120px;
-    padding-top: 10px;
-  }
-
-  .likeButton {
-    display: flex;
-    width: 80px;
-    height: 24px;
-    align-items: center;
-    justify-content: center;
-    background-color: ${props => props.theme.colors.purpleGray};
-    border-radius: 5px;
-    text-align: center;
-    cursor: pointer;
-  }
-`