[team-22][FE] 2주차 2번째 PR - Park + BB

back/src/middlewares/cors.js

@@ -11,6 +11,10 @@ const cors = (req, res, next) => {
       key: "Access-Control-Allow-Methods",
       value: isProduction ? SERVICE_DOMAIN : "*",
     },
+    {
+      key: "Access-Control-Allow-Headers",
+      value: isProduction ? SERVICE_DOMAIN : "*",
+    },
   ];
   accessControls.forEach((control) => {
     const { key, value } = control;

front/.eslintrc.js

@@ -11,6 +11,15 @@ module.exports = {
     "plugin:prettier/recommended",
     "plugin:import/recommended",
   ],
+  settings: {
+    "import/resolver": {
+      webpack: {
+        env: {
+          DEPLOY: true,
+        },
+      },
+    },
+  },
   rules: {
     "prettier/prettier": [
       "error",
@@ -34,5 +43,6 @@ module.exports = {
     "import/prefer-default-export": "off",
     "func-names": "off",
     "no-underscore-dangle": ["error", { allow: ["_id"] }],
+    "no-param-reassign": "off",
   },
 };

front/package.json

@@ -36,6 +36,7 @@
     "eslint": "^8.2.0",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
+    "eslint-import-resolver-webpack": "^0.13.2",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-webpack-plugin": "^3.1.1",

front/src/App.js

@@ -1,22 +1,37 @@
+import Columns from "components/Content/Columns/Columns";
+import Content from "components/Content/Content";
+import Header from "components/Header/Header";
+import Modal from "components/Modal/Modal";
+import SideContent from "components/SideContent/SideContent";
+import peact from "core/peact";
+import columnApi from "service/columnApi";
+import logApi from "service/logApi";
+import todoApi from "service/todoApi";
+
 import styles from "./App.module.css";
-import Content from "./components/Content/Content";
-import Header from "./components/Header/Header";
-import SideContent from "./components/SideContent/SideContent";
-import peact from "./core/peact";
-import columnApi from "./service/columnApi";
-import logApi from "./service/logApi";
-import todoApi from "./service/todoApi";
 
 const App = () => {
   const [todos, setTodos] = peact.useState([]);
   const [columns, setColumns] = peact.useState([]);
   const [todoLogs, setTodoLogs] = peact.useState([]);
   const [renderFlag, setRenderFlag] = peact.useState(false);
+  const [selectedTodoId, setSelectedTodoId] = peact.useState(null);
+  const [isModalVisible, setIsModalVisible] = peact.useState(false);
+
+  const modalRef = peact.useRef();
 
   const handleRenderFlag = () => {
     setRenderFlag(!renderFlag);
   };
 
+  const handleModalVisibility = () => {
+    setIsModalVisible(!isModalVisible);
+  };
+
+  const handleSelectedTodoId = (todoId) => {
+    setSelectedTodoId(todoId);
+  };
+
   peact.useEffect(() => {
     const fetchTodos = async () => {
       const newTodos = await todoApi.getTodos();
@@ -35,16 +50,41 @@ const App = () => {
     fetchTodoLogs();
   }, [renderFlag]);
 
+  const modalHandlers = {
+    handleRenderFlag,
+    handleSelectedTodoId,
+    handleModalVisibility,
+  };
+
+  const $modal = Modal({
+    handlers: modalHandlers,
+    ref: modalRef,
+    isModalVisible,
+    selectedTodoId,
+  });
+
+  const columnsHandlers = {
+    handleRenderFlag,
+    handleSelectedTodoId,
+    handleModalVisibility,
+  };
+
+  const $columns = Columns({
+    columns,
+    todos,
+    handlers: columnsHandlers,
+  });
+
   const $todoListArea = peact.createElement({
     tag: "div",
     className: styles.todolistArea,
-    child: [Header(), Content({ columns, todos, handleRenderFlag })],
+    child: [Header(), Content({ content: $columns })],
   });
 
   return peact.createElement({
     tag: "div",
     className: styles.wrap,
-    child: [$todoListArea, SideContent({ todoLogs, columns })],
+    child: [$todoListArea, SideContent({ todoLogs, columns }), $modal],
   });
 };
 

front/src/common/constants.js

@@ -1,6 +1,6 @@
 export const LOG_TYPE = {
-  create: "등록",
-  delete: "삭제",
-  update: "변경",
-  move: "이동",
+  CREATE: "등록",
+  DELETE: "삭제",
+  UPDATE: "변경",
+  MOVE: "이동",
 };