Skip to content

Commit c236806

Browse files
YukJiSooYukJiSoo
authored
Merge pull request #127 from connect-foundation/cocode
Cocode 1차 version 배포
2 parents fe6fa0e + 7f94df6 commit c236806

File tree

47 files changed

+898
-64
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

47 files changed

+898
-64
lines changed

‎cocode/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"homepage": "https://github.com/connect-foundation/2019-04#readme",
4040
"dependencies": {
4141
"@material-ui/core": "^4.6.0",
42+
"@monaco-editor/react": "^2.3.0",
4243
"axios": "^0.19.0",
4344
"dotenv": "^8.2.0",
4445
"file-loader": "^4.2.0",

‎cocode/public/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,14 @@
1111
<body>
1212
<div id="root"></div>
1313
<div id="modal"></div>
14+
<script
15+
src="https://unpkg.com/react@16/umd/react.development.js"
16+
crossorigin
17+
></script>
18+
<script
19+
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
20+
crossorigin
21+
></script>
1422
<script src="./bundle.js"></script>
1523
</body>
1624
</html>

‎cocode/src/actions/Project.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const UPDATE_CODE = 'updateCode';
2+
function updateCodeActionCreator(payload) {
3+
return { type: UPDATE_CODE, payload };
4+
}
5+
6+
const FETCH_PROJECT = 'fetchProject';
7+
function fetchProjectActionCreator() {
8+
return { type: FETCH_PROJECT };
9+
}
10+
11+
export {
12+
UPDATE_CODE,
13+
updateCodeActionCreator,
14+
FETCH_PROJECT,
15+
fetchProjectActionCreator
16+
};

‎cocode/src/components/Browser/index.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,20 @@ function BrowserHeader({
3535
defaultValue={addressInputURL}
3636
onKeyUp={handleAddressInputKeyDown}
3737
adressInputBGColor={theme.adressInputBGColor}
38-
adressInputFontColor={theme.adressInputTextColor}
38+
adressInputTextColor={theme.adressInputTextColor}
3939
/>
4040
</Styled.BrowserHeader>
4141
);
4242
}
4343

44-
function Browser({ onGoBackward, onGoForward, onReload, url, theme }) {
44+
function Browser({
45+
className,
46+
onGoBackward,
47+
onGoForward,
48+
onReload,
49+
url,
50+
theme
51+
}) {
4552
const [addressInputURL, setAddressInput] = useState(
4653
url ? url : DEFAULT_URL
4754
);
@@ -53,7 +60,7 @@ function Browser({ onGoBackward, onGoForward, onReload, url, theme }) {
5360
};
5461

5562
return (
56-
<Styled.Browser height={theme.browserHeignt}>
63+
<Styled.Browser className={className} height={theme.browserHeignt}>
5764
<BrowserHeader
5865
onGoBackward={onGoBackward}
5966
onGoForward={onGoForward}

‎cocode/src/components/BrowserV1/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React, { useEffect } from 'react';
2+
import * as Styled from './style';
3+
4+
import * as babel from '@babel/core';
5+
import reactPreset from '@babel/preset-react';
6+
7+
function BrowserV1({ code, ...props }) {
8+
const buildCode = () => {
9+
try {
10+
const parsedCode = babel.transform(code, {
11+
presets: [reactPreset]
12+
});
13+
eval(parsedCode.code);
14+
} catch (e) {
15+
console.log(e);
16+
}
17+
};
18+
19+
useEffect(buildCode, [code]);
20+
return <Styled.BrowserV1 {...props}></Styled.BrowserV1>;
21+
}
22+
23+
export default BrowserV1;

‎cocode/src/components/BrowserV1/style.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import styled from 'styled-components';
2+
3+
const BrowserV1 = styled.div`
4+
& {
5+
height: ${({ height }) => height};
6+
7+
background-color: white;
8+
color: black;
9+
}
10+
`;
11+
12+
export { BrowserV1 };

‎cocode/src/components/CloseButton/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import React from 'react';
2+
import * as Styled from './style';
23
import close from './close.svg';
34

45
function CloseButton({ onClick }) {
56
return (
6-
<button onClick={onClick}>
7+
<Styled.Button onClick={onClick}>
78
<img src={close} />
8-
</button>
9+
</Styled.Button>
910
);
1011
}
1112

‎cocode/src/components/CloseButton/style.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import styled from 'styled-components';
2+
3+
const Button = styled.button`
4+
& {
5+
opacity: 0.7;
6+
}
7+
8+
&:hover {
9+
opacity: 1;
10+
}
11+
`;
12+
13+
export { Button };

‎cocode/src/components/DropDownMenu/index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import * as React from 'react';
2+
import { useState } from 'react';
3+
import * as Styled from './style';
4+
5+
function DropDownMenu({ children, menuItems, ...props }) {
6+
const [isOpen, setIsOpen] = useState(false);
7+
8+
const handleIsOpen = () => setIsOpen(!isOpen);
9+
return (
10+
<Styled.DropDownMenu {...props}>
11+
{React.cloneElement(children, { onClick: handleIsOpen })}
12+
{isOpen && (
13+
<Styled.DropDownList>
14+
{menuItems &&
15+
menuItems.map(({ value, ...props }, key) => (
16+
<Styled.DropDownItem {...props} key={key}>
17+
{value}
18+
</Styled.DropDownItem>
19+
))}
20+
</Styled.DropDownList>
21+
)}
22+
</Styled.DropDownMenu>
23+
);
24+
}
25+
26+
export default DropDownMenu;

‎cocode/src/components/DropDownMenu/index.stories.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import DropDownMenu from '.';
4+
5+
export default {
6+
title: 'DropDownMenu'
7+
};
8+
9+
const Box = styled.div`
10+
display: flex;
11+
flex-direction: row;
12+
`;
13+
14+
const Button = styled.button`
15+
padding: 2rem;
16+
width: 10rem;
17+
height: 4rem;
18+
background-color: #5b5b5b;
19+
`;
20+
21+
export const dropDownMenu = () => {
22+
const menuItems = [
23+
{
24+
value: 'test1',
25+
onClick: () => alert('test1')
26+
},
27+
{
28+
value: 'test2',
29+
onClick: () => alert('test2')
30+
},
31+
{
32+
value: 'test3',
33+
onClick: () => alert('test3')
34+
},
35+
{
36+
value: 'test4',
37+
onClick: () => alert('test4')
38+
},
39+
{
40+
value: 'test5',
41+
onClick: () => alert('test5')
42+
}
43+
];
44+
return (
45+
<Box>
46+
<DropDownMenu menuItems={menuItems}>
47+
<button>Test1</button>
48+
</DropDownMenu>
49+
<DropDownMenu menuItems={menuItems}>
50+
<button>Test2</button>
51+
</DropDownMenu>
52+
<DropDownMenu menuItems={menuItems}>
53+
<button>Test3</button>
54+
</DropDownMenu>
55+
<DropDownMenu menuItems={menuItems}>
56+
<Button>custom button</Button>
57+
</DropDownMenu>
58+
</Box>
59+
);
60+
};

0 commit comments

Comments
 (0)