Merge Mara-20 into main (#5)

* feat: Icon component 생성 & Bottom Navigation icon 추가 * feat: Layout, BottomNavigation component 생성 * feat: Header component 생성 * feat: Main Page 생성, default path home으로 redirect * fix: eslint setting 수정 * style: Layout, Header component style 수정 * fix: page file directory 생성, home page 적용
DDD-Community · Jan 17, 2024 · 5afc277 · 5afc277
1 parent bf9e5df
commit 5afc277
Show file tree

Hide file tree

Showing 17 changed files with 647 additions and 92 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,11 +3,21 @@ module.exports = {
     browser: true,
     es2021: true,
   },
-  extends: ['standard-with-typescript', 'prettier'],
+  globals: {
+    'JSX': true
+  },
+  extends: [
+    'standard-with-typescript',
+    'eslint:recommended',
+    'plugin:prettier/recommended',
+  ],
   parserOptions: {
     ecmaVersion: 'latest',
     sourceType: 'module',
   },
   ignorePatterns: ['/src/assets/**', '/src/styles/**'],
-  rules: {},
+  rules: {
+    '@typescript-eslint/strict-boolean-expressions': 'off',
+    'prettier/prettier': ["error", { "endOfLine": "auto" }]
+  },
 };
diff --git a/next.config.js b/next.config.js
@@ -16,6 +16,15 @@ const nextConfig = {
       },
     };
   },
+  async redirects() {
+    return [
+      {
+        source: '/',
+        destination: '/home',
+        permanent: true,
+      }
+    ]
+  }
 };
 
 module.exports = nextConfig;
diff --git a/package.json b/package.json
@@ -21,8 +21,10 @@
   "dependencies": {
     "@commitlint/cli": "^18.4.3",
     "@commitlint/config-conventional": "^18.4.3",
+    "@typescript-eslint/parser": "^6.19.0",
     "axios": "^1.6.5",
     "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-react": "^7.33.2",
     "next": "14.0.3",
     "react": "^18",
     "react-dom": "^18",
@@ -41,16 +43,18 @@
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
-    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.0",
     "autoprefixer": "^10.0.1",
-    "eslint": "^8.0.1",
+    "eslint": "^8.56.0",
     "eslint-config-standard-with-typescript": "^40.0.0",
     "eslint-plugin-import": "^2.25.2",
     "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "postcss": "^8",
+    "prettier": "^3.2.4",
     "storybook": "7.6.3",
     "tailwindcss": "^3.3.0",
     "typescript": "*"

diff --git a/src/components/atoms/Icon.tsx b/src/components/atoms/Icon.tsx
@@ -0,0 +1,111 @@
+import React from 'react';
+
+export const Home: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M1.50781 6.89464C1.08393 7.20902 0.833984 7.70557 0.833984 8.23331V17.7553C0.833984 18.6758 1.58018 19.422 2.50065 19.422H5.58382C6.5043 19.422 7.25049 18.6758 7.25049 17.7553V14.8551C7.25049 13.3363 8.48171 12.1051 10.0005 12.1051C11.5193 12.1051 12.7505 13.3363 12.7505 14.8551V17.7553C12.7505 18.6758 13.4967 19.422 14.4172 19.422H17.5007C18.4211 19.422 19.1673 18.6758 19.1673 17.7553V8.23331C19.1673 7.70557 18.9174 7.20901 18.4935 6.89464L10.9935 1.33215C10.4038 0.894818 9.59746 0.894818 9.00781 1.33215L1.50781 6.89464Z"
+      fill="current"
+    />
+  </svg>
+);
+
+export const Fridge: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <g clip-path="url(#clip0_213_3007)">
+      <rect
+        x="0.833656"
+        y="0.83316"
+        width="8.33333"
+        height="8.33333"
+        rx="1.66667"
+        fill="current"
+      />
+      <rect
+        x="0.833656"
+        y="10.8332"
+        width="8.33333"
+        height="8.33333"
+        rx="1.66667"
+        fill="current"
+      />
+      <rect
+        x="10.8337"
+        y="0.83316"
+        width="8.33333"
+        height="8.33333"
+        rx="1.66667"
+        fill="current"
+      />
+      <rect
+        x="10.8337"
+        y="10.8332"
+        width="8.33333"
+        height="8.33333"
+        rx="1.66667"
+        fill="current"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_213_3007">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export const Share: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M6.88736 1.08816C7.29901 1.29398 7.46586 1.79455 7.26003 2.20619L5.70378 5.31871H14.2956L12.7393 2.20619C12.5335 1.79455 12.7003 1.29398 13.112 1.08816C13.5236 0.882336 14.0242 1.04919 14.23 1.46084L16.159 5.31871H18.7493C19.2096 5.31871 19.5827 5.6918 19.5827 6.15204V7.97022C19.5827 8.43046 19.2096 8.80355 18.7493 8.80355H17.3748L16.7744 17.4489C16.7137 18.3225 15.9874 19.0001 15.1117 19.0001H4.88827C4.01261 19.0001 3.28627 18.3225 3.22561 17.4489L2.62524 8.80355H1.24935C0.789111 8.80355 0.416016 8.43046 0.416016 7.97022V6.15204C0.416016 5.6918 0.789112 5.31871 1.24935 5.31871H3.84039L5.76932 1.46084C5.97515 1.04919 6.47571 0.882336 6.88736 1.08816ZM5.64262 10.8713C5.64262 10.3902 6.03268 10.0001 6.51383 10.0001C6.99499 10.0001 7.38505 10.3902 7.38505 10.8713V14.3562C7.38505 14.8373 6.99499 15.2274 6.51383 15.2274C6.03268 15.2274 5.64262 14.8373 5.64262 14.3562V10.8713ZM9.9987 10.0001C9.51754 10.0001 9.12749 10.3902 9.12749 10.8713V14.3562C9.12749 14.8373 9.51754 15.2274 9.9987 15.2274C10.4799 15.2274 10.8699 14.8373 10.8699 14.3562V10.8713C10.8699 10.3902 10.4799 10.0001 9.9987 10.0001ZM12.6123 10.8713C12.6123 10.3902 13.0024 10.0001 13.4836 10.0001C13.9647 10.0001 14.3548 10.3902 14.3548 10.8713V14.3562C14.3548 14.8373 13.9647 15.2274 13.4836 15.2274C13.0024 15.2274 12.6123 14.8373 12.6123 14.3562V10.8713Z"
+      fill="current"
+    />
+  </svg>
+);
+export const Mypage: React.FC<React.SVGProps<SVGSVGElement>> = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    {...props}
+  >
+    <g clip-path="url(#clip0_213_3003)">
+      <path
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M20 10C20 15.5228 15.5228 20 10 20C4.47715 20 0 15.5228 0 10C0 4.47715 4.47715 0 10 0C15.5228 0 20 4.47715 20 10ZM12.779 7.22079C12.779 8.7557 11.5347 10 9.99976 10C8.46484 10 7.22054 8.7557 7.22054 7.22079C7.22054 5.68587 8.46484 4.44157 9.99976 4.44157C11.5347 4.44157 12.779 5.68587 12.779 7.22079ZM5.44153 14.7291C5.83238 12.5666 7.7244 10.9264 9.99954 10.9264C12.2747 10.9264 14.1667 12.5666 14.5575 14.7291C14.6394 15.182 14.2585 15.5584 13.7982 15.5584H6.20085C5.74061 15.5584 5.35967 15.182 5.44153 14.7291Z"
+        fill="current"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_213_3003">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
diff --git a/src/components/organisms/BottomNavigation.tsx b/src/components/organisms/BottomNavigation.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import { Fridge, Home, Mypage, Share } from '../atoms/Icon';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+
+const BOTTOM_TABS = [
+  {
+    label: '홈',
+    icon: Home,
+    href: '/home',
+  },
+  {
+    label: '내냉장고',
+    icon: Fridge,
+    href: '/fridge',
+  },
+  {
+    label: '나눔',
+    icon: Share,
+    href: '/share',
+  },
+  {
+    label: 'My',
+    icon: Mypage,
+    href: '/mypage',
+  },
+];
+
+const BottomNavigation: React.FC = () => {
+  const pathname = usePathname();
+  return (
+    <div className="min-h-[72px]">
+      <div className="flex fixed h-[72px] justify-between px-[27px]  bottom-0 w-full bg-white z-30 max-w-[480px] ">
+        {BOTTOM_TABS.map((ele) => (
+          <Link
+            key={ele.label}
+            href={ele.href}
+            className="w-[80px] text-center justify-center pt-[12px] pb-[24px]"
+          >
+            <div className="flex justify-center">
+              <ele.icon fill={pathname === ele.href ? '#0C5E5A' : '#CCCFD7'} />
+            </div>
+            <p
+              className={`mt-[4px] body2-semibold ${pathname === ele.href ? 'text-primary3' : 'text-gray3'}`}
+            >
+              {ele.label}
+            </p>
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default BottomNavigation;
diff --git a/src/components/organisms/Header.tsx b/src/components/organisms/Header.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+
+const Header: React.FC<{
+  headerLeft?: React.ReactElement<
+    any,
+    string | React.JSXElementConstructor<any>
+  >;
+  headerTitle?: string;
+  headerRight?: React.ReactElement<
+    any,
+    string | React.JSXElementConstructor<any>
+  >;
+  transparent?: boolean;
+}> = ({ headerLeft, headerTitle, headerRight, transparent = false }) => {
+  return (
+    <div
+      className={`flex justify-center items-center fixed top-0 w-screen max-w-[480px] py-[12px] px-[20px] z-[1000]  ${transparent ? '' : 'bg-gray1'}`}
+    >
+      {headerLeft ?? (
+        <div
+          onClick={() => {
+            window.history.back();
+          }}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            fill="none"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M14.6446 1.41789C15.0351 1.80842 15.0351 2.44158 14.6446 2.83211L7.47671 10L14.6446 17.1679C15.0351 17.5584 15.0351 18.1916 14.6446 18.5821C14.2541 18.9726 13.6209 18.9726 13.2304 18.5821L4.64828 10L13.2304 1.41789C13.6209 1.02737 14.2541 1.02737 14.6446 1.41789Z"
+              fill={transparent ? '#FFFFFF' : '#363A45'}
+            />
+          </svg>
+        </div>
+      )}
+      <div className="flex justify-center text-center w-full">
+        <p className="heading3-bold text-gray8 pt-1">
+          {typeof headerTitle === 'string' ? headerTitle : ''}
+        </p>
+      </div>
+      {headerRight ?? <div className="w-7" />}
+    </div>
+  );
+};
+
+export default Header;
diff --git a/src/components/templates/Layout.tsx b/src/components/templates/Layout.tsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import BottomNavigation from '../organisms/BottomNavigation';
+import { usePathname } from 'next/navigation';
+
+const MAIN_PAGE_PATHS = ['/home', '/fridge', '/share', '/mypage'];
+
+const Layout: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const pathname = usePathname();
+
+  return (
+    <div className="flex justify-center items-center bg-white">
+      <div className="flex-col w-[100vw] max-w-[480px] min-h-[100vh] bg-gray1 ">
+        {children}
+        {MAIN_PAGE_PATHS.includes(pathname) ? <BottomNavigation /> : null}
+      </div>
+    </div>
+  );
+};
+
+export default Layout;
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -1,11 +1,14 @@
+import Layout from '@/components/templates/Layout';
 import '@/styles/globals.css';
 import type { AppProps } from 'next/app';
 import { RecoilRoot } from 'recoil';
 
 export default function App({ Component, pageProps }: AppProps): JSX.Element {
   return (
     <RecoilRoot>
-      <Component {...pageProps} />
+      <Layout>
+        <Component {...pageProps} />
+      </Layout>
     </RecoilRoot>
   );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
@@ -1,6 +1,6 @@
-import { Html, Head, Main, NextScript } from 'next/document'
+import { Html, Head, Main, NextScript } from 'next/document';
 
-export default function Document (): JSX.Element {
+export default function Document(): JSX.Element {
   return (
     <Html lang="en">
       <Head />
@@ -9,5 +9,5 @@ export default function Document (): JSX.Element {
         <NextScript />
       </body>
     </Html>
-  )
+  );
 }
diff --git a/src/pages/fridge/index.tsx b/src/pages/fridge/index.tsx
@@ -0,0 +1,12 @@
+import Header from '@/components/organisms/Header';
+import { type NextPage } from 'next';
+
+const FridgePage: NextPage = () => {
+  return (
+    <div className={'pt-[52px] min-h-screen'}>
+      <Header headerTitle={'내 냉장고'} />
+      <p>fridge page</p>
+    </div>
+  );
+};
+export default FridgePage;