code-bs · hyunwoo045 · May 9, 2021 · yuda1124 · May 9, 2021 · yuda1124
diff --git a/hw/.gitignore b/hw/.gitignore
@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/hw/package-lock.json b/hw/package-lock.json
diff --git a/hw/package.json b/hw/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "hw",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.12.0",
+    "@testing-library/react": "^11.2.6",
+    "@testing-library/user-event": "^12.8.3",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "web-vitals": "^1.1.2"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/hw/public/index.html b/hw/public/index.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Drag and Drop</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/hw/public/manifest.json b/hw/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/hw/src/App.css b/hw/src/App.css
@@ -0,0 +1,39 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: #f3f3f3;
+}
+
+.flexbox {
+    display : flex;
+    justify-content: space-between;
+    width: 100%;
+    max-width: 768px;
+    height: 100vh;
+
+    overflow: hidden;
+    margin: 0 auto;
+    padding: 15px;
+}
+
+.flexbox .board {
+    display: flex;
+    flex-direction: column;
+
+    width: 100%;
+    max-width: 300px;
+    background-color: #313131;
+    padding: 15px;
+}
+
+.flexbox .board .card{
+    padding: 15px 25px;
+    background-color: #f3f3f3;
+    cursor: pointer;
+    margin-bottom: 15px;
+}
+
diff --git a/hw/src/App.js b/hw/src/App.js
@@ -0,0 +1,30 @@
+import React from "react";
+import Board from "./Components/Board";
+import Card from "./Components/Card";
+
+function App() {
+  return (
+    <div className="App">
+      <main className="flexbox">
+        <Board id="board-1" className="board">
+          <Card id="card-1" className="card" draggable="true">
+            <p>Card One</p>
+          </Card>
+        </Board>
+
+        <Board id="board-2" className="board">
+          <Card id="card-2" className="card" draggable="true">
+            <p>Card Two</p>
+          </Card>
+          <Card id="card-3" className="card" draggable="true">
+            <p>Card Three</p>
+          </Card>
+          <Card id="card-4" className="card" draggable="true">
+            <p>Card Four</p>
+          </Card>
+        </Board>
+      </main>
+    </div>
+  );
+}
+export default App;
diff --git a/hw/src/Components/Board.js b/hw/src/Components/Board.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+function Board(props) {
+  const drop = (e) => {
+    e.preventDefault();
+    const card_id = e.dataTransfer.getData("card_id");
+    const card = document.getElementById(card_id);
+    card.style.display = "block";
+    e.target.appendChild(card);
+  };
+
+  const dragOver = (e) => {
+    e.preventDefault();
+  };
+
+  return (
+    <div
+      id={props.id}
+      onDrop={drop}
+      onDragOver={dragOver}
+      className={props.className}
+    >
+      {props.children}
+    </div>
+  );
+}
+
+export default Board;
diff --git a/hw/src/Components/Card.js b/hw/src/Components/Card.js
@@ -0,0 +1,28 @@
+import React from "react";
+
+function Card(props) {
+  const dragStart = (e) => {
+    const target = e.target;
+    e.dataTransfer.setData("card_id", target.id);
+    setTimeout(() => {
+      target.style.display = "none";
+    }, 0);
+  };
+
+  const dragOver = (e) => {
+    e.stopPropagation();
+  };
+
+  return (
+    <div
+      id={props.id}
+      className={props.className}
+      draggable={props.draggable}
+      onDragStart={dragStart}
+      onDragOver={dragOver}
+    >
+      {props.children}
+    </div>
+  );
+}
+export default Card;
diff --git a/hw/src/index.js b/hw/src/index.js
@@ -0,0 +1,13 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import App from "./App";
+import "./App.css";
+import reportWebVitals from "./reportWebVitals";
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById("root")
+);
+reportWebVitals();
diff --git a/hw/src/reportWebVitals.js b/hw/src/reportWebVitals.js
@@ -0,0 +1,13 @@
+const reportWebVitals = onPerfEntry => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;