Merge pull request #95 from mju-likelion/fix/#93-header-404-rendering…

…-error Fix/#93 header 404 rendering error
mju-likelion · Sep 14, 2023 · c630fe0 · c630fe0
2 parents 40d97c4 + 5be7fef
commit c630fe0
Show file tree

Hide file tree

Showing 7 changed files with 90 additions and 52 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "react-hook-form": "^7.45.3",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "recoil": "^0.7.7",
     "styled-components": "^6.0.5",
     "styled-reset": "^4.5.1",
     "swiper": "^10.1.0",

diff --git a/src/App.js b/src/App.js
@@ -1,5 +1,5 @@
 import Main from './pages/Main/Main';
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
+import { Route, Routes, useLocation } from 'react-router-dom';
 import { ThemeProvider } from 'styled-components';
 import { Theme } from './styles/Theme';
 import GlobalStyle from './styles/GlobalStyle';
@@ -15,24 +15,22 @@ import NotFound from './pages/Error/NotFound';
 
 function App() {
   return (
-      <ThemeProvider theme={Theme}>
-        <GlobalStyle />
-        <BrowserRouter>
-          <Header />
-          <Routes>
-            <Route path='/' element={<Main />} />
-            <Route path='/education' element={<EducationSelect />} />
-            <Route path='/education/basic' element={<Game type='basic' />} />
-            <Route path='/education/advanced' element={<Game type='advanced' />} />
-            <Route path='/join' element={<Join />} />
-            <Route path='/login' element={<Login />} />
-            <Route path='/mypage/education' element={<MyPageEducation />} />
-            <Route path='/mypage/account' element={<MyPageAccount />} />
-            <Route path='/complete' element={<Complete />} />
-            <Route path='/*' element={<NotFound />} />
-          </Routes>
-        </BrowserRouter>
-      </ThemeProvider>
+    <ThemeProvider theme={Theme}>
+      <GlobalStyle />
+      <Header />
+      <Routes>
+        <Route path='/' element={<Main />} />
+        <Route path='/education' element={<EducationSelect />} />
+        <Route path='/education/basic' element={<Game type='basic' />} />
+        <Route path='/education/advanced' element={<Game type='advanced' />} />
+        <Route path='/join' element={<Join />} />
+        <Route path='/login' element={<Login />} />
+        <Route path='/mypage/education' element={<MyPageEducation />} />
+        <Route path='/mypage/account' element={<MyPageAccount />} />
+        <Route path='/complete' element={<Complete />} />
+        <Route path='/*' element={<NotFound />} />
+      </Routes>
+    </ThemeProvider>
   );
 }
 

diff --git a/src/components/Header.js b/src/components/Header.js
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 import { useEffect, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { GetUserInfo } from '../api/Auth/GetUserInfo';
 import { LogoutApi } from '../api/Auth/LogoutApi';
 import Logo from '../assets/images/surfing-logo.png';
@@ -10,14 +10,8 @@ const Header = () => {
   const navigate = useNavigate();
   const [userName, setUserName] = useState('');
   const loginState = JSON.parse(sessionStorage.getItem('loginState'));
-
-  useEffect(() => {
-    if (loginState) {
-      GetUserInfo((res) => {
-        setUserName(res.data.user.nickname);
-      });
-    }
-  }, []);
+  const location = useLocation();
+  const [nowPath, setNowPath] = useState('');
 
   const onClickLogout = (data) => {
     if (confirm('로그아웃 하시겠습니까?')) {
@@ -36,26 +30,52 @@ const Header = () => {
     },
   };
 
+  useEffect(() => {
+    if (loginState) {
+      GetUserInfo((res) => {
+        setUserName(res.data.user.nickname);
+      });
+    }
+  }, []);
+
+  useEffect(() => {
+    setNowPath(location.pathname);
+    console.log(nowPath);
+  }, [location]);
+
   return (
-    <HeaderBar>
-      <LogoIcon src={Logo} onClick={() => navigate('/')} />
-      <Learning onClick={() => navigate('/education')}>학습하기</Learning>
-      {loginState ? (
-        <SignBox>
-          <UserPageBtn onClick={() => navigate('/mypage/education')}>
-            {userName} 님 환영합니다!
-          </UserPageBtn>
-          <LogoutBtn onClick={onClickLogout}>
-            <img src={LogoutIcon} alt='logout-icon' />
-          </LogoutBtn>
-        </SignBox>
-      ) : (
-        <SignBox>
-          <SignBtn onClick={() => navigate('/login')}>로그인</SignBtn>
-          <SignUpBtn onClick={() => navigate('/join')}>회원가입</SignUpBtn>
-        </SignBox>
-      )}
-    </HeaderBar>
+    <>
+      {nowPath === '/' ||
+      nowPath === '/education' ||
+      nowPath === '/mypage' ||
+      nowPath === '/education/basic' ||
+      nowPath === '/education/advanced' ||
+      nowPath === '/join' ||
+      nowPath === '/login' ||
+      nowPath === '/mypage/education' ||
+      nowPath === '/mypage/account' ||
+      nowPath === '/complete' ? (
+        <HeaderBar>
+          <LogoIcon src={Logo} onClick={() => navigate('/')} />
+          <Learning onClick={() => navigate('/education')}>학습하기</Learning>
+          {loginState ? (
+            <SignBox>
+              <UserPageBtn onClick={() => navigate('/mypage/education')}>
+                {userName} 님 환영합니다!
+              </UserPageBtn>
+              <LogoutBtn onClick={onClickLogout}>
+                <img src={LogoutIcon} alt='logout-icon' />
+              </LogoutBtn>
+            </SignBox>
+          ) : (
+            <SignBox>
+              <SignBtn onClick={() => navigate('/login')}>로그인</SignBtn>
+              <SignUpBtn onClick={() => navigate('/join')}>회원가입</SignUpBtn>
+            </SignBox>
+          )}
+        </HeaderBar>
+      ) : null}
+    </>
   );
 };
 

diff --git a/src/index.js b/src/index.js
@@ -3,8 +3,16 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { RecoilRoot } from 'recoil';
+import { BrowserRouter } from 'react-router-dom';
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(<App />);
+root.render(
+  <RecoilRoot>
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </RecoilRoot>
+);
 
 reportWebVitals();
diff --git a/src/pages/Error/NotFound.js b/src/pages/Error/NotFound.js
@@ -12,7 +12,7 @@ const BackgroundImg = styled.div`
   background-size: cover;
   background-position: center;
   position: absolute;
-  width: 100%;
-  height: 730px;
+  width: 1280px;
+  height: 832px;
   overflow: auto;
 `;
diff --git a/src/pages/Main/Main.js b/src/pages/Main/Main.js
@@ -1,13 +1,12 @@
 import styled from 'styled-components';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import MainBanner from '../../components/Main/MainBanner';
 import EduIcon from '../../assets/images/icon_edu.png';
 import MyPage from '../../assets/images/icon_mypage.png';
 
 const Main = () => {
   const navigate = useNavigate();
   const loginState = JSON.parse(sessionStorage.getItem('loginState'));
-
   const onClickMypage = () => {
     if (!loginState) {
       alert('로그인이 필요합니다.');

diff --git a/yarn.lock b/yarn.lock
@@ -5060,6 +5060,11 @@ gzip-size@^6.0.0:
   dependencies:
     duplexer "^0.1.2"
 
+[email protected]:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/hamt_plus/-/hamt_plus-1.0.2.tgz#e21c252968c7e33b20f6a1b094cd85787a265601"
+  integrity sha512-t2JXKaehnMb9paaYA7J0BX8QQAY8lwfQ9Gjf4pg/mk4krt+cmwmU652HOoWonf+7+EQV97ARPMhhVgU1ra2GhA==
+
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -8043,6 +8048,13 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recoil@^0.7.7:
+  version "0.7.7"
+  resolved "https://registry.yarnpkg.com/recoil/-/recoil-0.7.7.tgz#c5f2c843224384c9c09e4a62c060fb4c1454dc8e"
+  integrity sha512-8Og5KPQW9LwC577Vc7Ug2P0vQshkv1y3zG3tSSkWMqkWSwHmE+by06L8JtnGocjW6gcCvfwB3YtrJG6/tWivNQ==
+  dependencies:
+    hamt_plus "1.0.2"
+
 recursive-readdir@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"