[#46] fix - 메인페이지, 카테고리페이지에서 navigation을 공유하여 스타일이 초기화 안되는 문제 해결

siliconValleyTeamA · Jan 12, 2021 · 627cd7a · 627cd7a
1 parent 78375e2
commit 627cd7a
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 22 deletions.
diff --git a/src/App.js b/src/App.js
@@ -25,8 +25,8 @@ function App() {
       <MainLayout>
         <Switch>
           <Route path="/" exact component={CategoryPage} />
-          <Route path="/category/:category" exact component={CategoryPage} />
-          <Route path="/popular" exact component={PopularPage} />
+          <Route path="/category/:categoryid" component={CategoryPage} />
+          <Route path="/popular" component={PopularPage} />
           <Route path="/detail" component={DetailPage} />
           <Route path="/mypage" exact component={MyPage} />
           <Route path="/mypage/history" component={MyHistoryPage} />

diff --git a/src/components/global/NavigationBar/NavigationBar.js b/src/components/global/NavigationBar/NavigationBar.js
@@ -8,35 +8,41 @@ import styles from './NavigationBar.module.scss';
 
 const cx = classNames.bind(styles);
 
-const changeStyle = name => {
+const addStyle = name => {
   name.current.style.backgroundColor = '#00c4c4';
   name.current.style.color = 'white';
 };
 
+const initStyle = name => {
+  name.current.style.backgroundColor = 'white';
+  name.current.style.color = '#00c4c4';
+};
+
 function NavigationBar() {
   const location = useLocation();
-  const homeRef = useRef(1);
-  const categoryRef = useRef(2);
-  const popularPundingRef = useRef(3);
-  const mypageRef = useRef(4);
-  const styled = {
-    background: 'white',
-    color: '#00c4c4',
-  };
+  const homeRef = useRef();
+  const categoryRef = useRef();
+  const popularRef = useRef();
+  const mypageRef = useRef();
 
   const nav = [
     { id: '1', name: '홈', link: '/', ref: homeRef },
-    { id: '2', name: '카테고리', link: '/', ref: categoryRef },
-    { id: '3', name: '인기펀딩', link: '/', ref: popularPundingRef },
+    { id: '2', name: '카테고리', link: '/category/all', ref: categoryRef },
+    { id: '3', name: '인기펀딩', link: '/popular', ref: popularRef },
     { id: '4', name: '마이페이지', link: '/mypage', ref: mypageRef },
   ];
 
   useEffect(() => {
     const link = location.pathname;
+    nav.forEach(menu => initStyle(menu.ref));
     if (link === '/') {
-      changeStyle(homeRef);
+      addStyle(homeRef);
+    } else if (link === '/category/all') {
+      addStyle(categoryRef);
+    } else if (link === '/popular') {
+      addStyle(popularRef);
     } else if (link === '/mypage') {
-      changeStyle(mypageRef);
+      addStyle(mypageRef);
     }
   });
 
@@ -45,13 +51,7 @@ function NavigationBar() {
       <ul className={cx('navigation_bar')}>
         {nav.map(menu => (
           <Link to={menu.link} key={menu.id}>
-            <li
-              ref={menu.ref}
-              key={menu.id}
-              id={menu.id}
-              className={cx('nav')}
-              style={styled}
-            >
+            <li ref={menu.ref} key={menu.id} id={menu.id} className={cx('nav')}>
               {menu.name}
             </li>
           </Link>

diff --git a/src/pages/PopularPage/PopularPage.js b/src/pages/PopularPage/PopularPage.js
@@ -6,12 +6,14 @@ import classNames from 'classnames/bind';
 import styles from './PopularPage.module.scss';
 import GoodsList from 'components/CategoryPage/GoodsList';
 import Banner from 'components/PopularPage/Banner';
+import NavigationBar from 'components/Global/NavigationBar';
 
 const cx = classNames.bind(styles);
 
 function PopularPage() {
   return (
     <div className={cx('popular-page')}>
+      <NavigationBar />
       <Banner className={cx('banner')} />
       <GoodsList popular />
     </div>