From 89c0028eb2e866d9eb70e5228528e527e61c85df Mon Sep 17 00:00:00 2001
From: Jinwook Kim <kimjinwook94@gmail.com>
Date: Wed, 18 Oct 2023 15:45:08 +0900
Subject: [PATCH] =?UTF-8?q?[FE]=20=EC=8B=A4=ED=96=89=20=ED=99=98=EA=B2=BD?=
 =?UTF-8?q?=EC=97=90=20=EB=94=B0=EB=9D=BC=20=ED=97=A4=EB=8D=94=20=ED=95=AD?=
 =?UTF-8?q?=EB=AA=A9=20URL=20=EA=B5=AC=EB=B6=84=EB=90=98=EB=8F=84=EB=A1=9D?=
 =?UTF-8?q?=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/package.json                              |  5 +++--
 frontend/src/components/Header/MenuModal/index.tsx |  7 ++++---
 frontend/src/components/Header/index.tsx           |  9 +++++----
 frontend/webpack/webpack.common.js                 | 10 ++++++++--
 4 files changed, 20 insertions(+), 11 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index 2f012b0c..56d1ac26 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,9 +4,10 @@
   "description": "bootme",
   "main": "index.js",
   "scripts": {
-    "dev": "webpack-dev-server --config webpack/webpack.dev.js --open --hot",
+    "dev": "NODE_ENV=dev webpack-dev-server --config webpack/webpack.dev.js --open --hot",
     "build": "NODE_ENV=production webpack --config webpack/webpack.prod.js",
-    "start": "webpack --config webpack/webpack.dev.js",
+    "build:staging": "NODE_ENV=staging webpack --config webpack/webpack.prod.js",
+    "start": "NODE_ENV=dev webpack --config webpack/webpack.dev.js",
     "storybook": "start-storybook ... -s ./src",
     "build-storybook": "build-storybook -s ./src",
     "prettier": "npx prettier --write '**/*.{jsx,js,css,html,json}'"
diff --git a/frontend/src/components/Header/MenuModal/index.tsx b/frontend/src/components/Header/MenuModal/index.tsx
index 605aae30..4fc2238d 100644
--- a/frontend/src/components/Header/MenuModal/index.tsx
+++ b/frontend/src/components/Header/MenuModal/index.tsx
@@ -24,6 +24,7 @@ import { useLogin } from '../../../hooks/useLogin';
 import PATH from '../../../constants/path';
 import { Link } from 'react-router-dom';
 const MenuModal = ({ isLogin, isMenuOpen, setIsMenuOpen, nickName, profileImage, job }: MenuModalProps) => {
+  const clientUrl = process.env.CLIENT_URL;
   const [isHovered, setIsHovered] = useState(false);
   const { handleLogOut, handleLoginModal } = useLogin();
 
@@ -80,13 +81,13 @@ const MenuModal = ({ isLogin, isMenuOpen, setIsMenuOpen, nickName, profileImage,
       </MenuHeader>
       <MenuBody>
         <Items>
-          <a href={'https://bootme.co.kr/course/list'}>
+          <a href={`${clientUrl}course/list`}>
             <Item>부트캠프</Item>
           </a>
-          <a href={'https://bootme.co.kr/prompt/generator'}>
+          <a href={`${clientUrl}prompt/generator`}>
             <Item>프롬프트</Item>
           </a>
-          <a href={'https://bootme.co.kr/post/list'}>
+          <a href={`${clientUrl}post/list`}>
             <Item>커뮤니티</Item>
           </a>
         </Items>
diff --git a/frontend/src/components/Header/index.tsx b/frontend/src/components/Header/index.tsx
index 8dc6f4a5..05269be6 100644
--- a/frontend/src/components/Header/index.tsx
+++ b/frontend/src/components/Header/index.tsx
@@ -30,6 +30,7 @@ import NotificationDropdown from './NotificationDropdown';
 import { GoogleLoginOneTap } from '../LoginModal/GoogleLogin';
 
 const Header = () => {
+  const clientUrl = process.env.CLIENT_URL;
   const { isLogin, handleLoginModal } = useLogin();
   const [isMenuOpen, setIsMenuOpen] = useState(false);
   const [profileImage, setProfileImage] = useState(localStorage.getItem('profileImage'));
@@ -61,7 +62,7 @@ const Header = () => {
           <Wrapper>
             <HeaderLeft>
               <Logo>
-                <a href={'https://bootme.co.kr/'} style={{ display: 'flex', flexDirection: 'row' }}>
+                <a href={clientUrl} style={{ display: 'flex', flexDirection: 'row' }}>
                   <div style={{ position: 'relative', top: '6px' }}>
                     <GitHubIcon />
                   </div>
@@ -69,17 +70,17 @@ const Header = () => {
                 </a>
               </Logo>
               <HeaderItemWrapper>
-                <a href={'https://bootme.co.kr/course/list'} style={{ display: 'inline-block' }}>
+                <a href={`${clientUrl}course/list`} style={{ display: 'inline-block' }}>
                   <BootcampHeader currentPath={location.pathname}> 부트캠프 </BootcampHeader>
                 </a>
               </HeaderItemWrapper>
               <HeaderItemWrapper>
-                <a href={'https://bootme.co.kr/prompt/generator'} style={{ display: 'inline-block' }}>
+                <a href={`${clientUrl}prompt/generator`} style={{ display: 'inline-block' }}>
                   <PromptHeader currentPath={location.pathname}> 프롬프트 </PromptHeader>
                 </a>
               </HeaderItemWrapper>
               <HeaderItemWrapper>
-                <a href={'https://bootme.co.kr/post/list'} style={{ display: 'inline-block' }}>
+                <a href={`${clientUrl}post/list`} style={{ display: 'inline-block' }}>
                   <PostHeader currentPath={location.pathname}>커뮤니티 </PostHeader>
                 </a>
               </HeaderItemWrapper>
diff --git a/frontend/webpack/webpack.common.js b/frontend/webpack/webpack.common.js
index 726517c7..f59db983 100644
--- a/frontend/webpack/webpack.common.js
+++ b/frontend/webpack/webpack.common.js
@@ -54,10 +54,16 @@ module.exports = {
     new CleanWebpackPlugin(),
     new webpack.DefinePlugin({
       'process.env.CLIENT_URL': JSON.stringify(
-          process.env.NODE_ENV === 'production' ? 'https://bootme.co.kr/' : 'http://localhost:3000/'
+          process.env.NODE_ENV === 'production' ? 'https://bootme.co.kr/' :
+              process.env.NODE_ENV === 'staging' ? 'https://staging.bootme.co.kr/' :
+                  process.env.NODE_ENV === 'dev' ? 'http://localhost:3000/' :
+                      'http://localhost:3000/'
       ),
       'process.env.SERVER_URL': JSON.stringify(
-          process.env.NODE_ENV === 'production' ? 'https://api.bootme.co.kr/' : 'http://localhost:8080/'
+          process.env.NODE_ENV === 'production' ? 'https://api.bootme.co.kr/' :
+              process.env.NODE_ENV === 'staging' ? 'https://staging.api.bootme.co.kr/' :
+                  process.env.NODE_ENV === 'dev' ? 'http://localhost:8080/' :
+                      'http://localhost:3000/'
       ),
     }),
   ],