From 9bc86d5483cd124a233464505c797735adad6594 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:34:54 +0900
Subject: [PATCH 01/29] [feat] add makefile

---
 Makefile | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 Makefile

diff --git a/Makefile b/Makefile
new file mode 100644
index 0000000..224e93f
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,5 @@
+build:
+	docker compose build
+	docker compose run --rm api go mod tidy
+	docker compose run --rm view npm install
+

From 29435ada542ced3a0b5a0db56d75774c26da55c6 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:35:09 +0900
Subject: [PATCH 02/29] [feat] add go lib

---
 api/go.mod | 2 ++
 api/go.sum | 4 ++++
 2 files changed, 6 insertions(+)

diff --git a/api/go.mod b/api/go.mod
index 1cf68ea..c3077a6 100644
--- a/api/go.mod
+++ b/api/go.mod
@@ -10,6 +10,7 @@ require (
 
 require (
 	github.com/go-sql-driver/mysql v1.7.0 // indirect
+	github.com/golang-jwt/jwt v3.2.2+incompatible // indirect
 	github.com/jinzhu/inflection v1.0.0 // indirect
 	github.com/jinzhu/now v1.1.5 // indirect
 	github.com/labstack/gommon v0.4.0 // indirect
@@ -21,4 +22,5 @@ require (
 	golang.org/x/net v0.4.0 // indirect
 	golang.org/x/sys v0.3.0 // indirect
 	golang.org/x/text v0.5.0 // indirect
+	golang.org/x/time v0.2.0 // indirect
 )
diff --git a/api/go.sum b/api/go.sum
index 4157bfa..1a14143 100644
--- a/api/go.sum
+++ b/api/go.sum
@@ -3,6 +3,8 @@ github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/go-sql-driver/mysql v1.7.0 h1:ueSltNNllEqE3qcWBTD0iQd3IpL/6U+mJxLkazJ7YPc=
 github.com/go-sql-driver/mysql v1.7.0/go.mod h1:OXbVy3sEdcQ2Doequ6Z5BW6fXNQTmx+9S1MCJN5yJMI=
+github.com/golang-jwt/jwt v3.2.2+incompatible h1:IfV12K8xAKAnZqdXVzCZ+TOjboZ2keLg81eXfW3O+oY=
+github.com/golang-jwt/jwt v3.2.2+incompatible/go.mod h1:8pz2t5EyA70fFQQSrl6XZXzqecmYZeUEB8OUGHkxJ+I=
 github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
 github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
 github.com/jinzhu/now v1.1.4/go.mod h1:d3SSVoowX0Lcu0IBviAWJpolVfI5UJVZZ7cO71lE/z8=
@@ -40,6 +42,8 @@ golang.org/x/sys v0.3.0 h1:w8ZOecv6NaNa/zC8944JTU3vz4u6Lagfk4RPQxv92NQ=
 golang.org/x/sys v0.3.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/text v0.5.0 h1:OLmvp0KP+FVG99Ct/qFiL/Fhk4zp4QQnZ7b2U+5piUM=
 golang.org/x/text v0.5.0/go.mod h1:mrYo+phRRbMaCq/xk9113O4dZlRixOauAjOtrjsXDZ8=
+golang.org/x/time v0.2.0 h1:52I/1L54xyEQAYdtcSuxtiT84KGYTBGXwayxmIpNJhE=
+golang.org/x/time v0.2.0/go.mod h1:tRJNPiyCQ0inRvYxbN9jk5I+vvW/OXSQhTDSoE431IQ=
 gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0=
 gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=
 gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM=

From 949c6b2ff9379137b0ccaa54236459648b3b4b44 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:35:38 +0900
Subject: [PATCH 03/29] =?UTF-8?q?[fix]=20method=E5=86=85=E5=AE=B9=E3=81=AE?=
 =?UTF-8?q?=E4=BF=AE=E6=AD=A3,=20cors=E8=A8=AD=E5=AE=9A=E3=81=AE=E8=BF=BD?=
 =?UTF-8?q?=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/main.go | 40 +++++++++++++++++++---------------------
 1 file changed, 19 insertions(+), 21 deletions(-)

diff --git a/api/main.go b/api/main.go
index fc88a2e..d659371 100644
--- a/api/main.go
+++ b/api/main.go
@@ -7,6 +7,7 @@ import (
 	"time"
 
 	"github.com/labstack/echo/v4"
+	"github.com/labstack/echo/v4/middleware"
 	"gorm.io/driver/mysql"
 	"gorm.io/gorm"
 )
@@ -37,35 +38,23 @@ func getTask(c echo.Context) error {
 }
 
 func createTask(c echo.Context) error {
-	taskName := c.QueryParam("task_name")
-	content := c.QueryParam("content")
-	status := c.QueryParam("status")
-	userName := c.QueryParam("user_name")
-	task := Task{
-		TaskName:  taskName,
-		Content:   content,
-		Status:    status,
-		UserName:  userName,
-		CreatedAt: time.Now(),
-		UpdatedAt: time.Now(),
+	task := new(Task)
+	if err := c.Bind(task); err != nil {
+		return err
 	}
+	task.CreatedAt = time.Now()
+	task.UpdatedAt = time.Now()
 	DB.Create(&task)
 	return c.JSON(http.StatusOK, task)
 }
 
 func updateTask(c echo.Context) error {
 	id := c.Param("id")
-	taskName := c.QueryParam("task_name")
-	content := c.QueryParam("content")
-	status := c.QueryParam("status")
-	userName := c.QueryParam("user_name")
-	task := Task{
-		TaskName:  taskName,
-		Content:   content,
-		Status:    status,
-		UserName:  userName,
-		UpdatedAt: time.Now(),
+	task := new(Task)
+	if err := c.Bind(task); err != nil {
+		return err
 	}
+	task.UpdatedAt = time.Now()
 	DB.Model(&task).Where("id = ?", id).Updates(task)
 	return c.JSON(http.StatusOK, task)
 }
@@ -127,6 +116,15 @@ func main() {
 
 	// TODO: Echoインスタンスを作成する
 	e := echo.New()
+
+	// cors設定
+	arrowOrigins := []string{"*"}
+	e.Use(middleware.Logger())
+	e.Use(middleware.CORSWithConfig(middleware.CORSConfig{
+		AllowOrigins: arrowOrigins,
+		AllowMethods: []string{http.MethodGet, http.MethodPost, http.MethodPut, http.MethodDelete},
+	}))
+
 	e.GET("/", func(c echo.Context) error {
 		return c.String(http.StatusOK, "Hello, World!")
 	})

From 7df18382f00b42c682830b4114670827c82c1af3 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:35:46 +0900
Subject: [PATCH 04/29] [fix] add env

---
 view/next.config.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/view/next.config.js b/view/next.config.js
index a843cbe..7c4e27f 100644
--- a/view/next.config.js
+++ b/view/next.config.js
@@ -1,6 +1,11 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+
+  env: {
+    SSR_API_URI: 'http://api:1323',
+    CSR_API_URI: 'http://localhost:1323',
+  },
 }
 
 module.exports = nextConfig

From 26ae06273d143a2715af42d53245278b1629b8a9 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:35:59 +0900
Subject: [PATCH 05/29] [feat] add react icons

---
 view/package-lock.json | 14 ++++++++++++++
 view/package.json      |  1 +
 2 files changed, 15 insertions(+)

diff --git a/view/package-lock.json b/view/package-lock.json
index 273c029..c2036a4 100644
--- a/view/package-lock.json
+++ b/view/package-lock.json
@@ -18,6 +18,7 @@
         "next": "13.1.6",
         "react": "18.2.0",
         "react-dom": "18.2.0",
+        "react-icons": "^4.8.0",
         "typescript": "4.9.5"
       },
       "devDependencies": {
@@ -19482,6 +19483,14 @@
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
@@ -38416,6 +38425,11 @@
         }
       }
     },
+    "react-icons": {
+      "version": "4.8.0",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.8.0.tgz",
+      "integrity": "sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg=="
+    },
     "react-inspector": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.1.tgz",
diff --git a/view/package.json b/view/package.json
index da91b8d..cd0eb81 100644
--- a/view/package.json
+++ b/view/package.json
@@ -23,6 +23,7 @@
     "next": "13.1.6",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-icons": "^4.8.0",
     "typescript": "4.9.5"
   },
   "devDependencies": {

From c1ec4e42cd9819f6a90801f69834511a3a7962fb Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:36:14 +0900
Subject: [PATCH 06/29] [fix] change tailwind bg and primary color

---
 view/tailwind.config.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/view/tailwind.config.js b/view/tailwind.config.js
index d1d12e2..daa2963 100644
--- a/view/tailwind.config.js
+++ b/view/tailwind.config.js
@@ -6,9 +6,9 @@ module.exports = {
   content: ["./src/**/*.{js,ts,jsx,tsx}"],
   theme: {
     colors: {
-      primary: '#007bff',
-      success: '#28a745',
-      danger: '#dc3545',
+      background:'#fb923c',
+      primary: '#1e293b',
+      secondary: '#fff',
       black: colors.black,
       white: colors.white,
       slate: colors.slate,

From f662d42132eb6babc30655bafcb166248ffd7b9a Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:36:25 +0900
Subject: [PATCH 07/29] [feat] add alias paths

---
 view/tsconfig.json | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/view/tsconfig.json b/view/tsconfig.json
index 2159bf4..904ef64 100644
--- a/view/tsconfig.json
+++ b/view/tsconfig.json
@@ -16,7 +16,9 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@components/*": ["./src/components/*"],
+      "@type/*": ["./src/type/*"],
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],

From df4616cc3cb4dbbf398dccd252ed3809f4c6a9cc Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:36:38 +0900
Subject: [PATCH 08/29] [feat] add components in common

---
 view/src/components/common/index.ts | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/view/src/components/common/index.ts b/view/src/components/common/index.ts
index 0064dee..1ce3240 100644
--- a/view/src/components/common/index.ts
+++ b/view/src/components/common/index.ts
@@ -1 +1,8 @@
 export { Button } from "./Button";
+export { Card } from "./Card";
+export { TaskCard } from "./TaskCard";
+export { TaskListCard } from "./TaskListCard";
+export { Modal } from "./Modal";
+export { TaskAddModal } from "./TaskAddModal";
+export { TaskEditModal } from "./TaskEditModal";
+export { TaskDeleteModal } from "./TaskDeleteModal";

From bf0f67c1cedbdd09d6946b6ce7b0f6b991f4925e Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:36:58 +0900
Subject: [PATCH 09/29] =?UTF-8?q?[fix]=20Button=E3=82=92=E7=B0=A1=E6=98=93?=
 =?UTF-8?q?=E7=9A=84=E3=81=AA=E3=82=82=E3=81=AE=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../common/Button/Button.stories.tsx          |  6 --
 view/src/components/common/Button/Button.tsx  | 61 ++-----------------
 .../components/common/Button/Button.type.ts   | 10 ++-
 3 files changed, 8 insertions(+), 69 deletions(-)

diff --git a/view/src/components/common/Button/Button.stories.tsx b/view/src/components/common/Button/Button.stories.tsx
index 5bfaa59..2a74f13 100644
--- a/view/src/components/common/Button/Button.stories.tsx
+++ b/view/src/components/common/Button/Button.stories.tsx
@@ -8,13 +8,7 @@ export default {
 
 export const Default: ComponentStoryObj<typeof Button> = {
   args: {
-    onClick: () => {
-      alert("Call me?");
-    },
     children: "TEST ME",
-    size: "medium",
-    theme: "primary",
-    outlined: false,
   },
   storyName: "Default",
 };
diff --git a/view/src/components/common/Button/Button.tsx b/view/src/components/common/Button/Button.tsx
index 26051e0..327de32 100644
--- a/view/src/components/common/Button/Button.tsx
+++ b/view/src/components/common/Button/Button.tsx
@@ -1,66 +1,13 @@
-import { useMemo } from "react";
 import type { ButtonProps } from "./Button.type";
 
-const Button = (props: ButtonProps) => {
-  const {
-    className,
-    theme = "primary",
-    size = "medium",
-    outlined = false,
-    children,
-    fullWidth,
-    ...rest
-  } = props;
-
-  // outlinedがtrueの時枠線を表示する
-  const themeClass = useMemo(() => {
-    switch (theme) {
-      case "primary":
-        if (outlined) {
-          return "text-primary border-primary";
-        } else {
-          return "bg-primary text-white";
-        }
-      case "success":
-        if (outlined) {
-          return "text-success border-success";
-        } else {
-          return "bg-success text-white";
-        }
-      case "danger":
-        if (outlined) {
-          return "text-danger border-danger";
-        } else {
-          return "bg-danger text-white";
-        }
-    }
-  }, [theme, outlined]);
-
-  const sizeClass = useMemo(() => {
-    switch (size) {
-      case "small":
-        return "px-2 py-1 text-sm";
-      case "medium":
-        return "px-4 py-2 text-base";
-      case "large":
-        return "px-6 py-3 text-lg";
-    }
-  }, [size]);
-
+const Button: React.FC<ButtonProps> = (props) => {
   return (
     <button
       type="button"
-      className={`
-        rounded
-        ${className}
-        ${themeClass}
-        ${sizeClass}
-        ${outlined ? "border border-gray-300" : ""}
-        ${fullWidth ? "full-width" : ""}
-        `}
-      {...rest}
+      className="bg-background text-secondary rounded-md shadow-md p-2 hover:bg-orange-600 transition-all"
+      onClick={props.onClick}
     >
-      {children}
+      {props.children}
     </button>
   );
 };
diff --git a/view/src/components/common/Button/Button.type.ts b/view/src/components/common/Button/Button.type.ts
index bb99f88..0e23d92 100644
--- a/view/src/components/common/Button/Button.type.ts
+++ b/view/src/components/common/Button/Button.type.ts
@@ -1,6 +1,4 @@
-export type ButtonProps = {
-  theme?: "primary" | "danger" | "success";
-  size?: "large" | "medium" | "small";
-  outlined?: boolean;
-  fullWidth?: boolean;
-} & JSX.IntrinsicElements["button"];
+export interface ButtonProps {
+  children: React.ReactNode;
+  onClick?: () => void;
+}

From 6f7d7811a0d81534d766702f747b5474505b02f8 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:37:11 +0900
Subject: [PATCH 10/29] [feat] add Card

---
 view/src/components/common/Card/Card.tsx      | 13 +++++++++++++
 view/src/components/common/Card/Card.types.ts |  4 ++++
 view/src/components/common/Card/index.ts      |  1 +
 3 files changed, 18 insertions(+)
 create mode 100644 view/src/components/common/Card/Card.tsx
 create mode 100644 view/src/components/common/Card/Card.types.ts
 create mode 100644 view/src/components/common/Card/index.ts

diff --git a/view/src/components/common/Card/Card.tsx b/view/src/components/common/Card/Card.tsx
new file mode 100644
index 0000000..90b1771
--- /dev/null
+++ b/view/src/components/common/Card/Card.tsx
@@ -0,0 +1,13 @@
+import { CardProps } from "./Card.types";
+
+export const Card: React.FC<CardProps> = (props) => {
+  const { children, className } = props;
+
+  return (
+    <div className={`bg-white shadow-lg rounded-lg p-5 ${className}`}>
+      {children}
+    </div>
+  );
+};
+
+export default Card;
diff --git a/view/src/components/common/Card/Card.types.ts b/view/src/components/common/Card/Card.types.ts
new file mode 100644
index 0000000..43f4ee2
--- /dev/null
+++ b/view/src/components/common/Card/Card.types.ts
@@ -0,0 +1,4 @@
+export interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+}
diff --git a/view/src/components/common/Card/index.ts b/view/src/components/common/Card/index.ts
new file mode 100644
index 0000000..fc91b3d
--- /dev/null
+++ b/view/src/components/common/Card/index.ts
@@ -0,0 +1 @@
+export { default as Card } from "./Card";

From 9afe52f289eaa9a480b9bd50c142b798a8a5f61d Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:37:20 +0900
Subject: [PATCH 11/29] [feat] add Modal

---
 view/src/components/common/Modal/Modal.tsx    | 23 +++++++++++++++++++
 .../components/common/Modal/Modal.types.ts    |  4 ++++
 view/src/components/common/Modal/index.ts     |  1 +
 3 files changed, 28 insertions(+)
 create mode 100644 view/src/components/common/Modal/Modal.tsx
 create mode 100644 view/src/components/common/Modal/Modal.types.ts
 create mode 100644 view/src/components/common/Modal/index.ts

diff --git a/view/src/components/common/Modal/Modal.tsx b/view/src/components/common/Modal/Modal.tsx
new file mode 100644
index 0000000..403ba5a
--- /dev/null
+++ b/view/src/components/common/Modal/Modal.tsx
@@ -0,0 +1,23 @@
+import { ModalProps } from "./Modal.types";
+import { AiOutlineCloseCircle } from "react-icons/ai";
+
+export const Modal: React.FC<ModalProps> = (props) => {
+  const { children, onClose } = props;
+
+  return (
+    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50">
+      <div className="flex items-center justify-center w-full h-full">
+        <div className="bg-white shadow-lg rounded-lg p-5 w-1/2">
+          <div className="w-fit ml-auto mb-2">
+            <button onClick={onClose}>
+              <AiOutlineCloseCircle size={30} />
+            </button>
+          </div>
+          <div>{children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;
diff --git a/view/src/components/common/Modal/Modal.types.ts b/view/src/components/common/Modal/Modal.types.ts
new file mode 100644
index 0000000..a691617
--- /dev/null
+++ b/view/src/components/common/Modal/Modal.types.ts
@@ -0,0 +1,4 @@
+export interface ModalProps {
+    children: React.ReactNode;
+    onClose: () => void;
+}
diff --git a/view/src/components/common/Modal/index.ts b/view/src/components/common/Modal/index.ts
new file mode 100644
index 0000000..38a0f44
--- /dev/null
+++ b/view/src/components/common/Modal/index.ts
@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";

From 72de6d6fc505fddbdf5e4b5fbd66293b81dc967c Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:37:34 +0900
Subject: [PATCH 12/29] [feat] add task add modal

---
 .../common/TaskAddModal/TaskAddModal.tsx      | 90 +++++++++++++++++++
 .../common/TaskAddModal/TaskAddModal.types.ts |  8 ++
 .../components/common/TaskAddModal/index.ts   |  1 +
 3 files changed, 99 insertions(+)
 create mode 100644 view/src/components/common/TaskAddModal/TaskAddModal.tsx
 create mode 100644 view/src/components/common/TaskAddModal/TaskAddModal.types.ts
 create mode 100644 view/src/components/common/TaskAddModal/index.ts

diff --git a/view/src/components/common/TaskAddModal/TaskAddModal.tsx b/view/src/components/common/TaskAddModal/TaskAddModal.tsx
new file mode 100644
index 0000000..2a4144f
--- /dev/null
+++ b/view/src/components/common/TaskAddModal/TaskAddModal.tsx
@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { Modal, Button } from "@components/common";
+import { TaskAddModalProps, SubmitTaskData } from "./TaskAddModal.types";
+import { useRouter } from "next/router";
+
+export const TaskAddModal: React.FC<TaskAddModalProps> = (props) => {
+  const router = useRouter();
+
+  const [formData, setFormData] = useState<SubmitTaskData>({
+    task_name: "",
+    content: "",
+    user_name: "",
+  });
+
+  const handleFormDataChange = (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const submit = (data: SubmitTaskData) => {
+    const url = process.env.CSR_API_URI + "/tasks";
+
+    const submitData = {
+      task_name: data.task_name,
+      content: data.content,
+      user_name: data.user_name,
+      status: props.status,
+    }
+
+    fetch(url, {
+      method: "POST",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(submitData),
+    });
+
+    props.onClose();
+    router.reload();
+  };
+
+  return (
+    <Modal onClose={props.onClose}>
+      <h1 className="text-2xl font-bold text-center mb-5">Add Task</h1>
+      <div className="flex flex-col gap-5">
+        <div>
+          <p className="text-lg">Task Name</p>
+          <input
+            type="text"
+            name="task_name"
+            value={formData.task_name}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-lg">User Name</p>
+          <input
+            type="text"
+            name="user_name"
+            value={formData.user_name}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-lg">Content</p>
+          <textarea
+            name="content"
+            value={formData.content}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          />
+        </div>
+      </div>
+      <div className="w-fit mx-auto mt-5">
+        <Button onClick={() => submit(formData)}>Submit</Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default TaskAddModal;
diff --git a/view/src/components/common/TaskAddModal/TaskAddModal.types.ts b/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
new file mode 100644
index 0000000..40f5b8c
--- /dev/null
+++ b/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
@@ -0,0 +1,8 @@
+import { Task } from '@type/task.types';
+
+export interface TaskAddModalProps {
+    onClose: () => void;
+    status: 'todo' | 'doing' | 'done';
+}
+
+export type SubmitTaskData = Omit<Task, 'id' | 'status' | 'created_at' | 'updated_at'>;
diff --git a/view/src/components/common/TaskAddModal/index.ts b/view/src/components/common/TaskAddModal/index.ts
new file mode 100644
index 0000000..ddee7ae
--- /dev/null
+++ b/view/src/components/common/TaskAddModal/index.ts
@@ -0,0 +1 @@
+export { default as TaskAddModal } from './TaskAddModal';

From bbce4d623fcf11d5192c8f848f38f279038e9670 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:37:43 +0900
Subject: [PATCH 13/29] [feat] add task card

---
 .../components/common/TaskCard/TaskCard.tsx   | 55 +++++++++++++++++++
 .../common/TaskCard/TaskCard.types.ts         |  5 ++
 view/src/components/common/TaskCard/index.ts  |  1 +
 3 files changed, 61 insertions(+)
 create mode 100644 view/src/components/common/TaskCard/TaskCard.tsx
 create mode 100644 view/src/components/common/TaskCard/TaskCard.types.ts
 create mode 100644 view/src/components/common/TaskCard/index.ts

diff --git a/view/src/components/common/TaskCard/TaskCard.tsx b/view/src/components/common/TaskCard/TaskCard.tsx
new file mode 100644
index 0000000..c46eebc
--- /dev/null
+++ b/view/src/components/common/TaskCard/TaskCard.tsx
@@ -0,0 +1,55 @@
+import { useState } from "react";
+import { TaskCardProps } from "./TaskCard.types";
+import {
+  Card,
+  Button,
+  TaskEditModal,
+  TaskDeleteModal,
+} from "@components/common";
+import { AiOutlineEdit, AiOutlineDelete } from "react-icons/ai";
+
+export const TaskCard: React.FC<TaskCardProps> = (props) => {
+  const { task } = props;
+
+  const [isEditModalOpen, setIsEditModalOpen] = useState(false);
+  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
+
+  return (
+    <>
+      {isEditModalOpen && (
+        <TaskEditModal task={task} onClose={() => setIsEditModalOpen(false)} />
+      )}
+      {isDeleteModalOpen && (
+        <TaskDeleteModal
+          task={task}
+          onClose={() => setIsDeleteModalOpen(false)}
+        />
+      )}
+      <Card>
+        <div className="mb-3 flex justify-between">
+          <div>
+            <h1 className="text-xl font-bold">{task.task_name}</h1>
+            <p>
+              <span className="font-bold">User : </span>
+              {task.user_name}
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <Button onClick={() => setIsEditModalOpen(true)}>
+              <AiOutlineEdit className="w-full h-full" />
+            </Button>
+            <Button onClick={() => setIsDeleteModalOpen(true)}>
+              <AiOutlineDelete className="w-full h-full" />
+            </Button>
+          </div>
+        </div>
+        <hr className="border-background border" />
+        <div className="my-3">
+          <p>{task.content}</p>
+        </div>
+      </Card>
+    </>
+  );
+};
+
+export default TaskCard;
diff --git a/view/src/components/common/TaskCard/TaskCard.types.ts b/view/src/components/common/TaskCard/TaskCard.types.ts
new file mode 100644
index 0000000..0996f24
--- /dev/null
+++ b/view/src/components/common/TaskCard/TaskCard.types.ts
@@ -0,0 +1,5 @@
+import { Task } from "@/type/task.types";
+
+export interface TaskCardProps {
+    task: Task;
+}
diff --git a/view/src/components/common/TaskCard/index.ts b/view/src/components/common/TaskCard/index.ts
new file mode 100644
index 0000000..46661bb
--- /dev/null
+++ b/view/src/components/common/TaskCard/index.ts
@@ -0,0 +1 @@
+export { default as TaskCard } from "./TaskCard";

From 19ba57844ded9b91b13b3034ef6fbfcab88f48ec Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:37:53 +0900
Subject: [PATCH 14/29] [feat] add task delete modal

---
 .../TaskDeleteModal/TaskDeleteModal.tsx       | 37 +++++++++++++++++++
 .../TaskDeleteModal/TaskDeleteModal.types.ts  |  8 ++++
 .../common/TaskDeleteModal/index.ts           |  1 +
 3 files changed, 46 insertions(+)
 create mode 100644 view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx
 create mode 100644 view/src/components/common/TaskDeleteModal/TaskDeleteModal.types.ts
 create mode 100644 view/src/components/common/TaskDeleteModal/index.ts

diff --git a/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx b/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx
new file mode 100644
index 0000000..be3a40f
--- /dev/null
+++ b/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx
@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { Modal, Button } from "@components/common";
+import { TaskDeleteModalProps, SubmitTaskData } from "./TaskDeleteModal.types";
+import { useRouter } from "next/router";
+
+export const TaskDeleteModal: React.FC<TaskDeleteModalProps> = (props) => {
+  const router = useRouter();
+
+  const submit = () => {
+    const url = process.env.CSR_API_URI + "/tasks/" + props.task.id;
+
+    console.log(url)
+
+    fetch(url, {
+      method: "DELETE",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+    });
+
+    props.onClose();
+    router.reload();
+  };
+
+  return (
+    <Modal onClose={props.onClose}>
+      <h1 className="text-2xl font-bold text-center mb-5">Delete Task</h1>
+      <p className="text-center mb-5">タスクを削除しますか?</p>
+      <div className="mt-5 w-fit mx-auto">
+        <Button onClick={() => submit()}>Delete</Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default TaskDeleteModal;
diff --git a/view/src/components/common/TaskDeleteModal/TaskDeleteModal.types.ts b/view/src/components/common/TaskDeleteModal/TaskDeleteModal.types.ts
new file mode 100644
index 0000000..d8bd88a
--- /dev/null
+++ b/view/src/components/common/TaskDeleteModal/TaskDeleteModal.types.ts
@@ -0,0 +1,8 @@
+import { Task } from '@type/task.types';
+
+export interface TaskDeleteModalProps {
+    onClose: () => void;
+    task: Task;
+}
+
+export type SubmitTaskData = Omit<Task, 'id' | 'status' | 'created_at' | 'updated_at'>;
diff --git a/view/src/components/common/TaskDeleteModal/index.ts b/view/src/components/common/TaskDeleteModal/index.ts
new file mode 100644
index 0000000..2acf8e5
--- /dev/null
+++ b/view/src/components/common/TaskDeleteModal/index.ts
@@ -0,0 +1 @@
+export { default as TaskDeleteModal } from './TaskDeleteModal';

From ff4cf38c0551cf36221d19609176a531d182a30f Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:38:08 +0900
Subject: [PATCH 15/29] [feat] add task edit modal

---
 .../common/TaskEditModal/TaskEditModal.tsx    | 98 +++++++++++++++++++
 .../TaskEditModal/TaskEditModal.typs.ts       |  8 ++
 .../components/common/TaskEditModal/index.ts  |  1 +
 3 files changed, 107 insertions(+)
 create mode 100644 view/src/components/common/TaskEditModal/TaskEditModal.tsx
 create mode 100644 view/src/components/common/TaskEditModal/TaskEditModal.typs.ts
 create mode 100644 view/src/components/common/TaskEditModal/index.ts

diff --git a/view/src/components/common/TaskEditModal/TaskEditModal.tsx b/view/src/components/common/TaskEditModal/TaskEditModal.tsx
new file mode 100644
index 0000000..70239a0
--- /dev/null
+++ b/view/src/components/common/TaskEditModal/TaskEditModal.tsx
@@ -0,0 +1,98 @@
+import { useState } from "react";
+import { Modal, Button } from "@components/common";
+import { TaskEditModalProps, SubmitTaskData } from "./TaskEditModal.typs";
+import { useRouter } from "next/router";
+
+export const TaskEditModal: React.FC<TaskEditModalProps> = (props) => {
+  const router = useRouter();
+
+  const [formData, setFormData] = useState<SubmitTaskData>({
+    task_name: props.task.task_name,
+    content: props.task.content,
+    user_name: props.task.user_name,
+    status: props.task.status,
+  });
+
+  const handleFormDataChange = (
+    e:
+      | React.ChangeEvent<HTMLInputElement>
+      | React.ChangeEvent<HTMLTextAreaElement>
+      | React.ChangeEvent<HTMLSelectElement>
+  ) => {
+    setFormData({
+      ...formData,
+      [e.target.name]: e.target.value,
+    });
+  };
+
+  const submit = (data: SubmitTaskData) => {
+    const url = process.env.CSR_API_URI + "/tasks/ " + props.task.id;
+
+    fetch(url, {
+      method: "PUT",
+      mode: "cors",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    props.onClose();
+    router.reload();
+  };
+
+  return (
+    <Modal onClose={props.onClose}>
+      <h1 className="text-2xl font-bold text-center mb-5">Edit Task</h1>
+      <div className="flex flex-col gap-5">
+        <div>
+          <p className="text-lg">Task Name</p>
+          <input
+            type="text"
+            name="task_name"
+            value={formData.task_name}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-lg">User Name</p>
+          <input
+            type="text"
+            name="user_name"
+            value={formData.user_name}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-lg">Content</p>
+          <textarea
+            name="content"
+            value={formData.content}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          />
+        </div>
+        <div>
+          <p className="text-lg">Status</p>
+          <select
+            name="status"
+            value={formData.status}
+            onChange={handleFormDataChange}
+            className="w-full border border-background rounded-lg p-2"
+          >
+            <option value="todo">Todo</option>
+            <option value="doing">Doing</option>
+            <option value="done">Done</option>
+          </select>
+        </div>
+      </div>
+      <div className="mt-5 w-fit mx-auto">
+        <Button onClick={() => submit(formData)}>Edit</Button>
+      </div>
+    </Modal>
+  );
+};
+
+export default TaskEditModal;
diff --git a/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts b/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts
new file mode 100644
index 0000000..5b4fb68
--- /dev/null
+++ b/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts
@@ -0,0 +1,8 @@
+import { Task } from '@type/task.types';
+
+export interface TaskEditModalProps {
+    onClose: () => void;
+    task: Task;
+}
+
+export type SubmitTaskData = Omit<Task, 'id' | 'created_at' | 'updated_at'>;
diff --git a/view/src/components/common/TaskEditModal/index.ts b/view/src/components/common/TaskEditModal/index.ts
new file mode 100644
index 0000000..39ad4a8
--- /dev/null
+++ b/view/src/components/common/TaskEditModal/index.ts
@@ -0,0 +1 @@
+export { default as TaskEditModal } from './TaskEditModal';

From 970b4beff1832bd1598fe562b04d87581b3b4d63 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:38:27 +0900
Subject: [PATCH 16/29] [feat] add task list card

---
 .../common/TaskListCard/TaskListCard.tsx      | 33 +++++++++++++++++++
 .../common/TaskListCard/TaskListCard.types.ts |  6 ++++
 .../components/common/TaskListCard/index.ts   |  1 +
 3 files changed, 40 insertions(+)
 create mode 100644 view/src/components/common/TaskListCard/TaskListCard.tsx
 create mode 100644 view/src/components/common/TaskListCard/TaskListCard.types.ts
 create mode 100644 view/src/components/common/TaskListCard/index.ts

diff --git a/view/src/components/common/TaskListCard/TaskListCard.tsx b/view/src/components/common/TaskListCard/TaskListCard.tsx
new file mode 100644
index 0000000..01ba45b
--- /dev/null
+++ b/view/src/components/common/TaskListCard/TaskListCard.tsx
@@ -0,0 +1,33 @@
+import { useState } from "react";
+import { TaskListCardProps } from "./TaskListCard.types";
+import { Card, TaskCard, TaskAddModal, Button } from "@components/common";
+import { BiAddToQueue } from "react-icons/bi";
+
+export const TaskListCard: React.FC<TaskListCardProps> = (props) => {
+  const { tasks, status } = props;
+
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  return (
+    <>
+      {isModalOpen && (
+        <TaskAddModal status={status} onClose={() => setIsModalOpen(false)} />
+      )}
+      <Card>
+        <div className="flex items-center justify-between">
+          <h1 className="text-2xl font-bold">{status}</h1>
+          <Button onClick={() => setIsModalOpen(true)}>
+            <BiAddToQueue className="w-full h-full" />
+          </Button>
+        </div>
+        <div className="flex flex-col gap-5 mt-5">
+          {tasks.map((task) => (
+            <TaskCard key={task.id} task={task} />
+          ))}
+        </div>
+      </Card>
+    </>
+  );
+};
+
+export default TaskListCard;
diff --git a/view/src/components/common/TaskListCard/TaskListCard.types.ts b/view/src/components/common/TaskListCard/TaskListCard.types.ts
new file mode 100644
index 0000000..e2374f4
--- /dev/null
+++ b/view/src/components/common/TaskListCard/TaskListCard.types.ts
@@ -0,0 +1,6 @@
+import { Task } from "@/type/task.types";
+
+export interface TaskListCardProps {
+    tasks: Task[];
+    status: 'todo' | 'doing' | 'done';
+}
diff --git a/view/src/components/common/TaskListCard/index.ts b/view/src/components/common/TaskListCard/index.ts
new file mode 100644
index 0000000..10d61bd
--- /dev/null
+++ b/view/src/components/common/TaskListCard/index.ts
@@ -0,0 +1 @@
+export { default as TaskListCard } from "./TaskListCard";

From 2694e2d29af4d7d6c6bc7f77b496b8f34529b5ff Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:38:43 +0900
Subject: [PATCH 17/29] [feat] add layout exports

---
 view/src/components/layout/index.ts | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 view/src/components/layout/index.ts

diff --git a/view/src/components/layout/index.ts b/view/src/components/layout/index.ts
new file mode 100644
index 0000000..bfa7d49
--- /dev/null
+++ b/view/src/components/layout/index.ts
@@ -0,0 +1 @@
+export { MainLayout } from './MainLayout';

From f04b1174321ba104ff40b0a20b6f0d527cf55918 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:38:52 +0900
Subject: [PATCH 18/29] [feat] add main layout

---
 .../src/components/layout/MainLayout/MainLayout.tsx | 13 +++++++++++++
 .../layout/MainLayout/MainLayout.types.ts           |  3 +++
 view/src/components/layout/MainLayout/index.ts      |  1 +
 3 files changed, 17 insertions(+)
 create mode 100644 view/src/components/layout/MainLayout/MainLayout.tsx
 create mode 100644 view/src/components/layout/MainLayout/MainLayout.types.ts
 create mode 100644 view/src/components/layout/MainLayout/index.ts

diff --git a/view/src/components/layout/MainLayout/MainLayout.tsx b/view/src/components/layout/MainLayout/MainLayout.tsx
new file mode 100644
index 0000000..9c7c755
--- /dev/null
+++ b/view/src/components/layout/MainLayout/MainLayout.tsx
@@ -0,0 +1,13 @@
+import { MainLayoutProps } from "./MainLayout.types";
+import { Header } from "@components/screen";
+
+export const MainLayout: React.FC<MainLayoutProps> = (props) => {
+  return (
+    <div className="w-full">
+      <Header />
+      <div className="w-full">{props.children}</div>
+    </div>
+  );
+};
+
+export default MainLayout;
diff --git a/view/src/components/layout/MainLayout/MainLayout.types.ts b/view/src/components/layout/MainLayout/MainLayout.types.ts
new file mode 100644
index 0000000..ff9da83
--- /dev/null
+++ b/view/src/components/layout/MainLayout/MainLayout.types.ts
@@ -0,0 +1,3 @@
+export interface MainLayoutProps {
+    children: React.ReactNode;
+}
diff --git a/view/src/components/layout/MainLayout/index.ts b/view/src/components/layout/MainLayout/index.ts
new file mode 100644
index 0000000..e33ec19
--- /dev/null
+++ b/view/src/components/layout/MainLayout/index.ts
@@ -0,0 +1 @@
+export { default as MainLayout } from './MainLayout';

From 5c35afc12e30af61dbdc81f6131882ec245f1caa Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:39:07 +0900
Subject: [PATCH 19/29] [feat] add header in screen

---
 view/src/components/screen/Header/Header.tsx | 9 +++++++++
 view/src/components/screen/Header/index.ts   | 1 +
 view/src/components/screen/index.ts          | 1 +
 3 files changed, 11 insertions(+)
 create mode 100644 view/src/components/screen/Header/Header.tsx
 create mode 100644 view/src/components/screen/Header/index.ts
 create mode 100644 view/src/components/screen/index.ts

diff --git a/view/src/components/screen/Header/Header.tsx b/view/src/components/screen/Header/Header.tsx
new file mode 100644
index 0000000..639a32a
--- /dev/null
+++ b/view/src/components/screen/Header/Header.tsx
@@ -0,0 +1,9 @@
+export const Header: React.FC = () => {
+  return (
+    <div className="w-full bg-primary text-secondary h-16 flex justify-center items-center shadow-xl">
+      <h1 className="text-2xl font-bold">NUTMEG ToDo</h1>
+    </div>
+  );
+};
+
+export default Header;
diff --git a/view/src/components/screen/Header/index.ts b/view/src/components/screen/Header/index.ts
new file mode 100644
index 0000000..5653319
--- /dev/null
+++ b/view/src/components/screen/Header/index.ts
@@ -0,0 +1 @@
+export { default as Header } from './Header';
diff --git a/view/src/components/screen/index.ts b/view/src/components/screen/index.ts
new file mode 100644
index 0000000..29429dc
--- /dev/null
+++ b/view/src/components/screen/index.ts
@@ -0,0 +1 @@
+export { Header } from './Header';

From ff85c744cf7f1e06a4a8ad4df740ac90518efea5 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:39:21 +0900
Subject: [PATCH 20/29] =?UTF-8?q?[feat]=20app.tsx=E3=81=ABhead=E3=81=A8mai?=
 =?UTF-8?q?nlayout=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/src/pages/_app.tsx | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/view/src/pages/_app.tsx b/view/src/pages/_app.tsx
index a7a790f..0d8f3be 100644
--- a/view/src/pages/_app.tsx
+++ b/view/src/pages/_app.tsx
@@ -1,6 +1,19 @@
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
+import { MainLayout } from "@/components/layout";
+import Head from "next/head";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Head>
+        <title>NUTMEG ToDo</title>
+        <meta name="description" content="ToDoアプリ" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <MainLayout>
+        <Component {...pageProps} />
+      </MainLayout>
+    </>
+  );
 }

From 4255af3bbdbf26725a9b8d1bcf5611338282cce0 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:39:35 +0900
Subject: [PATCH 21/29] =?UTF-8?q?[feat]=20todo=E3=82=A2=E3=83=97=E3=83=AA?=
 =?UTF-8?q?=E6=9C=AC=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/src/pages/index.tsx | 48 ++++++++++++++++++++++++++--------------
 1 file changed, 31 insertions(+), 17 deletions(-)

diff --git a/view/src/pages/index.tsx b/view/src/pages/index.tsx
index 788d0bc..27b796c 100644
--- a/view/src/pages/index.tsx
+++ b/view/src/pages/index.tsx
@@ -1,21 +1,35 @@
-import Head from "next/head";
+import { NextPage } from "next";
+import { Card, TaskCard, TaskListCard } from "@components/common";
+import { Task } from "@type/task.types";
+import { useMemo } from "react";
 
-import { Button } from "@/components/common";
+interface Props {
+  tasks: Task[];
+}
+
+export const getServerSideProps = async () => {
+  const tasksUrl = process.env.SSR_API_URI + "/tasks";
+  const tasks = await fetch(tasksUrl).then((res) => res.json());
+
+  return {
+    props: {
+      tasks,
+    },
+  };
+};
+
+export const Home: NextPage<Props> = ({ tasks }) => {
+  const todoTasks = useMemo(() => tasks.filter((task) => task.status === "todo"), [tasks]);
+  const doingTasks = useMemo(() => tasks.filter((task) => task.status === "doing"), [tasks]);
+  const doneTasks = useMemo(() => tasks.filter((task) => task.status === "done"), [tasks]);
 
-export default function Home() {
   return (
-    <>
-      <Head>
-        <title>NUTMEG ToDo</title>
-        <meta name="description" content="ToDoアプリ" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-      </Head>
-      <main className="min-h-screen bg-orange-400">
-        <div className="w-full bg-slate-800 text-white h-16 flex justify-center items-center shadow-lg">
-          <h1 className="text-2xl font-bold">NUTMEG ToDo</h1>
-        </div>
-        <Button>TEST</Button>
-      </main>
-    </>
+    <div className="grid grid-cols-1 md:grid-cols-3 gap-5 m-5">
+      <TaskListCard tasks={todoTasks} status="todo" />
+      <TaskListCard tasks={doingTasks} status="doing" />
+      <TaskListCard tasks={doneTasks} status="done" />
+    </div>
   );
-}
+};
+
+export default Home;

From 6216e0cfcaba7cecd2d3a5fc5c240a7aac279569 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:39:44 +0900
Subject: [PATCH 22/29] [feat] add bg color in global

---
 view/src/styles/globals.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/view/src/styles/globals.css b/view/src/styles/globals.css
index b5c61c9..944c600 100644
--- a/view/src/styles/globals.css
+++ b/view/src/styles/globals.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+body {
+  background-color: #fb923c;
+}

From b7791b63a014e0b8c692bc94a0e5b53a40f9c8c6 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:39:53 +0900
Subject: [PATCH 23/29] [feat] add task type

---
 view/src/type/task.types.ts | 9 +++++++++
 1 file changed, 9 insertions(+)
 create mode 100644 view/src/type/task.types.ts

diff --git a/view/src/type/task.types.ts b/view/src/type/task.types.ts
new file mode 100644
index 0000000..48573af
--- /dev/null
+++ b/view/src/type/task.types.ts
@@ -0,0 +1,9 @@
+export interface Task {
+  id: number;
+  task_name: string;
+  content: string;
+  status: 'todo' | 'doing' | 'done';
+  user_name: string;
+  created_at: string;
+  updated_at: string;
+}

From 98f3603da369ad54e58fd71cd34920fa92b53e89 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:43:18 +0900
Subject: [PATCH 24/29] [fix] delete console.logz

---
 view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx b/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx
index be3a40f..9410332 100644
--- a/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx
+++ b/view/src/components/common/TaskDeleteModal/TaskDeleteModal.tsx
@@ -9,8 +9,6 @@ export const TaskDeleteModal: React.FC<TaskDeleteModalProps> = (props) => {
   const submit = () => {
     const url = process.env.CSR_API_URI + "/tasks/" + props.task.id;
 
-    console.log(url)
-
     fetch(url, {
       method: "DELETE",
       mode: "cors",

From 9edea49ca5057a9f10c9accab4708aaffb9e72ca Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 00:45:27 +0900
Subject: [PATCH 25/29] =?UTF-8?q?[fix]=20props=E3=81=AF=E5=80=8B=E5=88=A5?=
 =?UTF-8?q?=E3=81=A7=E5=86=8D=E5=AE=9A=E7=BE=A9=E3=81=97=E3=81=AA=E3=81=84?=
 =?UTF-8?q?=E6=96=B9=E5=90=91=E3=81=AB=E7=B5=B1=E4=B8=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/src/components/common/Card/Card.tsx                 | 6 ++----
 view/src/components/common/Modal/Modal.tsx               | 6 ++----
 view/src/components/common/TaskCard/TaskCard.tsx         | 4 +---
 view/src/components/common/TaskListCard/TaskListCard.tsx | 6 ++----
 4 files changed, 7 insertions(+), 15 deletions(-)

diff --git a/view/src/components/common/Card/Card.tsx b/view/src/components/common/Card/Card.tsx
index 90b1771..9dde052 100644
--- a/view/src/components/common/Card/Card.tsx
+++ b/view/src/components/common/Card/Card.tsx
@@ -1,11 +1,9 @@
 import { CardProps } from "./Card.types";
 
 export const Card: React.FC<CardProps> = (props) => {
-  const { children, className } = props;
-
   return (
-    <div className={`bg-white shadow-lg rounded-lg p-5 ${className}`}>
-      {children}
+    <div className={`bg-white shadow-lg rounded-lg p-5 ${props.className}`}>
+      {props.children}
     </div>
   );
 };
diff --git a/view/src/components/common/Modal/Modal.tsx b/view/src/components/common/Modal/Modal.tsx
index 403ba5a..9bc3a85 100644
--- a/view/src/components/common/Modal/Modal.tsx
+++ b/view/src/components/common/Modal/Modal.tsx
@@ -2,18 +2,16 @@ import { ModalProps } from "./Modal.types";
 import { AiOutlineCloseCircle } from "react-icons/ai";
 
 export const Modal: React.FC<ModalProps> = (props) => {
-  const { children, onClose } = props;
-
   return (
     <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 z-50">
       <div className="flex items-center justify-center w-full h-full">
         <div className="bg-white shadow-lg rounded-lg p-5 w-1/2">
           <div className="w-fit ml-auto mb-2">
-            <button onClick={onClose}>
+            <button onClick={props.onClose}>
               <AiOutlineCloseCircle size={30} />
             </button>
           </div>
-          <div>{children}</div>
+          <div>{props.children}</div>
         </div>
       </div>
     </div>
diff --git a/view/src/components/common/TaskCard/TaskCard.tsx b/view/src/components/common/TaskCard/TaskCard.tsx
index c46eebc..43f284b 100644
--- a/view/src/components/common/TaskCard/TaskCard.tsx
+++ b/view/src/components/common/TaskCard/TaskCard.tsx
@@ -9,15 +9,13 @@ import {
 import { AiOutlineEdit, AiOutlineDelete } from "react-icons/ai";
 
 export const TaskCard: React.FC<TaskCardProps> = (props) => {
-  const { task } = props;
-
   const [isEditModalOpen, setIsEditModalOpen] = useState(false);
   const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
 
   return (
     <>
       {isEditModalOpen && (
-        <TaskEditModal task={task} onClose={() => setIsEditModalOpen(false)} />
+        <TaskEditModal task={props.task} onClose={() => setIsEditModalOpen(false)} />
       )}
       {isDeleteModalOpen && (
         <TaskDeleteModal
diff --git a/view/src/components/common/TaskListCard/TaskListCard.tsx b/view/src/components/common/TaskListCard/TaskListCard.tsx
index 01ba45b..9bc48d8 100644
--- a/view/src/components/common/TaskListCard/TaskListCard.tsx
+++ b/view/src/components/common/TaskListCard/TaskListCard.tsx
@@ -4,14 +4,12 @@ import { Card, TaskCard, TaskAddModal, Button } from "@components/common";
 import { BiAddToQueue } from "react-icons/bi";
 
 export const TaskListCard: React.FC<TaskListCardProps> = (props) => {
-  const { tasks, status } = props;
-
   const [isModalOpen, setIsModalOpen] = useState(false);
 
   return (
     <>
       {isModalOpen && (
-        <TaskAddModal status={status} onClose={() => setIsModalOpen(false)} />
+        <TaskAddModal status={props.status} onClose={() => setIsModalOpen(false)} />
       )}
       <Card>
         <div className="flex items-center justify-between">
@@ -21,7 +19,7 @@ export const TaskListCard: React.FC<TaskListCardProps> = (props) => {
           </Button>
         </div>
         <div className="flex flex-col gap-5 mt-5">
-          {tasks.map((task) => (
+          {props.tasks.map((task) => (
             <TaskCard key={task.id} task={task} />
           ))}
         </div>

From 87a2250f6364e6e175b0fb4065369a7e68addb41 Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Thu, 30 Mar 2023 16:27:45 +0900
Subject: [PATCH 26/29] =?UTF-8?q?[fix]=20props=E3=81=AB=E3=82=88=E3=82=8B?=
 =?UTF-8?q?=E3=82=A8=E3=83=A9=E3=83=BC=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/src/components/common/TaskCard/TaskCard.tsx         | 8 ++++----
 view/src/components/common/TaskListCard/TaskListCard.tsx | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/view/src/components/common/TaskCard/TaskCard.tsx b/view/src/components/common/TaskCard/TaskCard.tsx
index 43f284b..7262507 100644
--- a/view/src/components/common/TaskCard/TaskCard.tsx
+++ b/view/src/components/common/TaskCard/TaskCard.tsx
@@ -19,17 +19,17 @@ export const TaskCard: React.FC<TaskCardProps> = (props) => {
       )}
       {isDeleteModalOpen && (
         <TaskDeleteModal
-          task={task}
+          task={props.task}
           onClose={() => setIsDeleteModalOpen(false)}
         />
       )}
       <Card>
         <div className="mb-3 flex justify-between">
           <div>
-            <h1 className="text-xl font-bold">{task.task_name}</h1>
+            <h1 className="text-xl font-bold">{props.task.task_name}</h1>
             <p>
               <span className="font-bold">User : </span>
-              {task.user_name}
+              {props.task.user_name}
             </p>
           </div>
           <div className="flex items-center gap-2">
@@ -43,7 +43,7 @@ export const TaskCard: React.FC<TaskCardProps> = (props) => {
         </div>
         <hr className="border-background border" />
         <div className="my-3">
-          <p>{task.content}</p>
+          <p>{props.task.content}</p>
         </div>
       </Card>
     </>
diff --git a/view/src/components/common/TaskListCard/TaskListCard.tsx b/view/src/components/common/TaskListCard/TaskListCard.tsx
index 9bc48d8..ac4481f 100644
--- a/view/src/components/common/TaskListCard/TaskListCard.tsx
+++ b/view/src/components/common/TaskListCard/TaskListCard.tsx
@@ -13,7 +13,7 @@ export const TaskListCard: React.FC<TaskListCardProps> = (props) => {
       )}
       <Card>
         <div className="flex items-center justify-between">
-          <h1 className="text-2xl font-bold">{status}</h1>
+          <h1 className="text-2xl font-bold">{props.status}</h1>
           <Button onClick={() => setIsModalOpen(true)}>
             <BiAddToQueue className="w-full h-full" />
           </Button>

From 272a7b8fc66906f6b41a1978dad05fd3d96870ee Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Sat, 1 Apr 2023 02:13:58 +0900
Subject: [PATCH 27/29] =?UTF-8?q?[fix]=20props.onClick=E3=81=AEundefined?=
 =?UTF-8?q?=E5=87=A6=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 view/src/components/common/Button/Button.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/view/src/components/common/Button/Button.tsx b/view/src/components/common/Button/Button.tsx
index 327de32..048983c 100644
--- a/view/src/components/common/Button/Button.tsx
+++ b/view/src/components/common/Button/Button.tsx
@@ -5,7 +5,9 @@ const Button: React.FC<ButtonProps> = (props) => {
     <button
       type="button"
       className="bg-background text-secondary rounded-md shadow-md p-2 hover:bg-orange-600 transition-all"
-      onClick={props.onClick}
+      onClick={() => {
+        if (props.onClick) props.onClick();
+      }}
     >
       {props.children}
     </button>

From fbab0afcd51db2726efb66d9cbc20aaba4505d0d Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Sat, 1 Apr 2023 02:22:18 +0900
Subject: [PATCH 28/29] =?UTF-8?q?[fix]=20=E3=82=B9=E3=83=8D=E3=83=BC?=
 =?UTF-8?q?=E3=82=AF=E3=82=B1=E3=83=BC=E3=82=B9=E3=82=92=E3=82=AD=E3=83=A3?=
 =?UTF-8?q?=E3=83=A1=E3=83=AB=E3=82=B1=E3=83=BC=E3=82=B9=E3=81=AB=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/main.go                                      |  8 ++++----
 .../common/TaskAddModal/TaskAddModal.tsx         | 16 ++++++++--------
 .../common/TaskAddModal/TaskAddModal.types.ts    |  2 +-
 view/src/components/common/TaskCard/TaskCard.tsx |  4 ++--
 .../common/TaskEditModal/TaskEditModal.tsx       | 12 ++++++------
 .../common/TaskEditModal/TaskEditModal.typs.ts   |  2 +-
 view/src/type/task.types.ts                      |  8 ++++----
 7 files changed, 26 insertions(+), 26 deletions(-)

diff --git a/api/main.go b/api/main.go
index d659371..bf08804 100644
--- a/api/main.go
+++ b/api/main.go
@@ -16,12 +16,12 @@ var DB *gorm.DB
 
 type Task struct {
 	Id        int       `json:"id" gorm:"primary_key"`
-	TaskName  string    `json:"task_name" gorm:"not null"`
+	TaskName  string    `json:"taskName" gorm:"not null"`
 	Content   string    `json:"content" gorm:"not null"`
 	Status    string    `json:"status" gorm:"not null"`
-	UserName  string    `json:"user_name" gorm:"not null"`
-	CreatedAt time.Time `json:"created_at" gorm:"not null"`
-	UpdatedAt time.Time `json:"updated_at" gorm:"not null"`
+	UserName  string    `json:"userName" gorm:"not null"`
+	CreatedAt time.Time `json:"createdAt" gorm:"not null"`
+	UpdatedAt time.Time `json:"updatedAt" gorm:"not null"`
 }
 
 func getTasks(c echo.Context) error {
diff --git a/view/src/components/common/TaskAddModal/TaskAddModal.tsx b/view/src/components/common/TaskAddModal/TaskAddModal.tsx
index 2a4144f..8d41396 100644
--- a/view/src/components/common/TaskAddModal/TaskAddModal.tsx
+++ b/view/src/components/common/TaskAddModal/TaskAddModal.tsx
@@ -7,9 +7,9 @@ export const TaskAddModal: React.FC<TaskAddModalProps> = (props) => {
   const router = useRouter();
 
   const [formData, setFormData] = useState<SubmitTaskData>({
-    task_name: "",
+    taskName: "",
     content: "",
-    user_name: "",
+    userName: "",
   });
 
   const handleFormDataChange = (
@@ -27,9 +27,9 @@ export const TaskAddModal: React.FC<TaskAddModalProps> = (props) => {
     const url = process.env.CSR_API_URI + "/tasks";
 
     const submitData = {
-      task_name: data.task_name,
+      taskName: data.taskName,
       content: data.content,
-      user_name: data.user_name,
+      userName: data.userName,
       status: props.status,
     }
 
@@ -54,8 +54,8 @@ export const TaskAddModal: React.FC<TaskAddModalProps> = (props) => {
           <p className="text-lg">Task Name</p>
           <input
             type="text"
-            name="task_name"
-            value={formData.task_name}
+            name="taskName"
+            value={formData.taskName}
             onChange={handleFormDataChange}
             className="w-full border border-background rounded-lg p-2"
           />
@@ -64,8 +64,8 @@ export const TaskAddModal: React.FC<TaskAddModalProps> = (props) => {
           <p className="text-lg">User Name</p>
           <input
             type="text"
-            name="user_name"
-            value={formData.user_name}
+            name="userName"
+            value={formData.userName}
             onChange={handleFormDataChange}
             className="w-full border border-background rounded-lg p-2"
           />
diff --git a/view/src/components/common/TaskAddModal/TaskAddModal.types.ts b/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
index 40f5b8c..dc1a171 100644
--- a/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
+++ b/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
@@ -5,4 +5,4 @@ export interface TaskAddModalProps {
     status: 'todo' | 'doing' | 'done';
 }
 
-export type SubmitTaskData = Omit<Task, 'id' | 'status' | 'created_at' | 'updated_at'>;
+export type SubmitTaskData = Omit<Task, 'id' | 'status' | 'createdAt' | 'updatedAt'>;
diff --git a/view/src/components/common/TaskCard/TaskCard.tsx b/view/src/components/common/TaskCard/TaskCard.tsx
index 7262507..941dbdf 100644
--- a/view/src/components/common/TaskCard/TaskCard.tsx
+++ b/view/src/components/common/TaskCard/TaskCard.tsx
@@ -26,10 +26,10 @@ export const TaskCard: React.FC<TaskCardProps> = (props) => {
       <Card>
         <div className="mb-3 flex justify-between">
           <div>
-            <h1 className="text-xl font-bold">{props.task.task_name}</h1>
+            <h1 className="text-xl font-bold">{props.task.taskName}</h1>
             <p>
               <span className="font-bold">User : </span>
-              {props.task.user_name}
+              {props.task.userName}
             </p>
           </div>
           <div className="flex items-center gap-2">
diff --git a/view/src/components/common/TaskEditModal/TaskEditModal.tsx b/view/src/components/common/TaskEditModal/TaskEditModal.tsx
index 70239a0..a582e57 100644
--- a/view/src/components/common/TaskEditModal/TaskEditModal.tsx
+++ b/view/src/components/common/TaskEditModal/TaskEditModal.tsx
@@ -7,9 +7,9 @@ export const TaskEditModal: React.FC<TaskEditModalProps> = (props) => {
   const router = useRouter();
 
   const [formData, setFormData] = useState<SubmitTaskData>({
-    task_name: props.task.task_name,
+    taskName: props.task.taskName,
     content: props.task.content,
-    user_name: props.task.user_name,
+    userName: props.task.userName,
     status: props.task.status,
   });
 
@@ -49,8 +49,8 @@ export const TaskEditModal: React.FC<TaskEditModalProps> = (props) => {
           <p className="text-lg">Task Name</p>
           <input
             type="text"
-            name="task_name"
-            value={formData.task_name}
+            name="taskName"
+            value={formData.taskName}
             onChange={handleFormDataChange}
             className="w-full border border-background rounded-lg p-2"
           />
@@ -59,8 +59,8 @@ export const TaskEditModal: React.FC<TaskEditModalProps> = (props) => {
           <p className="text-lg">User Name</p>
           <input
             type="text"
-            name="user_name"
-            value={formData.user_name}
+            name="userName"
+            value={formData.userName}
             onChange={handleFormDataChange}
             className="w-full border border-background rounded-lg p-2"
           />
diff --git a/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts b/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts
index 5b4fb68..65be763 100644
--- a/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts
+++ b/view/src/components/common/TaskEditModal/TaskEditModal.typs.ts
@@ -5,4 +5,4 @@ export interface TaskEditModalProps {
     task: Task;
 }
 
-export type SubmitTaskData = Omit<Task, 'id' | 'created_at' | 'updated_at'>;
+export type SubmitTaskData = Omit<Task, 'id' | 'createdAt' | 'updatedAt'>;
diff --git a/view/src/type/task.types.ts b/view/src/type/task.types.ts
index 48573af..311e03c 100644
--- a/view/src/type/task.types.ts
+++ b/view/src/type/task.types.ts
@@ -1,9 +1,9 @@
 export interface Task {
   id: number;
-  task_name: string;
+  taskName: string;
   content: string;
   status: 'todo' | 'doing' | 'done';
-  user_name: string;
-  created_at: string;
-  updated_at: string;
+  userName: string;
+  createdAt: string;
+  updatedAt: string;
 }

From 50ce46fabab23f789bccf6353034ad4ec9c23e5e Mon Sep 17 00:00:00 2001
From: imaimai17468 <tosiki_801_life@outlook.jp>
Date: Sat, 1 Apr 2023 02:28:56 +0900
Subject: [PATCH 29/29] =?UTF-8?q?[fix]=20status=E3=82=92ToDo/inProgress/Do?=
 =?UTF-8?q?ne=E3=81=AB=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/main.go                                        |  4 ++--
 .../common/TaskAddModal/TaskAddModal.types.ts      |  2 +-
 .../common/TaskEditModal/TaskEditModal.tsx         |  6 +++---
 .../common/TaskListCard/TaskListCard.types.ts      |  2 +-
 view/src/pages/index.tsx                           | 14 +++++++-------
 view/src/type/task.types.ts                        |  2 +-
 6 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/api/main.go b/api/main.go
index bf08804..14dd7ba 100644
--- a/api/main.go
+++ b/api/main.go
@@ -72,7 +72,7 @@ func creatSeed() {
 			Id:        1,
 			TaskName:  "backend",
 			Content:   "Create user API",
-			Status:    "doing",
+			Status:    "inProgress",
 			UserName:  "nutmeg man",
 			CreatedAt: time.Now(),
 			UpdatedAt: time.Now(),
@@ -81,7 +81,7 @@ func creatSeed() {
 			Id:        2,
 			TaskName:  "backend",
 			Content:   "Create task API",
-			Status:    "doing",
+			Status:    "inProgress",
 			UserName:  "nutmeg man2",
 			CreatedAt: time.Now(),
 			UpdatedAt: time.Now(),
diff --git a/view/src/components/common/TaskAddModal/TaskAddModal.types.ts b/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
index dc1a171..847eb3a 100644
--- a/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
+++ b/view/src/components/common/TaskAddModal/TaskAddModal.types.ts
@@ -2,7 +2,7 @@ import { Task } from '@type/task.types';
 
 export interface TaskAddModalProps {
     onClose: () => void;
-    status: 'todo' | 'doing' | 'done';
+    status: 'ToDo' | 'inProgress' | 'Done';
 }
 
 export type SubmitTaskData = Omit<Task, 'id' | 'status' | 'createdAt' | 'updatedAt'>;
diff --git a/view/src/components/common/TaskEditModal/TaskEditModal.tsx b/view/src/components/common/TaskEditModal/TaskEditModal.tsx
index a582e57..0227d4d 100644
--- a/view/src/components/common/TaskEditModal/TaskEditModal.tsx
+++ b/view/src/components/common/TaskEditModal/TaskEditModal.tsx
@@ -82,9 +82,9 @@ export const TaskEditModal: React.FC<TaskEditModalProps> = (props) => {
             onChange={handleFormDataChange}
             className="w-full border border-background rounded-lg p-2"
           >
-            <option value="todo">Todo</option>
-            <option value="doing">Doing</option>
-            <option value="done">Done</option>
+            <option value="ToDo">ToDo</option>
+            <option value="inProgress">inProgress</option>
+            <option value="Done">Done</option>
           </select>
         </div>
       </div>
diff --git a/view/src/components/common/TaskListCard/TaskListCard.types.ts b/view/src/components/common/TaskListCard/TaskListCard.types.ts
index e2374f4..ff74a56 100644
--- a/view/src/components/common/TaskListCard/TaskListCard.types.ts
+++ b/view/src/components/common/TaskListCard/TaskListCard.types.ts
@@ -2,5 +2,5 @@ import { Task } from "@/type/task.types";
 
 export interface TaskListCardProps {
     tasks: Task[];
-    status: 'todo' | 'doing' | 'done';
+    status: 'ToDo' | 'inProgress' | 'Done';
 }
diff --git a/view/src/pages/index.tsx b/view/src/pages/index.tsx
index 27b796c..a7cbd37 100644
--- a/view/src/pages/index.tsx
+++ b/view/src/pages/index.tsx
@@ -1,5 +1,5 @@
 import { NextPage } from "next";
-import { Card, TaskCard, TaskListCard } from "@components/common";
+import { TaskListCard } from "@components/common";
 import { Task } from "@type/task.types";
 import { useMemo } from "react";
 
@@ -19,15 +19,15 @@ export const getServerSideProps = async () => {
 };
 
 export const Home: NextPage<Props> = ({ tasks }) => {
-  const todoTasks = useMemo(() => tasks.filter((task) => task.status === "todo"), [tasks]);
-  const doingTasks = useMemo(() => tasks.filter((task) => task.status === "doing"), [tasks]);
-  const doneTasks = useMemo(() => tasks.filter((task) => task.status === "done"), [tasks]);
+  const todoTasks = useMemo(() => tasks.filter((task) => task.status === "ToDo"), [tasks]);
+  const inProgressTasks = useMemo(() => tasks.filter((task) => task.status === "inProgress"), [tasks]);
+  const doneTasks = useMemo(() => tasks.filter((task) => task.status === "Done"), [tasks]);
 
   return (
     <div className="grid grid-cols-1 md:grid-cols-3 gap-5 m-5">
-      <TaskListCard tasks={todoTasks} status="todo" />
-      <TaskListCard tasks={doingTasks} status="doing" />
-      <TaskListCard tasks={doneTasks} status="done" />
+      <TaskListCard tasks={todoTasks} status="ToDo" />
+      <TaskListCard tasks={inProgressTasks} status="inProgress" />
+      <TaskListCard tasks={doneTasks} status="Done" />
     </div>
   );
 };
diff --git a/view/src/type/task.types.ts b/view/src/type/task.types.ts
index 311e03c..41562e9 100644
--- a/view/src/type/task.types.ts
+++ b/view/src/type/task.types.ts
@@ -2,7 +2,7 @@ export interface Task {
   id: number;
   taskName: string;
   content: string;
-  status: 'todo' | 'doing' | 'done';
+  status: 'ToDo' | 'inProgress' | 'Done';
   userName: string;
   createdAt: string;
   updatedAt: string;