From a71c4276b65c05e6c986225506a12891742133f1 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Wed, 17 Jul 2024 23:03:31 +0900
Subject: [PATCH 01/22] =?UTF-8?q?feat:=20docker=20=EC=84=B8=ED=8C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .dockerignore            |  7 +++++++
 .gitignore               |  3 ++-
 Dockerfile.prod          | 26 ++++++++++++++++++++++++++
 conf/conf.d/default.conf | 12 ++++++++++++
 4 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 .dockerignore
 create mode 100644 Dockerfile.prod
 create mode 100644 conf/conf.d/default.conf

diff --git a/.dockerignore b/.dockerignore
new file mode 100644
index 0000000..11d5dcb
--- /dev/null
+++ b/.dockerignore
@@ -0,0 +1,7 @@
+node_modules
+build
+.git
+.gitignore
+.github
+README.md
+*.pem
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
index 4d734dd..9b4a521 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,5 @@ yarn-debug.log*
 yarn-error.log*
 
 .env
-/cert/*
\ No newline at end of file
+/cert/*
+*.pem
\ No newline at end of file
diff --git a/Dockerfile.prod b/Dockerfile.prod
new file mode 100644
index 0000000..99d3b81
--- /dev/null
+++ b/Dockerfile.prod
@@ -0,0 +1,26 @@
+FROM node:lts AS build
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm install
+
+COPY . .
+
+RUN npm run build
+
+FROM nginx:stable-alpine
+
+# 기본 nginx 설정 제거 및 설정 복사
+RUN rm -rf /etc/nginx/conf.d
+COPY conf /etc/nginx
+
+# 빌드된 파일을 nginx에 복사
+COPY --from=build /app/build /usr/share/nginx/html
+
+# HTTP(80) 포트 오픈
+EXPOSE 80
+
+# nginx 실행
+CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
new file mode 100644
index 0000000..9aaba01
--- /dev/null
+++ b/conf/conf.d/default.conf
@@ -0,0 +1,12 @@
+# 80, 443 listen
+server {
+    listen 80;
+
+    location / {
+        root    /usr/share/nginx/html;
+        index   index.html index.htm;
+        try_files $uri $uri/ /index.html;
+    }
+
+
+}
\ No newline at end of file

From 7f8c2b3acda70f315eadabd97afc97c24acd4372 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Wed, 17 Jul 2024 23:20:25 +0900
Subject: [PATCH 02/22] =?UTF-8?q?fix:=20useEffect=EA=B4=80=EB=A0=A8=20warn?=
 =?UTF-8?q?ing=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/MenuTestPage.js  |   2 +-
 src/utils/OauthCallback.js | 112 +++++++++++++++++++------------------
 2 files changed, 60 insertions(+), 54 deletions(-)

diff --git a/src/pages/MenuTestPage.js b/src/pages/MenuTestPage.js
index ad220e7..c8e3ffe 100644
--- a/src/pages/MenuTestPage.js
+++ b/src/pages/MenuTestPage.js
@@ -79,7 +79,7 @@ const stores = [
 ];
 
 const MenuTestPage = () => {
-    const { addItem, removeItem, updateItemCount, carts } = useCartStore();
+    const { addItem, removeItem, carts } = useCartStore();
 
     const handleAddItem = (storeName, item) => {
         addItem(storeName, item);
diff --git a/src/utils/OauthCallback.js b/src/utils/OauthCallback.js
index f44c4c3..0a98aa6 100644
--- a/src/utils/OauthCallback.js
+++ b/src/utils/OauthCallback.js
@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useState, useCallback } from "react";
 import axios from "axios";
 import useTokenStore from "hooks/useTokenStore";
 import { useNavigate } from "react-router-dom";
@@ -10,62 +10,68 @@ const OauthCallback = () => {
     const { setRefreshToken, setAccessToken } = useTokenStore();
     const navigate = useNavigate();
 
-    useEffect(() => {
-        const code = new URL(window.location.href).searchParams.get("code");
-        const getKakaoToken = async () => {
-            try {
-                const response = await axios.post(
-                    "https://kauth.kakao.com/oauth/token",
-                    new URLSearchParams({
-                        grant_type: "authorization_code",
-                        client_id: process.env.REACT_APP_KAKAO_REST_API_KEY,
-                        redirect_uri: process.env.REACT_APP_KAKAO_REDIRECT_URI,
-                        code: code,
-                    }).toString(),
-                    {
-                        headers: {
-                            "Content-Type":
-                                "application/x-www-form-urlencoded;charset=utf-8",
-                        },
-                    }
-                );
-                return response.data.id_token;
-            } catch (error) {
-                throw new Error("Failed to get Kakao token");
-            }
-        };
+    const getKakaoToken = useCallback(async (code) => {
+        try {
+            const response = await axios.post(
+                "https://kauth.kakao.com/oauth/token",
+                new URLSearchParams({
+                    grant_type: "authorization_code",
+                    client_id: process.env.REACT_APP_KAKAO_REST_API_KEY,
+                    redirect_uri: process.env.REACT_APP_KAKAO_REDIRECT_URI,
+                    code: code,
+                }).toString(),
+                {
+                    headers: {
+                        "Content-Type":
+                            "application/x-www-form-urlencoded;charset=utf-8",
+                    },
+                }
+            );
+            return response.data.id_token;
+        } catch (error) {
+            throw new Error("Failed to get Kakao token");
+        }
+    }, []);
 
-        const getSyluvToken = async (idToken) => {
-            try {
-                const response = await axios.post(
-                    "https://syluv.link/v1/users/login/kakao",
-                    {
-                        idToken: idToken,
-                    }
-                );
-                return response.data;
-            } catch (error) {
-                throw new Error("Failed to get Syluv token");
-            }
-        };
+    const getSyluvToken = useCallback(async (idToken) => {
+        try {
+            const response = await axios.post(
+                "https://syluv.link/v1/users/login/kakao",
+                {
+                    idToken: idToken,
+                }
+            );
+            return response.data;
+        } catch (error) {
+            throw new Error("Failed to get Syluv token");
+        }
+    }, []);
 
-        const fetchTokens = async () => {
-            try {
-                const idToken = await getKakaoToken();
-                const syluvData = await getSyluvToken(idToken);
-                setAccessToken(syluvData.accessToken);
-                setRefreshToken(syluvData.refreshToken);
-                navigate("/", { replace: true });
-            } catch (error) {
-                setIsError(true);
-                setError(error);
-            } finally {
-                setIsLoading(false);
-            }
-        };
+    const fetchTokens = useCallback(async () => {
+        try {
+            const code = new URL(window.location.href).searchParams.get("code");
+            const idToken = await getKakaoToken(code);
+            const syluvData = await getSyluvToken(idToken);
+            setAccessToken(syluvData.accessToken);
+            setRefreshToken(syluvData.refreshToken);
+            navigate("/", { replace: true });
+        } catch (error) {
+            setIsError(true);
+            setError(error);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [
+        getKakaoToken,
+        getSyluvToken,
+        setAccessToken,
+        setRefreshToken,
+        navigate,
+    ]);
 
+    useEffect(() => {
         fetchTokens();
-    }, []);
+    }, [fetchTokens]);
 
     if (isLoading) return <div>Loading...</div>;
     if (isError) return <div>Error: {error.message}</div>;

From 1c964bd69d3e5d958befb9f636570e2a679b8c5a Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 03:32:43 +0900
Subject: [PATCH 03/22] =?UTF-8?q?feat:=20https=20=EA=B4=80=EB=A0=A8=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile.prod          |  5 +++--
 conf/conf.d/default.conf | 14 +++++++-------
 2 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/Dockerfile.prod b/Dockerfile.prod
index 99d3b81..7c169c9 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -19,8 +19,9 @@ COPY conf /etc/nginx
 # 빌드된 파일을 nginx에 복사
 COPY --from=build /app/build /usr/share/nginx/html
 
-# HTTP(80) 포트 오픈
+# HTTP(80) 및 HTTPS(443) 포트 오픈
 EXPOSE 80
+EXPOSE 443
 
 # nginx 실행
-CMD ["nginx", "-g", "daemon off;"]
\ No newline at end of file
+CMD ["nginx", "-g", "daemon off;"]
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
index 9aaba01..cc4b2d5 100644
--- a/conf/conf.d/default.conf
+++ b/conf/conf.d/default.conf
@@ -1,12 +1,12 @@
-# 80, 443 listen
 server {
     listen 80;
+    server_name syluv.store www.syluv.store;
 
     location / {
-        root    /usr/share/nginx/html;
-        index   index.html index.htm;
-        try_files $uri $uri/ /index.html;
+        proxy_pass http://localhost:3000;
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
     }
-
-
-}
\ No newline at end of file
+}

From 8c9ea5925430705850ae20bdb78ca04fa383040b Mon Sep 17 00:00:00 2001
From: yunseok <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 03:34:46 +0900
Subject: [PATCH 04/22] Create main.yml

---
 .github/workflows/main.yml | 84 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 84 insertions(+)
 create mode 100644 .github/workflows/main.yml

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
new file mode 100644
index 0000000..0badd90
--- /dev/null
+++ b/.github/workflows/main.yml
@@ -0,0 +1,84 @@
+name: Deploy
+on:
+  push:
+    branches: [deploy] # deploy 브랜치에 push 발생하면 트리거
+  workflow_dispatch: # 디버깅용, actions 탭에서 직접 버튼 눌러서 트리거
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest # ubuntu 최신 버전 환경에서 실행
+
+    steps:
+      # GitHub Actions는 해당 프로젝트를 만들어진 환경에 checkout하고 나서 실행한다.
+      # 마치 브랜치를 만들 때 checkout하는 것처럼 꼭 필요하다.
+      # 아래 코드는 누군가 만들어놓은 Action을 사용하는 것이다.
+      # 만들어놓은 Action을 사용할 때는 uses라는 키워드를 사용한다.
+      - name: Checkout
+        uses: actions/checkout@v4.1.7
+
+      # React 프로젝트이므로 해당 환경을 Node.js 위에서 실행하겠다고 명시한다.
+      # 마찬가지로 누군가 만들어 놓은 Action이다.
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v4.0.3
+        with:
+          node-version: lts/Hydrogen
+
+      # push할 때마다 npm을 install 해야할까? 아니다.
+      # 해당 프로젝트의 node_modules가 변했는지 안 변했는지를 이용해서
+      # 모듈 변화가 있을 때만 npm install을 해줄 수도 있다.
+      - name: Cache node modules
+        # 그걸 제공하는 Action도 있다.
+        uses: actions/cache@v4.0.2
+        # 해당 step을 대표하는 id를 설정할 수도 있다. 해당 값은 뒤의 step에서 사용한다.
+        id: cache
+        with:
+          # node_modules라는 폴더를 검사하여
+          path: node_modules
+          # 아래 키값으로 cache가 돼있는지 확인한다.
+          key: npm-packages-${{ hashFiles('**/package-lock.json') }}
+
+        # 위 step에서 node_modules에 대한 cache 검사를 했다.
+        # 만약 모듈에 변한 게 있다면 `npm install`을 실행하고 아니면 해당 step을 건너뛰게 된다.
+        # if 키워드는 해당 스텝을 실행할지 말지를 결정할 수 있는 키워드이다.
+        # 위 step에서 정했던 cache라는 id를 steps.cache로 가져올 수 있다.
+        # cache라는 id 값을 가진 step에서는 cache-hit라는 output을 내뱉는다. 
+        # 그걸로 cache가 hit 됐는지 안 됐는지를 알 수 있다.
+        # 그 값이 true가 아닐 때만 npm install을 한다.
+        # https://fe-developers.kakaoent.com/2022/220106-github-actions/
+      - name: Install Dependencies
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: npm install
+
+      - name: Build
+        run: npm run build
+
+      # Docker에 연결하여 이미지를 빌드하고 Hub에 푸시한다.
+      # https://docs.docker.com/build/ci/github-actions/#step-three-define-the-workflow-steps
+      - name: Login to Docker Hub
+        uses: docker/login-action@v3.2.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.4.0
+
+      - name: Build and push
+        uses: docker/build-push-action@v6.4.1
+        with:
+          context: .
+          file: ./Dockerfile
+          push: true
+          tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+
+      # 마지막으로 ssh로 인스턴스에 연결하여 이미지를 Pull하고 컨테이너를 재시작한다.
+      - name: Pull and restart Docker Container
+        uses: appleboy/ssh-action@master
+        with:
+          key: ${{ secrets.SSH_KEY }}
+          host: ${{ secrets.HOST }}
+          username: ${{ secrets.USER }}
+          script: |
+            docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+            docker stop syluv
+            docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv

From 7ba9ee0672a143edd4a9c2eb49ad30c9f282e847 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 03:37:57 +0900
Subject: [PATCH 05/22] =?UTF-8?q?fix:=20flow=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 142 ++++++++++++++++++-------------------
 package-lock.json          |  29 +++++++-
 package.json               |   3 +
 3 files changed, 100 insertions(+), 74 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 0badd90..d021483 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,84 +1,84 @@
 name: Deploy
 on:
-  push:
-    branches: [deploy] # deploy 브랜치에 push 발생하면 트리거
-  workflow_dispatch: # 디버깅용, actions 탭에서 직접 버튼 눌러서 트리거
+    push:
+        branches: [deploy] # deploy 브랜치에 push 발생하면 트리거
+    workflow_dispatch: # 디버깅용, actions 탭에서 직접 버튼 눌러서 트리거
 
 jobs:
-  deploy:
-    runs-on: ubuntu-latest # ubuntu 최신 버전 환경에서 실행
+    deploy:
+        runs-on: ubuntu-latest # ubuntu 최신 버전 환경에서 실행
 
-    steps:
-      # GitHub Actions는 해당 프로젝트를 만들어진 환경에 checkout하고 나서 실행한다.
-      # 마치 브랜치를 만들 때 checkout하는 것처럼 꼭 필요하다.
-      # 아래 코드는 누군가 만들어놓은 Action을 사용하는 것이다.
-      # 만들어놓은 Action을 사용할 때는 uses라는 키워드를 사용한다.
-      - name: Checkout
-        uses: actions/checkout@v4.1.7
+        steps:
+            # GitHub Actions는 해당 프로젝트를 만들어진 환경에 checkout하고 나서 실행한다.
+            # 마치 브랜치를 만들 때 checkout하는 것처럼 꼭 필요하다.
+            # 아래 코드는 누군가 만들어놓은 Action을 사용하는 것이다.
+            # 만들어놓은 Action을 사용할 때는 uses라는 키워드를 사용한다.
+            - name: Checkout
+              uses: actions/checkout@v4.1.7
 
-      # React 프로젝트이므로 해당 환경을 Node.js 위에서 실행하겠다고 명시한다.
-      # 마찬가지로 누군가 만들어 놓은 Action이다.
-      - name: Setup Node.js environment
-        uses: actions/setup-node@v4.0.3
-        with:
-          node-version: lts/Hydrogen
+            # React 프로젝트이므로 해당 환경을 Node.js 위에서 실행하겠다고 명시한다.
+            # 마찬가지로 누군가 만들어 놓은 Action이다.
+            - name: Setup Node.js environment
+              uses: actions/setup-node@v4.0.3
+              with:
+                  node-version: lts/Hydrogen
 
-      # push할 때마다 npm을 install 해야할까? 아니다.
-      # 해당 프로젝트의 node_modules가 변했는지 안 변했는지를 이용해서
-      # 모듈 변화가 있을 때만 npm install을 해줄 수도 있다.
-      - name: Cache node modules
-        # 그걸 제공하는 Action도 있다.
-        uses: actions/cache@v4.0.2
-        # 해당 step을 대표하는 id를 설정할 수도 있다. 해당 값은 뒤의 step에서 사용한다.
-        id: cache
-        with:
-          # node_modules라는 폴더를 검사하여
-          path: node_modules
-          # 아래 키값으로 cache가 돼있는지 확인한다.
-          key: npm-packages-${{ hashFiles('**/package-lock.json') }}
+            # push할 때마다 npm을 install 해야할까? 아니다.
+            # 해당 프로젝트의 node_modules가 변했는지 안 변했는지를 이용해서
+            # 모듈 변화가 있을 때만 npm install을 해줄 수도 있다.
+            - name: Cache node modules
+              # 그걸 제공하는 Action도 있다.
+              uses: actions/cache@v4.0.2
+              # 해당 step을 대표하는 id를 설정할 수도 있다. 해당 값은 뒤의 step에서 사용한다.
+              id: cache
+              with:
+                  # node_modules라는 폴더를 검사하여
+                  path: node_modules
+                  # 아래 키값으로 cache가 돼있는지 확인한다.
+                  key: npm-packages-${{ hashFiles('**/package-lock.json') }}
 
-        # 위 step에서 node_modules에 대한 cache 검사를 했다.
-        # 만약 모듈에 변한 게 있다면 `npm install`을 실행하고 아니면 해당 step을 건너뛰게 된다.
-        # if 키워드는 해당 스텝을 실행할지 말지를 결정할 수 있는 키워드이다.
-        # 위 step에서 정했던 cache라는 id를 steps.cache로 가져올 수 있다.
-        # cache라는 id 값을 가진 step에서는 cache-hit라는 output을 내뱉는다. 
-        # 그걸로 cache가 hit 됐는지 안 됐는지를 알 수 있다.
-        # 그 값이 true가 아닐 때만 npm install을 한다.
-        # https://fe-developers.kakaoent.com/2022/220106-github-actions/
-      - name: Install Dependencies
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: npm install
+              # 위 step에서 node_modules에 대한 cache 검사를 했다.
+              # 만약 모듈에 변한 게 있다면 `npm install`을 실행하고 아니면 해당 step을 건너뛰게 된다.
+              # if 키워드는 해당 스텝을 실행할지 말지를 결정할 수 있는 키워드이다.
+              # 위 step에서 정했던 cache라는 id를 steps.cache로 가져올 수 있다.
+              # cache라는 id 값을 가진 step에서는 cache-hit라는 output을 내뱉는다.
+              # 그걸로 cache가 hit 됐는지 안 됐는지를 알 수 있다.
+              # 그 값이 true가 아닐 때만 npm install을 한다.
+              # https://fe-developers.kakaoent.com/2022/220106-github-actions/
+            - name: Install Dependencies
+              if: steps.cache.outputs.cache-hit != 'true'
+              run: npm install
 
-      - name: Build
-        run: npm run build
+            - name: Build
+              run: CI=false npm run build
 
-      # Docker에 연결하여 이미지를 빌드하고 Hub에 푸시한다.
-      # https://docs.docker.com/build/ci/github-actions/#step-three-define-the-workflow-steps
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3.2.0
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
+            # Docker에 연결하여 이미지를 빌드하고 Hub에 푸시한다.
+            # https://docs.docker.com/build/ci/github-actions/#step-three-define-the-workflow-steps
+            - name: Login to Docker Hub
+              uses: docker/login-action@v3.2.0
+              with:
+                  username: ${{ secrets.DOCKERHUB_USERNAME }}
+                  password: ${{ secrets.DOCKERHUB_TOKEN }}
 
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3.4.0
+            - name: Set up Docker Buildx
+              uses: docker/setup-buildx-action@v3.4.0
 
-      - name: Build and push
-        uses: docker/build-push-action@v6.4.1
-        with:
-          context: .
-          file: ./Dockerfile
-          push: true
-          tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+            - name: Build and push
+              uses: docker/build-push-action@v6.4.1
+              with:
+                  context: .
+                  file: ./Dockerfile
+                  push: true
+                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
 
-      # 마지막으로 ssh로 인스턴스에 연결하여 이미지를 Pull하고 컨테이너를 재시작한다.
-      - name: Pull and restart Docker Container
-        uses: appleboy/ssh-action@master
-        with:
-          key: ${{ secrets.SSH_KEY }}
-          host: ${{ secrets.HOST }}
-          username: ${{ secrets.USER }}
-          script: |
-            docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
-            docker stop syluv
-            docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+            # 마지막으로 ssh로 인스턴스에 연결하여 이미지를 Pull하고 컨테이너를 재시작한다.
+            - name: Pull and restart Docker Container
+              uses: appleboy/ssh-action@master
+              with:
+                  key: ${{ secrets.SSH_KEY }}
+                  host: ${{ secrets.HOST }}
+                  username: ${{ secrets.USER }}
+                  script: |
+                      docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                      docker stop syluv
+                      docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv
diff --git a/package-lock.json b/package-lock.json
index a2f2115..57612eb 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,9 @@
                 "styled-components": "^6.1.11",
                 "web-vitals": "^2.1.4",
                 "zustand": "^4.5.4"
+            },
+            "devDependencies": {
+                "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
             }
         },
         "node_modules/@adobe/css-tools": {
@@ -717,10 +720,18 @@
             }
         },
         "node_modules/@babel/plugin-proposal-private-property-in-object": {
-            "version": "7.21.0-placeholder-for-preset-env.2",
-            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
-            "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+            "version": "7.21.11",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.11.tgz",
+            "integrity": "sha512-0QZ8qP/3RLDVBwBFoWAwCtgcDZJVwA5LUJRZU8x2YFfKNuFq161wK3cuGrALu5yiPu+vzwTAg/sMWVNeWeNyaw==",
+            "deprecated": "This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-private-property-in-object instead.",
+            "dev": true,
             "license": "MIT",
+            "dependencies": {
+                "@babel/helper-annotate-as-pure": "^7.18.6",
+                "@babel/helper-create-class-features-plugin": "^7.21.0",
+                "@babel/helper-plugin-utils": "^7.20.2",
+                "@babel/plugin-syntax-private-property-in-object": "^7.14.5"
+            },
             "engines": {
                 "node": ">=6.9.0"
             },
@@ -2044,6 +2055,18 @@
                 "@babel/core": "^7.0.0-0"
             }
         },
+        "node_modules/@babel/preset-env/node_modules/@babel/plugin-proposal-private-property-in-object": {
+            "version": "7.21.0-placeholder-for-preset-env.2",
+            "resolved": "https://registry.npmjs.org/@babel/plugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.21.0-placeholder-for-preset-env.2.tgz",
+            "integrity": "sha512-SOSkfJDddaM7mak6cPEpswyTRnuRltl429hMraQEglW+OkovnCzsiszTmsrlY//qLFjCpQDFRvjdm2wA5pPm9w==",
+            "license": "MIT",
+            "engines": {
+                "node": ">=6.9.0"
+            },
+            "peerDependencies": {
+                "@babel/core": "^7.0.0-0"
+            }
+        },
         "node_modules/@babel/preset-env/node_modules/semver": {
             "version": "6.3.1",
             "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz",
diff --git a/package.json b/package.json
index 8e1a2d6..26233d7 100644
--- a/package.json
+++ b/package.json
@@ -43,5 +43,8 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "devDependencies": {
+        "@babel/plugin-proposal-private-property-in-object": "^7.21.11"
     }
 }

From f5d110561942e75bc49d7e5bcda01c0ad617143f Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 03:40:30 +0900
Subject: [PATCH 06/22] =?UTF-8?q?fix:=20flow=20dockerfile=20import=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index d021483..203813a 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -67,9 +67,9 @@ jobs:
               uses: docker/build-push-action@v6.4.1
               with:
                   context: .
-                  file: ./Dockerfile
+                  file: ./Dockerfile.prod
                   push: true
-                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv
 
             # 마지막으로 ssh로 인스턴스에 연결하여 이미지를 Pull하고 컨테이너를 재시작한다.
             - name: Pull and restart Docker Container

From 1faeee6d905e99584f6cda0a0d50395199625819 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 03:49:35 +0900
Subject: [PATCH 07/22] =?UTF-8?q?feat:=20docker=20sudo=20=EC=84=A4?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 203813a..de44900 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -79,6 +79,6 @@ jobs:
                   host: ${{ secrets.HOST }}
                   username: ${{ secrets.USER }}
                   script: |
-                      docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
-                      docker stop syluv
-                      docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                      sudo docker stop syluv
+                      sudo docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv

From e08e21f707a78c29c4c7ef3d6e5492980fe2e137 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:06:11 +0900
Subject: [PATCH 08/22] =?UTF-8?q?feat:=20https=20port=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index de44900..cd7316e 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -81,4 +81,4 @@ jobs:
                   script: |
                       sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
                       sudo docker stop syluv
-                      sudo docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                      sudo docker run -d --rm --name syluvFrontend -p 80:80 -p 443:443 ${{ secrets.DOCKERHUB_USERNAME }}/syluv

From 67bafe2ce008a604669f20f632ca92e00f494aeb Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:11:13 +0900
Subject: [PATCH 09/22] =?UTF-8?q?fix:=20flow=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 60 +++++++++++++-------------------------
 conf/conf.d/default.conf   |  2 +-
 2 files changed, 22 insertions(+), 40 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index cd7316e..5d41a22 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -1,50 +1,29 @@
 name: Deploy
 on:
     push:
-        branches: [deploy] # deploy 브랜치에 push 발생하면 트리거
-    workflow_dispatch: # 디버깅용, actions 탭에서 직접 버튼 눌러서 트리거
+        branches: [deploy]
+    workflow_dispatch:
 
 jobs:
     deploy:
-        runs-on: ubuntu-latest # ubuntu 최신 버전 환경에서 실행
+        runs-on: ubuntu-latest
 
         steps:
-            # GitHub Actions는 해당 프로젝트를 만들어진 환경에 checkout하고 나서 실행한다.
-            # 마치 브랜치를 만들 때 checkout하는 것처럼 꼭 필요하다.
-            # 아래 코드는 누군가 만들어놓은 Action을 사용하는 것이다.
-            # 만들어놓은 Action을 사용할 때는 uses라는 키워드를 사용한다.
             - name: Checkout
-              uses: actions/checkout@v4.1.7
+              uses: actions/checkout@v4
 
-            # React 프로젝트이므로 해당 환경을 Node.js 위에서 실행하겠다고 명시한다.
-            # 마찬가지로 누군가 만들어 놓은 Action이다.
             - name: Setup Node.js environment
-              uses: actions/setup-node@v4.0.3
+              uses: actions/setup-node@v4
               with:
                   node-version: lts/Hydrogen
 
-            # push할 때마다 npm을 install 해야할까? 아니다.
-            # 해당 프로젝트의 node_modules가 변했는지 안 변했는지를 이용해서
-            # 모듈 변화가 있을 때만 npm install을 해줄 수도 있다.
             - name: Cache node modules
-              # 그걸 제공하는 Action도 있다.
-              uses: actions/cache@v4.0.2
-              # 해당 step을 대표하는 id를 설정할 수도 있다. 해당 값은 뒤의 step에서 사용한다.
+              uses: actions/cache@v4
               id: cache
               with:
-                  # node_modules라는 폴더를 검사하여
                   path: node_modules
-                  # 아래 키값으로 cache가 돼있는지 확인한다.
                   key: npm-packages-${{ hashFiles('**/package-lock.json') }}
 
-              # 위 step에서 node_modules에 대한 cache 검사를 했다.
-              # 만약 모듈에 변한 게 있다면 `npm install`을 실행하고 아니면 해당 step을 건너뛰게 된다.
-              # if 키워드는 해당 스텝을 실행할지 말지를 결정할 수 있는 키워드이다.
-              # 위 step에서 정했던 cache라는 id를 steps.cache로 가져올 수 있다.
-              # cache라는 id 값을 가진 step에서는 cache-hit라는 output을 내뱉는다.
-              # 그걸로 cache가 hit 됐는지 안 됐는지를 알 수 있다.
-              # 그 값이 true가 아닐 때만 npm install을 한다.
-              # https://fe-developers.kakaoent.com/2022/220106-github-actions/
             - name: Install Dependencies
               if: steps.cache.outputs.cache-hit != 'true'
               run: npm install
@@ -52,33 +31,36 @@ jobs:
             - name: Build
               run: CI=false npm run build
 
-            # Docker에 연결하여 이미지를 빌드하고 Hub에 푸시한다.
-            # https://docs.docker.com/build/ci/github-actions/#step-three-define-the-workflow-steps
             - name: Login to Docker Hub
-              uses: docker/login-action@v3.2.0
+              uses: docker/login-action@v3
               with:
                   username: ${{ secrets.DOCKERHUB_USERNAME }}
                   password: ${{ secrets.DOCKERHUB_TOKEN }}
 
             - name: Set up Docker Buildx
-              uses: docker/setup-buildx-action@v3.4.0
+              uses: docker/setup-buildx-action@v3
 
             - name: Build and push
-              uses: docker/build-push-action@v6.4.1
+              uses: docker/build-push-action@v6
               with:
                   context: .
-                  file: ./Dockerfile.prod
+                  file: ./Dockerfile.prod # Dockerfile.prod 경로 지정
                   push: true
-                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
 
-            # 마지막으로 ssh로 인스턴스에 연결하여 이미지를 Pull하고 컨테이너를 재시작한다.
             - name: Pull and restart Docker Container
               uses: appleboy/ssh-action@master
               with:
-                  key: ${{ secrets.SSH_KEY }}
                   host: ${{ secrets.HOST }}
                   username: ${{ secrets.USER }}
+                  key: ${{ secrets.SSH_KEY }}
+                  port: 22
+                  timeout: 60s
                   script: |
-                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv
-                      sudo docker stop syluv
-                      sudo docker run -d --rm --name syluvFrontend -p 80:80 -p 443:443 ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                      echo "Pulling latest Docker image"
+                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+                      echo "Stopping existing Docker container"
+                      sudo docker stop syluvFrontend || true
+                      sudo docker rm syluvFrontend || true
+                      echo "Starting new Docker container"
+                      sudo docker run -d --rm --name syluvFrontend -p 80:80 -p 443:443 ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
index cc4b2d5..16addd9 100644
--- a/conf/conf.d/default.conf
+++ b/conf/conf.d/default.conf
@@ -3,7 +3,7 @@ server {
     server_name syluv.store www.syluv.store;
 
     location / {
-        proxy_pass http://localhost:3000;
+        proxy_pass http://localhost:80;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

From 8484d9b58fbf28d9110680418484c60d543dfb1a Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:14:44 +0900
Subject: [PATCH 10/22] =?UTF-8?q?fix:=20=EB=8F=84=EC=BB=A4=EC=9D=B4?=
 =?UTF-8?q?=EB=A6=84=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 5d41a22..0ac2c5c 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -46,7 +46,7 @@ jobs:
                   context: .
                   file: ./Dockerfile.prod # Dockerfile.prod 경로 지정
                   push: true
-                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+                  tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
 
             - name: Pull and restart Docker Container
               uses: appleboy/ssh-action@master
@@ -58,9 +58,9 @@ jobs:
                   timeout: 60s
                   script: |
                       echo "Pulling latest Docker image"
-                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syulv
                       echo "Stopping existing Docker container"
                       sudo docker stop syluvFrontend || true
                       sudo docker rm syluvFrontend || true
                       echo "Starting new Docker container"
-                      sudo docker run -d --rm --name syluvFrontend -p 80:80 -p 443:443 ${{ secrets.DOCKERHUB_USERNAME }}/jmdb
+                      sudo docker run -d --rm --name syluvFrontend -p 80:80 -p 443:443 ${{ secrets.DOCKERHUB_USERNAME }}/syluv

From f16641a62f41c66e0833e8d32d35a8a41a4dac6e Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:18:52 +0900
Subject: [PATCH 11/22] =?UTF-8?q?fix:=20nginx=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 conf/conf.d/default.conf | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
index 16addd9..fdc6f51 100644
--- a/conf/conf.d/default.conf
+++ b/conf/conf.d/default.conf
@@ -3,10 +3,8 @@ server {
     server_name syluv.store www.syluv.store;
 
     location / {
-        proxy_pass http://localhost:80;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
+        root    /usr/share/nginx/html;
+        index   index.html index.htm;
+        try_files $uri $uri/ /index.html;
     }
-}
+}
\ No newline at end of file

From 95fb3cf06bf4df20f0315a7863b6a5f502fa2bac Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:49:14 +0900
Subject: [PATCH 12/22] =?UTF-8?q?fix:=20nginx=20=EC=84=A4=EC=A0=95=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile.prod          | 14 ++++++++++----
 conf/conf.d/default.conf | 23 +++++++++++++++++++----
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/Dockerfile.prod b/Dockerfile.prod
index 7c169c9..745b56f 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -1,3 +1,4 @@
+# Stage 1: Build
 FROM node:lts AS build
 
 WORKDIR /app
@@ -10,18 +11,23 @@ COPY . .
 
 RUN npm run build
 
+# Stage 2: Serve with Nginx
 FROM nginx:stable-alpine
 
-# 기본 nginx 설정 제거 및 설정 복사
+# Remove default Nginx configuration and copy custom config
 RUN rm -rf /etc/nginx/conf.d
 COPY conf /etc/nginx
 
-# 빌드된 파일을 nginx에 복사
+# Copy SSL certificates
+COPY path/to/your/ssl/certificates/nginx.crt /etc/nginx/ssl/nginx.crt
+COPY path/to/your/ssl/certificates/nginx.key /etc/nginx/ssl/nginx.key
+
+# Copy built files to Nginx
 COPY --from=build /app/build /usr/share/nginx/html
 
-# HTTP(80) 및 HTTPS(443) 포트 오픈
+# Expose HTTP and HTTPS ports
 EXPOSE 80
 EXPOSE 443
 
-# nginx 실행
+# Run Nginx
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
index fdc6f51..fec32e3 100644
--- a/conf/conf.d/default.conf
+++ b/conf/conf.d/default.conf
@@ -2,9 +2,24 @@ server {
     listen 80;
     server_name syluv.store www.syluv.store;
 
+    # HTTP 요청을 HTTPS로 리디렉션
     location / {
-        root    /usr/share/nginx/html;
-        index   index.html index.htm;
-        try_files $uri $uri/ /index.html;
+        return 301 https://$host$request_uri;
     }
-}
\ No newline at end of file
+}
+
+server {
+    listen 443 ssl;
+    server_name syluv.store www.syluv.store;
+
+    ssl_certificate /etc/nginx/ssl/nginx.crt;
+    ssl_certificate_key /etc/nginx/ssl/nginx.key;
+
+    location / {
+        proxy_pass http://localhost:3000; 
+        proxy_set_header Host $host;
+        proxy_set_header X-Real-IP $remote_addr;
+        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+        proxy_set_header X-Forwarded-Proto $scheme;
+    }
+}

From 609feed8167457f70272f7e7c4abb84ce376db5c Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:53:12 +0900
Subject: [PATCH 13/22] fix: github flow

---
 .github/workflows/main.yml |  6 +++---
 Dockerfile.prod            | 13 ++++---------
 conf/conf.d/default.conf   | 15 +--------------
 3 files changed, 8 insertions(+), 26 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 0ac2c5c..895ff3f 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -44,7 +44,7 @@ jobs:
               uses: docker/build-push-action@v6
               with:
                   context: .
-                  file: ./Dockerfile.prod # Dockerfile.prod 경로 지정
+                  file: ./Dockerfile.prod
                   push: true
                   tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
 
@@ -58,9 +58,9 @@ jobs:
                   timeout: 60s
                   script: |
                       echo "Pulling latest Docker image"
-                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syulv
+                      sudo docker pull ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
                       echo "Stopping existing Docker container"
                       sudo docker stop syluvFrontend || true
                       sudo docker rm syluvFrontend || true
                       echo "Starting new Docker container"
-                      sudo docker run -d --rm --name syluvFrontend -p 80:80 -p 443:443 ${{ secrets.DOCKERHUB_USERNAME }}/syluv
+                      sudo docker run -d --rm --name syluvFrontend -p 80:80 ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
diff --git a/Dockerfile.prod b/Dockerfile.prod
index 745b56f..5afc8d0 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -1,9 +1,9 @@
-# Stage 1: Build
+# Stage 1: Build the React app
 FROM node:lts AS build
 
 WORKDIR /app
 
-COPY package.json .
+COPY package.json package-lock.json ./
 
 RUN npm install
 
@@ -16,18 +16,13 @@ FROM nginx:stable-alpine
 
 # Remove default Nginx configuration and copy custom config
 RUN rm -rf /etc/nginx/conf.d
-COPY conf /etc/nginx
-
-# Copy SSL certificates
-COPY path/to/your/ssl/certificates/nginx.crt /etc/nginx/ssl/nginx.crt
-COPY path/to/your/ssl/certificates/nginx.key /etc/nginx/ssl/nginx.key
+COPY nginx.conf /etc/nginx/conf.d/default.conf
 
 # Copy built files to Nginx
 COPY --from=build /app/build /usr/share/nginx/html
 
-# Expose HTTP and HTTPS ports
+# Expose HTTP port
 EXPOSE 80
-EXPOSE 443
 
 # Run Nginx
 CMD ["nginx", "-g", "daemon off;"]
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
index fec32e3..cc4b2d5 100644
--- a/conf/conf.d/default.conf
+++ b/conf/conf.d/default.conf
@@ -2,21 +2,8 @@ server {
     listen 80;
     server_name syluv.store www.syluv.store;
 
-    # HTTP 요청을 HTTPS로 리디렉션
     location / {
-        return 301 https://$host$request_uri;
-    }
-}
-
-server {
-    listen 443 ssl;
-    server_name syluv.store www.syluv.store;
-
-    ssl_certificate /etc/nginx/ssl/nginx.crt;
-    ssl_certificate_key /etc/nginx/ssl/nginx.key;
-
-    location / {
-        proxy_pass http://localhost:3000; 
+        proxy_pass http://localhost:3000;
         proxy_set_header Host $host;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

From 3fb7a8fe0bc442ff178c716cc50aedfa047f036d Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 04:54:50 +0900
Subject: [PATCH 14/22] =?UTF-8?q?fix:=20=EC=9E=98=EB=AA=BB=EB=90=9C=20?=
 =?UTF-8?q?=EB=A7=81=ED=81=AC=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile.prod | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Dockerfile.prod b/Dockerfile.prod
index 5afc8d0..829d7d2 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -16,7 +16,7 @@ FROM nginx:stable-alpine
 
 # Remove default Nginx configuration and copy custom config
 RUN rm -rf /etc/nginx/conf.d
-COPY nginx.conf /etc/nginx/conf.d/default.conf
+COPY conf /etc/nginx
 
 # Copy built files to Nginx
 COPY --from=build /app/build /usr/share/nginx/html

From bc8b6f273429a1fdb798a2a5f01c54babbc25af0 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 05:01:06 +0900
Subject: [PATCH 15/22] =?UTF-8?q?fix:=20=EB=8F=84=EC=BB=A4=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 Dockerfile.prod          | 15 ++++++---------
 conf/conf.d/default.conf | 11 ++++-------
 2 files changed, 10 insertions(+), 16 deletions(-)

diff --git a/Dockerfile.prod b/Dockerfile.prod
index 829d7d2..0c44f58 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -1,28 +1,25 @@
-# Stage 1: Build the React app
 FROM node:lts AS build
 
 WORKDIR /app
 
-COPY package.json package-lock.json ./
+COPY package.json .
 
-RUN npm install
+RUN npm i
 
 COPY . .
 
 RUN npm run build
 
-# Stage 2: Serve with Nginx
 FROM nginx:stable-alpine
 
-# Remove default Nginx configuration and copy custom config
+# nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
 RUN rm -rf /etc/nginx/conf.d
 COPY conf /etc/nginx
 
-# Copy built files to Nginx
+# 위 스테이지에서 생성한 빌드 결과를 nginx의 샘플 앱이 사용하던 폴더로 이동
 COPY --from=build /app/build /usr/share/nginx/html
 
-# Expose HTTP port
 EXPOSE 80
 
-# Run Nginx
-CMD ["nginx", "-g", "daemon off;"]
+# nginx 실행
+CMD [ "nginx", "-g", "daemon off;" ] 
\ No newline at end of file
diff --git a/conf/conf.d/default.conf b/conf/conf.d/default.conf
index cc4b2d5..78811fd 100644
--- a/conf/conf.d/default.conf
+++ b/conf/conf.d/default.conf
@@ -1,12 +1,9 @@
 server {
     listen 80;
-    server_name syluv.store www.syluv.store;
 
     location / {
-        proxy_pass http://localhost:3000;
-        proxy_set_header Host $host;
-        proxy_set_header X-Real-IP $remote_addr;
-        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
-        proxy_set_header X-Forwarded-Proto $scheme;
+        root   /usr/share/nginx/html;
+        index  index.html index.htm;
+        try_files $uri $uri/ /index.html;
     }
-}
+}
\ No newline at end of file

From 70e2ca848952f8dd3cb5eb307158b17a3685ebd0 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 14:03:52 +0900
Subject: [PATCH 16/22] =?UTF-8?q?feat:=20=ED=99=98=EA=B2=BD=EB=B3=80?=
 =?UTF-8?q?=EC=88=98=20=EC=9E=85=EB=A0=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "\bdocker-compose.yml"     | 18 ++++++++++++++
 .github/workflows/main.yml |  3 +++
 Dockerfile.prod            | 51 +++++++++++++++++++++++++++++++++++++-
 3 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 "\bdocker-compose.yml"

diff --git "a/\bdocker-compose.yml" "b/\bdocker-compose.yml"
new file mode 100644
index 0000000..81bd165
--- /dev/null
+++ "b/\bdocker-compose.yml"
@@ -0,0 +1,18 @@
+version: "3"
+services:
+    app:
+        build:
+            context: .
+            dockerfile: Dockerfile.prod
+            args:
+                - REACT_APP_KAKAO_JS_KEY=${REACT_APP_KAKAO_JS_KEY}
+                - REACT_APP_KAKAO_REST_API_KEY=${REACT_APP_KAKAO_REST_API_KEY}
+                - REACT_APP_KAKAO_REDIRECT_URI=${REACT_APP_KAKAO_REDIRECT_URI}
+                - REACT_APP_BASE_URL=${REACT_APP_BASE_URL}
+        ports:
+            - "80:80"
+        environment:
+            - REACT_APP_KAKAO_JS_KEY=${REACT_APP_KAKAO_JS_KEY}
+            - REACT_APP_KAKAO_REST_API_KEY=${REACT_APP_KAKAO_REST_API_KEY}
+            - REACT_APP_KAKAO_REDIRECT_URI=${REACT_APP_KAKAO_REDIRECT_URI}
+            - REACT_APP_BASE_URL=${REACT_APP_BASE_URL}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 895ff3f..c4c12a9 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -47,6 +47,9 @@ jobs:
                   file: ./Dockerfile.prod
                   push: true
                   tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
+                  build-args:
+                      REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
+                      REACT_APP_OTHER_ENV: ${{ secrets.REACT_APP_OTHER_ENV }}
 
             - name: Pull and restart Docker Container
               uses: appleboy/ssh-action@master
diff --git a/Dockerfile.prod b/Dockerfile.prod
index 0c44f58..dfd9be4 100644
--- a/Dockerfile.prod
+++ b/Dockerfile.prod
@@ -1,3 +1,4 @@
+# Build stage
 FROM node:lts AS build
 
 WORKDIR /app
@@ -8,8 +9,56 @@ RUN npm i
 
 COPY . .
 
+# Build arguments for React environment variables
+ARG REACT_APP_API_URL
+ARG REACT_APP_OTHER_ENV
+
+# Set environment variables for React build
+ENV REACT_APP_API_URL $REACT_APP_API_URL
+ENV REACT_APP_OTHER_ENV $REACT_APP_OTHER_ENV
+
+RUN npm run build
+
+# Production stage
+FROM nginx:stable-alpine
+
+# nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
+RUN rm -rf /etc/nginx/conf.d
+COPY conf /etc/nginx
+
+# 위 스테이지에서 생성한 빌드 결과를 nginx의 샘플 앱이 사용하던 폴더로 이동
+COPY --from=build /app/build /usr/share/nginx/html
+
+EXPOSE 80
+
+# nginx 실행
+CMD [ "nginx", "-g", "daemon off;" ]
+# Build stage
+FROM node:lts AS build
+
+WORKDIR /app
+
+COPY package.json .
+
+RUN npm i
+
+COPY . .
+
+# Build arguments for React environment variables
+ARG REACT_APP_KAKAO_JS_KEY
+ARG REACT_APP_KAKAO_REST_API_KEY
+ARG REACT_APP_KAKAO_REDIRECT_URI
+ARG REACT_APP_BASE_URL
+
+# Set environment variables for React build
+ENV REACT_APP_KAKAO_JS_KEY $REACT_APP_KAKAO_JS_KEY
+ENV REACT_APP_KAKAO_REST_API_KEY $REACT_APP_KAKAO_REST_API_KEY
+ENV REACT_APP_KAKAO_REDIRECT_URI $REACT_APP_KAKAO_REDIRECT_URI
+ENV REACT_APP_BASE_URL $REACT_APP_BASE_URL
+
 RUN npm run build
 
+# Production stage
 FROM nginx:stable-alpine
 
 # nginx의 기본 설정을 삭제하고 앱에서 설정한 파일을 복사
@@ -22,4 +71,4 @@ COPY --from=build /app/build /usr/share/nginx/html
 EXPOSE 80
 
 # nginx 실행
-CMD [ "nginx", "-g", "daemon off;" ] 
\ No newline at end of file
+CMD [ "nginx", "-g", "daemon off;" ]

From 0b5ff01c7f229fb8ac7f48fb3e4dc993517f1d29 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 14:12:42 +0900
Subject: [PATCH 17/22] =?UTF-8?q?fix:=20flow=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 "\bdocker-compose.yml"     | 18 ------------------
 .github/workflows/main.yml |  7 +++++--
 2 files changed, 5 insertions(+), 20 deletions(-)
 delete mode 100644 "\bdocker-compose.yml"

diff --git "a/\bdocker-compose.yml" "b/\bdocker-compose.yml"
deleted file mode 100644
index 81bd165..0000000
--- "a/\bdocker-compose.yml"
+++ /dev/null
@@ -1,18 +0,0 @@
-version: "3"
-services:
-    app:
-        build:
-            context: .
-            dockerfile: Dockerfile.prod
-            args:
-                - REACT_APP_KAKAO_JS_KEY=${REACT_APP_KAKAO_JS_KEY}
-                - REACT_APP_KAKAO_REST_API_KEY=${REACT_APP_KAKAO_REST_API_KEY}
-                - REACT_APP_KAKAO_REDIRECT_URI=${REACT_APP_KAKAO_REDIRECT_URI}
-                - REACT_APP_BASE_URL=${REACT_APP_BASE_URL}
-        ports:
-            - "80:80"
-        environment:
-            - REACT_APP_KAKAO_JS_KEY=${REACT_APP_KAKAO_JS_KEY}
-            - REACT_APP_KAKAO_REST_API_KEY=${REACT_APP_KAKAO_REST_API_KEY}
-            - REACT_APP_KAKAO_REDIRECT_URI=${REACT_APP_KAKAO_REDIRECT_URI}
-            - REACT_APP_BASE_URL=${REACT_APP_BASE_URL}
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index c4c12a9..2005487 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -48,8 +48,11 @@ jobs:
                   push: true
                   tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
                   build-args:
-                      REACT_APP_API_URL: ${{ secrets.REACT_APP_API_URL }}
-                      REACT_APP_OTHER_ENV: ${{ secrets.REACT_APP_OTHER_ENV }}
+                      REACT_APP_KAKAO_REST_API_KEY: ${{ secrets.REACT_APP_KAKAO_REST_API_KEY }}
+                      REACT_APP_KAKAO_JS_KEY: ${{ secrets.REACT_APP_KAKAO_JS_KEY }}
+                      REACT_APP_KAKAO_REST_API_KEY: ${{ secrets.REACT_APP_KAKAO_REST_API_KEY }}
+                      REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.REACT_APP_KAKAO_REDIRECT_URI }}
+                      REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }}
 
             - name: Pull and restart Docker Container
               uses: appleboy/ssh-action@master

From 70c20bc6f9fd7d1e60b0a9c9fca06050992a5c30 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 14:15:21 +0900
Subject: [PATCH 18/22] =?UTF-8?q?fix:=20yml=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 1 -
 1 file changed, 1 deletion(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 2005487..6a0e802 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -48,7 +48,6 @@ jobs:
                   push: true
                   tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
                   build-args:
-                      REACT_APP_KAKAO_REST_API_KEY: ${{ secrets.REACT_APP_KAKAO_REST_API_KEY }}
                       REACT_APP_KAKAO_JS_KEY: ${{ secrets.REACT_APP_KAKAO_JS_KEY }}
                       REACT_APP_KAKAO_REST_API_KEY: ${{ secrets.REACT_APP_KAKAO_REST_API_KEY }}
                       REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.REACT_APP_KAKAO_REDIRECT_URI }}

From e01904b6507da3575dbb4d798db4586a66051260 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 14:24:34 +0900
Subject: [PATCH 19/22] =?UTF-8?q?fix:=20build-args=20=EB=AC=B8=EB=B2=95=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .github/workflows/main.yml | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
index 6a0e802..eae448b 100644
--- a/.github/workflows/main.yml
+++ b/.github/workflows/main.yml
@@ -40,18 +40,18 @@ jobs:
             - name: Set up Docker Buildx
               uses: docker/setup-buildx-action@v3
 
-            - name: Build and push
-              uses: docker/build-push-action@v6
+            - name: Build and push Docker images
+              uses: docker/build-push-action@v6.4.1
               with:
                   context: .
                   file: ./Dockerfile.prod
                   push: true
                   tags: ${{ secrets.DOCKERHUB_USERNAME }}/syluv:latest
-                  build-args:
-                      REACT_APP_KAKAO_JS_KEY: ${{ secrets.REACT_APP_KAKAO_JS_KEY }}
-                      REACT_APP_KAKAO_REST_API_KEY: ${{ secrets.REACT_APP_KAKAO_REST_API_KEY }}
-                      REACT_APP_KAKAO_REDIRECT_URI: ${{ secrets.REACT_APP_KAKAO_REDIRECT_URI }}
-                      REACT_APP_BASE_URL: ${{ secrets.REACT_APP_BASE_URL }}
+                  build-args: |
+                      REACT_APP_KAKAO_JS_KEY=${{ secrets.REACT_APP_KAKAO_JS_KEY }}
+                      REACT_APP_KAKAO_REST_API_KEY=${{ secrets.REACT_APP_KAKAO_REST_API_KEY }}
+                      REACT_APP_KAKAO_REDIRECT_URI=${{ secrets.REACT_APP_KAKAO_REDIRECT_URI }}
+                      REACT_APP_BASE_URL=${{ secrets.REACT_APP_BASE_URL }}
 
             - name: Pull and restart Docker Container
               uses: appleboy/ssh-action@master

From d57b95c1272cf36a88c4e083950a1fe731a1739e Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 14:46:25 +0900
Subject: [PATCH 20/22] =?UTF-8?q?fix:=20oauth=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/OauthCallback.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/utils/OauthCallback.js b/src/utils/OauthCallback.js
index 0a98aa6..c3c7955 100644
--- a/src/utils/OauthCallback.js
+++ b/src/utils/OauthCallback.js
@@ -9,6 +9,7 @@ const OauthCallback = () => {
     const [error, setError] = useState(null);
     const { setRefreshToken, setAccessToken } = useTokenStore();
     const navigate = useNavigate();
+    const [retry, setRetry] = useState(0);
 
     const getKakaoToken = useCallback(async (code) => {
         try {
@@ -58,6 +59,7 @@ const OauthCallback = () => {
         } catch (error) {
             setIsError(true);
             setError(error);
+            setRetry((prev) => prev + 1);
         } finally {
             setIsLoading(false);
         }
@@ -70,8 +72,9 @@ const OauthCallback = () => {
     ]);
 
     useEffect(() => {
+        if (retry > 2) navigate("/login", { replace: true });
         fetchTokens();
-    }, [fetchTokens]);
+    }, [fetchTokens, retry, navigate]);
 
     if (isLoading) return <div>Loading...</div>;
     if (isError) return <div>Error: {error.message}</div>;

From 533cc33180354e9ba456ca06fa78d892af356067 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 14:49:53 +0900
Subject: [PATCH 21/22] =?UTF-8?q?fix:=20retry=20x=EB=A1=9C=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/OauthCallback.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/OauthCallback.js b/src/utils/OauthCallback.js
index c3c7955..245ada9 100644
--- a/src/utils/OauthCallback.js
+++ b/src/utils/OauthCallback.js
@@ -72,7 +72,7 @@ const OauthCallback = () => {
     ]);
 
     useEffect(() => {
-        if (retry > 2) navigate("/login", { replace: true });
+        if (retry > 0) navigate("/login", { replace: true });
         fetchTokens();
     }, [fetchTokens, retry, navigate]);
 

From f1420ddf0690622b7845ddb5ecc671a614c4eeb2 Mon Sep 17 00:00:00 2001
From: yseokkkkkk <yunseok0304@gmail.com>
Date: Thu, 18 Jul 2024 15:17:34 +0900
Subject: [PATCH 22/22] =?UTF-8?q?fix:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=8B=A4=ED=8C=A8=EC=8B=9C=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=EB=A1=9C=20=EC=9D=B4=EB=8F=99?=
 =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/OauthCallback.js | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/utils/OauthCallback.js b/src/utils/OauthCallback.js
index 245ada9..9eedce7 100644
--- a/src/utils/OauthCallback.js
+++ b/src/utils/OauthCallback.js
@@ -9,7 +9,6 @@ const OauthCallback = () => {
     const [error, setError] = useState(null);
     const { setRefreshToken, setAccessToken } = useTokenStore();
     const navigate = useNavigate();
-    const [retry, setRetry] = useState(0);
 
     const getKakaoToken = useCallback(async (code) => {
         try {
@@ -59,7 +58,7 @@ const OauthCallback = () => {
         } catch (error) {
             setIsError(true);
             setError(error);
-            setRetry((prev) => prev + 1);
+            navigate("/login", { replace: true });
         } finally {
             setIsLoading(false);
         }
@@ -72,9 +71,8 @@ const OauthCallback = () => {
     ]);
 
     useEffect(() => {
-        if (retry > 0) navigate("/login", { replace: true });
         fetchTokens();
-    }, [fetchTokens, retry, navigate]);
+    }, [fetchTokens]);
 
     if (isLoading) return <div>Loading...</div>;
     if (isError) return <div>Error: {error.message}</div>;