[design] header/footer 반응형 수정

Author: ahk0413

src/shared/assets/icons/user_24.svg

@@ -2,10 +2,10 @@ import Github from './Github';
 
 function Footer() {
   return (
-    <footer className="w-full h-26 bg-primary flex items-center justify-between p-[12px] font-serif font-light">
+    <footer className="w-full bg-primary flex items-center justify-between p-[12px] font-serif font-light">
       <div className="flex flex-col gap-1">
-        <p>Cocktail Discovery Service, SSOUL </p>
-        <div className="flex flex-col sm:flex-row gap-0.5 sm:gap-2">
+        <p className="text-sm md:text-base">Cocktail Discovery Service, SSOUL </p>
+        <div className="flex flex-col sm:flex-row gap-0.5 sm:gap-2 text-sm md:text-base">
           <span>&copy; 2025 SSOUL.</span>
           <span>All rights reserved.</span>
         </div>

src/shared/components/footer/Footer.tsx

@@ -70,9 +70,9 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
         <Image
           src="/logoDark.svg"
           alt="Ssoul 로고"
-          width={60}
-          height={19}
-          className="md:w-[82px] sm:h-[26px]"
+          width={82}
+          height={26}
+          className="w-[62px] md:w-[82px] h-auto"
         />
       </div>
       <div className="my-5">
@@ -101,8 +101,8 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
           ))}
         </ul>
       </div>
-      <div className="border border-t-[1px] border-t-gray flex py-[32px] gap-4">
-        <User width={32} height={32} />
+      <div className="border border-t-[1px] border-t-gray flex items-center py-[32px] gap-2">
+        <User color="var(--color-primary)" />
         <button type="button" className="text-black font-light text-xl hover:text-black/70">
           로그인/회원가입
         </button>
@@ -114,7 +114,7 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
             setIsClicked(false);
           }}
         >
-          <Close stroke={'black'} className="w-8 h-8" />
+          <Close color="var(--color-primary)" className="w-8 h-8" />
         </button>
       </div>
     </div>

src/shared/components/header/DropdownMenu.tsx

@@ -19,7 +19,7 @@ function Header() {
   useEffect(() => {
     const handleScroll = () => {
       const currentScrollTop = window.scrollY;
-      console.log(currentScrollTop, lastScrollTop);
+      // console.log(currentScrollTop, lastScrollTop);
 
       if (Math.abs(currentScrollTop - lastScrollTop) < -5) return;
 

src/shared/components/header/Header.tsx

@@ -1,6 +1,7 @@
 import Bell from '@/shared/assets/icons/bell_24.svg';
 import User from '@/shared/assets/icons/user_24.svg';
-import SignOut from '@/shared/assets/icons/signout_24.svg';
+// import SignOut from '@/shared/assets/icons/sign_out_24.svg';
+import SignIn from '@/shared/assets/icons/sign_in_24.svg';
 import { useRouter } from 'next/navigation';
 import tw from '@/shared/utills/tw';
 
@@ -27,28 +28,29 @@ function HeaderBtn({ pathname }: { pathname: string }) {
       },
     },
     {
-      icon: SignOut,
-      label: '로그아웃',
+      icon: SignIn,
+      label: '로그인',
       className: 'sm:block hidden',
       onClick: () => {
         //   console.log('로그아웃 클릭');
+        router.push('/login');
       },
     },
   ];
 
   return (
-    <div className="flex gap-[12px]">
+    <div className="flex gap-3">
       {headerBtn.map(({ icon: Icon, label, onClick, className }) => (
         <button
           key={label}
           className={tw(
-            'cursor-pointer fill-white hover:fill-white/80 transition-colors duration-200',
+            'cursor-pointer fill-white  hover:fill-teritiary/70 transition-colors duration-200',
             className
           )}
           aria-label={label}
           onClick={() => onClick(router)}
         >
-          <Icon />
+          <Icon width={24} height={24} />
         </button>
       ))}
     </div>

src/shared/components/header/HeaderBtn.tsx

@@ -8,9 +8,9 @@ function HeaderLogo() {
         <Image
           src="/logo.svg"
           alt="Ssoul 로고"
-          width={60}
-          height={19}
-          className="md:w-[82px] sm:h-[26px]"
+          width={82}
+          height={26}
+          className="w-[62px] md:w-[82px] h-auto"
         />
       </Link>
     </div>

src/shared/components/header/HeaderLogo.tsx

@@ -50,7 +50,7 @@ function ScrollTopBtn() {
         onClick={scrollToTop}
         className="flex-center w-10 h-10 shadow-[0_4px_12px_0_rgba(0,0,0,0.5)] bg-secondary rounded-full"
       >
-        <Arrow aria-hidden />
+        <Arrow color="var(--color-primary)" aria-hidden />
       </button>
     </div>
   );

src/shared/components/scrollTop/ScrollTopBtn.tsx

@@ -25,7 +25,7 @@ function CustomToast({ type, message, onClose }: Props) {
         aria-label="toast 닫기"
         className="absolute top-1 right-2"
       >
-        <Close aria-hidden />
+        <Close color="white" aria-hidden />
       </button>
     </div>
   );