フロントエンド側の実装&完成

Makefile

@@ -0,0 +1,5 @@
+build:
+	docker compose build
+	docker compose run --rm api go mod tidy
+	docker compose run --rm view npm install
+

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
 )

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=

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"
 )
@@ -15,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 {
@@ -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)
 }
@@ -83,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(),
@@ -92,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(),
@@ -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!")
 	})

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

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": {

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",
 };

view/src/components/common/Button/Button.tsx

@@ -1,66 +1,15 @@
-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={() => {
+        if (props.onClick) props.onClick();
+      }}
     >
-      {children}
+      {props.children}
     </button>
   );
 };

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;
+}

view/src/components/common/Card/Card.tsx

@@ -0,0 +1,11 @@
+import { CardProps } from "./Card.types";
+
+export const Card: React.FC<CardProps> = (props) => {
+  return (
+    <div className={`bg-white shadow-lg rounded-lg p-5 ${props.className}`}>
+      {props.children}
+    </div>
+  );
+};
+
+export default Card;

view/src/components/common/Card/Card.types.ts

@@ -0,0 +1,4 @@
+export interface CardProps {
+    children: React.ReactNode;
+    className?: string;
+}

view/src/components/common/Card/index.ts

@@ -0,0 +1 @@
+export { default as Card } from "./Card";

view/src/components/common/Modal/Modal.tsx

@@ -0,0 +1,21 @@
+import { ModalProps } from "./Modal.types";
+import { AiOutlineCloseCircle } from "react-icons/ai";
+
+export const Modal: React.FC<ModalProps> = (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={props.onClose}>
+              <AiOutlineCloseCircle size={30} />
+            </button>
+          </div>
+          <div>{props.children}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

view/src/components/common/Modal/Modal.types.ts

@@ -0,0 +1,4 @@
+export interface ModalProps {
+    children: React.ReactNode;
+    onClose: () => void;
+}

view/src/components/common/Modal/index.ts

@@ -0,0 +1 @@
+export { default as Modal } from "./Modal";