merge develop feature/answerlist (mash-up-kr#2)

src/components/ConcernItem/ConcernItem.styled.ts

@@ -0,0 +1,57 @@
+import styled from 'styled-components'
+
+export const ConcernWrapper = styled.div`
+  display: flex;
+  padding: 12px 8px;
+  background-color: ${({ theme }) => theme.colors.white};
+  border-radius: 10px;
+`
+
+export const CategoryWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-right: 8px;
+  padding: 5px 0;
+`
+
+export const CategoryImage = styled.img`
+  width: 52px;
+  height: 52px;
+`
+
+export const Category = styled.p`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 48px;
+  height: 16px;
+  margin-top: 5px;
+  background-color: ${({ theme }) => theme.colors.green};
+  font-size: 12px;
+  border-radius: 8px;
+`
+
+export const ContentWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+`
+
+export const Title = styled.p`
+  font-size: 14px;
+  font-weight: bold;
+`
+
+export const Content = styled.p`
+  height: 32px;
+  margin-top: 6px;
+  overflow: hidden;
+  font-size: 12px;
+`
+
+export const CreatedAt = styled.p`
+  margin-top: auto;
+  color: ${({ theme }) => theme.colors.purpleGray};
+  font-size: 12px;
+`

src/components/ConcernItem/ConcernItem.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+
+import * as Styled from './ConcernItem.styled'
+
+interface ConcernItemProps {
+  concern: any
+}
+
+function ConcernItem({ concern }: ConcernItemProps) {
+  return (
+    <Styled.ConcernWrapper>
+      <Styled.CategoryWrapper>
+        <Styled.CategoryImage src={concern.category.imageUrl} alt="" />
+        <Styled.Category>{concern.category.name}</Styled.Category>
+      </Styled.CategoryWrapper>
+      <Styled.ContentWrapper>
+        <Styled.Title>{concern.title}</Styled.Title>
+        <Styled.Content>{concern.content}</Styled.Content>
+        <Styled.CreatedAt>{concern.createdAt}</Styled.CreatedAt>
+      </Styled.ContentWrapper>
+    </Styled.ConcernWrapper>
+  )
+}
+
+export default ConcernItem

src/components/ConcernItem/index.ts

@@ -0,0 +1 @@
+export { default } from './ConcernItem'

src/components/ConcernList/ConcernList.styled.ts

@@ -0,0 +1,11 @@
+import styled from 'styled-components'
+
+import { ConcernWrapper } from 'components/ConcernItem/ConcernItem.styled'
+
+export const ConcernListWrapper = styled.div`
+  padding: 0 16px;
+
+  ${ConcernWrapper} + ${ConcernWrapper} {
+    margin-top: 12px;
+  }
+`

src/components/ConcernList/ConcernList.tsx

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react'
+
+import ConcernItem from 'components/ConcernItem'
+import * as Styled from './ConcernList.styled'
+
+interface ConcernListProps {
+  concernList: any
+}
+
+function ConcernList({ concernList }: ConcernListProps) {
+  const concerns = useMemo(() => {
+    return concernList.map(concern => (
+      <ConcernItem key={concern.id} concern={concern} />
+    ))
+  }, [concernList])
+
+  return <Styled.ConcernListWrapper>{concerns}</Styled.ConcernListWrapper>
+}
+
+export default ConcernList

src/components/ConcernList/index.ts

@@ -0,0 +1 @@
+export { default } from './ConcernList'

src/components/concern/Concern.styled.ts

@@ -0,0 +1,109 @@
+import styled from 'styled-components'
+
+export const ConcernCard = styled.div`
+  width: 300px;
+  height: 435px;
+  background-color: ${props => props.theme.colors.darkGray3};
+  border: 1px solid ${props => props.theme.colors.point};
+  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+  border-radius: 10px;
+`
+export const TitleBox = styled.div`
+  padding: 10px;
+`
+
+export const CategoryWrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`
+export const DistanceArea = styled.div`
+  font-size: 11px;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  color: ${props => props.theme.colors.gray05};
+`
+
+export const CategoryArea = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  margin-top: 15px;
+`
+
+export const AnimalArea = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: center;
+`
+export const HashtagArea = styled.div`
+  display: flex;
+`
+
+export const Hashtag = styled.div<{ background?: string }>`
+  width: 64px;
+  height: 20px;
+  display: flex;
+  justify-content: center;
+  color: ${props => props.theme.colors.gray11};
+  background: ${props => props.background};
+  font-size: 12px;
+  align-items: center;
+  border-radius: 3px;
+  margin: 5px;
+`
+
+export const Writer = styled.div`
+  color: ${props => props.theme.colors.gray05};
+  font-size: 12px;
+  margin-top: 8px;
+`
+
+export const ShareArea = styled.div`
+  flex: 1;
+  display: flex;
+  justify-content: flex-end;
+`
+export const Title = styled.div`
+  color: #fff;
+  font-size: 14px;
+  font-weight: 600;
+  margin-top: 8px;
+  text-align: center;
+`
+
+export const DividerArea = styled.div`
+  display: flex;
+  justify-content: center;
+  padding: 10px 0 20px;
+`
+export const Divider = styled.div`
+  width: 280px;
+  border: 1px solid ${props => props.theme.colors.purpleGray};
+`
+export const ContentBox = styled.div`
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 16px;
+`
+export const Content = styled.div`
+  font-weight: normal;
+  font-size: 14px;
+  line-height: 130%;
+`
+export const LikeButton = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  width: 80px;
+  height: 24px;
+  cursor: pointer;
+  border-radius: 3px;
+  background-color: ${props => props.theme.colors.purpleGray};
+  margin-top: 16px;
+`

src/components/concern/ConcernCard.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import * as Styled from './Concern.styled'
+import location from './../../assets/location.svg'
+import share from './../../assets/share.svg'
+import love from './../../assets/love.svg'
+import heart from './../../assets/heart.svg'
+import colors from './../../constants/colors'
+const ConcernCard = () => {
+  return (
+    <Styled.ConcernCard>
+      <Styled.TitleBox>
+        <Styled.CategoryWrapper>
+          <Styled.DistanceArea>
+            <img src={location} alt="location icon" /> 15km
+          </Styled.DistanceArea>
+          <Styled.ShareArea>
+            <img src={share} alt="location icon" />
+          </Styled.ShareArea>
+        </Styled.CategoryWrapper>
+        <Styled.CategoryWrapper>
+          <Styled.CategoryArea>
+            <Styled.AnimalArea>
+              <img src={love} alt="location icon" />
+            </Styled.AnimalArea>
+            <Styled.HashtagArea>
+              <Styled.Hashtag background={colors.yellow}>
+                # 연애고민
+              </Styled.Hashtag>
+              <Styled.Hashtag background={colors.green}># 기쁨</Styled.Hashtag>
+            </Styled.HashtagArea>
+            <Styled.Writer>소양이팀 작성</Styled.Writer>
+          </Styled.CategoryArea>
+        </Styled.CategoryWrapper>
+        <Styled.Title>남자친구의 판도라 상자를 열었따!</Styled.Title>
+      </Styled.TitleBox>
+      <Styled.DividerArea>
+        <Styled.Divider />
+      </Styled.DividerArea>
+
+      <Styled.ContentBox>
+        <Styled.Content>
+          남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을
+          우연히 보게 되었어요... 평소 참 잘해주던 사람인데... 평소 참 잘해주던
+          사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데...
+          평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참
+          잘해주던 사람인데...
+        </Styled.Content>
+        <Styled.LikeButton>
+          <img src={heart} alt="location icon" />
+          508
+        </Styled.LikeButton>
+      </Styled.ContentBox>
+    </Styled.ConcernCard>
+  )
+}
+
+export default ConcernCard

src/components/layout/Layout.styled.ts

@@ -6,4 +6,12 @@ export const MainLayout = styled.div`
   min-height: 640px;
   background-color: ${props => props.theme.colors.background};
 `
-export const Header = styled('div')``
+export const Header = styled('div')`
+  font-weight: bold;
+  font-size: 20px;
+  line-height: 23px;
+  text-align: center;
+  text-align: center;
+  color: #ffffff;
+  padding: 18px 0 20px;
+`

src/constants/colors.ts

@@ -14,10 +14,12 @@ const colors = {
   purpleGray: '#5E5474',
   darkGray1: '#514184',
   darkGray2: '#473D65',
+  darkGray3: '#41375F',
   yellow: '#FFE815',
   red: '#FF6060',
   green: '#6DECA2',
   background: '#312651',
+  white: '#FFF',
 }
 
 export default colors

src/containers/ConcernContainer.styled.ts

@@ -0,0 +1,6 @@
+import styled from 'styled-components'
+
+export const ConcernContainer = styled.div`
+  display: flex;
+  justify-content: center;
+`

src/containers/ConcernContainer.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import ConcernCard from 'components/concern/ConcernCard'
+import * as Styled from './ConcernContainer.styled'
+
+const ConcernContainer = () => {
+  return (
+    <Styled.ConcernContainer>
+      <ConcernCard />
+    </Styled.ConcernContainer>
+  )
+}
+export default ConcernContainer

src/containers/ConcernListContainer.tsx

@@ -0,0 +1,46 @@
+import React from 'react'
+
+import ConcernList from 'components/ConcernList'
+
+const MOCK_CONCERN_LIST = [
+  {
+    id: 1,
+    title: 'title1',
+    content: 'content1',
+    createdAt: '2010.02.12 오전 08:00 ',
+    category: {
+      name: '연애',
+      imageUrl: '',
+    },
+  },
+  {
+    id: 2,
+    title: 'title2',
+    content: 'content2',
+    createdAt: '2010.02.12 오전 08:00 ',
+    category: {
+      name: '연애',
+      imageUrl: '',
+    },
+  },
+  {
+    id: 3,
+    title: 'title3',
+    content: 'content3',
+    createdAt: '2010.02.12 오전 08:00 ',
+    category: {
+      name: '연애',
+      imageUrl: '',
+    },
+  },
+]
+
+function ConcernListContainer() {
+  return (
+    <>
+      <ConcernList concernList={MOCK_CONCERN_LIST} />
+    </>
+  )
+}
+
+export default ConcernListContainer