From 6afc785420497ab86de9045000d2e95daf7a0341 Mon Sep 17 00:00:00 2001 From: danivelop Date: Sat, 27 Feb 2021 17:55:40 +0900 Subject: [PATCH 01/17] =?UTF-8?q?setting:=20=ED=8F=B4=EB=8D=94=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EC=98=A4=ED=83=80=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/{contants => constants}/.gitkeep | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/{contants => constants}/.gitkeep (100%) diff --git a/src/contants/.gitkeep b/src/constants/.gitkeep similarity index 100% rename from src/contants/.gitkeep rename to src/constants/.gitkeep From 4856077c7d846669db64bb551758493161bdd2f2 Mon Sep 17 00:00:00 2001 From: NuclearPunch <46371339+NuclearPunch@users.noreply.github.com> Date: Sat, 27 Feb 2021 20:56:38 +0900 Subject: [PATCH 02/17] =?UTF-8?q?=EB=9D=BC=EC=9A=B0=ED=8C=85=20=EB=B0=8F?= =?UTF-8?q?=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip: 라우터 추가 * etc: commit prefix 추가 * wip: 라우팅, 공통 레이아웃 추가 --- README.md | 1 + src/App.tsx | 8 +++++++- src/Routes.tsx | 20 ++++++++++++++++++++ src/components/Layout.tsx | 5 +++++ src/pages/Concern.tsx | 4 ++++ src/pages/Concerns.tsx | 4 ++++ 6 files changed, 41 insertions(+), 1 deletion(-) create mode 100644 src/Routes.tsx create mode 100644 src/components/Layout.tsx 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/src/App.tsx b/src/App.tsx index 427a581..dc60905 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,7 +1,13 @@ import React from 'react' +import { BrowserRouter } from 'react-router-dom' +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/components/Layout.tsx b/src/components/Layout.tsx new file mode 100644 index 0000000..6bfaace --- /dev/null +++ b/src/components/Layout.tsx @@ -0,0 +1,5 @@ +import React from 'react' + +export default ({ children }) => { + return
{children}
+} diff --git a/src/pages/Concern.tsx b/src/pages/Concern.tsx new file mode 100644 index 0000000..71faeef --- /dev/null +++ b/src/pages/Concern.tsx @@ -0,0 +1,4 @@ +import React from 'react' +import Layout from 'components/Layout' + +export default () => 고민 보기 diff --git a/src/pages/Concerns.tsx b/src/pages/Concerns.tsx new file mode 100644 index 0000000..7520ea9 --- /dev/null +++ b/src/pages/Concerns.tsx @@ -0,0 +1,4 @@ +import React from 'react' +import Layout from 'components/Layout' + +export default () => 2 From 37d5e7e8bc055603fa7c6c29f6612748ae90df75 Mon Sep 17 00:00:00 2001 From: danivelop <55433950+danivelop@users.noreply.github.com> Date: Sat, 27 Feb 2021 21:25:01 +0900 Subject: [PATCH 03/17] =?UTF-8?q?styled=20theme=EC=9E=91=EC=84=B1=20(#11)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * setting: (#8) styled components에 theme주입 및 폰트적용 * setting: (#8) media주입 --- public/index.html | 25 +---------------- src/App.tsx | 13 ++++++--- src/components/.gitkeep | 0 src/constants/.gitkeep | 0 src/constants/colors.ts | 22 +++++++++++++++ src/constants/media.ts | 17 ++++++++++++ src/global-styles.ts | 61 +++++++++++++++++++++++++++-------------- src/index.tsx | 12 +++++++- src/pages/.gitkeep | 0 9 files changed, 100 insertions(+), 50 deletions(-) delete mode 100644 src/components/.gitkeep delete mode 100644 src/constants/.gitkeep create mode 100644 src/constants/colors.ts create mode 100644 src/constants/media.ts delete mode 100644 src/pages/.gitkeep 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 dc60905..3bfb3ba 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,12 +1,17 @@ import React from 'react' import { BrowserRouter } from 'react-router-dom' -import Routes from './Routes' +import { GlobalStyle } from 'global-styles' +import Routes from 'Routes' + function App() { return ( - - - + <> + + + + + ) } diff --git a/src/components/.gitkeep b/src/components/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants/.gitkeep b/src/constants/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/constants/colors.ts b/src/constants/colors.ts new file mode 100644 index 0000000..ef91c40 --- /dev/null +++ b/src/constants/colors.ts @@ -0,0 +1,22 @@ +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', + yellow: '#FFE815', + red: '#FF6060', + green: '#6DECA2', +} + +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/global-styles.ts b/src/global-styles.ts index 52d6633..18169f8 100644 --- a/src/global-styles.ts +++ b/src/global-styles.ts @@ -1,29 +1,48 @@ -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; } - - #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 From 26d26eae70b915adf4da2e427f62b305768bc4d7 Mon Sep 17 00:00:00 2001 From: NuclearPunch <46371339+NuclearPunch@users.noreply.github.com> Date: Sat, 27 Feb 2021 21:32:40 +0900 Subject: [PATCH 04/17] =?UTF-8?q?=EC=BB=A8=ED=94=8C=EB=A6=AD=ED=8A=B8=20?= =?UTF-8?q?=ED=95=B4=EA=B2=B0=20=EB=B0=8F=20assets=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?(#12)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip: 라우터 추가 * wip: 라우팅, 공통 레이아웃 추가 * etc: 컨플리트 해결 * etc: added assets --- src/App.tsx | 1 - src/assets/etc.svg | 44 +++++++++++++++++++++++++ src/assets/food.svg | 48 ++++++++++++++++++++++++++++ src/assets/job.svg | 32 +++++++++++++++++++ src/assets/love.svg | 31 ++++++++++++++++++ src/assets/relationship.svg | 64 +++++++++++++++++++++++++++++++++++++ src/assets/study.svg | 35 ++++++++++++++++++++ src/pages/Concerns.tsx | 2 +- 8 files changed, 255 insertions(+), 2 deletions(-) create mode 100644 src/assets/etc.svg create mode 100644 src/assets/food.svg create mode 100644 src/assets/job.svg create mode 100644 src/assets/love.svg create mode 100644 src/assets/relationship.svg create mode 100644 src/assets/study.svg diff --git a/src/App.tsx b/src/App.tsx index 3bfb3ba..ce4b5bc 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,5 @@ import React from 'react' import { BrowserRouter } from 'react-router-dom' - import { GlobalStyle } from 'global-styles' import Routes from '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/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/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/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/pages/Concerns.tsx b/src/pages/Concerns.tsx index 7520ea9..187dcea 100644 --- a/src/pages/Concerns.tsx +++ b/src/pages/Concerns.tsx @@ -1,4 +1,4 @@ import React from 'react' import Layout from 'components/Layout' -export default () => 2 +export default () => 고민 리스트 From 5c407a7d0b74711c691181786068626641521037 Mon Sep 17 00:00:00 2001 From: danivelop <55433950+danivelop@users.noreply.github.com> Date: Sat, 27 Feb 2021 22:13:18 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20svg=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EC=9E=91=EC=84=B1=20(#13)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: svg컴포넌트 작성 * feat: lodash-es 모듈 추가 --- package.json | 2 ++ src/elements/SVGIcon/SVGIcon.styled.ts | 19 +++++++++++++++ src/elements/SVGIcon/SVGIcon.tsx | 32 ++++++++++++++++++++++++++ src/elements/SVGIcon/index.ts | 1 + yarn.lock | 17 ++++++++++++++ 5 files changed, 71 insertions(+) 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 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/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/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 e097474fabaaaa13e29ec9b9fc6751c91d6a49fd Mon Sep 17 00:00:00 2001 From: NuclearPunch <46371339+NuclearPunch@users.noreply.github.com> Date: Sun, 28 Feb 2021 00:54:23 +0900 Subject: [PATCH 06/17] =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20cs?= =?UTF-8?q?s=20=20=EC=B6=94=EA=B0=80=20(#14)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * wip: 라우터 추가 * wip: 라우팅, 공통 레이아웃 추가 * etc: assets 추가 * wip: layout css 추가 --- src/assets/heart.svg | 3 +++ src/assets/location.svg | 3 +++ src/assets/share.svg | 4 ++++ src/components/Layout.tsx | 5 ----- src/components/layout/Layout.styled.ts | 9 +++++++++ src/components/layout/index.tsx | 19 +++++++++++++++++++ src/constants/colors.ts | 1 + src/global-styles.ts | 4 ++++ src/pages/Concern.tsx | 5 +++-- src/pages/Concerns.tsx | 5 +++-- 10 files changed, 49 insertions(+), 9 deletions(-) create mode 100644 src/assets/heart.svg create mode 100644 src/assets/location.svg create mode 100644 src/assets/share.svg delete mode 100644 src/components/Layout.tsx create mode 100644 src/components/layout/Layout.styled.ts create mode 100644 src/components/layout/index.tsx 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/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/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/components/Layout.tsx b/src/components/Layout.tsx deleted file mode 100644 index 6bfaace..0000000 --- a/src/components/Layout.tsx +++ /dev/null @@ -1,5 +0,0 @@ -import React from 'react' - -export default ({ children }) => { - return
{children}
-} diff --git a/src/components/layout/Layout.styled.ts b/src/components/layout/Layout.styled.ts new file mode 100644 index 0000000..73a2933 --- /dev/null +++ b/src/components/layout/Layout.styled.ts @@ -0,0 +1,9 @@ +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')`` 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 index ef91c40..b8e4783 100644 --- a/src/constants/colors.ts +++ b/src/constants/colors.ts @@ -17,6 +17,7 @@ const colors = { yellow: '#FFE815', red: '#FF6060', green: '#6DECA2', + background: '#312651', } export default colors diff --git a/src/global-styles.ts b/src/global-styles.ts index 18169f8..a529c96 100644 --- a/src/global-styles.ts +++ b/src/global-styles.ts @@ -29,6 +29,10 @@ export const GlobalStyle = createGlobalStyle` body { line-height: 1; font-family: 'NanumSquareRound', sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; } ol, ul { list-style: none; diff --git a/src/pages/Concern.tsx b/src/pages/Concern.tsx index 71faeef..48b314d 100644 --- a/src/pages/Concern.tsx +++ b/src/pages/Concern.tsx @@ -1,4 +1,5 @@ import React from 'react' -import Layout from 'components/Layout' +import Layout from 'components/layout' -export default () => 고민 보기 +const Concern = () => 고민 보기 +export default Concern diff --git a/src/pages/Concerns.tsx b/src/pages/Concerns.tsx index 187dcea..356d30b 100644 --- a/src/pages/Concerns.tsx +++ b/src/pages/Concerns.tsx @@ -1,4 +1,5 @@ import React from 'react' -import Layout from 'components/Layout' +import Layout from 'components/layout' -export default () => 고민 리스트 +const Concerns = () => 고민 리스트 +export default Concerns From bd0604f9b492c59f9d71f364b0b2a2ea9341320a Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 01:23:31 +0900 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20answer=20type=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/Answer.ts | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 src/types/Answer.ts diff --git a/src/types/Answer.ts b/src/types/Answer.ts new file mode 100644 index 0000000..4d9fe68 --- /dev/null +++ b/src/types/Answer.ts @@ -0,0 +1,9 @@ +export interface AnswerListProps { + answers: Answer[] +} +export interface Answer { + name: string + contents: string + time: string + likeNum: number +} From f941377cb5082a95e46ed365cb3bffee76a07cd8 Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 01:24:50 +0900 Subject: [PATCH 08/17] =?UTF-8?q?answer=20list=20UI=20=EC=B6=94=EA=B0=80(#?= =?UTF-8?q?2)=20*wip:=20answer=20component=20=EC=B6=94=EA=B0=80=20*wip:=20?= =?UTF-8?q?answer=20list=20component=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/answerlist/AnswerComp.tsx | 65 ++++++++++++++++++++++++ src/components/answerlist/AnswerList.tsx | 32 ++++++++++++ 2 files changed, 97 insertions(+) create mode 100644 src/components/answerlist/AnswerComp.tsx create mode 100644 src/components/answerlist/AnswerList.tsx diff --git a/src/components/answerlist/AnswerComp.tsx b/src/components/answerlist/AnswerComp.tsx new file mode 100644 index 0000000..13802c8 --- /dev/null +++ b/src/components/answerlist/AnswerComp.tsx @@ -0,0 +1,65 @@ +import React from 'react' +import styled from 'styled-components' +import { Answer } from 'types/Answer' + +function AnswerComp({ name, contents, time, likeNum }: Answer) { + return ( + <> + +
{name}
+
{contents}
+ +
{time}
+
{likeNum}
+ + + + ) +} + +export default AnswerComp + +const AnswerBlock = styled.div` + display: inline-block; + width: 328px; + height: fit-content; + margin: 15px 15px 0px; + text-align: left; + border-bottom: 1px solid #5e5474; + + .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; + + .time { + display: inline-block; + color: #716d74; + align-items: center; + justify-content: center; + padding-right: 80px; + padding-top: 10px; + } + + .likeButton { + display: felx; + width: 80px; + height: 24px; + align-items: center; + justify-content: center; + background-color: #5e5474; + border-radius: 5px; + text-align: center; + } +` diff --git a/src/components/answerlist/AnswerList.tsx b/src/components/answerlist/AnswerList.tsx new file mode 100644 index 0000000..659fb06 --- /dev/null +++ b/src/components/answerlist/AnswerList.tsx @@ -0,0 +1,32 @@ +import React, { useState } from 'react' +import AnswerComp from './AnswerComp' +import styled from 'styled-components' +import { AnswerListProps } from 'types/Answer' + +function AnswerList({ answers }: AnswerListProps) { + return ( + <> + + {answers.map(answer => ( + + ))} + + + ) +} + +export default AnswerList + +const AnswerListLayout = styled.div` + position: relative; + width: 360px; + height: 455px; + background-color: #514184; + border-radius: 16px 16px 0px 0px; + color: white; +` From 3a3b8acf5476a2fbc9ed5ff430f26512442f82e7 Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 02:38:54 +0900 Subject: [PATCH 09/17] merge develop feature/answerlist (#2) --- src/pages/Concerns.tsx | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/src/pages/Concerns.tsx b/src/pages/Concerns.tsx index 356d30b..88632d4 100644 --- a/src/pages/Concerns.tsx +++ b/src/pages/Concerns.tsx @@ -1,5 +1,32 @@ import React from 'react' + import Layout from 'components/layout' +import { Answer } from 'types/Answer' +import AnswerList from 'components/answerlist/AnswerList' + +const Concerns = () => ( + + 고민 리스트 + + +) -const Concerns = () => 고민 리스트 export default Concerns + +// dummy +const dummy: Answer[] = [ + { + name: '또또로', + contents: + '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...', + time: '2010.02.12 오전 08:00', + likeNum: 10, + }, + { + name: '로또', + contents: + '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데... 평소 참 잘해주던 사람인데...', + time: '2010.02.12 오전 08:01', + likeNum: 20, + }, +] From cc6fd1274ea20a239208175c702b975eb9710132 Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 02:15:01 +0900 Subject: [PATCH 10/17] =?UTF-8?q?feat:=20like=20button=20state=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#2)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/answerlist/AnswerComp.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/answerlist/AnswerComp.tsx b/src/components/answerlist/AnswerComp.tsx index 13802c8..4f04330 100644 --- a/src/components/answerlist/AnswerComp.tsx +++ b/src/components/answerlist/AnswerComp.tsx @@ -1,8 +1,11 @@ -import React from 'react' +import React, { useState } from 'react' import styled from 'styled-components' import { Answer } from 'types/Answer' function AnswerComp({ name, contents, time, likeNum }: Answer) { + const [like, setLike] = useState(likeNum) + const addLike = () => setLike(like + 1) + return ( <> @@ -10,7 +13,9 @@ function AnswerComp({ name, contents, time, likeNum }: Answer) {
{contents}
{time}
-
{likeNum}
+
+ {like} +
@@ -61,5 +66,6 @@ const AnswerInfoBlock = styled.div` background-color: #5e5474; border-radius: 5px; text-align: center; + cursor: pointer; } ` From e551ea10b65a289afe6632758e94099eb8bd09ed Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 02:16:39 +0900 Subject: [PATCH 11/17] =?UTF-8?q?answer=20place=20holder=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80(#2)=20wip:=20place=20holder=20style=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/answerlist/AnswerList.tsx | 30 +++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) diff --git a/src/components/answerlist/AnswerList.tsx b/src/components/answerlist/AnswerList.tsx index 659fb06..25ba940 100644 --- a/src/components/answerlist/AnswerList.tsx +++ b/src/components/answerlist/AnswerList.tsx @@ -15,7 +15,9 @@ function AnswerList({ answers }: AnswerListProps) { likeNum={answer.likeNum} /> ))} + + 작성완료 ) } @@ -25,8 +27,34 @@ export default AnswerList const AnswerListLayout = styled.div` position: relative; width: 360px; - height: 455px; + height: fit-content; background-color: #514184; border-radius: 16px 16px 0px 0px; color: white; ` +const AnswerInput = styled.textarea` + display: inline-block; + width: 328px; + height: 140px; + resize: none; + margin: 10px 15px 20px; + background-color: transparent; + border-radius: 4px; + border-color: #5e5474; + outline: 0; + ::placeholder { + color: white; + padding: 10px; + } +` +const AnswerInputButton = styled.button` + width: 360px; + height: 52px; + color: white; + background-color: #8567ff; + align-items: center; + justify-content: center; + border: 0; + outline: 0; + cursor: pointer; +` 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 12/17] 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 13/17] =?UTF-8?q?feat:=20(#6)=20=EA=B3=A0=EB=AF=BC?= =?UTF-8?q?=EB=A6=AC=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 From c8456cf0497fb9f9e7fce4d1e70ef1a2fa258b84 Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 04:17:43 +0900 Subject: [PATCH 14/17] =?UTF-8?q?=EB=8B=B5=EB=B3=80=20=EB=A6=AC=EC=8A=A4?= =?UTF-8?q?=ED=8A=B8=20UI=20=EC=88=98=EC=A0=95=20(#2)=20*=20feat:=20Answer?= =?UTF-8?q?Item=20UI=20=EC=88=98=EC=A0=95=20*=20wip:=20AnswerList=20UI=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{AnswerComp.tsx => AnswerItem.tsx} | 16 +++++++++------- src/components/answerlist/AnswerList.tsx | 12 ++++++++++-- src/pages/Concern.tsx | 2 +- 3 files changed, 20 insertions(+), 10 deletions(-) rename src/components/answerlist/{AnswerComp.tsx => AnswerItem.tsx} (84%) 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, }, From 097674624d714047292c2a2329fb53aaaed73b19 Mon Sep 17 00:00:00 2001 From: godjoy Date: Sun, 28 Feb 2021 04:39:00 +0900 Subject: [PATCH 15/17] =?UTF-8?q?pr=20=ED=94=BC=EB=93=9C=EB=B0=B1=20?= =?UTF-8?q?=EB=B0=98=EC=98=81=20*refact:=20colors=20=EC=A0=81=EC=9A=A9=20*?= =?UTF-8?q?refact:=20array=20key=20=EC=B6=94=EA=B0=80=20*refact:=20?= =?UTF-8?q?=ED=94=84=EB=9E=98=EA=B7=B8=EB=A8=BC=ED=8A=B8=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/answerlist/AnswerItem.tsx | 32 +++++++++++------------- src/components/answerlist/AnswerList.tsx | 8 +++--- src/pages/Concern.tsx | 2 ++ src/types/Answer.ts | 1 + 4 files changed, 23 insertions(+), 20 deletions(-) diff --git a/src/components/answerlist/AnswerItem.tsx b/src/components/answerlist/AnswerItem.tsx index ccaa936..32e3bba 100644 --- a/src/components/answerlist/AnswerItem.tsx +++ b/src/components/answerlist/AnswerItem.tsx @@ -3,28 +3,26 @@ import styled from 'styled-components' import { Answer } from 'types/Answer' import heart from './../../assets/heart.svg' -function AnswerComp({ name, contents, time, likeNum }: Answer) { +function AnswerItem({ name, contents, time, likeNum }: Answer) { const [like, setLike] = useState(likeNum) const addLike = () => setLike(like + 1) return ( - <> - -
{name}
-
{contents}
- -
{time}
-
- heart icon - {like} -
- - - + +
{name}
+
{contents}
+ +
{time}
+
+ heart icon + {like} +
+ + ) } -export default AnswerComp +export default AnswerItem const AnswerBlock = styled.div` display: inline-block; @@ -52,7 +50,7 @@ const AnswerInfoBlock = styled.div` .time { display: inline-block; - color: #716d74; + color: ${props => props.theme.colors.gray07}; align-items: center; justify-content: center; padding-right: 120px; @@ -65,7 +63,7 @@ const AnswerInfoBlock = styled.div` height: 24px; align-items: center; justify-content: center; - background-color: #5e5474; + background-color: ${props => props.theme.colors.purpleGray}; border-radius: 5px; text-align: center; cursor: pointer; diff --git a/src/components/answerlist/AnswerList.tsx b/src/components/answerlist/AnswerList.tsx index 09b1e5d..2ac9a5a 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 './AnswerItem' +import AnswerItem from './AnswerItem' import styled from 'styled-components' import { AnswerListProps } from 'types/Answer' @@ -8,7 +8,9 @@ function AnswerList({ answers }: AnswerListProps) { <> {answers.map(answer => ( - props.theme.colors.darkGray1}; border-radius: 32px 32px 0px 0px; color: white; ` diff --git a/src/pages/Concern.tsx b/src/pages/Concern.tsx index 2bd58d8..bd4281b 100644 --- a/src/pages/Concern.tsx +++ b/src/pages/Concern.tsx @@ -15,6 +15,7 @@ export default Concern // dummy const dummy: Answer[] = [ { + id: 1, name: '또또로', contents: '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...', @@ -22,6 +23,7 @@ const dummy: Answer[] = [ likeNum: 10, }, { + id: 2, name: '로또', contents: '남자친구와 만난지 3년이 되어갑니다. 그런데 며칠전 남자친구의 휴대폰을 우연히 보게 되었어요...', diff --git a/src/types/Answer.ts b/src/types/Answer.ts index 4d9fe68..2aad7e3 100644 --- a/src/types/Answer.ts +++ b/src/types/Answer.ts @@ -2,6 +2,7 @@ export interface AnswerListProps { answers: Answer[] } export interface Answer { + id: number name: string contents: string time: string From 1493b84d6d361f5ff671d7c4cd0e54c25796ab2e Mon Sep 17 00:00:00 2001 From: danivelop <55433950+danivelop@users.noreply.github.com> Date: Fri, 12 Mar 2021 19:33:07 +0900 Subject: [PATCH 16/17] =?UTF-8?q?concern=20=EB=A6=AC=EB=8D=95=EC=8A=A4=20?= =?UTF-8?q?=EB=B0=8F=20saga=EB=A1=9C=EC=A7=81=20=EC=9E=91=EC=84=B1=20(#19)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 모델 작성 및 redux util 작성 * concern reducer 및 saga로직 작성 --- package.json | 5 + src/constants/Gender.ts | 6 ++ src/containers/.gitkeep | 0 src/index.tsx | 10 +- src/models/Answer.ts | 22 +++++ src/models/Concern.ts | 26 ++++++ src/models/Location.ts | 18 ++++ src/models/User.ts | 28 ++++++ src/modules/apis/concernAPI.ts | 50 ++++++++++ src/modules/reducers/concernReducer.ts | 94 +++++++++++++++++++ src/modules/reducers/index.ts | 15 +++ src/modules/reduxStore.ts | 46 ++++++++++ src/utils/.gitkeep | 0 src/utils/environmentUtils.ts | 11 +++ src/utils/reduxUtils.ts | 87 ++++++++++++++++++ yarn.lock | 122 ++++++++++++++++++++++++- 16 files changed, 535 insertions(+), 5 deletions(-) create mode 100644 src/constants/Gender.ts delete mode 100644 src/containers/.gitkeep create mode 100644 src/models/Answer.ts create mode 100644 src/models/Concern.ts create mode 100644 src/models/Location.ts create mode 100644 src/models/User.ts create mode 100644 src/modules/apis/concernAPI.ts create mode 100644 src/modules/reducers/concernReducer.ts create mode 100644 src/modules/reducers/index.ts create mode 100644 src/modules/reduxStore.ts delete mode 100644 src/utils/.gitkeep create mode 100644 src/utils/environmentUtils.ts create mode 100644 src/utils/reduxUtils.ts diff --git a/package.json b/package.json index fb2c492..9633571 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,10 @@ "version": "0.1.0", "private": true, "dependencies": { + "axios": "0.21.1", "chalk": "4.1.0", "cross-env": "7.0.2", + "immutable": "4.0.0-rc.12", "lodash-es": "4.17.21", "node-plop": "0.26.2", "plop": "2.7.4", @@ -12,8 +14,11 @@ "react": "16.13.1", "react-app-polyfill": "1.0.6", "react-dom": "16.13.1", + "react-redux": "7.2.2", "react-router-dom": "5.2.0", "react-scripts": "4.0.3", + "redux": "4.0.5", + "redux-saga": "1.1.3", "rimraf": "3.0.2", "sanitize.css": "12.0.1", "serve": "11.3.2", diff --git a/src/constants/Gender.ts b/src/constants/Gender.ts new file mode 100644 index 0000000..e282e72 --- /dev/null +++ b/src/constants/Gender.ts @@ -0,0 +1,6 @@ +enum Gender { + Male = 'M', + Female = 'F', +} + +export default Gender diff --git a/src/containers/.gitkeep b/src/containers/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/index.tsx b/src/index.tsx index ad9bf3e..dbdde9f 100755 --- a/src/index.tsx +++ b/src/index.tsx @@ -3,8 +3,10 @@ import 'react-app-polyfill/stable' import React from 'react' import ReactDOM from 'react-dom' +import { Provider } from 'react-redux' import { ThemeProvider } from 'styled-components' +import ReduxStore from 'modules/reduxStore' import colors from 'constants/colors' import media from 'constants/media' import App from 'App' @@ -18,9 +20,11 @@ const theme = { ReactDOM.render( - - - + + + + + , document.getElementById('root'), ) diff --git a/src/models/Answer.ts b/src/models/Answer.ts new file mode 100644 index 0000000..048add0 --- /dev/null +++ b/src/models/Answer.ts @@ -0,0 +1,22 @@ +/* External dependencies */ +import Immutable from 'immutable' + +interface AnswerAttr { + id: number + content: string + createdAt: string + updatedAt: string + deletedAt: string | null +} + +const AnswerRecord = Immutable.Record({ + id: 0, + content: '', + createdAt: '', + updatedAt: '', + deletedAt: '', +}) + +class Answer extends AnswerRecord {} + +export default Answer diff --git a/src/models/Concern.ts b/src/models/Concern.ts new file mode 100644 index 0000000..cc6504d --- /dev/null +++ b/src/models/Concern.ts @@ -0,0 +1,26 @@ +/* External dependencies */ +import Immutable from 'immutable' + +export interface ConcernAttrPOJO { + id: number + title: string + content: string + createdAt: string + updatedAt: string + deletedAt: string +} + +interface ConcernAttr extends ConcernAttrPOJO {} + +const ConcernRecord = Immutable.Record({ + id: 0, + title: '', + content: '', + createdAt: '', + updatedAt: '', + deletedAt: '', +}) + +class Concern extends ConcernRecord {} + +export default Concern diff --git a/src/models/Location.ts b/src/models/Location.ts new file mode 100644 index 0000000..4619e6f --- /dev/null +++ b/src/models/Location.ts @@ -0,0 +1,18 @@ +/* External dependencies */ +import Immutable from 'immutable' + +interface LocationAttr { + id: number + latitude: number + longitude: number +} + +const LocationRecord = Immutable.Record({ + id: 0, + latitude: 0, + longitude: 0, +}) + +class Location extends LocationRecord {} + +export default Location diff --git a/src/models/User.ts b/src/models/User.ts new file mode 100644 index 0000000..962cbaa --- /dev/null +++ b/src/models/User.ts @@ -0,0 +1,28 @@ +/* External dependencies */ +import Immutable from 'immutable' + +/* Internal dependencies */ +import Location from 'models/Location' +import Gender from 'constants/Gender' + +interface UserAttr { + id: number + nickname: string + birthday: string + gender: Gender + imageUrl: string + location: Location +} + +const UserRecord = Immutable.Record({ + id: 0, + nickname: '', + birthday: '', + gender: Gender.Male, + imageUrl: '', + location: new Location(), +}) + +class User extends UserRecord {} + +export default User diff --git a/src/modules/apis/concernAPI.ts b/src/modules/apis/concernAPI.ts new file mode 100644 index 0000000..0bcf974 --- /dev/null +++ b/src/modules/apis/concernAPI.ts @@ -0,0 +1,50 @@ +/* External dependencies */ +import axios from 'axios' + +/* Internal dependencies */ +import { GetConcernListPayload } from 'modules/reducers/concernReducer' +import { ConcernAttrPOJO } from 'models/Concern' +import { ResponseType } from 'utils/reduxUtils' + +export type getConcernListResponseType = ConcernAttrPOJO[] + +const MOCK_CONCERN_LIST = { + data: [ + { + id: 1, + title: 'title1', + content: 'content1', + createdAt: '2021-03-08', + updatedAt: '2021-03-08', + deletedAt: '2021-03-08', + }, + { + id: 2, + title: 'title2', + content: 'content2', + createdAt: '2021-03-08', + updatedAt: '2021-03-08', + deletedAt: '2021-03-08', + }, + { + id: 3, + title: 'title3', + content: 'content3', + createdAt: '2021-03-08', + updatedAt: '2021-03-08', + deletedAt: '2021-03-08', + }, + ], +} + +export const getConcernList: ResponseType = () => { + return new Promise(resolve => { + setTimeout(() => { + resolve(MOCK_CONCERN_LIST as any) + }, 300) + }) +} + +// export const getConcernList: ResponseType = ({/* concernList payload */}: GetConcernListPayload) => { +// return axios.get(/* 서버 api */) +// } diff --git a/src/modules/reducers/concernReducer.ts b/src/modules/reducers/concernReducer.ts new file mode 100644 index 0000000..39ef382 --- /dev/null +++ b/src/modules/reducers/concernReducer.ts @@ -0,0 +1,94 @@ +/* External dependencies */ +import Immutable from 'immutable' +import { takeLatest } from 'redux-saga/effects' + +/* Internal dependencies */ +import Concern, { ConcernAttrPOJO } from 'models/Concern' +import * as concernAPI from 'modules/apis/concernAPI' +import { + AsyncActionTypes, + actionCreator, + createAsyncActionsAndSaga, +} from 'utils/reduxUtils' + +type Action = AsyncActionTypes + +interface State { + concernList: Immutable.List + isFetching: boolean + hasSuccess: boolean + hasError: boolean +} + +export interface GetConcernListPayload {} + +const GET_CONCERN_LIST = 'concern/GET_CONCERN_LIST' as const +const GET_CONCERN_LIST_FETCHING = 'concern/GET_CONCERN_LIST_FETCHING' as const +const GET_CONCERN_LIST_SUCCESS = 'concern/GET_CONCERN_LIST_SUCCESS' as const +const GET_CONCERN_LIST_ERROR = 'concern/GET_CONCERN_LIST_ERROR' as const + +export const getConcernList = actionCreator( + GET_CONCERN_LIST, + { usePromise: true }, +) + +const { + asyncActions: getConcernListAsyncActions, + asyncSaga: getConcernListSaga, +} = createAsyncActionsAndSaga( + GET_CONCERN_LIST_FETCHING, + GET_CONCERN_LIST_SUCCESS, + GET_CONCERN_LIST_ERROR, +)< + ReturnType, + concernAPI.getConcernListResponseType, + any +>(concernAPI.getConcernList) + +export function* concernSaga() { + yield takeLatest(GET_CONCERN_LIST, getConcernListSaga) +} + +const initialState: State = { + concernList: Immutable.List(), + isFetching: false, + hasSuccess: false, + hasError: false, +} + +function conceruReducer(state: State = initialState, action: Action) { + switch (action.type) { + case GET_CONCERN_LIST_FETCHING: { + return { + ...state, + concernList: state.concernList.clear(), + isFetching: true, + hasSuccess: false, + hasError: false, + } + } + case GET_CONCERN_LIST_SUCCESS: { + return { + ...state, + concernList: state.concernList.withMutations(list => { + action.payload.forEach((concern: ConcernAttrPOJO) => { + list.push(new Concern(concern)) + }) + }), + isFetching: false, + hasSuccess: true, + } + } + case GET_CONCERN_LIST_ERROR: { + return { + ...state, + isFetching: false, + hasError: true, + } + } + default: + return state + } +} + +export default conceruReducer diff --git a/src/modules/reducers/index.ts b/src/modules/reducers/index.ts new file mode 100644 index 0000000..7c6d408 --- /dev/null +++ b/src/modules/reducers/index.ts @@ -0,0 +1,15 @@ +/* External dependencies */ +import { combineReducers } from 'redux' +import { all } from 'redux-saga/effects' +import concern, { concernSaga } from './concernReducer' + +const rootReducer = combineReducers({ + concern, +}) + +export function* rootSaga() { + yield all([concernSaga()]) +} + +export default rootReducer +export type RootState = ReturnType diff --git a/src/modules/reduxStore.ts b/src/modules/reduxStore.ts new file mode 100644 index 0000000..635cd0e --- /dev/null +++ b/src/modules/reduxStore.ts @@ -0,0 +1,46 @@ +/* External dependencies */ +import { createStore, applyMiddleware, compose } from 'redux' +import createSagaMiddleware from 'redux-saga' + +/* Internal dependencies */ +import rootReducer, { rootSaga } from 'modules/reducers' +import { isDevelopment } from 'utils/environmentUtils' + +declare global { + interface Window { + __PRELOADED_STATE__: any + } +} + +class ReduxStore { + readonly store + + constructor() { + const isDev = isDevelopment() + // @ts-ignore + const devtools = isDev && window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ + const composeEnhancers = devtools || compose + + const sagaMiddleware = createSagaMiddleware() + this.store = createStore( + rootReducer, + window.__PRELOADED_STATE__, + composeEnhancers(applyMiddleware(sagaMiddleware)), + ) + sagaMiddleware.run(rootSaga) + } + + getStore() { + return this.store + } + + dispatch(action) { + return this.store.dispatch(action) + } + + getState() { + return this.store.getState() + } +} + +export default new ReduxStore() diff --git a/src/utils/.gitkeep b/src/utils/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/src/utils/environmentUtils.ts b/src/utils/environmentUtils.ts new file mode 100644 index 0000000..d2da331 --- /dev/null +++ b/src/utils/environmentUtils.ts @@ -0,0 +1,11 @@ +export function isProduction() { + return process.env.NODE_ENV === 'production' +} + +export function isDevelopment() { + return process.env.NODE_ENV === 'development' +} + +export function getEnvironment() { + return process.env.NODE_ENV +} diff --git a/src/utils/reduxUtils.ts b/src/utils/reduxUtils.ts new file mode 100644 index 0000000..a0013eb --- /dev/null +++ b/src/utils/reduxUtils.ts @@ -0,0 +1,87 @@ +/* External dependencies */ +import { call, put } from 'redux-saga/effects' +import { get, set, isFunction } from 'lodash' + +export type AsyncActionTypes< + T extends { [K in keyof T]: (...args: any[]) => any } +> = ReturnType + +export interface OptionType { + usePromise?: boolean +} + +export interface LifeCycle { + resolve?: any + reject?: any +} + +export interface ActionType { + type: string + payload: T + meta: S & LifeCycle + promise?: Promise +} + +export type ActionGenerator = ( + payload?: T, + meta?: S, +) => ActionType + +export type ResponseType = (...args: any[]) => Promise + +export function actionCreator( + actionType: string, + option: OptionType = {}, +): ActionGenerator { + return (payload: any = {}, meta: any = {}) => { + const action = { + type: actionType, + payload, + meta, + } + if (option.usePromise) { + const promise = new Promise((resolve, reject) => { + set(action, ['meta', 'resolve'], resolve) + set(action, ['meta', 'reject'], reject) + }) + set(action, 'promise', promise) + } + + return action + } +} + +export const createAsyncActionsAndSaga = ( + fetching: F, + success: S, + error: E, +) => (request: ResponseType) => { + const asyncActions = { + fetching: () => ({ type: fetching }), + success: (payload: SP) => ({ type: success, payload }), + error: (payload: EP) => ({ type: error, payload }), + } + const asyncSaga = function* (action: ActionType) { + yield put(asyncActions.fetching()) + try { + const { data } = yield call(request, action.payload) + const resolve = get(action, ['meta', 'resolve']) + + if (isFunction(resolve)) { + resolve(data) + } + + yield put(asyncActions.success(data)) + } catch (error) { + const reject = get(action, ['meta', 'reject']) + + if (isFunction(reject)) { + reject(error) + } + + yield put(asyncActions.error(error)) + } + } + + return { asyncActions, asyncSaga } +} diff --git a/yarn.lock b/yarn.lock index f869695..f16aa1d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1118,6 +1118,13 @@ dependencies: regenerator-runtime "^0.13.4" +"@babel/runtime@^7.6.3": + version "7.13.9" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.9.tgz#97dbe2116e2630c489f22e0656decd60aaa1fcee" + integrity sha512-aY2kU+xgJ3dJ1eU6FMB9EH8dIe8dmusF1xEku52joLvw6eAFN0AI+WxCLDnpev2LEejWBAy2sBvBOBAjI3zmvA== + dependencies: + regenerator-runtime "^0.13.4" + "@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3": version "7.12.13" resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.12.13.tgz#530265be8a2589dbb37523844c5bcb55947fb327" @@ -1482,6 +1489,50 @@ schema-utils "^2.6.5" source-map "^0.7.3" +"@redux-saga/core@^1.1.3": + version "1.1.3" + resolved "https://registry.yarnpkg.com/@redux-saga/core/-/core-1.1.3.tgz#3085097b57a4ea8db5528d58673f20ce0950f6a4" + integrity sha512-8tInBftak8TPzE6X13ABmEtRJGjtK17w7VUs7qV17S8hCO5S3+aUTWZ/DBsBJPdE8Z5jOPwYALyvofgq1Ws+kg== + dependencies: + "@babel/runtime" "^7.6.3" + "@redux-saga/deferred" "^1.1.2" + "@redux-saga/delay-p" "^1.1.2" + "@redux-saga/is" "^1.1.2" + "@redux-saga/symbols" "^1.1.2" + "@redux-saga/types" "^1.1.0" + redux "^4.0.4" + typescript-tuple "^2.2.1" + +"@redux-saga/deferred@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@redux-saga/deferred/-/deferred-1.1.2.tgz#59937a0eba71fff289f1310233bc518117a71888" + integrity sha512-908rDLHFN2UUzt2jb4uOzj6afpjgJe3MjICaUNO3bvkV/kN/cNeI9PMr8BsFXB/MR8WTAZQq/PlTq8Kww3TBSQ== + +"@redux-saga/delay-p@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@redux-saga/delay-p/-/delay-p-1.1.2.tgz#8f515f4b009b05b02a37a7c3d0ca9ddc157bb355" + integrity sha512-ojc+1IoC6OP65Ts5+ZHbEYdrohmIw1j9P7HS9MOJezqMYtCDgpkoqB5enAAZrNtnbSL6gVCWPHaoaTY5KeO0/g== + dependencies: + "@redux-saga/symbols" "^1.1.2" + +"@redux-saga/is@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@redux-saga/is/-/is-1.1.2.tgz#ae6c8421f58fcba80faf7cadb7d65b303b97e58e" + integrity sha512-OLbunKVsCVNTKEf2cH4TYyNbbPgvmZ52iaxBD4I1fTif4+MTXMa4/Z07L83zW/hTCXwpSZvXogqMqLfex2Tg6w== + dependencies: + "@redux-saga/symbols" "^1.1.2" + "@redux-saga/types" "^1.1.0" + +"@redux-saga/symbols@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@redux-saga/symbols/-/symbols-1.1.2.tgz#216a672a487fc256872b8034835afc22a2d0595d" + integrity sha512-EfdGnF423glv3uMwLsGAtE6bg+R9MdqlHEzExnfagXPrIiuxwr3bdiAwz3gi+PsrQ3yBlaBpfGLtDG8rf3LgQQ== + +"@redux-saga/types@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@redux-saga/types/-/types-1.1.0.tgz#0e81ce56b4883b4b2a3001ebe1ab298b84237204" + integrity sha512-afmTuJrylUU/0OtqzaRkbyYFFNgCF73Bvel/sw90pvGrWIZ+vyoIJqA6eMSoA6+nb443kTmulmBtC9NerXboNg== + "@rollup/plugin-node-resolve@^7.1.1": version "7.1.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-node-resolve/-/plugin-node-resolve-7.1.3.tgz#80de384edfbd7bfc9101164910f86078151a3eca" @@ -2821,6 +2872,13 @@ axe-core@^4.0.2: resolved "https://registry.yarnpkg.com/axe-core/-/axe-core-4.1.2.tgz#7cf783331320098bfbef620df3b3c770147bc224" integrity sha512-V+Nq70NxKhYt89ArVcaNL9FDryB3vQOd+BFXZIfO3RP6rwtj+2yqqqdHEkacutglPaZLkJeuXKCjCJDMGPtPqg== +axios@0.21.1: + version "0.21.1" + resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.1.tgz#22563481962f4d6bde9a76d516ef0e5d3c09b2b8" + integrity sha512-dKQiRHxGD9PPRIUNIWvZhPTPpl1rf/OxTYKsqKUDjBwYylTvV7SjSHJb9ratfyzM6wCdLCOYLzs73qpg5c4iGA== + dependencies: + follow-redirects "^1.10.0" + axobject-query@^2.2.0: version "2.2.0" resolved "https://registry.yarnpkg.com/axobject-query/-/axobject-query-2.2.0.tgz#943d47e10c0b704aa42275e20edf3722648989be" @@ -5801,6 +5859,11 @@ follow-redirects@^1.0.0: resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.2.tgz#dd73c8effc12728ba5cf4259d760ea5fb83e3147" integrity sha512-6mPTgLxYm3r6Bkkg0vNM0HTjfGrOEtsfbhagQvbxDEsEkpNhw582upBaoRZylzen6krEmxXJgt9Ju6HiI4O7BA== +follow-redirects@^1.10.0: + version "1.13.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.3.tgz#e5598ad50174c1bc4e872301e82ac2cd97f90267" + integrity sha512-DUgl6+HDzB0iEptNQEXLx/KhTmDb8tZUHSeLqpnjpknR70H0nC2t9N73BK6fN4hOvJ84pKlIQVQ4k5FFlBedKA== + for-in@^1.0.1, for-in@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/for-in/-/for-in-1.0.2.tgz#81068d295a8142ec0ac726c6e2200c30fb6d5e80" @@ -6318,7 +6381,7 @@ hmac-drbg@^1.0.1: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -6571,6 +6634,11 @@ immer@8.0.1: resolved "https://registry.yarnpkg.com/immer/-/immer-8.0.1.tgz#9c73db683e2b3975c424fb0572af5889877ae656" integrity sha512-aqXhGP7//Gui2+UrEtvxZxSquQVXTpZ7KDxfCcKAF3Vysvw0CViVaW9RZ1j1xlIYqaaaipBoqdqeibkc18PNvA== +immutable@4.0.0-rc.12: + version "4.0.0-rc.12" + resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217" + integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A== + import-cwd@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9" @@ -10573,7 +10641,7 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-is@^16.12.0, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: +react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== @@ -10583,6 +10651,17 @@ react-is@^17.0.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.1.tgz#5b3531bd76a645a4c9fb6e693ed36419e3301339" integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA== +react-redux@7.2.2: + version "7.2.2" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.2.tgz#03862e803a30b6b9ef8582dadcc810947f74b736" + integrity sha512-8+CQ1EvIVFkYL/vu6Olo7JFLWop1qRUeb46sGtIMDCSpgwPQq8fPLpirIB0iTqFe9XYEFPHssdX8/UwN6pAkEA== + dependencies: + "@babel/runtime" "^7.12.1" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^16.13.1" + react-refresh@^0.8.3: version "0.8.3" resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f" @@ -10798,6 +10877,21 @@ redent@^3.0.0: indent-string "^4.0.0" strip-indent "^3.0.0" +redux-saga@1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/redux-saga/-/redux-saga-1.1.3.tgz#9f3e6aebd3c994bbc0f6901a625f9a42b51d1112" + integrity sha512-RkSn/z0mwaSa5/xH/hQLo8gNf4tlvT18qXDNvedihLcfzh+jMchDgaariQoehCpgRltEm4zHKJyINEz6aqswTw== + dependencies: + "@redux-saga/core" "^1.1.3" + +redux@4.0.5, redux@^4.0.4: + version "4.0.5" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.0.5.tgz#4db5de5816e17891de8a80c424232d06f051d93f" + integrity sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w== + dependencies: + loose-envify "^1.4.0" + symbol-observable "^1.2.0" + regenerate-unicode-properties@^8.2.0: version "8.2.0" resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec" @@ -12266,6 +12360,11 @@ swap-case@^1.1.0: lower-case "^1.1.1" upper-case "^1.1.1" +symbol-observable@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" + integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ== + symbol-tree@^3.2.4: version "3.2.4" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2" @@ -12674,6 +12773,25 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= +typescript-compare@^0.0.2: + version "0.0.2" + resolved "https://registry.yarnpkg.com/typescript-compare/-/typescript-compare-0.0.2.tgz#7ee40a400a406c2ea0a7e551efd3309021d5f425" + integrity sha512-8ja4j7pMHkfLJQO2/8tut7ub+J3Lw2S3061eJLFQcvs3tsmJKp8KG5NtpLn7KcY2w08edF74BSVN7qJS0U6oHA== + dependencies: + typescript-logic "^0.0.0" + +typescript-logic@^0.0.0: + version "0.0.0" + resolved "https://registry.yarnpkg.com/typescript-logic/-/typescript-logic-0.0.0.tgz#66ebd82a2548f2b444a43667bec120b496890196" + integrity sha512-zXFars5LUkI3zP492ls0VskH3TtdeHCqu0i7/duGt60i5IGPIpAHE/DWo5FqJ6EjQ15YKXrt+AETjv60Dat34Q== + +typescript-tuple@^2.2.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/typescript-tuple/-/typescript-tuple-2.2.1.tgz#7d9813fb4b355f69ac55032e0363e8bb0f04dad2" + integrity sha512-Zcr0lbt8z5ZdEzERHAMAniTiIKerFCMgd7yjq1fPnDJ43et/k9twIFQMUYff9k5oXcsQ0WpvFcgzK2ZKASoW6Q== + dependencies: + typescript-compare "^0.0.2" + typescript@4.1.3: version "4.1.3" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.1.3.tgz#519d582bd94cba0cf8934c7d8e8467e473f53bb7" From 35c026cfa5bf3be33bcf3760f15422249dfaa0db Mon Sep 17 00:00:00 2001 From: junghoo Date: Fri, 12 Mar 2021 19:50:35 +0900 Subject: [PATCH 17/17] =?UTF-8?q?etc:=20main=20=EB=B0=B0=ED=8F=AC=EB=A5=BC?= =?UTF-8?q?=20=EC=9C=84=ED=95=B4=20warning=20=EC=9E=84=EC=8B=9C=20?= =?UTF-8?q?=EC=A3=BC=EC=84=9D=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/answerlist/AnswerList.tsx | 2 +- src/modules/apis/concernAPI.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/answerlist/AnswerList.tsx b/src/components/answerlist/AnswerList.tsx index 2ac9a5a..9e675b1 100644 --- a/src/components/answerlist/AnswerList.tsx +++ b/src/components/answerlist/AnswerList.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react' +import React from 'react' import AnswerItem from './AnswerItem' import styled from 'styled-components' import { AnswerListProps } from 'types/Answer' diff --git a/src/modules/apis/concernAPI.ts b/src/modules/apis/concernAPI.ts index 0bcf974..580ab73 100644 --- a/src/modules/apis/concernAPI.ts +++ b/src/modules/apis/concernAPI.ts @@ -1,8 +1,8 @@ /* External dependencies */ -import axios from 'axios' +// import axios from 'axios' /* Internal dependencies */ -import { GetConcernListPayload } from 'modules/reducers/concernReducer' +// import { GetConcernListPayload } from 'modules/reducers/concernReducer' import { ConcernAttrPOJO } from 'models/Concern' import { ResponseType } from 'utils/reduxUtils'