CEOS-Developers · jinnyleeis · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024 · Mar 20, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -9,6 +9,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.1.8",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

diff --git a/public/index.html b/public/index.html
@@ -29,15 +29,5 @@
 	<body>
 		<noscript>You need to enable JavaScript to run this app.</noscript>
 		<div id="root"></div>
-		<!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
 	</body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,8 +1,58 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import Section from './Section';
+
+const AppContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 80%;
+  margin: 30px auto;
+`;
+
+const Input = styled.input`
+  margin: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+  margin: 5px;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
 function App() {
+  const [sections, setSections] = useState([]);
+  const [sectionName, setSectionName] = useState('');
+
+  const addSection = () => {
+    setSections([...sections, { id: sections.length + 1, name: sectionName, todos: [] }]);
+    setSectionName('');
+  };
+
   return (
-    <div className="App">
-      <h1>CEOS 19기 프론트엔드 파이팅!( ¨̮ )و✧🔥</h1>
-    </div>
+    <AppContainer>
+      <Input 
+        type="text"
+        placeholder="New Section Name"
+        value={sectionName}
+        onChange={(e) => setSectionName(e.target.value)}
+      />
+      <Button onClick={addSection}>Add Section</Button>
+      {sections.map((section) => (
+        <Section key={section.id} section={section} />
+      ))}
+    </AppContainer>
   );
 }
 

diff --git a/src/Section.js b/src/Section.js
@@ -0,0 +1,59 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import TodoItem from './TodoItem';
+
+const SectionContainer = styled.div`
+  margin: 20px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+`;
+
+const Input = styled.input`
+  margin: 10px;
+  padding: 10px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
+`;
+
+const Button = styled.button`
+  padding: 10px 20px;
+  margin: 5px;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: white;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    background-color: #0056b3;
+  }
+`;
+
+function Section({ section }) {
+  const [todos, setTodos] = useState(section.todos);
+  const [todoText, setTodoText] = useState('');
+
+  const addTodo = () => {
+    setTodos([...todos, { id: todos.length + 1, text: todoText }]);
+    setTodoText('');
+  };
+
+  return (
+    <SectionContainer>
+      <h2>{section.name}</h2>
+      <Input 
+        type="text"
+        placeholder="New Todo"
+        value={todoText}
+        onChange={(e) => setTodoText(e.target.value)}
+      />
+      <Button onClick={addTodo}>Add Todo</Button>
+      {todos.map((todo) => (
+        <TodoItem key={todo.id} todo={todo} />
+      ))}
+    </SectionContainer>
+  );
+}
+
+export default Section;
diff --git a/src/TodoItem.js b/src/TodoItem.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const ItemContainer = styled.div`
+	display: flex;
+	justify-content: space-between;
+	margin: 10px;
+	padding: 10px;
+	border-bottom: 1px solid #eee;
+`;
+
+function TodoItem({ todo }) {
+	return (
+		<ItemContainer>
+			<span>{todo.text}</span>
+		</ItemContainer>
+	);
+}
+
+export default TodoItem;
diff --git a/src/index.js b/src/index.js
@@ -1,10 +1,10 @@
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App";
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App';
 
-const root = ReactDOM.createRoot(document.getElementById("root"));
+const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>
 );