Product: 0.4

Product 0.4

client/package.json

@@ -48,11 +48,14 @@
     "@fortawesome/free-brands-svg-icons": "^5.11.2",
     "@fortawesome/free-solid-svg-icons": "^5.11.2",
     "@fortawesome/react-fontawesome": "^0.1.7",
+    "ansicolor": "^1.1.92",
     "axios": "^0.19.0",
     "debug": "^4.1.1",
+    "dotenv-webpack": "^1.7.0",
     "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "socket.io-client": "^2.3.0",
     "styled-components": "^4.4.1",
     "uuidv4": "^6.0.0"
   }

client/src/actions/CellAction.js

@@ -56,13 +56,15 @@ const cellActionCreator = {
    * - 엔터시 기준 셀의 다음 셀에 셀을 생성한다.
    * @param {Cell} createMarkdownCell 새 셀 컴포넌트를 리턴하는 콜백
    * @param {String} tag 셀의 타입(태그). 생략시 default input 셀이 생성된다.
+   * @param {Number} start ordered list일 경우의 start
    */
-  new(cellUuid, createMarkdownCell, tag = CELL_TAG.DEFAULT) {
+  new(cellUuid, createMarkdownCell, tag = CELL_TAG.DEFAULT, start = null) {
     return {
       type: CELL_ACTION.NEW,
       cellUuid,
       createMarkdownCell,
       tag,
+      start,
     };
   },
 
@@ -142,15 +144,16 @@ const cellActionCreator = {
    * @param {String} text 변경할 Cell의 텍스트
    * @param {String} tag 변경할 Cell의 태그
    * @param {React.element} cell 변경할 Cell 요소
+   * @param {Number} start ordered-list일 경우의 start
    */
-  transform(cellUuid, text, tag, cell, start) {
+  transform(cellUuid, text, tag, cell, start = null) {
     return {
       type: CELL_ACTION.TARGET.TRANSFORM,
       cellUuid,
       text,
       tag,
       cell,
-      start: start || null,
+      start,
     };
   },
 
@@ -165,23 +168,19 @@ const cellActionCreator = {
 
   /**
    * 쉬프트+위 입력시 선택할 셀의 범위를 위로 한 단계 올린다.
-   * @param {Uuid} cellUuid 블록을 시작할 기준 셀의 uuid
    */
-  blockUp(cellUuid) {
+  blockUp() {
     return {
       type: CELL_ACTION.BLOCK.UP,
-      cellUuid,
     };
   },
 
   /**
    * 쉬프트+아래 입력시 선택할 셀의 범위를 위로 한 단계 내린다.
-   * @param {Uuid} cellUuid 블록을 시작할 기준 셀의 uuid
    */
-  blockDown(cellUuid) {
+  blockDown() {
     return {
       type: CELL_ACTION.BLOCK.DOWN,
-      cellUuid,
     };
   },
 
@@ -219,12 +218,11 @@ const cellActionCreator = {
   },
 
   /**
-   * @param {Uuid} cellUuid 붙여넣기를 할 기준 셀의 uuid
+   * 현재 셀의 다음 셀부터 클립보드의 내용을 붙여넣기 한다.
    */
-  paste(cellUuid) {
+  paste() {
     return {
       type: CELL_ACTION.CLIPBOARD.PASTE,
-      cellUuid,
     };
   },
 

client/src/actions/TerminalAction.js

@@ -15,6 +15,8 @@ const TERMINAL_ACTION = {
   UPDATE_OUTPUT: "terminal/update-output",
 
   DELETE_REPL: "terminal/delete-repl",
+
+  LOAD: "terminal/load",
 };
 
 const terminalActionCreator = {
@@ -41,10 +43,9 @@ const terminalActionCreator = {
    * 터미널 쉘 명령을 평가할 수 있다.
    * @param {String} commandString REPL cell에 입력된 쉘 명령이다.
    */
-  evalInput(commandString) {
+  evalInput() {
     return {
       type: TERMINAL_ACTION.EVAL_INPUT,
-      commandString,
     };
   },
 
@@ -57,10 +58,9 @@ const terminalActionCreator = {
     };
   },
 
-  focusIn(cellUuid) {
+  focusIn() {
     return {
       type: TERMINAL_ACTION.FOCUS_IN,
-      cellUuid,
     };
   },
 
@@ -108,13 +108,11 @@ const terminalActionCreator = {
 
   /**
    * REPL 출력값을 업데이트한다.
-   * @param {Number} index 업데이트될 REPL cell index다.
    * @param {String} text 업데이트될 REPL 출력값이다.
    */
-  updateOutputText(index, text) {
+  updateOutputText(text) {
     return {
       type: TERMINAL_ACTION.UPDATE_OUTPUT,
-      index,
       text,
     };
   },
@@ -124,6 +122,13 @@ const terminalActionCreator = {
       type: TERMINAL_ACTION.DELETE_REPL,
     };
   },
+
+  load(outputString) {
+    return {
+      type: TERMINAL_ACTION.LOAD,
+      outputString,
+    };
+  },
 };
 
 export { TERMINAL_ACTION, terminalActionCreator };

client/src/actions/TerminalSetting.js

@@ -0,0 +1,45 @@
+const TERMINAL_SETTING_ACTION = {
+  SELECT: {
+    OS: "terminal-setting/select/os",
+    PE: "terminal-setting/select/pe",
+    DB: "terminal-setting/select/db",
+  },
+  MOVE: {
+    PREV: "terminal-setting/move/prev",
+    NEXT: "terminal-setting/move/next",
+    STEP: "terminal-setting/move/step",
+  },
+  HIDE: "terminal-setting/hide",
+};
+
+const terminalSettingActionCreator = {
+  selectOS(os) {
+    return { type: TERMINAL_SETTING_ACTION.SELECT.OS, os };
+  },
+
+  selectPE(pe) {
+    return { type: TERMINAL_SETTING_ACTION.SELECT.PE, pe };
+  },
+
+  selectDB(db) {
+    return { type: TERMINAL_SETTING_ACTION.SELECT.DB, db };
+  },
+
+  prevStep(step) {
+    return { type: TERMINAL_SETTING_ACTION.MOVE.PREV, step };
+  },
+
+  nextStep(step) {
+    return { type: TERMINAL_SETTING_ACTION.MOVE.NEXT, step };
+  },
+
+  selectStep(step) {
+    return { type: TERMINAL_SETTING_ACTION.MOVE.STEP, step };
+  },
+
+  viewTerminalSetting() {
+    return { type: TERMINAL_SETTING_ACTION.HIDE };
+  },
+};
+
+export { TERMINAL_SETTING_ACTION, terminalSettingActionCreator };

client/src/components/editor/EditorComponent.jsx

@@ -1,9 +1,17 @@
 import React, { useContext, useEffect, useRef } from "react";
+import styled from "styled-components";
+
 import { CellContext, CellDispatchContext } from "../../stores/CellStore";
 import { cellActionCreator } from "../../actions/CellAction";
 import { uuidManager } from "../../utils";
 import { MarkdownCell } from "./cells";
 
+const EditorComponentWrapper = styled.section`
+  width: 99%;
+  display: flex;
+  flex-direction: column;
+`;
+
 const EditorComponent = () => {
   const { state } = useContext(CellContext);
   const cellDispatch = useContext(CellDispatchContext);
@@ -21,13 +29,13 @@ const EditorComponent = () => {
   }, []);
 
   return (
-    <>
+    <EditorComponentWrapper>
       {cells.map((cell, cellIndex) => {
         const uuidArray = uuidManager.getUuidArray();
         const key = uuidArray[cellIndex];
         return <React.Fragment key={key}>{cell}</React.Fragment>;
       })}
-    </>
+    </EditorComponentWrapper>
   );
 };