Merge pull request #23 from bankidz/feature/component-navigate

feat: topAppBar, TabBar components

.storybook/preview.js

@@ -52,7 +52,7 @@ export const parameters = {
   paddings: {
     values: [
       { name: 'none', value: '0px' },
-      { name: 'default', value: '20px' },
+      { name: 'default', value: '18px' },
     ],
     default: 'none',
   },

package.json

@@ -13,6 +13,7 @@
     "@types/node": "^17.0.36",
     "@types/react": "^18.0.9",
     "@types/react-dom": "^18.0.5",
+    "@types/storybook-react-router": "^1.0.1",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-icons": "^4.3.1",

public/index.html

@@ -4,7 +4,9 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#fafafc" />
+    <!-- + safari -->
+    <meta name="apple-mobile-web-app-status-bar-style" content="#fafafc" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/components/common/Layout.tsx

@@ -1,20 +1,6 @@
-import { Outlet, NavLink } from 'react-router-dom';
+import { Outlet } from 'react-router-dom';
 import styled from 'styled-components';
 import { media } from '../../lib/styles/theme';
-const menus = [
-  {
-    destination: '',
-    text: 'Home',
-  },
-  {
-    destination: 'my',
-    text: 'My',
-  },
-  {
-    destination: 'settings',
-    text: 'Settings',
-  },
-];
 
 function Layout() {
   return (
@@ -29,9 +15,9 @@ const Wrapper = styled.div`
   ${media.mobile} {
     width: 100%;
     min-width: 320px;
+    height: calc(var(--vh, 1vh) * 100);
   }
   width: 576px;
-
-  background-color: ${({ theme }) => theme.palette.lightGray};
   height: 100vh;
+  background-color: ${({ theme }) => theme.palette.lightGray};
 `;

src/components/common/Margin.tsx

@@ -7,6 +7,8 @@ function Margin({ children }: { children: ReactNode }) {
 
 export default Margin;
 
+/* 마진으로 쓰고 패딩 박아버리기 */
 const Wrapper = styled.div`
-  margin: 0px 20px;
+  width: 100%;
+  padding: 0px 18px;
 `;

src/components/common/TabBar.stories.tsx

@@ -0,0 +1,41 @@
+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',
+  component: TabBar,
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="*"
+            element={
+              <div
+                style={{
+                  backgroundColor: '#F7F7F8',
+                  width: '100%',
+                  height: 'calc(var(--vh, 1vh) * 100)',
+                }}
+              >
+                <Story />
+              </div>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    ),
+  ],
+} as ComponentMeta<typeof TabBar>;
+
+const Template: ComponentStory<typeof TabBar> = (args) => <TabBar {...args} />;
+
+export const 자녀 = Template.bind({});
+자녀.args = {
+  isKid: true,
+};

src/components/common/TabBar.tsx

@@ -0,0 +1,62 @@
+import { useState } from 'react';
+import { NavLink } from 'react-router-dom';
+import styled from 'styled-components';
+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';
+
+interface TabBarProps {
+  /**
+   * 부모-자식 여부 (금융콘텐츠-돈길모아보기)
+   */
+  isKid: boolean;
+}
+
+function TabBar({ isKid }: TabBarProps) {
+  // 현재 active된 link (0,1,2) : child 컴포넌트에 active 전달해주기 위해 직접..
+  // 이걸 state로 관리할지, 아니면 navigate할때마다 dispatch해서 스토어에서 관리할지.. 아님 컴포넌트 자체를 전역으로 보여줄지
+  const [activeLink, setActiveLink] = useState(0);
+  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>
+      <NavLink
+        to={isKid ? '/challenge' : '/contents'}
+        onClick={() => setActiveLink(1)}
+      >
+        <Contents fill={activeLink === 1 ? active[1] : active[0]} />
+      </NavLink>
+      <NavLink to="/mypage" onClick={() => setActiveLink(2)}>
+        <Mypage fill={activeLink === 2 ? active[1] : active[0]} />
+      </NavLink>
+    </Wrapper>
+  );
+}
+
+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;
+
+  display: flex;
+  justify-content: space-around;
+
+  a {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+`;

src/components/common/TopAppBar.stories.tsx

@@ -0,0 +1,40 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import TopAppBar from './TopAppBar';
+import { BrowserRouter, Routes, Route } from 'react-router-dom';
+
+export default {
+  title: 'Common/TopAppBar',
+  component: TopAppBar,
+  argTypes: {},
+  decorators: [
+    (Story) => (
+      <BrowserRouter>
+        <Routes>
+          <Route
+            path="*"
+            element={
+              <div
+                style={{
+                  backgroundColor: '#F7F7F8',
+                  width: '100%',
+                  height: 'calc(var(--vh, 1vh) * 100)',
+                }}
+              >
+                <Story />
+              </div>
+            }
+          />
+        </Routes>
+      </BrowserRouter>
+    ),
+  ],
+} as ComponentMeta<typeof TopAppBar>;
+
+const Template: ComponentStory<typeof TopAppBar> = (args) => (
+  <TopAppBar {...args} />
+);
+
+export const 내_정보_수정 = Template.bind({});
+내_정보_수정.args = {
+  previous: '내정보 수정',
+};

src/components/common/TopAppBar.tsx

@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+import styled from 'styled-components';
+import { ReactComponent as Arrow } from '../../assets/icons/arrow-left.svg';
+interface TopAppBarProps {
+  /**
+   * 이전 페이지명
+   */
+  previous: string;
+}
+
+function TopAppBar({ previous }: TopAppBarProps) {
+  const navigate = useNavigate();
+
+  const onClickTopAppBar = () => {
+    navigate(-1);
+  };
+
+  return (
+    <Wrapper onClick={onClickTopAppBar}>
+      <Arrow />
+      <p>{previous}</p>
+    </Wrapper>
+  );
+}
+
+export default TopAppBar;
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 48px;
+  padding: 0px 18px;
+
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+
+  p {
+    font-weight: bold;
+    font-size: 15px;
+    margin-left: 18px;
+  }
+`;

src/index.tsx

@@ -11,6 +11,12 @@ import { theme } from './lib/styles/theme';
 const container = document.getElementById('root')!;
 const root = createRoot(container);
 
+const setScreenSize = () => {
+  let vh = window.innerHeight * 0.01;
+  document.documentElement.style.setProperty('--vh', `${vh}px`);
+};
+setScreenSize();
+
 root.render(
   <React.StrictMode>
     <Provider store={store}>

src/pages/Home/HomeKid.tsx

@@ -1,5 +1,26 @@
+import { useState, useEffect } from 'react';
+
 function HomeKid() {
-  return <>자녀 홈</>;
+  const [height, setHeight] = useState(window.innerHeight);
+
+  const handleResize = () => {
+    setHeight(window.innerHeight);
+  };
+
+  useEffect(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      // cleanup
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
+  return (
+    <>
+      {height}
+      <input type="text" />
+    </>
+  );
 }
 
 export default HomeKid;