Merge pull request #127 from connect-foundation/cocode

Cocode 1차 version 배포
connect-foundation · Nov 22, 2019 · c236806 · c236806
2 parents fe6fa0e + 7f94df6
commit c236806
Show file tree

Hide file tree

Showing 47 changed files with 898 additions and 64 deletions.
diff --git 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/public/index.html b/cocode/public/index.html
@@ -11,6 +11,14 @@
 	<body>
 		<div id="root"></div>
 		<div id="modal"></div>
+		<script
+			src="https://unpkg.com/react@16/umd/react.development.js"
+			crossorigin
+		></script>
+		<script
+			src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+			crossorigin
+		></script>
 		<script src="./bundle.js"></script>
 	</body>
 </html>
diff --git a/cocode/src/actions/Project.js 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
+};
diff --git 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}
 			/>
 		</Styled.BrowserHeader>
 	);
 }
 
-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 (
-		<Styled.Browser height={theme.browserHeignt}>
+		<Styled.Browser className={className} height={theme.browserHeignt}>
 			<BrowserHeader
 				onGoBackward={onGoBackward}
 				onGoForward={onGoForward}

diff --git a/cocode/src/components/BrowserV1/index.js 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 <Styled.BrowserV1 {...props}></Styled.BrowserV1>;
+}
+
+export default BrowserV1;
diff --git a/cocode/src/components/BrowserV1/style.js 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 };
diff --git 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 (
-		<button onClick={onClick}>
+		<Styled.Button onClick={onClick}>
 			<img src={close} />
-		</button>
+		</Styled.Button>
 	);
 }
 

diff --git a/cocode/src/components/CloseButton/style.js 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 };
diff --git a/cocode/src/components/DropDownMenu/index.js 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 (
+		<Styled.DropDownMenu {...props}>
+			{React.cloneElement(children, { onClick: handleIsOpen })}
+			{isOpen && (
+				<Styled.DropDownList>
+					{menuItems &&
+						menuItems.map(({ value, ...props }, key) => (
+							<Styled.DropDownItem {...props} key={key}>
+								{value}
+							</Styled.DropDownItem>
+						))}
+				</Styled.DropDownList>
+			)}
+		</Styled.DropDownMenu>
+	);
+}
+
+export default DropDownMenu;
diff --git a/cocode/src/components/DropDownMenu/index.stories.js b/cocode/src/components/DropDownMenu/index.stories.js
@@ -0,0 +1,60 @@
+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;
+`;
+
+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 (
+		<Box>
+			<DropDownMenu menuItems={menuItems}>
+				<button>Test1</button>
+			</DropDownMenu>
+			<DropDownMenu menuItems={menuItems}>
+				<button>Test2</button>
+			</DropDownMenu>
+			<DropDownMenu menuItems={menuItems}>
+				<button>Test3</button>
+			</DropDownMenu>
+			<DropDownMenu menuItems={menuItems}>
+				<Button>custom button</Button>
+			</DropDownMenu>
+		</Box>
+	);
+};
diff --git a/cocode/src/components/DropDownMenu/style.js b/cocode/src/components/DropDownMenu/style.js
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+const BUTTON_COLOR = '#2b2b2b';
+const BUTTON_COLOR_HOVER = '#4b4b4b';
+const BUTTON_BOUNDARY = '#383838';
+
+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;
+		vertical-align: center;
+		text-align: right;
+
+		background-color: ${BUTTON_COLOR};
+
+		border: none;
+		border-top: solid ${BUTTON_BOUNDARY};
+	}
+	&:hover {
+		background-color: ${BUTTON_COLOR_HOVER};
+		cursor: pointer;
+	}
+`;
+
+export { DropDownMenu, DropDownList, DropDownItem };
diff --git a/cocode/src/components/FileTab/index.js 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 (
+        <Styled.Tab onClick={handleTabClick} className={className}>
+            <Styled.Icon src={icon} alt={type} />
+            {FileName}
+        </Styled.Tab>
+    );
+}
+
+export default FileTab;
diff --git a/cocode/src/components/FileTab/style.js 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 };
diff --git a/cocode/src/components/FileTabBar/index.js 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 (
+		<Styled.TabBar>
+			{files.map(({ name, icon, type }, index) => {
+				return (
+					<FileTab
+						key={index}
+						index={index}
+						FileName={name}
+						icon={icon}
+						type={type}
+						className={index === clickedIndex ? 'clicked' : ''}
+						onClick={handleSetClickedIndex}
+					/>
+				);
+			})}
+		</Styled.TabBar>
+	);
+}
+
+export default FileTabBar;