refactor: path를 prop으로 받도록 수정

sprint-team3 · Apr 16, 2024 · 92a4b9a · 92a4b9a
1 parent ef34fa6
commit 92a4b9a
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/src/components/header/Header/index.tsx b/src/components/header/Header/index.tsx
@@ -1,6 +1,6 @@
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS, SVGS } from '@/constants';
+import { SVGS } from '@/constants';
 
 import Menu from '@/components/header/Menu';
 
@@ -11,19 +11,20 @@ const { url, alt } = SVGS.drawerMenu;
 
 type HeaderProps = {
   children: React.ReactNode;
+  path: string;
   logoName: string;
   menuList: string[];
   onClick: () => void;
 };
 
-const Header = ({ children, logoName, menuList, onClick }: HeaderProps) => {
+const Header = ({ children, path, logoName, menuList, onClick }: HeaderProps) => {
   return (
     <div className={cx('container')}>
       <header className={cx('header')}>
         <button className={cx('header-menu-button', 'sm-only')} onClick={onClick}>
           <img src={url} alt={alt} width={24} height={24}></img>
         </button>
-        <a className={cx('header-logo')} href={PAGE_PATHS.landing}>
+        <a className={cx('header-logo')} href={path}>
           {logoName}
         </a>
         <div className={cx('header-container-outer')}>

diff --git a/src/components/header/UserMenu/index.tsx b/src/components/header/UserMenu/index.tsx
@@ -2,7 +2,7 @@ import { RefObject } from 'react';
 
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS, SVGS } from '@/constants';
+import { SVGS } from '@/constants';
 
 import Avatar from '@/components/Avatar';
 import useSignout from '@/hooks/useSignout';
@@ -11,17 +11,26 @@ import styles from './UserMenu.module.scss';
 
 const cx = classNames.bind(styles);
 const { url, alt } = SVGS.button.setting;
-const { account, mypage } = PAGE_PATHS;
 
 type UserMenuProps = {
   profileImageUrl: string;
   nickname: string;
   email: string;
+  accountPath: string;
+  mypagePath: string;
   userMenuRef: RefObject<HTMLDivElement>;
   onClick: () => void;
 };
 
-const UserMenu = ({ profileImageUrl, nickname, email, userMenuRef, onClick }: UserMenuProps) => {
+const UserMenu = ({
+  profileImageUrl,
+  nickname,
+  email,
+  accountPath,
+  mypagePath,
+  userMenuRef,
+  onClick,
+}: UserMenuProps) => {
   const signout = useSignout();
 
   const handleClickSignout = () => {
@@ -36,15 +45,15 @@ const UserMenu = ({ profileImageUrl, nickname, email, userMenuRef, onClick }: Us
         <div className={cx('container-user-info')}>
           <div className={cx('container-nickname')}>
             <p className={cx('nickname')}>{nickname}</p>
-            <a onClick={onClick} href={account}>
+            <a onClick={onClick} href={accountPath}>
               <img src={url} alt={alt} width={18} height={18} />
             </a>
           </div>
           <div className={cx('email')}>{email}</div>
         </div>
       </div>
       <div className={cx('container-button')}>
-        <a className={cx('container-button-mypage')} onClick={onClick} href={mypage}>
+        <a className={cx('container-button-mypage')} onClick={onClick} href={mypagePath}>
           My Page
         </a>
         <button className={cx('container-button-logout')} onClick={handleClickSignout}>

diff --git a/src/components/header/buttons/HeaderSigninButton.tsx b/src/components/header/buttons/HeaderSigninButton.tsx
@@ -1,14 +1,16 @@
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS } from '@/constants';
-
 import styles from './HeaderSignButton.module.scss';
 
 const cx = classNames.bind(styles);
 
-export const HeaderSigninButton = () => {
+type HeaderSigninButtonProps = {
+  path: string;
+};
+
+export const HeaderSigninButton = ({ path }: HeaderSigninButtonProps) => {
   return (
-    <a href={PAGE_PATHS.signin}>
+    <a href={path}>
       <button className={cx('signin-btn')}>
         <span className={cx('text')}>SIGNIN</span>
       </button>

diff --git a/src/components/header/buttons/HeaderSignupButton.tsx b/src/components/header/buttons/HeaderSignupButton.tsx
@@ -1,14 +1,16 @@
 import classNames from 'classnames/bind';
 
-import { PAGE_PATHS } from '@/constants';
-
 import styles from './HeaderSignButton.module.scss';
 
 const cx = classNames.bind(styles);
 
-export const HeaderSignupButton = () => {
+type HeaderSignupButtonProps = {
+  path: string;
+};
+
+export const HeaderSignupButton = ({ path }: HeaderSignupButtonProps) => {
   return (
-    <a href={PAGE_PATHS.signup}>
+    <a href={path}>
       <button className={cx('signup-btn')}>
         <div className={cx('text')}>SIGNUP</div>
       </button>