Merge pull request #27 from SOPT-all/feat/#25/navCommonComponent

[Feat] 하단 Nav 컴포넌트 구현

src/asset/svg/IcShape.tsx

@@ -0,0 +1,10 @@
+import type { SVGProps } from "react";
+const SvgIcShape = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" width={32} height={32} fill="none" {...props}>
+    <title>SvgIcShape</title>
+    <g fill="#171719">
+      <path d="M12.46 4.334a1.2 1.2 0 0 1 1.2-1.2h4.662a1.2 1.2 0 1 1 0 2.4H13.66a1.2 1.2 0 0 1-1.2-1.2M10.196 4.314A1.2 1.2 0 0 1 9.032 5.55c-1.142.035-1.618.125-1.957.3l-.012.006a2.84 2.84 0 0 0-1.233 1.24c-.173.34-.263.816-.298 1.954a1.2 1.2 0 1 1-2.399-.072c.035-1.138.117-2.113.564-2.983l.004-.007a5.24 5.24 0 0 1 2.283-2.276c.868-.444 1.841-.526 2.976-.56a1.2 1.2 0 0 1 1.235 1.162M21.786 4.314a1.2 1.2 0 0 1 1.236-1.163c1.135.035 2.108.117 2.976.561a5.24 5.24 0 0 1 2.282 2.276l.004.007c.448.87.53 1.845.564 2.983a1.2 1.2 0 0 1-2.399.072c-.034-1.138-.124-1.615-.297-1.954a2.84 2.84 0 0 0-1.233-1.24l-.012-.006c-.34-.175-.815-.265-1.958-.3a1.2 1.2 0 0 1-1.163-1.236M4.333 12.46a1.2 1.2 0 0 1 1.2 1.2v4.663a1.2 1.2 0 0 1-2.4 0V13.66a1.2 1.2 0 0 1 1.2-1.2M27.649 12.46a1.2 1.2 0 0 1 1.2 1.2v4.663a1.2 1.2 0 1 1-2.4 0V13.66a1.2 1.2 0 0 1 1.2-1.2M27.703 21.787a1.2 1.2 0 0 1 1.163 1.236c-.035 1.137-.117 2.112-.564 2.982l-.004.007a5.24 5.24 0 0 1-2.283 2.276c-.868.445-1.841.527-2.976.561a1.2 1.2 0 1 1-.072-2.399c1.142-.034 1.618-.125 1.957-.3l.012-.006a2.84 2.84 0 0 0 1.233-1.24c.173-.339.263-.815.298-1.954a1.2 1.2 0 0 1 1.236-1.163M4.296 21.804a1.2 1.2 0 0 1 1.236 1.163c.035 1.143.125 1.619.3 1.958l.006.012c.257.514.687.942 1.24 1.233.34.173.816.263 1.954.297a1.2 1.2 0 0 1-.072 2.4c-1.138-.035-2.113-.117-2.983-.565L5.97 28.3a5.24 5.24 0 0 1-2.276-2.283c-.444-.868-.526-1.841-.56-2.976a1.2 1.2 0 0 1 1.162-1.236M12.46 27.65a1.2 1.2 0 0 1 1.2-1.2h4.662a1.2 1.2 0 1 1 0 2.4H13.66a1.2 1.2 0 0 1-1.2-1.2" />
+    </g>
+  </svg>
+);
+export default SvgIcShape;

src/asset/svg/index.ts

@@ -1,3 +1,4 @@
+export { default as IcShape } from "./IcShape";
 export { default as IcDelete } from "./IcDelete";
 export { default as IcTest } from "./IcTest";
 export { default as IcoMessage } from "./IcoMessage";

src/common/component/Nav/Nav.css.ts

@@ -0,0 +1,37 @@
+import { recipe } from "@vanilla-extract/recipes";
+import { font, color } from "@style/styles.css.ts";
+import { style } from "@vanilla-extract/css";
+
+export const container = style([
+  font.label01,
+  {
+    display: "flex",
+    justifyContent: "space-between",
+    width: "37.5rem",
+    height: "8rem",
+    padding: "1.2rem 3.2rem 0 3.2rem",
+  },
+]);
+
+export const navItem = recipe({
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    justifyContent: "center",
+    alignItems: "center",
+    padding: "0 1.2rem",
+  },
+  variants: {
+    state: {
+      true: {
+        color: color.gray.gray900,
+      },
+      false: {
+        color: color.gray.gray500,
+      },
+    },
+  },
+  defaultVariants: {
+    state: false,
+  },
+});

src/common/component/Nav/Nav.tsx

@@ -0,0 +1,52 @@
+import { useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+import * as styles from "./Nav.css";
+import { NAV_CONTENT } from "./constant";
+
+const Nav = () => {
+  const location = useLocation();
+
+  const extractFirstPath = (): string => {
+    const pathName = location.pathname;
+    const parts = pathName.split("/");
+    const basePath = `/${parts[1]}`;
+
+    return basePath;
+  };
+
+  const [activeItem, setActiveItem] = useState<string>(extractFirstPath());
+  const navigate = useNavigate();
+
+  const handleClick = (itemId: string, path: string) => {
+    setActiveItem(itemId);
+    if (itemId !== "/review") {
+      navigate(path);
+    } else {
+      alert("추후 구현 예정입니다.");
+    }
+  };
+
+  return (
+    <div className={styles.container}>
+      {NAV_CONTENT.map((item) => {
+        const SvgComponent = item.svg;
+
+        return (
+          <button
+            key={item.id}
+            type="button"
+            onClick={() => handleClick(item.id, item.path)}
+            className={styles.navItem({
+              state: activeItem === item.id,
+            })}
+          >
+            <SvgComponent />
+            {item.label}
+          </button>
+        );
+      })}
+    </div>
+  );
+};
+
+export default Nav;

src/common/component/Nav/constant.ts

@@ -0,0 +1,15 @@
+import { IcShape } from "@asset/svg/index";
+
+type NavItem = {
+  id: string;
+  label: string;
+  path: string;
+  svg: typeof IcShape;
+};
+
+export const NAV_CONTENT: NavItem[] = [
+  { id: "/main", label: "홈", path: "/main", svg: IcShape },
+  { id: "/community", label: "커뮤니티", path: "/community", svg: IcShape },
+  { id: "/review", label: "병원리뷰", path: "/community", svg: IcShape },
+  { id: "/mypage", label: "마이", path: "/mypage", svg: IcShape },
+];

src/page/main/index/Main.tsx

@@ -1,5 +1,7 @@
+import Nav from "@common/component/Nav/Nav";
+
 const Main = () => {
-  return <div>메인</div>;
+  return <Nav />;
 };
 
 export default Main;

src/page/mypage/index/Mypage.tsx

@@ -1,8 +1,7 @@
+import Nav from "@common/component/Nav/Nav";
 
 const Mypage = () => {
-  return (
-    <div>Mypage</div>
-  )
-}
+  return <Nav />;
+};
 
-export default Mypage
+export default Mypage;

src/style/reset.css.ts

@@ -15,16 +15,13 @@ globalStyle(
     // fontSize: "100%",
     font: "inherit",
     verticalAlign: "baseline",
-  }
+  },
 );
 
 /* Display block for HTML5 elements */
-globalStyle(
-  "article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section",
-  {
-    display: "block",
-  }
-);
+globalStyle("article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section", {
+  display: "block",
+});
 
 /* Body styles */
 globalStyle("body", {
@@ -55,3 +52,20 @@ globalStyle("table", {
   borderCollapse: "collapse",
   borderSpacing: 0,
 });
+
+/* Button 스타일 리셋 */
+globalStyle("button", {
+  background: "none",
+  border: "none",
+  padding: 0,
+  font: "inherit",
+  color: "inherit",
+  cursor: "pointer",
+  outline: "none",
+  appearance: "none",
+});
+
+/* Button 호버 및 포커스 상태 스타일 리셋 */
+globalStyle("button:hover, button:focus", {
+  outline: "none",
+});