From e81980925bd914c64e13b5645dc4f015b0c3b612 Mon Sep 17 00:00:00 2001 From: yarimu Date: Mon, 13 Jan 2025 04:53:58 +0900 Subject: [PATCH 1/8] =?UTF-8?q?style:=20Link=ED=83=9C=EA=B7=B8=20=EA=B8=B0?= =?UTF-8?q?=EB=B3=B8=20=EC=86=8D=EC=84=B1=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/reset.css.ts | 25 ++++++++++++++++++------- 1 file changed, 18 insertions(+), 7 deletions(-) diff --git a/src/style/reset.css.ts b/src/style/reset.css.ts index 7d42ab6b..b827a028 100644 --- a/src/style/reset.css.ts +++ b/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,17 @@ globalStyle("table", { borderCollapse: "collapse", borderSpacing: 0, }); + +/* Link 스타일 리셋 */ +globalStyle("a", { + textDecoration: "none", + color: "inherit", + cursor: "inherit", + outline: "none", +}); + +/* Link 호버 효과 제거 */ +globalStyle("a:hover", { + textDecoration: "none", + color: "inherit", +}); From 20b6de40423c52f7f371202d4e92b277fbaf3b74 Mon Sep 17 00:00:00 2001 From: yarimu Date: Mon, 13 Jan 2025 05:12:01 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=ED=95=98=EB=8B=A8=20Nav=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/Shape.svg | 14 +++++++++ src/asset/svg/Shape.tsx | 45 ++++++++++++++++++++++++++++ src/asset/svg/index.ts | 1 + src/common/component/Nav/Nav.css.ts | 29 ++++++++++++++++++ src/common/component/Nav/Nav.tsx | 31 +++++++++++++++++++ src/common/component/Nav/constant.ts | 6 ++++ 6 files changed, 126 insertions(+) create mode 100644 public/svgs/Shape.svg create mode 100644 src/asset/svg/Shape.tsx create mode 100644 src/common/component/Nav/Nav.css.ts create mode 100644 src/common/component/Nav/Nav.tsx create mode 100644 src/common/component/Nav/constant.ts diff --git a/public/svgs/Shape.svg b/public/svgs/Shape.svg new file mode 100644 index 00000000..2fc09540 --- /dev/null +++ b/public/svgs/Shape.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/src/asset/svg/Shape.tsx b/src/asset/svg/Shape.tsx new file mode 100644 index 00000000..501b2293 --- /dev/null +++ b/src/asset/svg/Shape.tsx @@ -0,0 +1,45 @@ +import type { SVGProps } from "react"; + +const SvgShape = (props: SVGProps) => ( + + SvgShape Icon + + + + + + + + + + + + + +); + +export default SvgShape; diff --git a/src/asset/svg/index.ts b/src/asset/svg/index.ts index 11d07129..2aec8956 100644 --- a/src/asset/svg/index.ts +++ b/src/asset/svg/index.ts @@ -1,2 +1,3 @@ export { default as React } from "./React"; export { default as Vite } from "./Vite"; +export { default as SvgShape } from "./Shape"; diff --git a/src/common/component/Nav/Nav.css.ts b/src/common/component/Nav/Nav.css.ts new file mode 100644 index 00000000..92333a91 --- /dev/null +++ b/src/common/component/Nav/Nav.css.ts @@ -0,0 +1,29 @@ +import * as styles from "@vanilla-extract/css"; +import { font, color } from "@style/styles.css.ts"; + +export const container = styles.style([ + font.label01, + { + display: "flex", + justifyContent: "space-between", + width: "37.5rem", + height: "8rem", + padding: "1.2rem 3.2rem 0 3.2rem", + }, +]); + +export const wrapper = styles.style({ + display: "flex", + flexDirection: "column", + justifyContent: "center", + alignItems: "center", + padding: "0 1.2rem", +}); + +export const disabled = styles.style({ + color: color.gray.gray500, +}); + +export const enabled = styles.style({ + color: color.gray.gray900, +}); diff --git a/src/common/component/Nav/Nav.tsx b/src/common/component/Nav/Nav.tsx new file mode 100644 index 00000000..464c1c58 --- /dev/null +++ b/src/common/component/Nav/Nav.tsx @@ -0,0 +1,31 @@ +import { useState } from "react"; +import { Link } from "react-router-dom"; +import { SvgShape } from "@asset/svg/index"; +import * as styles from "./Nav.css"; +import { NAV_CONTENT } from "./constant"; + +const Nav = () => { + const [activeItem, setActiveItem] = useState("home"); + + const handleClick = (itemId: string) => { + setActiveItem(itemId); + }; + + return ( +
+ {NAV_CONTENT.map((item) => ( + handleClick(item.id)} + className={`${styles.wrapper} ${activeItem === item.id ? styles.enabled : styles.disabled}`} + > + + {item.label} + + ))} +
+ ); +}; + +export default Nav; diff --git a/src/common/component/Nav/constant.ts b/src/common/component/Nav/constant.ts new file mode 100644 index 00000000..6e55d60d --- /dev/null +++ b/src/common/component/Nav/constant.ts @@ -0,0 +1,6 @@ +export const NAV_CONTENT = [ + { id: "home", label: "홈", path: "/main" }, + { id: "community", label: "커뮤니티", path: "/community" }, + { id: "review", label: "병원리뷰", path: "/review" }, // (수정예정) 나중에 구현할 리뷰 경로 + { id: "my", label: "마이", path: "/mypage" }, +]; From 6c03731e7397374ad86cdab87eccfbf18ca7edc2 Mon Sep 17 00:00:00 2001 From: yarimu Date: Tue, 14 Jan 2025 06:30:15 +0900 Subject: [PATCH 3/8] =?UTF-8?q?rename:=20=EC=BB=A8=EB=B2=A4=EC=85=98?= =?UTF-8?q?=EC=97=90=20=EB=A7=9E=EA=B2=8C=20svg=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/svgs/{Shape.svg => ic_Shape.svg} | 0 src/asset/svg/IcShape.tsx | 10 ++++++ src/asset/svg/Shape.tsx | 45 ------------------------- src/asset/svg/index.ts | 2 +- src/common/component/Nav/Nav.tsx | 4 +-- 5 files changed, 13 insertions(+), 48 deletions(-) rename public/svgs/{Shape.svg => ic_Shape.svg} (100%) create mode 100644 src/asset/svg/IcShape.tsx delete mode 100644 src/asset/svg/Shape.tsx diff --git a/public/svgs/Shape.svg b/public/svgs/ic_Shape.svg similarity index 100% rename from public/svgs/Shape.svg rename to public/svgs/ic_Shape.svg diff --git a/src/asset/svg/IcShape.tsx b/src/asset/svg/IcShape.tsx new file mode 100644 index 00000000..e813ef0f --- /dev/null +++ b/src/asset/svg/IcShape.tsx @@ -0,0 +1,10 @@ +import type { SVGProps } from "react"; +const SvgIcShape = (props: SVGProps) => ( + + SvgIcShape + + + + +); +export default SvgIcShape; diff --git a/src/asset/svg/Shape.tsx b/src/asset/svg/Shape.tsx deleted file mode 100644 index 501b2293..00000000 --- a/src/asset/svg/Shape.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import type { SVGProps } from "react"; - -const SvgShape = (props: SVGProps) => ( - - SvgShape Icon - - - - - - - - - - - - - -); - -export default SvgShape; diff --git a/src/asset/svg/index.ts b/src/asset/svg/index.ts index 2aec8956..20e6df81 100644 --- a/src/asset/svg/index.ts +++ b/src/asset/svg/index.ts @@ -1,3 +1,3 @@ +export { default as IcShape } from "./IcShape"; export { default as React } from "./React"; export { default as Vite } from "./Vite"; -export { default as SvgShape } from "./Shape"; diff --git a/src/common/component/Nav/Nav.tsx b/src/common/component/Nav/Nav.tsx index 464c1c58..13b84dd9 100644 --- a/src/common/component/Nav/Nav.tsx +++ b/src/common/component/Nav/Nav.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; import { Link } from "react-router-dom"; -import { SvgShape } from "@asset/svg/index"; +import { IcShape } from "@asset/svg/index"; import * as styles from "./Nav.css"; import { NAV_CONTENT } from "./constant"; @@ -20,7 +20,7 @@ const Nav = () => { onClick={() => handleClick(item.id)} className={`${styles.wrapper} ${activeItem === item.id ? styles.enabled : styles.disabled}`} > - + {item.label} ))} From 532bc8e9bb0207f5b9f44d456bebc61ad978dce8 Mon Sep 17 00:00:00 2001 From: yarimu Date: Tue, 14 Jan 2025 06:51:17 +0900 Subject: [PATCH 4/8] =?UTF-8?q?refactor:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Nav/Nav.tsx | 27 +++++++++++++++------------ src/common/component/Nav/constant.ts | 10 ++++++---- 2 files changed, 21 insertions(+), 16 deletions(-) diff --git a/src/common/component/Nav/Nav.tsx b/src/common/component/Nav/Nav.tsx index 13b84dd9..5c4dfdb3 100644 --- a/src/common/component/Nav/Nav.tsx +++ b/src/common/component/Nav/Nav.tsx @@ -1,6 +1,5 @@ import { useState } from "react"; import { Link } from "react-router-dom"; -import { IcShape } from "@asset/svg/index"; import * as styles from "./Nav.css"; import { NAV_CONTENT } from "./constant"; @@ -13,17 +12,21 @@ const Nav = () => { return (
- {NAV_CONTENT.map((item) => ( - handleClick(item.id)} - className={`${styles.wrapper} ${activeItem === item.id ? styles.enabled : styles.disabled}`} - > - - {item.label} - - ))} + {NAV_CONTENT.map((item) => { + const SvgComponent = item.svg; + + return ( + handleClick(item.id)} + className={`${styles.wrapper} ${activeItem === item.id ? styles.enabled : styles.disabled}`} + > + + {item.label} + + ); + })}
); }; diff --git a/src/common/component/Nav/constant.ts b/src/common/component/Nav/constant.ts index 6e55d60d..23729309 100644 --- a/src/common/component/Nav/constant.ts +++ b/src/common/component/Nav/constant.ts @@ -1,6 +1,8 @@ +import { IcShape } from "@asset/svg/index"; + export const NAV_CONTENT = [ - { id: "home", label: "홈", path: "/main" }, - { id: "community", label: "커뮤니티", path: "/community" }, - { id: "review", label: "병원리뷰", path: "/review" }, // (수정예정) 나중에 구현할 리뷰 경로 - { id: "my", label: "마이", path: "/mypage" }, + { id: "home", label: "홈", path: "/main", svg: IcShape }, + { id: "community", label: "커뮤니티", path: "/community", svg: IcShape }, + { id: "review", label: "병원리뷰", path: "/review", svg: IcShape }, + { id: "my", label: "마이", path: "/mypage", svg: IcShape }, ]; From 47a915b7e486a2706290a81cee973eefd9defeeb Mon Sep 17 00:00:00 2001 From: yarimu Date: Tue, 14 Jan 2025 07:25:10 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20=EB=B3=91=EC=9B=90=EB=A6=AC?= =?UTF-8?q?=EB=B7=B0=20=EB=B6=84=EA=B8=B0=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Nav/Nav.tsx | 18 ++++++++++++------ src/common/component/Nav/constant.ts | 11 +++++++++-- 2 files changed, 21 insertions(+), 8 deletions(-) diff --git a/src/common/component/Nav/Nav.tsx b/src/common/component/Nav/Nav.tsx index 5c4dfdb3..ea13b2a3 100644 --- a/src/common/component/Nav/Nav.tsx +++ b/src/common/component/Nav/Nav.tsx @@ -1,13 +1,19 @@ import { useState } from "react"; -import { Link } from "react-router-dom"; +import { useNavigate } from "react-router-dom"; import * as styles from "./Nav.css"; import { NAV_CONTENT } from "./constant"; const Nav = () => { const [activeItem, setActiveItem] = useState("home"); + const navigate = useNavigate(); - const handleClick = (itemId: string) => { + const handleClick = (itemId: string, path: string) => { setActiveItem(itemId); + if (itemId !== "review") { + navigate(path); + } else { + alert("추후 구현 예정입니다."); + } }; return ( @@ -16,15 +22,15 @@ const Nav = () => { const SvgComponent = item.svg; return ( - handleClick(item.id)} + type="button" + onClick={() => handleClick(item.id, item.path)} className={`${styles.wrapper} ${activeItem === item.id ? styles.enabled : styles.disabled}`} > {item.label} - + ); })} diff --git a/src/common/component/Nav/constant.ts b/src/common/component/Nav/constant.ts index 23729309..05d4ee00 100644 --- a/src/common/component/Nav/constant.ts +++ b/src/common/component/Nav/constant.ts @@ -1,8 +1,15 @@ import { IcShape } from "@asset/svg/index"; -export const NAV_CONTENT = [ +type NavItem = { + id: string; + label: string; + path: string; + svg: typeof IcShape; +}; + +export const NAV_CONTENT: NavItem[] = [ { id: "home", label: "홈", path: "/main", svg: IcShape }, { id: "community", label: "커뮤니티", path: "/community", svg: IcShape }, - { id: "review", label: "병원리뷰", path: "/review", svg: IcShape }, + { id: "review", label: "병원리뷰", path: "/community", svg: IcShape }, { id: "my", label: "마이", path: "/mypage", svg: IcShape }, ]; From 8454df89083595781348f08050e6ee3b5ac9a994 Mon Sep 17 00:00:00 2001 From: yarimu Date: Tue, 14 Jan 2025 07:27:19 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20Link=20=EB=A6=AC=EC=85=8B=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20->=20Btn=20=EB=A6=AC=EC=85=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/style/reset.css.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/style/reset.css.ts b/src/style/reset.css.ts index b827a028..0d34af3e 100644 --- a/src/style/reset.css.ts +++ b/src/style/reset.css.ts @@ -53,16 +53,19 @@ globalStyle("table", { borderSpacing: 0, }); -/* Link 스타일 리셋 */ -globalStyle("a", { - textDecoration: "none", +/* Button 스타일 리셋 */ +globalStyle("button", { + background: "none", + border: "none", + padding: 0, + font: "inherit", color: "inherit", - cursor: "inherit", + cursor: "pointer", outline: "none", + appearance: "none", }); -/* Link 호버 효과 제거 */ -globalStyle("a:hover", { - textDecoration: "none", - color: "inherit", +/* Button 호버 및 포커스 상태 스타일 리셋 */ +globalStyle("button:hover, button:focus", { + outline: "none", }); From 9155313162ca0b20a5e3e8a72437f171f448ca4d Mon Sep 17 00:00:00 2001 From: yarimu Date: Tue, 14 Jan 2025 07:41:51 +0900 Subject: [PATCH 7/8] =?UTF-8?q?refactor:=20recipe=20=ED=99=9C=EC=9A=A9=20?= =?UTF-8?q?=EB=8F=99=EC=A0=81=20=EC=8A=A4=ED=83=80=EC=9D=BC=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Nav/Nav.css.ts | 40 +++++++++++++++++------------ src/common/component/Nav/Nav.tsx | 4 ++- 2 files changed, 27 insertions(+), 17 deletions(-) diff --git a/src/common/component/Nav/Nav.css.ts b/src/common/component/Nav/Nav.css.ts index 92333a91..1c196c05 100644 --- a/src/common/component/Nav/Nav.css.ts +++ b/src/common/component/Nav/Nav.css.ts @@ -1,7 +1,8 @@ -import * as styles from "@vanilla-extract/css"; +import { recipe } from "@vanilla-extract/recipes"; import { font, color } from "@style/styles.css.ts"; +import { style } from "@vanilla-extract/css"; -export const container = styles.style([ +export const container = style([ font.label01, { display: "flex", @@ -12,18 +13,25 @@ export const container = styles.style([ }, ]); -export const wrapper = styles.style({ - display: "flex", - flexDirection: "column", - justifyContent: "center", - alignItems: "center", - padding: "0 1.2rem", -}); - -export const disabled = styles.style({ - color: color.gray.gray500, -}); - -export const enabled = styles.style({ - color: color.gray.gray900, +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, + }, }); diff --git a/src/common/component/Nav/Nav.tsx b/src/common/component/Nav/Nav.tsx index ea13b2a3..737a66eb 100644 --- a/src/common/component/Nav/Nav.tsx +++ b/src/common/component/Nav/Nav.tsx @@ -26,7 +26,9 @@ const Nav = () => { key={item.id} type="button" onClick={() => handleClick(item.id, item.path)} - className={`${styles.wrapper} ${activeItem === item.id ? styles.enabled : styles.disabled}`} + className={styles.navItem({ + state: activeItem === item.id, + })} > {item.label} From 4d9dccfd352e85780d3d99af879cc7f0ed459aad Mon Sep 17 00:00:00 2001 From: kong Date: Tue, 14 Jan 2025 17:43:24 +0900 Subject: [PATCH 8/8] =?UTF-8?q?fix:=20url=20=EC=A0=9C=EB=8C=80=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B8=EC=8B=9D=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/common/component/Nav/Nav.tsx | 16 +++++++++++++--- src/common/component/Nav/constant.ts | 8 ++++---- src/page/main/index/Main.tsx | 4 +++- src/page/mypage/index/Mypage.tsx | 9 ++++----- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/common/component/Nav/Nav.tsx b/src/common/component/Nav/Nav.tsx index 737a66eb..7612ae37 100644 --- a/src/common/component/Nav/Nav.tsx +++ b/src/common/component/Nav/Nav.tsx @@ -1,15 +1,25 @@ import { useState } from "react"; -import { useNavigate } from "react-router-dom"; +import { useLocation, useNavigate } from "react-router-dom"; import * as styles from "./Nav.css"; import { NAV_CONTENT } from "./constant"; const Nav = () => { - const [activeItem, setActiveItem] = useState("home"); + const location = useLocation(); + + const extractFirstPath = (): string => { + const pathName = location.pathname; + const parts = pathName.split("/"); + const basePath = `/${parts[1]}`; + + return basePath; + }; + + const [activeItem, setActiveItem] = useState(extractFirstPath()); const navigate = useNavigate(); const handleClick = (itemId: string, path: string) => { setActiveItem(itemId); - if (itemId !== "review") { + if (itemId !== "/review") { navigate(path); } else { alert("추후 구현 예정입니다."); diff --git a/src/common/component/Nav/constant.ts b/src/common/component/Nav/constant.ts index 05d4ee00..70f96f18 100644 --- a/src/common/component/Nav/constant.ts +++ b/src/common/component/Nav/constant.ts @@ -8,8 +8,8 @@ type NavItem = { }; export const NAV_CONTENT: NavItem[] = [ - { id: "home", label: "홈", path: "/main", svg: IcShape }, - { id: "community", label: "커뮤니티", path: "/community", svg: IcShape }, - { id: "review", label: "병원리뷰", path: "/community", svg: IcShape }, - { id: "my", label: "마이", path: "/mypage", svg: IcShape }, + { 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 }, ]; diff --git a/src/page/main/index/Main.tsx b/src/page/main/index/Main.tsx index 328a5fec..ece5bdf4 100644 --- a/src/page/main/index/Main.tsx +++ b/src/page/main/index/Main.tsx @@ -1,5 +1,7 @@ +import Nav from "@common/component/Nav/Nav"; + const Main = () => { - return
메인
; + return