리액트 과제 리뷰

src/components/service/ButtonSection/index.module.css

@@ -0,0 +1,4 @@
+.buttonSection {
+  display: flex;
+  justify-content: flex-end;
+}

src/components/service/ButtonSection/index.tsx

@@ -0,0 +1,13 @@
+import { Button } from "../../ui/Button";
+import styles from "./index.module.css";
+import { useNavigate } from "react-router-dom";
+
+export const ButtonSection = () => {
+  const navigate = useNavigate();
+
+  return (
+    <section className={styles.buttonSection}>
+      <Button onClick={() => navigate("/create")}>+ 새 할 일 추가</Button>
+    </section>
+  );
+};

src/components/service/Header/index.module.css

@@ -0,0 +1,16 @@
+.header {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background: #fff;
+  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
+  width: 100%;
+  position: fixed;
+  top: 0px;
+  z-index: 1000;
+}
+
+.logo {
+  width: 32px;
+  height: 32px;
+}

src/components/service/Header/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./index.module.css";
+
+export const Header = () => {
+  return (
+    <header className={styles.header}>
+      <img src="/logo.png" alt="logo" className={styles.logo} />
+    </header>
+  );
+};

src/components/service/TodoSection/TodoCard.module.css

@@ -0,0 +1,52 @@
+.card {
+  background: #f9fafb;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+  padding: 12px;
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.cardTitle {
+  font-weight: 500;
+}
+
+.cardDate {
+  background-color: #e5e7eb;
+  color: #374151;
+  font-size: 12px;
+  font-weight: bold;
+  border-radius: 9999px;
+  padding: 4px 12px;
+}
+
+.cardDescription {
+  color: #6b7280;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
+.avatarSection {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+}
+
+.avatar {
+  width: 24px;
+  height: 24px;
+  border-radius: 9999px;
+  background-color: #ccc;
+  box-shadow: 0px 0px 0px 2px #fff;
+}
+
+.avatarText {
+  font-weight: 500;
+  font-size: 14px;
+  color: #6b7280;
+  margin-left: 8px;
+}

src/components/service/TodoSection/TodoCard.tsx

@@ -0,0 +1,36 @@
+import styles from "./TodoCard.module.css";
+import { Todo } from "../../../types/todo";
+
+type Props = {
+  task: Todo;
+};
+
+export const TodoCard = ({ task }: Props) => {
+  const { title, content, startDate, assignees } = task;
+
+  const formattedDate = new Date(startDate).toLocaleDateString("ko-KR", {
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  });
+
+  return (
+    <div className={styles.card}>
+      <div className={styles.cardHeader}>
+        <div className={styles.cardTitle}>{title}</div>
+        <div className={styles.cardDate}>{formattedDate}</div>
+      </div>
+      <div className={styles.cardDescription}>{content}</div>
+      <div className={styles.avatarSection}>
+        {assignees.map((assignee, i) => (
+          <div
+            className={styles.avatar}
+            key={assignee}
+            style={{ zIndex: 10 - i, marginLeft: i > 0 ? "-12px" : "0" }}
+          ></div>
+        ))}
+        <span className={styles.avatarText}>{assignees.join(",")}</span>
+      </div>
+    </div>
+  );
+};

src/components/service/TodoSection/TodoColumn.module.css

@@ -0,0 +1,17 @@
+.container {
+  flex: 1;
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+  box-shadow: "0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1)";
+  margin-top: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: bold;
+  margin-bottom: 16px;
+}

src/components/service/TodoSection/TodoColumn.tsx

@@ -0,0 +1,19 @@
+import styles from "./TodoColumn.module.css";
+import { TodoCard } from "./TodoCard";
+import { Todo } from "../../../types/todo";
+
+type Props = {
+  title: string;
+  tasks: Todo[];
+};
+
+export const TodoColumn = ({ title, tasks }: Props) => {
+  return (
+    <div className={styles.container}>
+      <h2 className={styles.title}>{title}</h2>
+      {tasks.map((task) => (
+        <TodoCard key={task.id} task={task} />
+      ))}
+    </div>
+  );
+};

src/components/service/TodoSection/index.module.css

@@ -0,0 +1,4 @@
+.todoSection {
+  display: flex;
+  gap: 24px;
+}

src/components/service/TodoSection/index.tsx

@@ -0,0 +1,36 @@
+import { useEffect, useState } from "react";
+import styles from "./index.module.css";
+import { TodoColumn } from "./TodoColumn";
+import { Todo } from "../../../types/todo";
+
+const columns = [
+  { title: "시작하지 않음", status: "notStarted" },
+  { title: "진행 중", status: "inProgress" },
+  { title: "완료", status: "done" },
+];
+
+export const TodoSection = () => {
+  const [todos, setTodos] = useState<Todo[]>([]);
+
+  useEffect(() => {
+    const fetchTodos = async () => {
+      const response = await fetch("/api/todos");
+      const data = await response.json();
+      setTodos(data);
+    };
+    fetchTodos();
+  }, []);
+
+  console.log(todos);
+  return (
+    <section className={styles.todoSection}>
+      {columns.map((column) => (
+        <TodoColumn
+          key={column.status}
+          title={column.title}
+          tasks={todos.filter((todo) => todo.status === column.status)}
+        />
+      ))}
+    </section>
+  );
+};

src/components/shared/Container/index.module.css

@@ -0,0 +1,4 @@
+.container {
+  width: 90%;
+  margin: 0 auto;
+}

src/components/shared/Container/index.tsx

@@ -0,0 +1,9 @@
+import styles from "./index.module.css";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export const Container = ({ children }: Props) => {
+  return <div className={styles.container}>{children}</div>;
+};

src/components/ui/Button/index.module.css

@@ -0,0 +1,11 @@
+.button {
+  margin-top: 80px;
+  padding: 8px 16px;
+  height: 40px;
+  border: none;
+  background: #000;
+  color: #fff;
+  cursor: pointer;
+  border-radius: 4px;
+  width: fit-content;
+}

src/components/ui/Button/index.tsx

@@ -0,0 +1,14 @@
+import styles from "./index.module.css";
+
+type Props = {
+  children: React.ReactNode;
+  onClick?: () => void;
+};
+
+export const Button = ({ children, onClick }: Props) => {
+  return (
+    <button className={styles.button} onClick={onClick}>
+      {children}
+    </button>
+  );
+};

src/mocks/handlers.ts

@@ -11,7 +11,7 @@ type Todo = {
   endDate: string;
   createdAt: string;
   updatedAt: string;
-  assignee: string;
+  assignees: string[];
 };
 
 let todos: Todo[] = [
@@ -24,7 +24,7 @@ let todos: Todo[] = [
     endDate: "2023-06-05",
     createdAt: "2023-06-01T09:00:00Z",
     updatedAt: "2023-06-05T16:30:00Z",
-    assignee: "김철수",
+    assignees: ["김철수", "이민호"],
   },
   {
     id: "2",
@@ -35,7 +35,7 @@ let todos: Todo[] = [
     endDate: "2023-06-15",
     createdAt: "2023-06-06T10:15:00Z",
     updatedAt: "2023-06-10T14:20:00Z",
-    assignee: "박지영",
+    assignees: ["박지영", "이민호"],
   },
   {
     id: "3",
@@ -46,7 +46,7 @@ let todos: Todo[] = [
     endDate: "2023-06-20",
     createdAt: "2023-06-10T11:30:00Z",
     updatedAt: "2023-06-10T11:30:00Z",
-    assignee: "이민호",
+    assignees: ["이민호"],
   },
 ];
 
@@ -69,8 +69,8 @@ export const handlers = [
     }
 
     if (assignee) {
-      filteredTodos = filteredTodos.filter(
-        (todo) => todo.assignee === assignee
+      filteredTodos = filteredTodos.filter((todo) =>
+        todo.assignees.includes(assignee)
       );
     }
 
@@ -108,6 +108,8 @@ export const handlers = [
 
     todos.push(todo);
 
+    console.log(todo);
+
     return HttpResponse.json(todo, { status: 201 });
   }),