[FE] 실행 환경에 따라 헤더 항목 URL 구분되도록 구현

Jinwook94 · Oct 18, 2023 · 89c0028 · 89c0028
1 parent f32d66d
commit 89c0028
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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,25 +62,25 @@ 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>
                   <ServiceName>BootMe</ServiceName>
                 </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
@@ -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/'
       ),
     }),
   ],