From a3663d43d4e74b9670f6fe2dd69f8647ac4bad3d Mon Sep 17 00:00:00 2001 From: NuclearPunch <46371339+NuclearPunch@users.noreply.github.com> Date: Sun, 28 Feb 2021 03:16:57 +0900 Subject: [PATCH 1/2] Feature/layout (#15) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * setting: 폴더이름 오타수정 * 라우팅 및 레이아웃 추가 (#10) * wip: 라우터 추가 * etc: commit prefix 추가 * wip: 라우팅, 공통 레이아웃 추가 * styled theme작성 (#11) * setting: (#8) styled components에 theme주입 및 폰트적용 * setting: (#8) media주입 * 컨플릭트 해결 및 assets 추가 (#12) * wip: 라우터 추가 * wip: 라우팅, 공통 레이아웃 추가 * etc: 컨플리트 해결 * etc: added assets * feat: svg컴포넌트 작성 (#13) * feat: svg컴포넌트 작성 * feat: lodash-es 모듈 추가 * wip: 라우터 추가 * wip: 라우팅, 공통 레이아웃 추가 * etc: assets 추가 * wip: layout css 추가 * feat: 카드 UI 완성 Co-authored-by: danivelop Co-authored-by: danivelop <55433950+danivelop@users.noreply.github.com> --- README.md | 1 + package.json | 2 + public/index.html | 25 +---- src/App.tsx | 12 ++- src/Routes.tsx | 20 ++++ src/assets/etc.svg | 44 +++++++++ src/assets/food.svg | 48 ++++++++++ src/assets/heart.svg | 3 + src/assets/job.svg | 32 +++++++ src/assets/location.svg | 3 + src/assets/love.svg | 31 ++++++ src/assets/relationship.svg | 64 +++++++++++++ src/assets/share.svg | 4 + src/assets/study.svg | 35 +++++++ src/components/.gitkeep | 0 src/components/concern/Concern.styled.ts | 109 ++++++++++++++++++++++ src/components/concern/ConcernCard.tsx | 57 +++++++++++ src/components/layout/Layout.styled.ts | 17 ++++ src/components/layout/index.tsx | 19 ++++ src/constants/colors.ts | 25 +++++ src/constants/media.ts | 17 ++++ src/containers/ConcernContainer.styled.ts | 6 ++ src/containers/ConcernContainer.tsx | 12 +++ src/contants/.gitkeep | 0 src/elements/SVGIcon/SVGIcon.styled.ts | 19 ++++ src/elements/SVGIcon/SVGIcon.tsx | 32 +++++++ src/elements/SVGIcon/index.ts | 1 + src/global-styles.ts | 65 ++++++++----- src/index.tsx | 12 ++- src/pages/.gitkeep | 0 src/pages/Concern.tsx | 19 ++++ src/pages/Concerns.tsx | 5 + yarn.lock | 17 ++++ 33 files changed, 709 insertions(+), 47 deletions(-) create mode 100644 src/Routes.tsx create mode 100644 src/assets/etc.svg create mode 100644 src/assets/food.svg create mode 100644 src/assets/heart.svg create mode 100644 src/assets/job.svg create mode 100644 src/assets/location.svg create mode 100644 src/assets/love.svg create mode 100644 src/assets/relationship.svg create mode 100644 src/assets/share.svg create mode 100644 src/assets/study.svg delete mode 100644 src/components/.gitkeep create mode 100644 src/components/concern/Concern.styled.ts create mode 100644 src/components/concern/ConcernCard.tsx create mode 100644 src/components/layout/Layout.styled.ts create mode 100644 src/components/layout/index.tsx create mode 100644 src/constants/colors.ts create mode 100644 src/constants/media.ts create mode 100644 src/containers/ConcernContainer.styled.ts create mode 100644 src/containers/ConcernContainer.tsx delete mode 100644 src/contants/.gitkeep create mode 100644 src/elements/SVGIcon/SVGIcon.styled.ts create mode 100644 src/elements/SVGIcon/SVGIcon.tsx create mode 100644 src/elements/SVGIcon/index.ts delete mode 100644 src/pages/.gitkeep create mode 100644 src/pages/Concern.tsx create mode 100644 src/pages/Concerns.tsx diff --git a/README.md b/README.md index a942e08..76f1acf 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,7 @@ - hot-fix 핫 버그 수정 - bug-fix 버그 수정 - refactor 기능 수정 추가 및 코드 수정 +- wip 작업 중일 때 #### Commit Prefix diff --git a/package.json b/package.json index 86d8165..fb2c492 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,7 @@ "dependencies": { "chalk": "4.1.0", "cross-env": "7.0.2", + "lodash-es": "4.17.21", "node-plop": "0.26.2", "plop": "2.7.4", "prettier": "2.1.1", @@ -26,6 +27,7 @@ "@testing-library/react": "11.0.2", "@types/fontfaceobserver": "0.0.6", "@types/jest": "25.1.4", + "@types/lodash-es": "4.17.4", "@types/node": "14.6.4", "@types/react": "17.0.0", "@types/react-dom": "16.9.8", diff --git a/public/index.html b/public/index.html index 176324c..9519394 100644 --- a/public/index.html +++ b/public/index.html @@ -10,35 +10,12 @@ content="Web site created using create-react-app" /> - - + React App
- - diff --git a/src/App.tsx b/src/App.tsx index 427a581..ce4b5bc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,17 @@ import React from 'react' +import { BrowserRouter } from 'react-router-dom' +import { GlobalStyle } from 'global-styles' +import Routes from 'Routes' function App() { - return
hello world!
+ return ( + <> + + + + + + ) } export default App diff --git a/src/Routes.tsx b/src/Routes.tsx new file mode 100644 index 0000000..656e17a --- /dev/null +++ b/src/Routes.tsx @@ -0,0 +1,20 @@ +import React, { FC } from 'react' +import { + Route, + RouteComponentProps, + Switch, + withRouter, +} from 'react-router-dom' +import Concerns from 'pages/Concerns' +import Concern from 'pages/Concern' + +const Routes: FC = () => { + return ( + + + + + ) +} + +export default withRouter(Routes) diff --git a/src/assets/etc.svg b/src/assets/etc.svg new file mode 100644 index 0000000..3109ba3 --- /dev/null +++ b/src/assets/etc.svg @@ -0,0 +1,44 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/food.svg b/src/assets/food.svg new file mode 100644 index 0000000..8483ddf --- /dev/null +++ b/src/assets/food.svg @@ -0,0 +1,48 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/heart.svg b/src/assets/heart.svg new file mode 100644 index 0000000..e5e7989 --- /dev/null +++ b/src/assets/heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/job.svg b/src/assets/job.svg new file mode 100644 index 0000000..f4e0d52 --- /dev/null +++ b/src/assets/job.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/location.svg b/src/assets/location.svg new file mode 100644 index 0000000..0455ad5 --- /dev/null +++ b/src/assets/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/love.svg b/src/assets/love.svg new file mode 100644 index 0000000..6ee876f --- /dev/null +++ b/src/assets/love.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/relationship.svg b/src/assets/relationship.svg new file mode 100644 index 0000000..9f7305b --- /dev/null +++ b/src/assets/relationship.svg @@ -0,0 +1,64 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/share.svg b/src/assets/share.svg new file mode 100644 index 0000000..ffa0474 --- /dev/null +++ b/src/assets/share.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/study.svg b/src/assets/study.svg new file mode 100644 index 0000000..80ed30b --- /dev/null +++ b/src/assets/study.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/.gitkeep b/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/components/concern/Concern.styled.ts b/src/components/concern/Concern.styled.ts new file mode 100644 index 0000000..b50af85 --- /dev/null +++ b/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; +` diff --git a/src/components/concern/ConcernCard.tsx b/src/components/concern/ConcernCard.tsx new file mode 100644 index 0000000..f049b6e --- /dev/null +++ b/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 ( + + + + + location icon 15km + + + location icon + + + + + + location icon + + + + # 연애고민 + + # 기쁨 + + 소양이팀 작성 + + + 남자친구의 판도라 상자를 열었따! + + + + + + + + 남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 + 우연히 보게 되었어요... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 + 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... + 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 + 잘해주던 사람인데... + + + location icon + 508 + + + + ) +} + +export default ConcernCard diff --git a/src/components/layout/Layout.styled.ts b/src/components/layout/Layout.styled.ts new file mode 100644 index 0000000..53ac40d --- /dev/null +++ b/src/components/layout/Layout.styled.ts @@ -0,0 +1,17 @@ +import styled from 'styled-components' + +export const MainLayout = styled.div` + min-width: 360px; + max-width: 640px; + min-height: 640px; + background-color: ${props => props.theme.colors.background}; +` +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; +` diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx new file mode 100644 index 0000000..ae1fb79 --- /dev/null +++ b/src/components/layout/index.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import { MainLayout, Header } from './Layout.styled' + +const Layout = ({ + title = '', + children, +}: { + title: string + children: React.ReactNode +}) => { + return ( + +
{title}
+ {children} + + ) +} + +export default Layout diff --git a/src/constants/colors.ts b/src/constants/colors.ts new file mode 100644 index 0000000..fb7277e --- /dev/null +++ b/src/constants/colors.ts @@ -0,0 +1,25 @@ +const colors = { + gray01: '#EFEFEF', + gray02: '#DBD6DD', + gray03: '#D1CCD3', + gray04: '#BEB9C1', + gray05: '#9E9B9F', + gray06: '#858388', + gray07: '#716D74', + gray08: '#676569', + gray09: '#5B5A5C', + gray10: '#4B494D', + gray11: '#111111', + point: '#8567FF', + purpleGray: '#5E5474', + darkGray1: '#514184', + darkGray2: '#473D65', + darkGray3: '#41375F', + yellow: '#FFE815', + red: '#FF6060', + green: '#6DECA2', + background: '#312651', + PurpleGray: '#5E5474', +} + +export default colors diff --git a/src/constants/media.ts b/src/constants/media.ts new file mode 100644 index 0000000..26a47b7 --- /dev/null +++ b/src/constants/media.ts @@ -0,0 +1,17 @@ +const deviceSizes = { + mobileS: '320px', + mobileM: '375px', + mobileL: '450px', + tabletM: '768px', + tabletL: '1024px', +} + +const media = { + mobileS: `(max-width: ${deviceSizes.mobileS})`, + mobileM: `(max-width: ${deviceSizes.mobileM})`, + mobileL: `(max-width: ${deviceSizes.mobileL})`, + tabletM: `(max-width: ${deviceSizes.tabletM})`, + tabletL: `(max-width: ${deviceSizes.tabletL})`, +} + +export default media diff --git a/src/containers/ConcernContainer.styled.ts b/src/containers/ConcernContainer.styled.ts new file mode 100644 index 0000000..273adde --- /dev/null +++ b/src/containers/ConcernContainer.styled.ts @@ -0,0 +1,6 @@ +import styled from 'styled-components' + +export const ConcernContainer = styled.div` + display: flex; + justify-content: center; +` diff --git a/src/containers/ConcernContainer.tsx b/src/containers/ConcernContainer.tsx new file mode 100644 index 0000000..7453222 --- /dev/null +++ b/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 ( + + + + ) +} +export default ConcernContainer diff --git a/src/contants/.gitkeep b/src/contants/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/elements/SVGIcon/SVGIcon.styled.ts b/src/elements/SVGIcon/SVGIcon.styled.ts new file mode 100644 index 0000000..5f1d183 --- /dev/null +++ b/src/elements/SVGIcon/SVGIcon.styled.ts @@ -0,0 +1,19 @@ +/* External dependencies */ +import styled from 'styled-components' + +interface SVGIconWrapperProps { + size: number +} + +export const SVGIconWrapper = styled.div` + width: ${props => props.size}px; + height: ${props => props.size}px; + display: flex; + justify-content: center; + align-items: center; +` + +export const SVGIcon = styled.img` + width: 100%; + height: 100%; +` diff --git a/src/elements/SVGIcon/SVGIcon.tsx b/src/elements/SVGIcon/SVGIcon.tsx new file mode 100644 index 0000000..084f79d --- /dev/null +++ b/src/elements/SVGIcon/SVGIcon.tsx @@ -0,0 +1,32 @@ +/* External dependencies */ +import React, { useMemo } from 'react' +import { endsWith } from 'lodash-es' + +/* Internal dependencies */ +import * as Styled from './SVGIcon.styled' + +interface SVGIconProps { + name: string + size: number +} + +function SVGIcon({ name, size }: SVGIconProps) { + const src = useMemo(() => { + const fileName = endsWith(name, '.svg') ? name : `${name}.svg` + try { + return require(`assets/${fileName}`) + } catch (e) { + console.error( + `cannot find icon name ${name}. Pleace check again. error message : ${e.message}`, + ) + } + }, [name]) + + return ( + + + + ) +} + +export default SVGIcon diff --git a/src/elements/SVGIcon/index.ts b/src/elements/SVGIcon/index.ts new file mode 100644 index 0000000..87c0760 --- /dev/null +++ b/src/elements/SVGIcon/index.ts @@ -0,0 +1 @@ +export { default } from './SVGIcon' diff --git a/src/global-styles.ts b/src/global-styles.ts index 52d6633..a529c96 100644 --- a/src/global-styles.ts +++ b/src/global-styles.ts @@ -1,29 +1,52 @@ -import { createGlobalStyle } from 'styled-components'; +import { createGlobalStyle } from 'styled-components' export const GlobalStyle = createGlobalStyle` - html, - body { - height: 100%; - width: 100%; + html, body, div, span, applet, object, iframe, + h1, h2, h3, h4, h5, h6, p, blockquote, pre, + a, abbr, acronym, address, big, cite, code, + del, dfn, em, img, ins, kbd, q, s, samp, + small, strike, strong, sub, sup, tt, var, + b, u, i, center, + dl, dt, dd, ol, ul, li, + fieldset, form, label, legend, + table, caption, tbody, tfoot, thead, tr, th, td, + article, aside, canvas, details, embed, + figure, figcaption, footer, header, hgroup, + menu, nav, output, ruby, section, summary, + time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; + } + /* HTML5 display-role reset for older browsers */ + article, aside, details, figcaption, figure, + footer, header, hgroup, menu, nav, section { + display: block; } - body { - font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; + line-height: 1; + font-family: 'NanumSquareRound', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } - - #root { - min-height: 100%; - min-width: 100%; + ol, ul { + list-style: none; } - - p, - label { - font-family: Georgia, Times, 'Times New Roman', serif; - line-height: 1.5em; + blockquote, q { + quotes: none; } - - input, select { - font-family: inherit; - font-size: inherit; + blockquote:before, blockquote:after, + q:before, q:after { + content: ''; + content: none; + } + table { + border-collapse: collapse; + border-spacing: 0; } -`; +` diff --git a/src/index.tsx b/src/index.tsx index c6af1d2..ad9bf3e 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,14 +3,24 @@ import 'react-app-polyfill/stable' import React from 'react' import ReactDOM from 'react-dom' +import { ThemeProvider } from 'styled-components' +import colors from 'constants/colors' +import media from 'constants/media' import App from 'App' import * as serviceWorker from 'serviceWorker' import 'sanitize.css/sanitize.css' +const theme = { + colors, + media, +} + ReactDOM.render( - + + + , document.getElementById('root'), ) diff --git a/src/pages/.gitkeep b/src/pages/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/pages/Concern.tsx b/src/pages/Concern.tsx new file mode 100644 index 0000000..1e10d5b --- /dev/null +++ b/src/pages/Concern.tsx @@ -0,0 +1,19 @@ +import React from 'react' +import Layout from 'components/layout' +import ConcernContainer from 'containers/ConcernContainer' + +// export const TitleBox = styled.div`` +// export const CategoryWrapper = styled.div`` +// export const DistanceArea = styled.div`` +// export const CategoryArea = styled.div`` +// export const ShareArea = styled.div`` +// export const Title = styled.div`` +// export const Divider = styled.div`` +// export const ContentBox = styled.div`` + +const Concern = () => ( + + + +) +export default Concern diff --git a/src/pages/Concerns.tsx b/src/pages/Concerns.tsx new file mode 100644 index 0000000..356d30b --- /dev/null +++ b/src/pages/Concerns.tsx @@ -0,0 +1,5 @@ +import React from 'react' +import Layout from 'components/layout' + +const Concerns = () => 고민 리스트 +export default Concerns diff --git a/yarn.lock b/yarn.lock index 74d2bfb..f869695 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1867,6 +1867,18 @@ "@types/interpret" "*" "@types/node" "*" +"@types/lodash-es@4.17.4": + version "4.17.4" + resolved "https://registry.yarnpkg.com/@types/lodash-es/-/lodash-es-4.17.4.tgz#b2e440d2bf8a93584a9fd798452ec497986c9b97" + integrity sha512-BBz79DCJbD2CVYZH67MBeHZRX++HF+5p8Mo5MzjZi64Wac39S3diedJYHZtScbRVf4DjZyN6LzA0SB0zy+HSSQ== + dependencies: + "@types/lodash" "*" + +"@types/lodash@*": + version "4.14.168" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.168.tgz#fe24632e79b7ade3f132891afff86caa5e5ce008" + integrity sha512-oVfRvqHV/V6D1yifJbVRU3TMp8OT6o6BG+U9MkwuJ3U8/CsDHvalRpsxBqivn71ztOFZBTfJMvETbqHiaNSj7Q== + "@types/mdast@^3.0.0": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.3.tgz#2d7d671b1cd1ea3deb306ea75036c2a0407d2deb" @@ -8006,6 +8018,11 @@ locate-path@^5.0.0: dependencies: p-locate "^4.1.0" +lodash-es@4.17.21: + version "4.17.21" + resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee" + integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw== + lodash._reinterpolate@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d" From 702911cb395e6cccf31887c42b90d06c7142a355 Mon Sep 17 00:00:00 2001 From: danivelop <55433950+danivelop@users.noreply.github.com> Date: Sun, 28 Feb 2021 03:29:45 +0900 Subject: [PATCH 2/2] =?UTF-8?q?feat:=20(#6)=20=EA=B3=A0=EB=AF=BC=EB=A6=AC?= =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20UI=EC=9E=91=EC=84=B1=20(#16)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ConcernItem/ConcernItem.styled.ts | 57 +++++++++++++++++++ src/components/ConcernItem/ConcernItem.tsx | 25 ++++++++ src/components/ConcernItem/index.ts | 1 + .../ConcernList/ConcernList.styled.ts | 11 ++++ src/components/ConcernList/ConcernList.tsx | 20 +++++++ src/components/ConcernList/index.ts | 1 + src/constants/colors.ts | 1 + src/containers/ConcernListContainer.tsx | 46 +++++++++++++++ src/pages/Concerns.tsx | 10 +++- 9 files changed, 171 insertions(+), 1 deletion(-) create mode 100644 src/components/ConcernItem/ConcernItem.styled.ts create mode 100644 src/components/ConcernItem/ConcernItem.tsx create mode 100644 src/components/ConcernItem/index.ts create mode 100644 src/components/ConcernList/ConcernList.styled.ts create mode 100644 src/components/ConcernList/ConcernList.tsx create mode 100644 src/components/ConcernList/index.ts create mode 100644 src/containers/ConcernListContainer.tsx diff --git a/src/components/ConcernItem/ConcernItem.styled.ts b/src/components/ConcernItem/ConcernItem.styled.ts new file mode 100644 index 0000000..108bc8b --- /dev/null +++ b/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; +` diff --git a/src/components/ConcernItem/ConcernItem.tsx b/src/components/ConcernItem/ConcernItem.tsx new file mode 100644 index 0000000..2568ebf --- /dev/null +++ b/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 ( + + + + {concern.category.name} + + + {concern.title} + {concern.content} + {concern.createdAt} + + + ) +} + +export default ConcernItem diff --git a/src/components/ConcernItem/index.ts b/src/components/ConcernItem/index.ts new file mode 100644 index 0000000..af804a4 --- /dev/null +++ b/src/components/ConcernItem/index.ts @@ -0,0 +1 @@ +export { default } from './ConcernItem' diff --git a/src/components/ConcernList/ConcernList.styled.ts b/src/components/ConcernList/ConcernList.styled.ts new file mode 100644 index 0000000..8435919 --- /dev/null +++ b/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; + } +` diff --git a/src/components/ConcernList/ConcernList.tsx b/src/components/ConcernList/ConcernList.tsx new file mode 100644 index 0000000..dca93df --- /dev/null +++ b/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 => ( + + )) + }, [concernList]) + + return {concerns} +} + +export default ConcernList diff --git a/src/components/ConcernList/index.ts b/src/components/ConcernList/index.ts new file mode 100644 index 0000000..ebebae8 --- /dev/null +++ b/src/components/ConcernList/index.ts @@ -0,0 +1 @@ +export { default } from './ConcernList' diff --git a/src/constants/colors.ts b/src/constants/colors.ts index 88763e2..eacc4b8 100644 --- a/src/constants/colors.ts +++ b/src/constants/colors.ts @@ -19,6 +19,7 @@ const colors = { red: '#FF6060', green: '#6DECA2', background: '#312651', + white: '#FFF', } export default colors diff --git a/src/containers/ConcernListContainer.tsx b/src/containers/ConcernListContainer.tsx new file mode 100644 index 0000000..16bd62d --- /dev/null +++ b/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 ( + <> + + + ) +} + +export default ConcernListContainer diff --git a/src/pages/Concerns.tsx b/src/pages/Concerns.tsx index 356d30b..ffaacb3 100644 --- a/src/pages/Concerns.tsx +++ b/src/pages/Concerns.tsx @@ -1,5 +1,13 @@ import React from 'react' import Layout from 'components/layout' +import ConcernListContainer from 'containers/ConcernListContainer' + +const Concerns = () => { + return ( + + + + ) +} -const Concerns = () => 고민 리스트 export default Concerns