From e20dd31d5f95fd409e490ae285648cb2515a1653 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 00:20:24 +0900 Subject: [PATCH 01/37] =?UTF-8?q?chore:=20monaco-editor=20=EC=84=A4?= =?UTF-8?q?=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit react 문법을 제공하는 monaco editor를 설치했습니다. --- cocode/package.json | 1 + cocode/yarn.lock | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/cocode/package.json b/cocode/package.json index 1e715ec3..96d2b13a 100644 --- a/cocode/package.json +++ b/cocode/package.json @@ -39,6 +39,7 @@ "homepage": "https://github.com/connect-foundation/2019-04#readme", "dependencies": { "@material-ui/core": "^4.6.0", + "@monaco-editor/react": "^2.3.0", "axios": "^0.19.0", "dotenv": "^8.2.0", "file-loader": "^4.2.0", diff --git a/cocode/yarn.lock b/cocode/yarn.lock index 3578c343..84d2c5c2 100644 --- a/cocode/yarn.lock +++ b/cocode/yarn.lock @@ -1444,6 +1444,11 @@ prop-types "^15.7.2" react-is "^16.8.6" +"@monaco-editor/react@^2.3.0": + version "2.3.0" + resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-2.3.0.tgz#ef1e09c408bb3119e2dc0d369b132e82b2d3ade7" + integrity sha512-jmmZCQ4iSMfwelWGRV4HWUOJchkN4MOx9vhx1DWvC6ERpvK5DXrcwJBBzuayVtiK7cyCVOGKB7mgjT7KOdUkJw== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" From bbf257dea9ba089096160656e39fea3e76171067 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 01:28:26 +0900 Subject: [PATCH 02/37] =?UTF-8?q?feat:=20project=20icon=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Tab bar의 project tab에 사용될 project icon을 SVG를 이용하여 구현 했습니다. --- cocode/src/components/ProjectIcon/index.js | 42 ++++++++++++++++++++++ cocode/src/components/ProjectIcon/style.js | 10 ++++++ 2 files changed, 52 insertions(+) create mode 100644 cocode/src/components/ProjectIcon/index.js create mode 100644 cocode/src/components/ProjectIcon/style.js diff --git a/cocode/src/components/ProjectIcon/index.js b/cocode/src/components/ProjectIcon/index.js new file mode 100644 index 00000000..a444df35 --- /dev/null +++ b/cocode/src/components/ProjectIcon/index.js @@ -0,0 +1,42 @@ +import React from 'react'; +import * as Styled from './style'; + +function Project({ fillColor }) { + return ( + + + + + + + + + + + ); +} + +export default Project; diff --git a/cocode/src/components/ProjectIcon/style.js b/cocode/src/components/ProjectIcon/style.js new file mode 100644 index 00000000..90d45510 --- /dev/null +++ b/cocode/src/components/ProjectIcon/style.js @@ -0,0 +1,10 @@ +import styled from 'styled-components'; + +const Svg = styled.svg` + .Target { + fill: ${({ fillColor }) => fillColor}; + stroke: ${({ fillColor }) => fillColor}; + } +`; + +export { Svg }; From 89e61904ef3c9f6af9636454dc90d05fa11785dc Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 01:30:30 +0900 Subject: [PATCH 03/37] =?UTF-8?q?chore:=20tab=20bar=20theme=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 Tab bar의 theme 상수를 추가했습니다. --- cocode/src/constants/theme.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/cocode/src/constants/theme.js b/cocode/src/constants/theme.js index 957673f5..43659a75 100644 --- a/cocode/src/constants/theme.js +++ b/cocode/src/constants/theme.js @@ -13,4 +13,10 @@ const BROWSER_THEME = { browserHeignt: '88.8vh' }; -export { DEFAULT_THEME, BROWSER_THEME }; +const TAB_BAR_THEME = { + tabBarBGColor: '#1d2022', + tabBarItemBGColor: '#A5A6A7', + tabBarSelectedItemBGColor: '#fff' +}; + +export { DEFAULT_THEME, BROWSER_THEME, TAB_BAR_THEME }; From 172be91e44810751be5317814dd4be929792c2c7 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 01:33:19 +0900 Subject: [PATCH 04/37] =?UTF-8?q?feat:=20#24=20tab=20bar=20component=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit project page의 IDE에서 좌측에 존재하는 TabBar component를 구현했습니다. 현재 project의 파일목록만 보는 탭만 추가한 상태입니다. --- cocode/src/components/TabBar/index.js | 19 +++++++++++++++++++ cocode/src/components/TabBar/style.js | 21 +++++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 cocode/src/components/TabBar/index.js create mode 100644 cocode/src/components/TabBar/style.js diff --git a/cocode/src/components/TabBar/index.js b/cocode/src/components/TabBar/index.js new file mode 100644 index 00000000..027fd63a --- /dev/null +++ b/cocode/src/components/TabBar/index.js @@ -0,0 +1,19 @@ +import React from 'react'; +import * as Styled from './style'; + +import ProjectIcon from 'components/ProjectIcon'; + +function TabBar({ theme }) { + return ( + + + + + + + + + ); +} + +export default TabBar; diff --git a/cocode/src/components/TabBar/style.js b/cocode/src/components/TabBar/style.js new file mode 100644 index 00000000..0eb33d88 --- /dev/null +++ b/cocode/src/components/TabBar/style.js @@ -0,0 +1,21 @@ +import styled from 'styled-components'; + +const TabBar = styled.nav` + & { + display: inline-flex; + flex-direction: column; + justify-content: flex-start; + + height: 100vh; + + background-color: ${({ tabBarBGColor }) => tabBarBGColor}; + } +`; + +const TabBarItem = styled.button` + & { + margin: 1rem; + } +`; + +export { TabBar, TabBarItem }; From 13e1cd879e6d395d205ddd6bcbc28756b9ecafe5 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 03:24:29 +0900 Subject: [PATCH 05/37] =?UTF-8?q?chore:=20tab=20container=20theme=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit TabContainer들에게 적용될 theme를 추가했습니다. --- cocode/src/constants/theme.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/cocode/src/constants/theme.js b/cocode/src/constants/theme.js index 957673f5..23ac6901 100644 --- a/cocode/src/constants/theme.js +++ b/cocode/src/constants/theme.js @@ -13,4 +13,17 @@ const BROWSER_THEME = { browserHeignt: '88.8vh' }; -export { DEFAULT_THEME, BROWSER_THEME }; +const TAB_CONTAINER_THEME = { + tabContainerBGColor: '#0e0f10', + tabContainerTitleColor: '#7E7E7E', + tabContainerFileTextColor: '#878788', + tabContainerFileHoverTextColor: '#fff', + tabContainerFileHoverBGColor: '#2accf944', + + tabContainerTitleSize: '1.25rem', + tabContainerFileTextSize: '1rem', + + tabContainerTitleWeight: '600' +}; + +export { DEFAULT_THEME, BROWSER_THEME, TAB_CONTAINER_THEME }; From 0a36f7a0a73ff2a18513c36603b683b193fa4685 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 03:36:44 +0900 Subject: [PATCH 06/37] =?UTF-8?q?feat:=20#25=20project=20tab=20container?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 프로젝트 탭 컨테이너를 구현했습니다. 좌측의 프로젝트 탭 아이템을 선택하면 출력되는 화면입니다. --- cocode/src/containers/ProjectTab/index.js | 44 +++++++++++++++++ cocode/src/containers/ProjectTab/style.js | 58 +++++++++++++++++++++++ 2 files changed, 102 insertions(+) create mode 100644 cocode/src/containers/ProjectTab/index.js create mode 100644 cocode/src/containers/ProjectTab/style.js diff --git a/cocode/src/containers/ProjectTab/index.js b/cocode/src/containers/ProjectTab/index.js new file mode 100644 index 00000000..1f713176 --- /dev/null +++ b/cocode/src/containers/ProjectTab/index.js @@ -0,0 +1,44 @@ +import React from 'react'; +import * as Styled from './style'; + +const TabTitle = 'EXPLOLER'; + +const mockData = [ + { + type: 'folder', + src: 'https://codesandbox.io/static/media/folder.30a30d83.svg', + depth: 1, + name: 'public' + }, + { + type: 'folder_open', + src: 'https://codesandbox.io/static/media/folder-open.df474ba4.svg', + depth: 1, + name: 'src' + }, + { + type: 'javascript', + src: + 'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons/javascript.svg', + depth: 2, + name: 'index.js' + } +]; + +function ProjectTab() { + return ( + + {TabTitle} + {mockData.map(({ type, src, depth, name }, index) => { + return ( + + + {name} + + ); + })} + + ); +} + +export default ProjectTab; diff --git a/cocode/src/containers/ProjectTab/style.js b/cocode/src/containers/ProjectTab/style.js new file mode 100644 index 00000000..959ff32b --- /dev/null +++ b/cocode/src/containers/ProjectTab/style.js @@ -0,0 +1,58 @@ +import styled from 'styled-components'; +import { TAB_CONTAINER_THEME } from 'constants/theme'; + +const ProjectTab = styled.section` + & { + width: 100%; + height: 100vh; + + background-color: ${TAB_CONTAINER_THEME.tabContainerBGColor}; + } +`; + +const Title = styled.h1` + & { + padding: 0.7rem 1rem; + + color: ${TAB_CONTAINER_THEME.tabContainerTitleColor}; + font-size: ${TAB_CONTAINER_THEME.tabContainerTitleSize}; + font-weight: ${TAB_CONTAINER_THEME.tabContainerTitleWeight}; + } +`; + +const Icon = styled.img` + & { + margin-right: 0.5rem; + + width: ${TAB_CONTAINER_THEME.tabContainerFileTextSize}; + height: ${TAB_CONTAINER_THEME.tabContainerFileTextSize}; + } +`; + +const File = styled.div` + & { + display: flex; + flex-direction: row; + align-items: center; + + padding: 0.4rem; + padding-left: ${({ depth }) => `${depth}rem`}; + + cursor: pointer; + + font { + font-size: ${TAB_CONTAINER_THEME.tabContainerFileTextSize}; + color: ${TAB_CONTAINER_THEME.tabContainerFileTextColor}; + } + } + + &:hover { + background-color: ${TAB_CONTAINER_THEME.tabContainerFileHoverBGColor}; + + font { + color: ${TAB_CONTAINER_THEME.tabContainerFileHoverTextColor}; + } + } +`; + +export { ProjectTab, Title, Icon, File }; From 2281bdb942f73fa408cd403fd2c9a8ed0d30dc38 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 04:35:08 +0900 Subject: [PATCH 07/37] =?UTF-8?q?feat:=20#26=20=EB=AA=A8=EB=82=98=EC=BD=94?= =?UTF-8?q?=20=EC=97=90=EB=94=94=ED=84=B0=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 모나코 라이브러리를 사용해 프로젝트에서 사용할 에디터 컴포넌트의 기본 틀을 구현했습니다. --- cocode/src/components/MonacoEditor/index.js | 17 ++++++++++++++ .../components/MonacoEditor/index.stories.js | 13 +++++++++++ cocode/src/components/MonacoEditor/style.js | 22 +++++++++++++++++++ 3 files changed, 52 insertions(+) create mode 100644 cocode/src/components/MonacoEditor/index.js create mode 100644 cocode/src/components/MonacoEditor/index.stories.js create mode 100644 cocode/src/components/MonacoEditor/style.js diff --git a/cocode/src/components/MonacoEditor/index.js b/cocode/src/components/MonacoEditor/index.js new file mode 100644 index 00000000..46f403a8 --- /dev/null +++ b/cocode/src/components/MonacoEditor/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { ControlledEditor } from '@monaco-editor/react'; +import * as Styled from './style'; + +function MonacoEditor() { + return ( + + + + ); +} + +export default MonacoEditor; \ No newline at end of file diff --git a/cocode/src/components/MonacoEditor/index.stories.js b/cocode/src/components/MonacoEditor/index.stories.js new file mode 100644 index 00000000..1746a4cc --- /dev/null +++ b/cocode/src/components/MonacoEditor/index.stories.js @@ -0,0 +1,13 @@ +import React from 'react'; + +import MonacoEditor from '.'; + +export default { + title: 'MonacoEditor' +}; + +function Editor() { + return ; +} + +export { Editor }; diff --git a/cocode/src/components/MonacoEditor/style.js b/cocode/src/components/MonacoEditor/style.js new file mode 100644 index 00000000..0400d99c --- /dev/null +++ b/cocode/src/components/MonacoEditor/style.js @@ -0,0 +1,22 @@ +import styled from 'styled-components'; + +//TODO 나중에 테마로 분리할 계획입니다. +const EDITOR_MAIN_COLOR = '#1E2022'; +const EDITOR_CURRENT_LINT_COLOR = '#2a2f32'; + +const MonacoEditor = styled.div` + .monaco-editor-background, .margin { + background-color: ${EDITOR_MAIN_COLOR} !important; + } + + .scroll-decoration { + box-shadow: none !important; + } + + .monaco-editor .view-overlays .current-line { + border: ${EDITOR_CURRENT_LINT_COLOR}; + background-color: ${EDITOR_CURRENT_LINT_COLOR}; + } +`; + +export { MonacoEditor }; \ No newline at end of file From 3316fc908633b925b9988a01f8665e68d5d2500e Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 04:40:02 +0900 Subject: [PATCH 08/37] =?UTF-8?q?feat:=20#29=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=ED=83=AD=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 프로젝트 페이지 상단에 위치한 파일 탭 컴포넌트의 기본적인 UI만 구현 했으며, 추후 확장자 별 아이콘 목록, 저장 상태 반영 등 추가 보완이 필요합니다. --- cocode/src/components/FileTab/index.js | 15 +++++++++++ cocode/src/components/FileTab/style.js | 37 ++++++++++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 cocode/src/components/FileTab/index.js create mode 100644 cocode/src/components/FileTab/style.js diff --git a/cocode/src/components/FileTab/index.js b/cocode/src/components/FileTab/index.js new file mode 100644 index 00000000..279e6443 --- /dev/null +++ b/cocode/src/components/FileTab/index.js @@ -0,0 +1,15 @@ +import React from 'react'; +import * as Styled from './style'; + +function FileTab({ index, FileName, icon, type, className, onClick }) { + const handleTabClick = () => onClick(index); + + return ( + + + {FileName} + + ); +} + +export default FileTab; \ No newline at end of file diff --git a/cocode/src/components/FileTab/style.js b/cocode/src/components/FileTab/style.js new file mode 100644 index 00000000..017cd313 --- /dev/null +++ b/cocode/src/components/FileTab/style.js @@ -0,0 +1,37 @@ +import styled from 'styled-components'; + +//TODO 나중에 테마로 분리할 계획입니다. +const EDITOR_DARK_COLOR = '#111518'; + +const Tab = styled.li` + & { + padding: 0.8rem; + display: inline-flex; + background-color: ${EDITOR_DARK_COLOR}; + font-size: 0.8rem; + cursor: pointer; + } + + &:after { + content: 'X'; + font-weight: 800; + margin-left: 0.8rem; + visibility: hidden; + } + + &:hover { + &:after { + visibility: visible; + } + } +`; + +const Icon = styled.img` + & { + width: 1.2rem; + height: 1.2rem; + margin-right: 0.3rem; + } +`; + +export { Icon, Tab }; \ No newline at end of file From 83d7249ec6a3f87bb415262a2fb4a4bc8d8bb93c Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 04:50:15 +0900 Subject: [PATCH 09/37] =?UTF-8?q?feat:=20#28=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=ED=83=AD=EB=B0=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 프로젝트 페이지 상단에 위치한 파일 탭바 컴포넌트의 기본적인 UI만 구현 했으며, 다른 컴포넌트와 상태 공유 등 추가 보완이 필요합니다. --- cocode/src/components/FileTabBar/index.js | 54 +++++++++++++++++++++++ cocode/src/components/FileTabBar/style.js | 23 ++++++++++ 2 files changed, 77 insertions(+) create mode 100644 cocode/src/components/FileTabBar/index.js create mode 100644 cocode/src/components/FileTabBar/style.js diff --git a/cocode/src/components/FileTabBar/index.js b/cocode/src/components/FileTabBar/index.js new file mode 100644 index 00000000..4def0067 --- /dev/null +++ b/cocode/src/components/FileTabBar/index.js @@ -0,0 +1,54 @@ +import React, { useState } from 'react'; +import * as Styled from './style'; +import FileTab from '../FileTab'; + +const DEFAULT_OPENED_FILE_INDEX = 0; + +function FileTabBar() { + const [ clickedIndex, setClickedIndex ] = useState(DEFAULT_OPENED_FILE_INDEX); + + const files = [ + { + name: 'index.html', + type: 'html', + icon: 'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons/html.svg' + }, + { + name: 'index.js', + type: 'js', + icon: 'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons/javascript.svg' + }, + { + name: 'app.js', + type: 'js', + icon: 'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons/javascript.svg' + }, + { + name: 'app.css', + type: 'css', + icon: 'https://cdn.jsdelivr.net/gh/PKief/vscode-material-icon-theme@master/icons/css.svg' + }, + ]; + + const handleSetClickedIndex = (index) => setClickedIndex(index); + + return ( + + {files.map(({ name, icon, type }, index) => { + return ( + + ); + })} + + ); +} + +export default FileTabBar; \ No newline at end of file diff --git a/cocode/src/components/FileTabBar/style.js b/cocode/src/components/FileTabBar/style.js new file mode 100644 index 00000000..b0981d2b --- /dev/null +++ b/cocode/src/components/FileTabBar/style.js @@ -0,0 +1,23 @@ +import styled from 'styled-components'; + +//TODO 나중에 테마로 분리할 계획입니다. +const EDITOR_MAIN_COLOR = '#1E2022'; + +const TabBar = styled.ul` + & { + width: 100%; + list-style: none; + display: inline-flex; + overflow: scroll; + } + + .clicked { + background-color: ${EDITOR_MAIN_COLOR}; + + &:after { + visibility: visible; + } + } +`; + +export { TabBar }; \ No newline at end of file From a28315ae4e80f39c6f7038fc2f75a6d7f3bb5635 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 04:52:24 +0900 Subject: [PATCH 10/37] =?UTF-8?q?feat:=20=EC=97=90=EB=94=94=ED=84=B0=20?= =?UTF-8?q?=EC=BB=A8=ED=85=8C=EC=9D=B4=EB=84=88=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 탭 컴포넌트와 탭바 컴포넌트, 모나코 컴포넌트를 합친 에디터 컨테이너를 구현했습니다. --- cocode/src/containers/Editor/index.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 cocode/src/containers/Editor/index.js diff --git a/cocode/src/containers/Editor/index.js b/cocode/src/containers/Editor/index.js new file mode 100644 index 00000000..acb503b7 --- /dev/null +++ b/cocode/src/containers/Editor/index.js @@ -0,0 +1,15 @@ +import React from 'react'; + +import FileTabBar from 'components/FileTabBar'; +import MonacoEditor from 'components/MonacoEditor'; + +function Editor() { + return ( + <> + + + + ); +} + +export default Editor; \ No newline at end of file From 322646a4204a54faff36c33b99febd4d8e2b41b3 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 05:01:39 +0900 Subject: [PATCH 11/37] =?UTF-8?q?feat:=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= =?UTF-8?q?=EB=B0=94=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 페이지의 기본 스크롤바에 스타일을 적용하고자 css 파일 생성 후, 이것을 index.html에서 사용합니다. --- cocode/src/components/GlobalStyle/index.js | 28 ++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/cocode/src/components/GlobalStyle/index.js b/cocode/src/components/GlobalStyle/index.js index 4e1713a1..44164529 100644 --- a/cocode/src/components/GlobalStyle/index.js +++ b/cocode/src/components/GlobalStyle/index.js @@ -1,6 +1,34 @@ import { createGlobalStyle } from 'styled-components'; const GlobalStyle = createGlobalStyle` + ::-webkit-scrollbar { + width: 10px; + height: 5px + } + + ::-webkit-scrollbar-track { + background-color: transparent + } + + ::-webkit-scrollbar-thumb { + background-color: #2d2d2d; + border-radius: 5px + } + + ::-webkit-scrollbar-thumb:hover { + background: #4A4A4A + } + + ::-webkit-scrollbar-button:horizontal:decrement, + ::-webkit-scrollbar-button:horizontal:increment { + width: 0px; + height: 0px + } + + ::-webkit-scrollbar-corner { + background-color: transparent + } + * { font-family: 'Source Sans Pro', sans-serif; text-decoration: none; From 39d0b69541cbe9c3ff81f565531e45edb0a56237 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 13:28:26 +0900 Subject: [PATCH 12/37] =?UTF-8?q?chore:=20=EA=B8=80=EB=A1=9C=EB=B2=8C=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit root 영역의 높이값을 100%로 설정했습니다. --- cocode/src/components/GlobalStyle/index.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/cocode/src/components/GlobalStyle/index.js b/cocode/src/components/GlobalStyle/index.js index 44164529..556b5d76 100644 --- a/cocode/src/components/GlobalStyle/index.js +++ b/cocode/src/components/GlobalStyle/index.js @@ -51,6 +51,10 @@ const GlobalStyle = createGlobalStyle` font-size: 16px; } + #root { + height: 100%; + } + button { cursor: pointer; color: ${({ theme }) => theme.textColor}; From aa4300b3fe5fa9e1ca782f187e94c9596f12f68a Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 13:30:30 +0900 Subject: [PATCH 13/37] =?UTF-8?q?chore:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 로그인 모달에 github 로고를 추가했습니다. github 로그인 버튼의 호버 효과를 추가했습니다. 로그인 모달의 뒷 배경색을 theme에 추가했습니다. --- cocode/src/components/LoginModalBody/github.svg | 16 ++++++++++++++++ cocode/src/components/LoginModalBody/index.js | 3 +++ cocode/src/components/LoginModalBody/style.js | 12 ++++++++++-- cocode/src/components/Modal/style.js | 2 +- cocode/src/constants/theme.js | 1 + 5 files changed, 31 insertions(+), 3 deletions(-) create mode 100644 cocode/src/components/LoginModalBody/github.svg diff --git a/cocode/src/components/LoginModalBody/github.svg b/cocode/src/components/LoginModalBody/github.svg new file mode 100644 index 00000000..3244fa6a --- /dev/null +++ b/cocode/src/components/LoginModalBody/github.svg @@ -0,0 +1,16 @@ + + + + Fill 1 + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/cocode/src/components/LoginModalBody/index.js b/cocode/src/components/LoginModalBody/index.js index 73f8cc72..dfd2de4f 100644 --- a/cocode/src/components/LoginModalBody/index.js +++ b/cocode/src/components/LoginModalBody/index.js @@ -1,11 +1,14 @@ import React from 'react'; import * as Styled from './style'; +import Github from './github.svg'; + function LoginModalBody({ onClickLoginButton }) { return ( Sign In + Sign In With GitHub diff --git a/cocode/src/components/LoginModalBody/style.js b/cocode/src/components/LoginModalBody/style.js index 3eff66f2..ed794a33 100644 --- a/cocode/src/components/LoginModalBody/style.js +++ b/cocode/src/components/LoginModalBody/style.js @@ -1,5 +1,9 @@ import styled from 'styled-components'; +const Logo = styled.img` + padding-right: 0.8rem; +`; + const LoginModalBody = styled.div` & { display: flex; @@ -24,10 +28,14 @@ const LoginModalBodyButton = styled.button` font-size: 1.25rem; - color: white; background-color: black; + opacity: 0.85; border-radius: 0.5rem; } + + &:hover { + opacity: 1; + } `; -export { LoginModalBody, LoginModalBodyTitle, LoginModalBodyButton }; +export { Logo, LoginModalBody, LoginModalBodyTitle, LoginModalBodyButton }; diff --git a/cocode/src/components/Modal/style.js b/cocode/src/components/Modal/style.js index 9cf015df..5ed807dd 100644 --- a/cocode/src/components/Modal/style.js +++ b/cocode/src/components/Modal/style.js @@ -12,7 +12,7 @@ const ModalBackGround = styled.div` width: 100%; height: 100%; - background-color: rgba(0, 0, 0, 0.3); + background-color: ${({ theme }) => theme.blackOpaqueColor}; } `; diff --git a/cocode/src/constants/theme.js b/cocode/src/constants/theme.js index 512a85a2..0ccfde8e 100644 --- a/cocode/src/constants/theme.js +++ b/cocode/src/constants/theme.js @@ -2,6 +2,7 @@ const DEFAULT_THEME = { mainColor: '#2accf9', mainOpaqueColor: '#2accf9b3', backgroundColor: '#161419', + blackOpaqueColor: '#000000b3', textColor: '#ffffff' }; From ef551eeb89cd0c01cd14add8b165c144e8c6eb61 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 13:34:19 +0900 Subject: [PATCH 14/37] =?UTF-8?q?chore:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=85=B8=EC=B6=9C=20=EC=8B=9C=20=EC=8A=A4?= =?UTF-8?q?=ED=81=AC=EB=A1=A4=20=EA=B8=B0=EB=8A=A5=20=EA=B8=88=EC=A7=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 로그인 모달이 노출되면 뒷 영역의 스크롤 기능을 금지했습니다. --- cocode/src/components/ModalPortal/index.js | 2 ++ cocode/src/containers/Header/index.js | 6 +++++- 2 files changed, 7 insertions(+), 1 deletion(-) diff --git a/cocode/src/components/ModalPortal/index.js b/cocode/src/components/ModalPortal/index.js index ec1d2b91..ec0f02a7 100644 --- a/cocode/src/components/ModalPortal/index.js +++ b/cocode/src/components/ModalPortal/index.js @@ -1,6 +1,8 @@ import ReactDOM from 'react-dom'; const ModalPortal = ({ children }) => { + const root = document.getElementById('root'); + root.style.overflow = 'hidden'; const modalElement = document.getElementById('modal'); return ReactDOM.createPortal(children, modalElement); }; diff --git a/cocode/src/containers/Header/index.js b/cocode/src/containers/Header/index.js index 71dd3755..efb7d1a3 100644 --- a/cocode/src/containers/Header/index.js +++ b/cocode/src/containers/Header/index.js @@ -9,7 +9,11 @@ import LoginModalBody from 'components/LoginModalBody'; function Header() { const [isSignInModalOpen, setIsSignInModalOpen] = useState(false); const handleOpenSignInModal = () => setIsSignInModalOpen(true); - const handleCloseSignInModal = () => setIsSignInModalOpen(false); + const handleCloseSignInModal = () => { + const root = document.getElementById('root'); + root.style.overflow = 'inherit'; + setIsSignInModalOpen(false); + }; return ( From e8f352d8620f29ae06cfed18e6c6d140ef25699b Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 13:54:42 +0900 Subject: [PATCH 15/37] =?UTF-8?q?test:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 로그인 모달이 생길 때 root 컨테이너의 overflow 속성이 추가되는 것을 확인하기 위해 테스트 코드를 수정했습니다. --- cocode/src/containers/Header/test.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/cocode/src/containers/Header/test.js b/cocode/src/containers/Header/test.js index d41412ed..d3f49b45 100644 --- a/cocode/src/containers/Header/test.js +++ b/cocode/src/containers/Header/test.js @@ -23,6 +23,14 @@ describe('Login modal behavior test', () => { }); function prepareForReactPortal() { + let rootElement = document.getElementById('root'); + if (!rootElement) { + rootElement = document.createElement('div'); + rootElement.setAttribute('id', 'root'); + rootElement.setAttribute('style', '{ overflow: hidden; }'); + document.body.appendChild(rootElement); + } + let modalElement = document.getElementById('modal'); if (!modalElement) { modalElement = document.createElement('div'); From 984eb5ffb056e31dbe97690096bb2719b03b40c7 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 14:36:26 +0900 Subject: [PATCH 16/37] =?UTF-8?q?fix:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=8A=A4=ED=81=AC=EB=A1=A4=EC=8B=9C=20?= =?UTF-8?q?=EB=B0=9C=EC=83=9D=ED=95=98=EB=8A=94=20width=20=EC=9D=B4?= =?UTF-8?q?=EC=8A=88=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 로그인 모달 노출 시 스크롤 영역으로 인한 메인 페이지 width 값 변경을 조정하기 위해 overflow를 overlay로 변경하고, 그에 따라 발생한 리액트 로고 컴포넌트의 위치 이슈를 해결하였습니다. --- cocode/src/components/GlobalStyle/index.js | 4 ++++ cocode/src/components/ReactLogo/index.js | 4 ++-- cocode/src/components/ReactLogo/style.js | 9 ++++++++- cocode/src/containers/Header/index.js | 2 +- 4 files changed, 15 insertions(+), 4 deletions(-) diff --git a/cocode/src/components/GlobalStyle/index.js b/cocode/src/components/GlobalStyle/index.js index 556b5d76..99644b7c 100644 --- a/cocode/src/components/GlobalStyle/index.js +++ b/cocode/src/components/GlobalStyle/index.js @@ -51,6 +51,10 @@ const GlobalStyle = createGlobalStyle` font-size: 16px; } + body { + overflow: overlay; + } + #root { height: 100%; } diff --git a/cocode/src/components/ReactLogo/index.js b/cocode/src/components/ReactLogo/index.js index fce47492..caefaec6 100644 --- a/cocode/src/components/ReactLogo/index.js +++ b/cocode/src/components/ReactLogo/index.js @@ -4,10 +4,10 @@ import logo from './react.svg'; function ReactLogo({ className }) { return ( -
+ -
+ ); } diff --git a/cocode/src/components/ReactLogo/style.js b/cocode/src/components/ReactLogo/style.js index 94e59235..6ff11cd2 100644 --- a/cocode/src/components/ReactLogo/style.js +++ b/cocode/src/components/ReactLogo/style.js @@ -1,5 +1,11 @@ import styled from 'styled-components'; +const Logo = styled.article` + position: relative; + width: 25rem; + height: 25rem; +`; + const Image = styled.img` position: absolute; width: 25rem; @@ -7,9 +13,10 @@ const Image = styled.img` `; const Blur = styled.img` + position: absolute; width: 25rem; height: 25rem; filter: blur(3rem); `; -export { Image, Blur }; \ No newline at end of file +export { Logo, Image, Blur }; \ No newline at end of file diff --git a/cocode/src/containers/Header/index.js b/cocode/src/containers/Header/index.js index efb7d1a3..715be341 100644 --- a/cocode/src/containers/Header/index.js +++ b/cocode/src/containers/Header/index.js @@ -11,7 +11,7 @@ function Header() { const handleOpenSignInModal = () => setIsSignInModalOpen(true); const handleCloseSignInModal = () => { const root = document.getElementById('root'); - root.style.overflow = 'inherit'; + root.style.overflow = 'overlay'; setIsSignInModalOpen(false); }; From f823a5fc16fac412ec1b37dfb92f7850d3f5f0dc Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 15:26:42 +0900 Subject: [PATCH 17/37] =?UTF-8?q?chore:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B2=AB=EB=B2=88=EC=A7=B8=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메인 페이지 첫번째 섹션의 디자인을 전체적으로 수정했습니다. --- cocode/src/components/CloseButton/index.js | 5 +-- cocode/src/components/CloseButton/style.js | 13 ++++++++ cocode/src/components/Logo/logo.svg | 38 +++++++++------------- cocode/src/containers/Header/style.js | 26 ++++++++------- cocode/src/containers/Main/style.js | 4 +-- 5 files changed, 49 insertions(+), 37 deletions(-) create mode 100644 cocode/src/components/CloseButton/style.js diff --git a/cocode/src/components/CloseButton/index.js b/cocode/src/components/CloseButton/index.js index b5facc9f..0c467cb5 100644 --- a/cocode/src/components/CloseButton/index.js +++ b/cocode/src/components/CloseButton/index.js @@ -1,11 +1,12 @@ import React from 'react'; +import * as Styled from './style'; import close from './close.svg'; function CloseButton({ onClick }) { return ( - + ); } diff --git a/cocode/src/components/CloseButton/style.js b/cocode/src/components/CloseButton/style.js new file mode 100644 index 00000000..495cbdd7 --- /dev/null +++ b/cocode/src/components/CloseButton/style.js @@ -0,0 +1,13 @@ +import styled from 'styled-components'; + +const Button = styled.button` + & { + opacity: 0.7; + } + + &:hover { + opacity: 1; + } +`; + +export { Button }; \ No newline at end of file diff --git a/cocode/src/components/Logo/logo.svg b/cocode/src/components/Logo/logo.svg index bf1c12ee..d1b22e56 100644 --- a/cocode/src/components/Logo/logo.svg +++ b/cocode/src/components/Logo/logo.svg @@ -1,25 +1,19 @@ - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + - - - - \ No newline at end of file diff --git a/cocode/src/containers/Header/style.js b/cocode/src/containers/Header/style.js index 769b1bf6..8530aebb 100644 --- a/cocode/src/containers/Header/style.js +++ b/cocode/src/containers/Header/style.js @@ -1,20 +1,24 @@ import styled from 'styled-components'; const Header = styled.header` - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - - height: 11.2vh; - - background-color: ${({ theme }) => theme.backgroundColor}; - padding: 1rem 2rem; + & { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + + height: 12vh; + + background-color: ${({ theme }) => theme.backgroundColor}; + padding: 2rem 2.3rem; + } `; const SignInButton = styled.button` - font-size: 1.5rem; - font-weight: 100; + & { + font-size: 1.4rem; + font-weight: 100; + } &:hover { font-weight: 400; diff --git a/cocode/src/containers/Main/style.js b/cocode/src/containers/Main/style.js index 6bf755a9..bd7f09db 100644 --- a/cocode/src/containers/Main/style.js +++ b/cocode/src/containers/Main/style.js @@ -2,7 +2,7 @@ import styled from 'styled-components'; const Main = styled.section` & { - height: 88.8vh; + height: 88vh; display: flex; margin: 0 8rem; } @@ -35,7 +35,7 @@ const Title = styled.h1` const SubTitle = styled.h2` & { - font-size: 3rem; + font-size: 2.8rem; font-weight: 200; } From 276e0a7b423e3e5f4faeb48f0393b869705aec78 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 15:27:59 +0900 Subject: [PATCH 18/37] =?UTF-8?q?chore:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=91=90=EB=B2=88=EC=A7=B8=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메인 페이지 두번째 섹션의 디자인을 전체적으로 수정했습니다. --- cocode/src/containers/AboutCocode/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cocode/src/containers/AboutCocode/style.js b/cocode/src/containers/AboutCocode/style.js index 9752d348..faf375ad 100644 --- a/cocode/src/containers/AboutCocode/style.js +++ b/cocode/src/containers/AboutCocode/style.js @@ -15,7 +15,7 @@ const DescriptionPhrase = styled.h1` & { text-align: center; - font-size: 3rem; + font-size: 2.8rem; font-weight: lighter; } From 774ba14ee46768c7780061b22aa22a430cd8c8c9 Mon Sep 17 00:00:00 2001 From: hzoou Date: Thu, 21 Nov 2019 15:29:19 +0900 Subject: [PATCH 19/37] =?UTF-8?q?chore:=20=EB=A9=94=EC=9D=B8=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=84=B8=EB=B2=88=EC=A7=B8=20=EC=84=B9?= =?UTF-8?q?=EC=85=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 메인 페이지 세번째 섹션의 디자인을 전체적으로 수정했습니다. --- cocode/src/containers/AboutUs/style.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/cocode/src/containers/AboutUs/style.js b/cocode/src/containers/AboutUs/style.js index b04cdb56..6f20003f 100644 --- a/cocode/src/containers/AboutUs/style.js +++ b/cocode/src/containers/AboutUs/style.js @@ -9,7 +9,7 @@ const AboutUs = styled.section` flex-direction: column; justify-content: center; - padding: 5rem 10rem; + padding: 5rem 8rem; } .AboutUs-item { @@ -21,7 +21,7 @@ const AboutUsTitle = styled.h1` & { text-align: center; - font-size: 3rem; + font-size: 2.8rem; font-weight: lighter; } @@ -51,11 +51,11 @@ const AboutUsProfileCard = styled.div` const AboutUsProfileImage = styled.img` & { - height: 11rem; - width: 11rem; + height: 9.8rem; + width: 9.8rem; padding: 0.5rem; - margin-bottom: 1.5rem; + margin-bottom: 1.3rem; } `; @@ -63,7 +63,7 @@ const AboutUsProfileName = styled.h2` & { text-align: center; - font-size: 1.5rem; + font-size: 1.3rem; font-weight: 100; } `; @@ -74,7 +74,7 @@ const AboutUsProfileLink = styled.a` text-decoration: none; color: ${({ theme }) => theme.textColor}; - font-size: 1.5rem; + font-size: 1.3rem; font-weight: 100; } From 3c3248224eb3232ec0bbcc50d9a7a4de27fc6465 Mon Sep 17 00:00:00 2001 From: Basiltoast Date: Thu, 21 Nov 2019 15:10:08 +0900 Subject: [PATCH 20/37] =?UTF-8?q?feat:=20#7=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 드롭다운 메뉴를 작성하였습니다. --- cocode/src/components/DropDownMenu/index.js | 26 +++++++++++ cocode/src/components/DropDownMenu/style.js | 48 +++++++++++++++++++++ 2 files changed, 74 insertions(+) create mode 100644 cocode/src/components/DropDownMenu/index.js create mode 100644 cocode/src/components/DropDownMenu/style.js diff --git a/cocode/src/components/DropDownMenu/index.js b/cocode/src/components/DropDownMenu/index.js new file mode 100644 index 00000000..7c48960d --- /dev/null +++ b/cocode/src/components/DropDownMenu/index.js @@ -0,0 +1,26 @@ +import * as React from 'react'; +import { useState } from 'react'; +import * as Styled from './style'; + +function DropDownMenu({ children, menuItems, ...props }) { + const [isOpen, setIsOpen] = useState(false); + + const handleIsOpen = () => setIsOpen(!isOpen); + return ( + + {React.cloneElement(children, { onClick: handleIsOpen })} + {isOpen && ( + + {menuItems && + menuItems.map(({ value, ...props }, key) => ( + + {value} + + ))} + + )} + + ); +} + +export default DropDownMenu; diff --git a/cocode/src/components/DropDownMenu/style.js b/cocode/src/components/DropDownMenu/style.js new file mode 100644 index 00000000..4b51c3b1 --- /dev/null +++ b/cocode/src/components/DropDownMenu/style.js @@ -0,0 +1,48 @@ +import styled from 'styled-components'; + +const DropDownMenu = styled.div` + & { + display: flex; + justify-content: flex-end; + + position: relative; + } +`; + +const DropDownList = styled.ul` + & { + display: flex; + flex-direction: column; + + position: absolute; + + top: 100%; + padding: 0; + margin: 0; + } +`; + +const DropDownItem = styled.button` + & { + height: 2.5rem; + width: 8rem; + padding: 0.25rem 1rem; + z-index: 1; + + font-size: 1.5rem; + color: ${({ theme }) => theme.textColor}; + vertical-align: center; + text-align: right; + + background-color: #2b2b2b; + + border: none; + border-top: solid #383838; + } + &:hover { + background-color: #4b4b4b; + cursor: pointer; + } +`; + +export { DropDownMenu, DropDownList, DropDownItem }; From 362dce56afffc191750cc75861a7b8b08ae546fc Mon Sep 17 00:00:00 2001 From: Basiltoast Date: Thu, 21 Nov 2019 15:12:56 +0900 Subject: [PATCH 21/37] =?UTF-8?q?test:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EB=A9=94=EB=89=B4=20=EC=8A=A4=ED=86=A0=EB=A6=AC?= =?UTF-8?q?=EB=B3=B4=EB=93=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 드롭다운 메뉴를 테스트하기 위해 스토리보드에 추가하였습니다. --- .../components/DropDownMenu/index.stories.js | 61 +++++++++++++++++++ 1 file changed, 61 insertions(+) create mode 100644 cocode/src/components/DropDownMenu/index.stories.js diff --git a/cocode/src/components/DropDownMenu/index.stories.js b/cocode/src/components/DropDownMenu/index.stories.js new file mode 100644 index 00000000..b98ad907 --- /dev/null +++ b/cocode/src/components/DropDownMenu/index.stories.js @@ -0,0 +1,61 @@ +import React from 'react'; +import styled from 'styled-components'; +import DropDownMenu from '.'; + +export default { + title: 'DropDownMenu' +}; + +const Box = styled.div` + display: flex; + flex-direction: row; + /* flex: 1; */ +`; + +const Button = styled.button` + padding: 2rem; + width: 10rem; + height: 4rem; + background-color: #5b5b5b; +`; + +export const dropDownMenu = () => { + const menuItems = [ + { + value: 'test1', + onClick: () => alert('test1') + }, + { + value: 'test2', + onClick: () => alert('test2') + }, + { + value: 'test3', + onClick: () => alert('test3') + }, + { + value: 'test4', + onClick: () => alert('test4') + }, + { + value: 'test5', + onClick: () => alert('test5') + } + ]; + return ( + + + + + + + + + + + + + + + ); +}; From a3bdc74e23ba42c1899ca82a2ceb8c97a51f25a9 Mon Sep 17 00:00:00 2001 From: Basiltoast Date: Thu, 21 Nov 2019 15:50:34 +0900 Subject: [PATCH 22/37] =?UTF-8?q?chore:=20=EB=B6=88=ED=95=84=EC=9A=94?= =?UTF-8?q?=ED=95=9C=20=EC=A3=BC=EC=84=9D=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit storyboard의 테스트 스타일에서 불필요한 주석을 삭제하였습니다. --- cocode/src/components/DropDownMenu/index.stories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cocode/src/components/DropDownMenu/index.stories.js b/cocode/src/components/DropDownMenu/index.stories.js index b98ad907..872039ba 100644 --- a/cocode/src/components/DropDownMenu/index.stories.js +++ b/cocode/src/components/DropDownMenu/index.stories.js @@ -9,7 +9,6 @@ export default { const Box = styled.div` display: flex; flex-direction: row; - /* flex: 1; */ `; const Button = styled.button` From b9dfd5dcaf859a941d23938e5f60606fbec57a30 Mon Sep 17 00:00:00 2001 From: Basiltoast Date: Thu, 21 Nov 2019 15:57:40 +0900 Subject: [PATCH 23/37] =?UTF-8?q?refactor:=20button=20color=20=EC=83=81?= =?UTF-8?q?=EC=88=98=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 버튼의 색을 CSS에 직접 입력하는 것이 아닌 상수로 관리하여 사용하는 것이 더 옳다고 생각하여 버튼의 색을 상수값으로 변경하였습니다. --- cocode/src/components/DropDownMenu/style.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/cocode/src/components/DropDownMenu/style.js b/cocode/src/components/DropDownMenu/style.js index 4b51c3b1..3f1f48e6 100644 --- a/cocode/src/components/DropDownMenu/style.js +++ b/cocode/src/components/DropDownMenu/style.js @@ -1,5 +1,9 @@ import styled from 'styled-components'; +const BUTTON_COLOR = '#2b2b2b'; +const BUTTON_COLOR_HOVER = '#4b4b4b'; +const BUTTON_BOUNDARY = '#383838'; + const DropDownMenu = styled.div` & { display: flex; @@ -30,17 +34,16 @@ const DropDownItem = styled.button` z-index: 1; font-size: 1.5rem; - color: ${({ theme }) => theme.textColor}; vertical-align: center; text-align: right; - background-color: #2b2b2b; + background-color: ${BUTTON_COLOR}; border: none; - border-top: solid #383838; + border-top: solid ${BUTTON_BOUNDARY}; } &:hover { - background-color: #4b4b4b; + background-color: ${BUTTON_COLOR_HOVER}; cursor: pointer; } `; From 6dfd58155d240a14470922020efa3aad53ce2735 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 16:04:27 +0900 Subject: [PATCH 24/37] =?UTF-8?q?fix:=20browser=20component=20address=20in?= =?UTF-8?q?put=20props=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit adressInputFontColor로 잘못 작성되어 있던 것을 adressInputTextColor로 수정했습니다. --- cocode/src/components/Browser/index.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/cocode/src/components/Browser/index.js b/cocode/src/components/Browser/index.js index 65c8860f..c9787e7e 100644 --- a/cocode/src/components/Browser/index.js +++ b/cocode/src/components/Browser/index.js @@ -35,13 +35,20 @@ function BrowserHeader({ defaultValue={addressInputURL} onKeyUp={handleAddressInputKeyDown} adressInputBGColor={theme.adressInputBGColor} - adressInputFontColor={theme.adressInputTextColor} + adressInputTextColor={theme.adressInputTextColor} /> ); } -function Browser({ onGoBackward, onGoForward, onReload, url, theme }) { +function Browser({ + className, + onGoBackward, + onGoForward, + onReload, + url, + theme +}) { const [addressInputURL, setAddressInput] = useState( url ? url : DEFAULT_URL ); @@ -53,7 +60,7 @@ function Browser({ onGoBackward, onGoForward, onReload, url, theme }) { }; return ( - + Date: Thu, 21 Nov 2019 17:31:56 +0900 Subject: [PATCH 25/37] =?UTF-8?q?chore:=20editor=20component=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 높이 및 추가 옵션 값을 설정해주었습니다. --- cocode/src/components/MonacoEditor/index.js | 25 ++++++++++++--------- 1 file changed, 14 insertions(+), 11 deletions(-) diff --git a/cocode/src/components/MonacoEditor/index.js b/cocode/src/components/MonacoEditor/index.js index 46f403a8..94f8fd09 100644 --- a/cocode/src/components/MonacoEditor/index.js +++ b/cocode/src/components/MonacoEditor/index.js @@ -2,16 +2,19 @@ import React from 'react'; import { ControlledEditor } from '@monaco-editor/react'; import * as Styled from './style'; -function MonacoEditor() { - return ( - - - - ); +function MonacoEditor(props) { + return ( + + + + ); } -export default MonacoEditor; \ No newline at end of file +export default MonacoEditor; From 685e9ffe2ca910ea281bfc369cde7cc2e8a1feed Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 17:37:32 +0900 Subject: [PATCH 26/37] =?UTF-8?q?chore:=20tab=20bar=20component=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 테스트 과정에서 추가된 높이 속성을 제거했습니다. 불필요한 tab bar item을 제거했습니다. --- cocode/src/components/TabBar/index.js | 3 --- cocode/src/components/TabBar/style.js | 2 -- 2 files changed, 5 deletions(-) diff --git a/cocode/src/components/TabBar/index.js b/cocode/src/components/TabBar/index.js index 027fd63a..89e98f51 100644 --- a/cocode/src/components/TabBar/index.js +++ b/cocode/src/components/TabBar/index.js @@ -6,9 +6,6 @@ import ProjectIcon from 'components/ProjectIcon'; function TabBar({ theme }) { return ( - - - diff --git a/cocode/src/components/TabBar/style.js b/cocode/src/components/TabBar/style.js index 0eb33d88..c1b3c549 100644 --- a/cocode/src/components/TabBar/style.js +++ b/cocode/src/components/TabBar/style.js @@ -6,8 +6,6 @@ const TabBar = styled.nav` flex-direction: column; justify-content: flex-start; - height: 100vh; - background-color: ${({ tabBarBGColor }) => tabBarBGColor}; } `; From 9f1ac933afd47e3efbba29a595302effbe382cf1 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 17:49:36 +0900 Subject: [PATCH 27/37] =?UTF-8?q?chore:=20editor=20container=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit editor의 상단에 File tab bar가 위치하고 하단에 monaco editor가 나오도록 스타일을 수정했습니다. --- cocode/src/containers/Editor/index.js | 15 ++++++++------- cocode/src/containers/Editor/style.js | 17 +++++++++++++++++ 2 files changed, 25 insertions(+), 7 deletions(-) create mode 100644 cocode/src/containers/Editor/style.js diff --git a/cocode/src/containers/Editor/index.js b/cocode/src/containers/Editor/index.js index acb503b7..7533cd30 100644 --- a/cocode/src/containers/Editor/index.js +++ b/cocode/src/containers/Editor/index.js @@ -1,15 +1,16 @@ import React from 'react'; +import * as Styled from './style'; import FileTabBar from 'components/FileTabBar'; import MonacoEditor from 'components/MonacoEditor'; function Editor() { - return ( - <> - - - - ); + return ( + + + + + ); } -export default Editor; \ No newline at end of file +export default Editor; diff --git a/cocode/src/containers/Editor/style.js b/cocode/src/containers/Editor/style.js new file mode 100644 index 00000000..3491a075 --- /dev/null +++ b/cocode/src/containers/Editor/style.js @@ -0,0 +1,17 @@ +import styled from 'styled-components'; + +const Editor = styled.section` + & { + display: flex; + flex-direction: column; + + /* temp width */ + width: 20rem; + } + + .Stretch-width { + flex-grow: 2; + } +`; + +export { Editor }; From c2791feb9226a4a9357265acb7ea8e1982d96017 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 17:54:56 +0900 Subject: [PATCH 28/37] =?UTF-8?q?chore:=20project=20tab=20=EC=8A=A4?= =?UTF-8?q?=ED=83=80=EC=9D=BC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 높이 속성을 제거해 주었습니다. split pane 적용 전에 임시 너비 값을 추가해 주었습니다. --- cocode/src/containers/ProjectTab/style.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cocode/src/containers/ProjectTab/style.js b/cocode/src/containers/ProjectTab/style.js index 959ff32b..98fc843d 100644 --- a/cocode/src/containers/ProjectTab/style.js +++ b/cocode/src/containers/ProjectTab/style.js @@ -3,8 +3,8 @@ import { TAB_CONTAINER_THEME } from 'constants/theme'; const ProjectTab = styled.section` & { - width: 100%; - height: 100vh; + /* temp width */ + width: 15rem; background-color: ${TAB_CONTAINER_THEME.tabContainerBGColor}; } From ed663b4a358bf5a35d460d57f2c7279e224cf302 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Thu, 21 Nov 2019 18:14:59 +0900 Subject: [PATCH 29/37] =?UTF-8?q?feat:=20#110=20project=20page=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EA=B5=AC=EC=A1=B0=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit project page의 기본 구조를 구현했습니다. 기본 골격만 구현되어 있으므로 event처리는 완성되어 있지 않습니다. --- cocode/src/pages/Project/index.js | 24 +++++++++++++++++++----- cocode/src/pages/Project/style.js | 16 ++++++++++++++++ 2 files changed, 35 insertions(+), 5 deletions(-) create mode 100644 cocode/src/pages/Project/style.js diff --git a/cocode/src/pages/Project/index.js b/cocode/src/pages/Project/index.js index c2e0ca41..dd77f333 100644 --- a/cocode/src/pages/Project/index.js +++ b/cocode/src/pages/Project/index.js @@ -1,13 +1,27 @@ import React from 'react'; +import * as Styled from './style'; + +import Header from 'containers/Header'; +import TabBar from 'components/TabBar'; +import ProjectTab from 'containers/ProjectTab'; +import Editor from 'containers/Editor'; +import Browser from 'components/Browser'; + +import { TAB_BAR_THEME, BROWSER_THEME } from 'constants/theme'; function Project() { return ( <> -
-

Hello! Project!!

-
-
-
+
+ + + + + + ); } diff --git a/cocode/src/pages/Project/style.js b/cocode/src/pages/Project/style.js new file mode 100644 index 00000000..565a0f51 --- /dev/null +++ b/cocode/src/pages/Project/style.js @@ -0,0 +1,16 @@ +import styled from 'styled-components'; + +const Main = styled.main` + & { + display: flex; + flex-direction: row; + + height: 88.8vh; + + .Project-main-stretch { + flex-grow: 2; + } + } +`; + +export { Main }; From 52f754dddd25131f21bd28ac974d33726051c96f Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:36:00 +0900 Subject: [PATCH 30/37] =?UTF-8?q?feat:=20browser=20version=201=20component?= =?UTF-8?q?=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 하나의 react 파일만 빌드하는 기능을 가지는 Browser를 구현했습니다. 같은 팀원 분인 BasilToast님의 프로토타입을 가지고 구현했습니다. repository link: https://github.com/BasilToast/cocode_react_template --- cocode/public/index.html | 8 ++++++++ cocode/src/components/BrowserV1/index.js | 23 +++++++++++++++++++++++ cocode/src/components/BrowserV1/style.js | 12 ++++++++++++ 3 files changed, 43 insertions(+) create mode 100644 cocode/src/components/BrowserV1/index.js create mode 100644 cocode/src/components/BrowserV1/style.js diff --git a/cocode/public/index.html b/cocode/public/index.html index 7dee8479..0b59b7c1 100644 --- a/cocode/public/index.html +++ b/cocode/public/index.html @@ -11,6 +11,14 @@
+ + diff --git a/cocode/src/components/BrowserV1/index.js b/cocode/src/components/BrowserV1/index.js new file mode 100644 index 00000000..a7ab79e9 --- /dev/null +++ b/cocode/src/components/BrowserV1/index.js @@ -0,0 +1,23 @@ +import React, { useEffect } from 'react'; +import * as Styled from './style'; + +import * as babel from '@babel/core'; +import reactPreset from '@babel/preset-react'; + +function BrowserV1({ code, ...props }) { + const buildCode = () => { + try { + const parsedCode = babel.transform(code, { + presets: [reactPreset] + }); + eval(parsedCode.code); + } catch (e) { + console.log(e); + } + }; + + useEffect(buildCode, [code]); + return ; +} + +export default BrowserV1; diff --git a/cocode/src/components/BrowserV1/style.js b/cocode/src/components/BrowserV1/style.js new file mode 100644 index 00000000..0fa19cf7 --- /dev/null +++ b/cocode/src/components/BrowserV1/style.js @@ -0,0 +1,12 @@ +import styled from 'styled-components'; + +const BrowserV1 = styled.div` + & { + height: ${({ height }) => height}; + + background-color: white; + color: black; + } +`; + +export { BrowserV1 }; From 6704923b910eb7ab1f696d8e2ca243590ec33b51 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:38:47 +0900 Subject: [PATCH 31/37] =?UTF-8?q?chore:=20editor=20containet=20style=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 editor가 화면상에서 좁게 표시되어 width를 조정해주었습니다. --- cocode/src/containers/Editor/style.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cocode/src/containers/Editor/style.js b/cocode/src/containers/Editor/style.js index 3491a075..cc218ed7 100644 --- a/cocode/src/containers/Editor/style.js +++ b/cocode/src/containers/Editor/style.js @@ -6,7 +6,7 @@ const Editor = styled.section` flex-direction: column; /* temp width */ - width: 20rem; + width: 30rem; } .Stretch-width { From 3071fba2f6155dfcfbb9b046f7aff43985de383f Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:40:47 +0900 Subject: [PATCH 32/37] =?UTF-8?q?chore:=20monaco=20editor=20props=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 editor에 표시될 code와 change handler를 주입받도록 component를 수정 했습니다. --- cocode/src/components/MonacoEditor/index.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/cocode/src/components/MonacoEditor/index.js b/cocode/src/components/MonacoEditor/index.js index 94f8fd09..feb2b5af 100644 --- a/cocode/src/components/MonacoEditor/index.js +++ b/cocode/src/components/MonacoEditor/index.js @@ -2,16 +2,17 @@ import React from 'react'; import { ControlledEditor } from '@monaco-editor/react'; import * as Styled from './style'; -function MonacoEditor(props) { +function MonacoEditor({ code, onChange, ...props }) { return ( ); From 2d3b3d105141ce4cf34b4f7787e026751901299a Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:42:47 +0900 Subject: [PATCH 33/37] =?UTF-8?q?feat:=20project=20context=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 상위 컴포넌트에서 관리하는 state를 하위 컴포넌트에서 쉽게 접근할 수 있도록 context를 구현했습니다. 해당하는 도메인의 state 구조를 쉽게 알아 볼 수 있도록 PropTypes를 이용하여 구조를 명시해주었습니다. --- cocode/src/contexts/ProjectContext.js | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 cocode/src/contexts/ProjectContext.js diff --git a/cocode/src/contexts/ProjectContext.js b/cocode/src/contexts/ProjectContext.js new file mode 100644 index 00000000..73a87ee8 --- /dev/null +++ b/cocode/src/contexts/ProjectContext.js @@ -0,0 +1,9 @@ +import PropTypes from 'prop-types'; +import { createContext } from 'react'; + +const ProjectContext = createContext(); +ProjectContext.propTypes = { + code: PropTypes.string +}; + +export default ProjectContext; From 4e0a5d254b5fbe22333c241b37ed852a5617bca5 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:45:03 +0900 Subject: [PATCH 34/37] =?UTF-8?q?feat:=20project=20action=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 해당 도메인에서 발생하는 동작을 정의한 action을 구현했습니다. 현재 version에서 project에서 발생하는 동작은 최초에 정보를 가져오는 fetch와 code를 수정했을 때 발생하는 update입니다. action은 action name과 actionCreator로 나누어지며 actionCreator는 reducer에서 사용될 action을 만들어주는 함수 입니다. --- cocode/src/actions/Project.js | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 cocode/src/actions/Project.js diff --git a/cocode/src/actions/Project.js b/cocode/src/actions/Project.js new file mode 100644 index 00000000..26e091ce --- /dev/null +++ b/cocode/src/actions/Project.js @@ -0,0 +1,16 @@ +const UPDATE_CODE = 'updateCode'; +function updateCodeActionCreator(payload) { + return { type: UPDATE_CODE, payload }; +} + +const FETCH_PROJECT = 'fetchProject'; +function fetchProjectActionCreator() { + return { type: FETCH_PROJECT }; +} + +export { + UPDATE_CODE, + updateCodeActionCreator, + FETCH_PROJECT, + fetchProjectActionCreator +}; From a77fa6989c1842aacf2c225c0118dda8bb0036d1 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:48:10 +0900 Subject: [PATCH 35/37] =?UTF-8?q?feat:=20projcet=20reducer=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit action을 주입받아 특정 action에 대한 동작을 수행하게 하는 reducer를 구현했습니다. --- cocode/src/reducers/ProjectReducer.js | 34 +++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 cocode/src/reducers/ProjectReducer.js diff --git a/cocode/src/reducers/ProjectReducer.js b/cocode/src/reducers/ProjectReducer.js new file mode 100644 index 00000000..131ef792 --- /dev/null +++ b/cocode/src/reducers/ProjectReducer.js @@ -0,0 +1,34 @@ +import { UPDATE_CODE, FETCH_PROJECT } from 'actions/Project'; + +const INITIAL_CODE = `const { useState } = React; + +function App() { + const [state, setState] = useState('Cocode'); + + return( + <> +

Hi! {state}

+ + ) +} + +ReactDOM.render(, document.getElementById('coconut-root')); +`; + +function ProjectReducer(state, { type, payload }) { + switch (type) { + case UPDATE_CODE: { + return { ...state, code: payload }; + } + case FETCH_PROJECT: { + // TODO: API server에 fetch 요청 보내서 가져오기 + const fetchedProject = { code: INITIAL_CODE }; + return fetchedProject; + } + default: { + throw new Error(`unexpected action.type: ${type}`); + } + } +} + +export default ProjectReducer; From 71d16a177fc692131d232ca15b923892f722c2de Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:50:06 +0900 Subject: [PATCH 36/37] =?UTF-8?q?feat:=20projcet=20page=EC=97=90=20context?= =?UTF-8?q?=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 하위 컴포넌트에서 project 정보에 접근할 수 있도록 context를 제공하도록 했습니다. --- cocode/src/pages/Project/index.js | 28 +++++++++++++++++++++------- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/cocode/src/pages/Project/index.js b/cocode/src/pages/Project/index.js index dd77f333..f6b52ea2 100644 --- a/cocode/src/pages/Project/index.js +++ b/cocode/src/pages/Project/index.js @@ -1,28 +1,42 @@ -import React from 'react'; +import React, { useReducer, useEffect } from 'react'; import * as Styled from './style'; import Header from 'containers/Header'; import TabBar from 'components/TabBar'; import ProjectTab from 'containers/ProjectTab'; import Editor from 'containers/Editor'; -import Browser from 'components/Browser'; +import BrowserV1 from 'components/BrowserV1'; -import { TAB_BAR_THEME, BROWSER_THEME } from 'constants/theme'; +import ProjectReducer from 'reducers/ProjectReducer'; +import ProjectContext from 'contexts/ProjectContext'; +import { fetchProjectActionCreator } from 'actions/Project'; + +import { TAB_BAR_THEME } from 'constants/theme'; function Project() { + const [project, dispatchProject] = useReducer(ProjectReducer, {}); + + const handleFetchProject = () => { + const fetchProjectAction = fetchProjectActionCreator(); + dispatchProject(fetchProjectAction); + }; + + useEffect(handleFetchProject, []); + return ( - <> +
- - + ); } From 7f94df66753e3cda63effaf889ebcdb4a10cb187 Mon Sep 17 00:00:00 2001 From: YukJiSoo Date: Fri, 22 Nov 2019 09:52:14 +0900 Subject: [PATCH 37/37] =?UTF-8?q?feat:=20editor=20container=EC=97=90?= =?UTF-8?q?=EC=84=9C=20context=20=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84?= =?UTF-8?q?=EB=A1=9D=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Project page의 하위 컴포넌트인 Editor에서 project context에 접근하도록 구현했습니다. Editor는 MonacoEditor 컴포넌트에 code와 code change handler를 넘겨 하위 컴포넌트에서 상위 컴포넌트의 구체적인 내용을 앞 필요 없도록 구현했습니다. --- cocode/src/containers/Editor/index.js | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/cocode/src/containers/Editor/index.js b/cocode/src/containers/Editor/index.js index 7533cd30..49235887 100644 --- a/cocode/src/containers/Editor/index.js +++ b/cocode/src/containers/Editor/index.js @@ -1,14 +1,29 @@ -import React from 'react'; +import React, { useContext } from 'react'; import * as Styled from './style'; import FileTabBar from 'components/FileTabBar'; import MonacoEditor from 'components/MonacoEditor'; +import ProjectContext from 'contexts/ProjectContext'; +import { updateCodeActionCreator } from 'actions/Project'; + function Editor() { + const { project, dispatchProject } = useContext(ProjectContext); + const { code } = project; + + const handleChangeCode = (_, changedCode) => { + const updateCodeAction = updateCodeActionCreator(changedCode); + dispatchProject(updateCodeAction); + }; + return ( - + ); }