feat: 전체 페이지 네비게이트 세팅 #30

src/App.tsx

@@ -1,12 +1,15 @@
 import { Route, Routes } from 'react-router-dom';
-import Layout from './components/common/Layout';
+import Layout from './components/layout/Layout';
 import NotFound from './pages/Common/NotFound';
 import Introduce from './pages/Common/Introduce';
 import ChallengeRouter from './pages/Challenge';
 import ContentsRouter from './pages/Contents';
 import HomeRouter from './pages/Home';
 import MypageRouter from './pages/Mypage';
 import TestPage from './pages/TestPage';
+import { useAppSelector } from './store/app/hooks';
+import { selectIsKid } from './store/slices/authSlice';
+import Init from './pages/OnBoarding/Init';
 
 /* 부모자식 여부를 아래로 내려주는 props에 대한 타입인데, 네이밍 고민.
 각각 하위 컴포넌트에서 중복으로 만들어서 쓰는게 나으려나요 */
@@ -15,16 +18,22 @@ export type AppProps = {
 };
 
 function App() {
-  const isKid: boolean = true;
+  const isKid = useAppSelector(selectIsKid);
   return (
     <Routes>
       <Route element={<Layout />}>
-        <Route path="/*" element={<HomeRouter isKid={isKid} />} />
-
-        <Route path="/challenge/*" element={<ChallengeRouter />} />
-        <Route path="/contents/*" element={<ContentsRouter />} />
-
-        <Route path="/mypage/*" element={<MypageRouter isKid={isKid} />} />
+        {isKid == null ? (
+          /* 임시!!! 회원가입 완료 안되어있으면 무조건 init 페이지로.
+          일단 이렇게 해놨고 나중에 hoc로 변경 예정 */
+          <Route path="/*" element={<Init />} />
+        ) : (
+          <>
+            <Route path="/*" element={<HomeRouter isKid={isKid} />} />
+            <Route path="/challenge/*" element={<ChallengeRouter />} />
+            <Route path="/contents/*" element={<ContentsRouter />} />
+            <Route path="/mypage/*" element={<MypageRouter isKid={isKid} />} />
+          </>
+        )}
 
         <Route path="*" element={<NotFound />} />
       </Route>

src/components/common/TabBar.stories.tsx

@@ -1,8 +1,6 @@
 import { ComponentStory, ComponentMeta } from '@storybook/react';
 import TabBar from './TabBar';
 import { BrowserRouter, Routes, Route } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
-import StoryRouter from 'storybook-react-router';
 
 export default {
   title: 'Common/TabBar',
@@ -20,9 +18,7 @@ export default {
   ],
 } as ComponentMeta<typeof TabBar>;
 
-const Template: ComponentStory<typeof TabBar> = (args) => <TabBar {...args} />;
+const Template: ComponentStory<typeof TabBar> = (args) => <TabBar />;
 
 export const 자녀 = Template.bind({});
-자녀.args = {
-  isKid: true,
-};
+자녀.args = {};

src/components/common/TabBar.tsx

@@ -1,37 +1,36 @@
 import { useState } from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import styled from 'styled-components';
+import { media } from '../../lib/styles/theme';
 import { ReactComponent as Home } from '../../assets/icons/home.svg';
 import { ReactComponent as Contents } from '../../assets/icons/contents.svg';
 import { ReactComponent as Mypage } from '../../assets/icons/mypage.svg';
 import { theme } from '../../lib/styles/theme';
+import { useAppSelector } from '../../store/app/hooks';
+import { selectIsKid } from '../../store/slices/authSlice';
 
-interface TabBarProps {
-  /**
-   * 부모-자식 여부 (금융콘텐츠<->돈길모아보기)
-   */
-  isKid: boolean;
-}
-
-function TabBar({ isKid }: TabBarProps) {
-  // 현재 active된 link (0,1,2) : child 컴포넌트에 active 전달해주기 위해 직접..
-  // 이걸 state로 관리할지, 아니면 navigate할때마다 dispatch해서 스토어에서 관리할지.. 아님 컴포넌트 자체를 전역으로 보여줄지
-  const [activeLink, setActiveLink] = useState(0);
+function TabBar() {
+  const isKid = useAppSelector(selectIsKid);
+  const { pathname } = useLocation();
+  console.log(pathname);
   const active = [theme.palette.gray[3], theme.palette.yellow[0]];
 
   return (
     <Wrapper>
-      <NavLink to="/" onClick={() => setActiveLink(0)}>
-        <Home stroke={activeLink === 0 ? active[1] : active[0]} />
+      <NavLink to="/">
+        <Home stroke={pathname === '/' ? active[1] : active[0]} />
       </NavLink>
-      <NavLink
-        to={isKid ? '/challenge' : '/contents'}
-        onClick={() => setActiveLink(1)}
-      >
-        <Contents fill={activeLink === 1 ? active[1] : active[0]} />
+      <NavLink to={isKid ? '/challenge' : '/contents'}>
+        <Contents
+          fill={
+            pathname === '/challenge' || pathname === '/contents'
+              ? active[1]
+              : active[0]
+          }
+        />
       </NavLink>
-      <NavLink to="/mypage" onClick={() => setActiveLink(2)}>
-        <Mypage fill={activeLink === 2 ? active[1] : active[0]} />
+      <NavLink to="/mypage">
+        <Mypage fill={pathname === '/mypage' ? active[1] : active[0]} />
       </NavLink>
     </Wrapper>
   );
@@ -40,20 +39,27 @@ function TabBar({ isKid }: TabBarProps) {
 export default TabBar;
 
 const Wrapper = styled.div`
-  width: calc(100% + 2px);
-  height: 48px;
-  background-color: ${({ theme }) => theme.palette.white};
-  border-radius: 12px 12px 0px 0px;
-
   /* 테두리 위에만 */
   border: 1px solid ${({ theme }) => theme.palette.gray[1]};
   position: fixed;
   bottom: -1px;
-  left: -1px;
+  height: 48px;
+
+  background-color: ${({ theme }) => theme.palette.white};
+  border-radius: 12px 12px 0px 0px;
 
   display: flex;
   justify-content: space-around;
 
+  /* 웹 테스트 화면 */
+  width: 576px;
+
+  /* 모바일 화면 */
+  ${media.mobile} {
+    width: calc(100% + 2px);
+    left: -1px;
+  }
+
   a {
     display: flex;
     justify-content: center;

src/components/common/TopAppBar.stories.tsx

@@ -23,5 +23,5 @@ const Template: ComponentStory<typeof TopAppBar> = (args) => (
 
 export const 내_정보_수정 = Template.bind({});
 내_정보_수정.args = {
-  previous: '내정보 수정',
+  label: '내정보 수정',
 };

src/components/common/TopAppBar.tsx

@@ -5,10 +5,10 @@ interface TopAppBarProps {
   /**
    * 이전 페이지명
    */
-  previous: string;
+  label: string;
 }
 
-function TopAppBar({ previous }: TopAppBarProps) {
+function TopAppBar({ label }: TopAppBarProps) {
   const navigate = useNavigate();
 
   const onClickTopAppBar = () => {
@@ -18,7 +18,7 @@ function TopAppBar({ previous }: TopAppBarProps) {
   return (
     <Wrapper onClick={onClickTopAppBar}>
       <Arrow />
-      <p>{previous}</p>
+      <p>{label}</p>
     </Wrapper>
   );
 }

src/components/layout/Base.tsx

@@ -0,0 +1,16 @@
+import TabBar from '../common/TabBar';
+
+interface BaseProps {
+  children: JSX.Element;
+}
+
+function Base({ children }: BaseProps) {
+  return (
+    <>
+      {children}
+      <TabBar />
+    </>
+  );
+}
+
+export default Base;

src/components/layout/Stacked.tsx

@@ -0,0 +1,17 @@
+import TopAppBar from '../common/TopAppBar';
+
+interface StackedProps {
+  children: JSX.Element;
+  label: string;
+}
+
+function Stacked({ children, label }: StackedProps) {
+  return (
+    <>
+      <TopAppBar label={label} />
+      {children}
+    </>
+  );
+}
+
+export default Stacked;

src/pages/Challenge/index.tsx

@@ -1,14 +1,28 @@
 import { Route, Routes } from 'react-router-dom';
+import Base from '../../components/layout/Base';
+import Stacked from '../../components/layout/Stacked';
 import Challenge from './Challenge';
 import ChallengeDelete from './ChallengeDelete';
-import ChallengeStart from './ChallengStart';
 
 function ChallengeRouter() {
   return (
     <Routes>
-      <Route path="/" element={<Challenge />} />
-      <Route path="/start" element={<ChallengeStart />} />
-      <Route path="/delete/:chellengeId" element={<ChallengeDelete />} />
+      <Route
+        path="/"
+        element={
+          <Base>
+            <Challenge />
+          </Base>
+        }
+      />
+      {/* <Route
+        path="/delete/:challengeId"
+        element={
+          <Stacked label="">
+            <ChallengeDelete />
+          </Stacked>
+        }
+      /> */}
     </Routes>
   );
 }

src/pages/Contents/Contents.tsx

@@ -1,5 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+
 function Contents() {
-  return <>부모-금융콘텐츠 홈</>;
+  const navigate = useNavigate();
+  return (
+    <>
+      부모-금융콘텐츠 홈
+      <button
+        onClick={() => {
+          navigate('edu');
+        }}
+      >
+        금융 교육 전체보기
+      </button>
+      <button
+        onClick={() => {
+          navigate('edu/1');
+        }}
+      >
+        금융 교육 article 1
+      </button>
+      <button
+        onClick={() => {
+          navigate('life');
+        }}
+      >
+        금융 생활 전체보기
+      </button>
+      <button
+        onClick={() => {
+          navigate('life/2');
+        }}
+      >
+        금융 생활 article 2
+      </button>
+    </>
+  );
 }
 
 export default Contents;
+
+//https://stackoverflow.com/questions/70671988/difference-in-the-navigation-react-router-v6

src/pages/Contents/Edu.tsx

@@ -1,4 +1,12 @@
+import { useNavigate } from 'react-router-dom';
+
 function Edu() {
-  return <>부모-금융 교육</>;
+  const navigate = useNavigate();
+  return (
+    <>
+      부모-금융 교육 전체보기
+      <button onClick={() => navigate('1')}>금융 교육 article 1</button>
+    </>
+  );
 }
 export default Edu;

src/pages/Contents/Life.tsx

@@ -1,4 +1,12 @@
+import { useNavigate } from 'react-router-dom';
+
 function Life() {
-  return <>부모-금융 생활</>;
+  const navigate = useNavigate();
+  return (
+    <>
+      부모-금융 생활 전체보기
+      <button onClick={() => navigate('2')}>금융 생활 article 2</button>
+    </>
+  );
 }
 export default Life;