Merge pull request #71 from Konkuk-KUIT/yeonwook

5차시 과제제출
Konkuk-KUIT · May 4, 2024 · 945299c · 945299c
2 parents db5ad8e + 0b808b4
commit 945299c
Show file tree

Hide file tree

Showing 9 changed files with 17,717 additions and 0 deletions.
diff --git a/week5/yeonwook/package-lock.json b/week5/yeonwook/package-lock.json
diff --git a/week5/yeonwook/package.json b/week5/yeonwook/package.json
@@ -0,0 +1,23 @@
+{
+  "scripts": {
+    "start": "react-scripts start"
+  },
+  "dependencies": {
+    "prop-types": "^15.8.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-scripts": "^5.0.1"
+  },
+  "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/week5/yeonwook/public/index.html b/week5/yeonwook/public/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Todo App</title>
+    <link rel="stylesheet" href="index.css" />
+  </head>
+  <body>
+    <div id="app"></div>
+  </body>
+</html>
diff --git a/week5/yeonwook/src/App.js b/week5/yeonwook/src/App.js
@@ -0,0 +1,62 @@
+import React from 'react';
+import todoData from './todoData.json';
+import Todo from './Todo';
+import Completed from './Completed';
+import POverFive from './POverFive';
+
+const Header = ({ title }) => {
+  return (
+    <>
+      <h1>{title}</h1>
+    </>
+  );
+};
+
+const App = () => {
+  const title = 'Todo List';
+
+  return (
+    <>
+      <Header title={title} />
+
+      <h3>실습</h3>
+
+      {todoData.todos.map((value, index) => (
+        <Todo
+          key={value.id}
+          id={value.id}
+          task={value.task}
+          completed={value.completed}
+          priority={value.priority}
+        />
+      ))}
+
+      <h3>미션1: completed가 true인 값만 map으로 출력하기</h3>
+
+      {todoData.todos.map((value, index) => (
+        <Completed
+          key={value.id}
+          id={value.id}
+          task={value.task}
+          completed={value.completed}
+          priority={value.priority}
+        />
+      ))}
+
+      <h3>미션2: priority가 5 이상인 값만 map으로 출력하기</h3>
+
+      {todoData.todos.map((value, index) => (
+        <POverFive
+          key={value.id}
+          id={value.id}
+          task={value.task}
+          completed={value.completed}
+          priority={value.priority}
+        />
+      ))}
+
+    </>
+  );
+};
+
+export default App;
diff --git a/week5/yeonwook/src/Completed.jsx b/week5/yeonwook/src/Completed.jsx
@@ -0,0 +1,14 @@
+export default function Completed({ id, task, completed, priority }){
+    if(completed == true){
+        return(
+            <div>
+            <div>id : {id}</div>
+            <div>task : {task}</div>
+            <div>completed : {completed.toString()}</div>
+            <div>priority : {priority}</div>
+            <div>-------------------</div>
+            </div>
+        )
+    }
+    else return;
+}
diff --git a/week5/yeonwook/src/POverFive.jsx b/week5/yeonwook/src/POverFive.jsx
@@ -0,0 +1,16 @@
+export default function POverFive({id, task, completed, priority}){
+
+    if(priority > 5){
+        return(
+            <div>
+          <div>id : {id}</div>
+          <div>task : {task}</div>
+          <div>completed : {completed.toString()}</div>
+          <div>priority : {priority}</div>
+          <div>-------------------</div>
+            </div>
+        )
+    }
+    else return;
+
+}
diff --git a/week5/yeonwook/src/Todo.js b/week5/yeonwook/src/Todo.js
@@ -0,0 +1,15 @@
+import React from 'react';
+
+const Todo = ({ id, task, completed, priority }) => {
+  return (
+    <div>
+      <div>id : {id}</div>
+      <div>task : {task}</div>
+      <div>completed : {completed.toString()}</div>
+      <div>priority : {priority}</div>
+      <div>-------------------</div>
+    </div>
+  );
+};
+
+export default Todo;
diff --git a/week5/yeonwook/src/index.js b/week5/yeonwook/src/index.js
@@ -0,0 +1,6 @@
+import { createRoot } from 'react-dom/client';
+import App from './App';
+
+const root = createRoot(document.getElementById('app'));
+
+root.render(<App />);
diff --git a/week5/yeonwook/src/todoData.json b/week5/yeonwook/src/todoData.json
@@ -0,0 +1,34 @@
+{
+  "todos": [
+    {
+      "id": 1,
+      "task": "청소하기",
+      "completed": true,
+      "priority": 3
+    },
+    {
+      "id": 2,
+      "task": "쇼핑하기",
+      "completed": false,
+      "priority": 7
+    },
+    {
+      "id": 3,
+      "task": "운동하기",
+      "completed": true,
+      "priority": 6
+    },
+    {
+      "id": 4,
+      "task": "공부하기",
+      "completed": false,
+      "priority": 4
+    },
+    {
+      "id": 5,
+      "task": "요리하기",
+      "completed": true,
+      "priority": 8
+    }
+  ]
+}