Feat/supabase

.dockerignore

@@ -0,0 +1,7 @@
+node_modules
+.git
+.gitignore
+*.md
+dist
+.next
+out

.github/workflows/deployment.yml

@@ -0,0 +1,46 @@
+name: eungeori
+
+on:
+  push:
+    branches: ["main", "develop"]
+  pull_request:
+    branches: ["main", "develop"]
+
+jobs:
+  deploy:
+    name: Deploy
+    runs-on: ubuntu-latest
+    environment: development
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v2
+
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v1
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v1
+
+      - name: Build, tag, and push the image to Amazon ECR
+        id: build-image
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: ecr-test
+          IMAGE_TAG: ${{ github.sha }}
+        run: |
+          docker build -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
+          docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
+
+      - name: Deploy to Amazon ECS
+        uses: aws-actions/amazon-ecs-deploy-task-definition@v1
+        with:
+          task-definition: ecs-task-definition.json
+          service: your-ecs-service
+          cluster: your-cluster-name
+          wait-for-service-stability: true

.gitignore

@@ -34,3 +34,7 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+.env
+.env.development
+.env.production

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:20-slim AS base
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN npm install -g pnpm && pnpm --version
+
+COPY . .
+
+FROM base AS build
+RUN pnpm install --frozen-lockfile
+
+RUN pnpm run build
+
+EXPOSE 3000
+CMD [ "pnpm", "start" ]
+

package.json

@@ -9,6 +9,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@supabase/supabase-js": "^2.45.4",
     "@vanilla-extract/css": "^1.15.3",
     "@vanilla-extract/sprinkles": "^1.6.3",
     "classnames": "^2.5.1",

src/app/page.tsx

@@ -2,6 +2,8 @@
 
 import Image from "next/image";
 import Logo from "@svgs/logo.svg";
+import { useState } from "react";
+import { supabase } from "./utils/supabase";
 
 import {
   loginTextBox,
@@ -28,6 +30,28 @@ type LoginBoxProps = {
 };
 
 const LoginBox = ({ image, text, bg, textColor, border, onClick }: LoginBoxProps) => {
+  const [title, setTitle] = useState<string>("");
+  const onSubmit = async () => {
+    console.log("함수 호출");
+
+    if (!title) {
+      console.error("업당");
+      return;
+    } else {
+      const { data, error, status } = await supabase
+        .from("todos")
+        .insert([{ title: title }])
+        .select();
+
+      if (error) {
+        console.log(error);
+      }
+      if (status === 201) {
+        console.log(data);
+      }
+    }
+  };
+
   return (
     <div
       className={loginBox}
@@ -37,6 +61,8 @@ const LoginBox = ({ image, text, bg, textColor, border, onClick }: LoginBoxProps
         border: border ? "1px solid #d2d5d6" : "none",
       }}
     >
+      <input onChange={(e) => setTitle(e.target.value)} />
+      <button onClick={onSubmit}>제출하기</button>
       <div className={loginBoxContents} onClick={onClick}>
         <Image src={image} alt={text} width={24} height={24} />
         <p className={regular}>{text}</p>

src/app/utils/supabase.ts

@@ -0,0 +1,6 @@
+import { createClient } from "@supabase/supabase-js";
+
+const supabaseUrl = process.env.NEXT_PUBLIC_SUPABASE_URL as string;
+const supabaseKey = process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY as string;
+
+export const supabase = createClient(supabaseUrl, supabaseKey);