Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feat/#47] 누락된 아이콘 활성화 로직 반영 #48

Closed
wants to merge 1 commit into from
Closed

[Feat/#47] 누락된 아이콘 활성화 로직 반영 #48

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
55 changes: 20 additions & 35 deletions src/common/component/Nav/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,35 @@
import { useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { useNavigate, useLocation } 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;
};

Comment on lines -9 to -15
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p3) 이거는 살려두면 어떨까요? 나중에 location 이 만약 /main이 아니라 /main/어쩌구 등등 뒤에 붙는 형식이 되면 pathName이 일치하지 않는다고 인식되어 아이콘이 활성화가 되지 않을 수도 있을 것 같아서요!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아! 확장성 면에서 기존 로직이 좋은거 같아서 해당 브랜치 폭파 완료했습니다 :)

const [activeItem, setActiveItem] = useState<string>(extractFirstPath());
const navigate = useNavigate();
const location = useLocation();

const handleClick = (itemId: string, path: string) => {
setActiveItem(itemId);
if (itemId !== "/review") {
navigate(path);
} else {
// 버튼 클릭시 활성화 및 페이지 이동
const handleClick = (path: string) => {
if (path === "/review") {
alert("추후 구현 예정입니다.");
} else {
navigate(path);
}
};

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>
);
})}
{NAV_CONTENT.map(({ id, path, svg: SvgComponent, label }) => (
<button
key={id}
type="button"
onClick={() => handleClick(path)}
className={styles.navItem({
state: location.pathname === path,
})}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p3) 만약 위에서 언급한 extractFirstPath 를 살린다면 extractFirstPath() === path 같은 방식으로 아이콘 활성화 여부를 결정하면 좋을 것 같습니다 ~

(아니면 extractFirstPath를 리팩토링해서 인자를 받는 형식으로 한다면, extractFirstPath(location.pathname) === path 으로 활성화 여부를 결정해도 좋을 것 같아요!)

>
<SvgComponent />
{label}
</button>
))}
</div>
);
};
Expand Down
8 changes: 4 additions & 4 deletions src/common/component/Nav/constant.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,8 @@ type NavItem = {
};

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 },
{ 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 },
];
4 changes: 1 addition & 3 deletions src/page/mypage/index/Mypage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import Nav from "@common/component/Nav/Nav";

const Mypage = () => {
return <Nav />;
return <></>;
};

export default Mypage;
Loading