diff --git a/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx b/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx index b3ac586..abd1033 100644 --- a/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx +++ b/apps/pyconkr-2025/src/components/layout/CartBadgeButton/index.tsx @@ -3,27 +3,26 @@ import { ShoppingCart } from "@mui/icons-material"; import { Badge, badgeClasses, IconButton, styled } from "@mui/material"; import { ErrorBoundary, Suspense } from "@suspensive/react"; import { FC } from "react"; -import { useNavigate } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; type InnerCartBadgeButtonPropType = { loading?: boolean; count?: number; }; +// `as typeof IconButton`으로 styled가 잃어버린 polymorphic 타입(component/to)을 복원한다. const ColoredIconButton = styled(IconButton)(({ theme }) => ({ color: theme.palette.primary.nonFocus, "&:hover": { color: theme.palette.primary.dark }, "&:active": { color: theme.palette.primary.main }, transition: "color 0.4s ease, background-color 0.4s ease", -})); +})) as typeof IconButton; const InnerCartBadge = styled(Badge)({ [`& .${badgeClasses.badge}`]: { top: "-12px", right: "-3px" } }); const InnerCartBadgeButton: FC = ({ loading, count }) => { - const navigate = useNavigate(); - return ( - navigate("/store/cart")}> + {count !== undefined && count > 0 && } diff --git a/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx b/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx index 6fd174e..e2dacdd 100644 --- a/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx +++ b/apps/pyconkr-2025/src/components/layout/SignInButton/index.tsx @@ -2,7 +2,7 @@ import { useShopClient, useSignOutMutation, useUserStatus } from "@frontend/shop import { Login, Logout } from "@mui/icons-material"; import { Button, Stack } from "@mui/material"; import { ErrorBoundary, Suspense } from "@suspensive/react"; -import { useNavigate } from "react-router-dom"; +import { Link as RouterLink } from "react-router-dom"; import { useAppContext } from "@apps/pyconkr-2025/contexts/app_context"; @@ -23,24 +23,20 @@ const InnerSignInButtonImpl: React.FC = ({ isMainPath = true, onClose, }) => { - const navigate = useNavigate(); const { language } = useAppContext(); const signInBtnStr = language === "ko" ? "로그인" : "Sign In"; const signOutBtnStr = language === "ko" ? "로그아웃" : "Sign Out"; - const handleClick = () => { - if (signedIn) { - onSignOut?.(); - } else { - onClose?.(); - navigate("/account/sign-in"); - } - }; + // 로그인 상태에 따라: 로그아웃은 클릭 액션, 로그인은 Ctrl+클릭(새 탭)이 동작하도록 Link로 이동. + const navProps = signedIn + ? { onClick: () => onSignOut?.() } + : ({ component: RouterLink, to: "/account/sign-in", onClick: () => onClose?.() } as const); if (isMobile) { return (