prgrms-web-devcourse-final-project · ahk0413 · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025 · Sep 23, 2025
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,8 +2,8 @@ import type { Metadata } from 'next';
 import '@/shared/styles/global.css';
 import { Toaster } from 'react-hot-toast';
 import ScrollTopBtn from '@/shared/components/scrollTop/ScrollTopBtn';
-import Header from '@/components/header/Header';
-import Footer from '@/components/footer/Footer';
+import Header from '@/shared/components/header/Header';
+import Footer from '@/shared/components/footer/Footer';
 export const metadata: Metadata = {
   title: 'SSOUL',
   description: '칵테일을 좋아하는 사람들을 위한 서비스',
@@ -18,10 +18,12 @@ export default function RootLayout({
     <html lang="ko-KR">
       <body className="relative flex flex-col min-h-screen">
         <Header />
-        <main className="flex-1 mt-[60px]">
+        <main className="flex flex-1 pt-[2.75rem] md:pt-[3.75rem]">
           <div id="observer-target" className="h-[0.5px]"></div>
           {children}
         </main>
+        <Footer />
+
         <div id="modal-root"></div>
         <Toaster
           position="top-center"
@@ -35,7 +37,6 @@ export default function RootLayout({
         />
 
         <ScrollTopBtn />
-        <Footer />
       </body>
     </html>
   );

diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx
@@ -10,7 +10,7 @@ export const metadata: Metadata = {
 
 function Page() {
   return (
-    <div className="relative flex flex-1 flex-col items-center justify-center gap-4 min-h-screen">
+    <div className="page-layout max-w-824 relative flex-center flex-col gap-4">
       <div
         className="absolute bottom-0 left-1/2 -translate-x-1/2 w-full max-w-[75rem] h-full -z-10"
         aria-hidden

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,7 @@
 export default function Home() {
   return (
-    <div className="flex-center">
-      <h1> 이게 기본</h1>
-      <h1 className="font-serif">this is Serif</h1>
-      <h1>테스트입니다</h1>
+    <div className="page-layout max-w-full">
+      <h1>메인페이지</h1>
     </div>
   );
 }
diff --git a/src/components/header/HeaderLogo.tsx b/src/components/header/HeaderLogo.tsx
diff --git a/src/shared/assets/icons/arrow_up_24.svg b/src/shared/assets/icons/arrow_up_24.svg
diff --git a/src/shared/assets/icons/bell_24.svg b/src/shared/assets/icons/bell_24.svg
diff --git a/src/shared/assets/icons/close_20.svg b/src/shared/assets/icons/close_20.svg
diff --git a/src/shared/assets/icons/close_32.svg b/src/shared/assets/icons/close_32.svg
diff --git a/src/shared/assets/icons/sign_in_24.svg b/src/shared/assets/icons/sign_in_24.svg
diff --git a/src/shared/assets/icons/sign_out_24.svg b/src/shared/assets/icons/sign_out_24.svg
diff --git a/src/shared/assets/icons/signout_24.svg b/src/shared/assets/icons/signout_24.svg
diff --git a/src/shared/assets/icons/user_24.svg b/src/shared/assets/icons/user_24.svg
diff --git a/src/components/footer/Footer.tsx → src/shared/components/footer/Footer.tsx b/src/components/footer/Footer.tsx → src/shared/components/footer/Footer.tsx
@@ -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>

diff --git a/src/components/footer/Github.tsx → src/shared/components/footer/Github.tsx b/src/components/footer/Github.tsx → src/shared/components/footer/Github.tsx
diff --git a/src/components/header/DropdownMenu.tsx → ...shared/components/header/DropdownMenu.tsx b/src/components/header/DropdownMenu.tsx → ...shared/components/header/DropdownMenu.tsx
@@ -1,5 +1,5 @@
 import { navItem } from '@/shared/utills/navigation';
-import LogoDark from '../../../public/logoDark.svg';
+import Image from 'next/image';
 import Close from '@/shared/assets/icons/close_32.svg';
 import User from '@/shared/assets/icons/user_24.svg';
 import Link from 'next/link';
@@ -66,8 +66,14 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
       id="mobile-dropdown-menu"
       ref={menuRef}
     >
-      <div className="flex items-center h-[36px] w-full  justify-center mt-3">
-        <LogoDark />
+      <div className="flex items-center h-[44px] w-full justify-center">
+        <Image
+          src="/logoDark.svg"
+          alt="Ssoul 로고"
+          width={82}
+          height={26}
+          className="w-[62px] md:w-[82px] h-auto"
+        />
       </div>
       <div className="my-5">
         <ul className="flex flex-col gap-[12px] text-black px-2">
@@ -95,20 +101,20 @@ 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>
       </div>
-      <div className="absolute top-4 left-5">
+      <div className="absolute top-1.5 left-3">
         <button
           type="button"
           onClick={() => {
             setIsClicked(false);
           }}
         >
-          <Close stroke={'black'} />
+          <Close color="var(--color-primary)" className="w-8 h-8" />
         </button>
       </div>
     </div>

diff --git a/src/components/header/HamburgerMenu.tsx → ...hared/components/header/HamburgerMenu.tsx b/src/components/header/HamburgerMenu.tsx → ...hared/components/header/HamburgerMenu.tsx
diff --git a/src/components/header/Header.tsx → src/shared/components/header/Header.tsx b/src/components/header/Header.tsx → src/shared/components/header/Header.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;
 
@@ -49,7 +49,7 @@ function Header() {
   return (
     <header
       className={tw(
-        `bg-primary w-full h-[60px] flex items-center justify-between px-[12px] fixed top-0 left-0 z-50 transition-all duration-300`,
+        `bg-primary w-full h-[44px] md:h-[60px] flex items-center justify-between px-[12px] fixed top-0 left-0 z-50 transition-all duration-300`,
         showShadow && 'shadow-header'
       )}
       ref={headerRef}

diff --git a/src/components/header/HeaderBtn.tsx → src/shared/components/header/HeaderBtn.tsx b/src/components/header/HeaderBtn.tsx → src/shared/components/header/HeaderBtn.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>

diff --git a/src/shared/components/header/HeaderLogo.tsx b/src/shared/components/header/HeaderLogo.tsx
@@ -0,0 +1,20 @@
+import Link from 'next/link';
+import Image from 'next/image';
+
+function HeaderLogo() {
+  return (
+    <div>
+      <Link href="/" aria-label="Ssoul 메인으로 이동">
+        <Image
+          src="/logo.svg"
+          alt="Ssoul 로고"
+          width={82}
+          height={26}
+          className="w-[62px] md:w-[82px] h-auto"
+        />
+      </Link>
+    </div>
+  );
+}
+
+export default HeaderLogo;
diff --git a/src/components/header/NavItem.tsx → src/shared/components/header/NavItem.tsx b/src/components/header/NavItem.tsx → src/shared/components/header/NavItem.tsx
diff --git a/src/shared/components/scrollTop/ScrollTopBtn.tsx b/src/shared/components/scrollTop/ScrollTopBtn.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>
   );

diff --git a/src/shared/components/toast/CustomToast.tsx b/src/shared/components/toast/CustomToast.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>
   );

diff --git a/src/shared/styles/_utilities.css b/src/shared/styles/_utilities.css
@@ -1,5 +1,42 @@
-@layer utilities{
-.flex-center {
+@layer utilities {
+  .flex-center {
     @apply flex justify-center items-center;
   }
+
+  /* 
+    모든 페이지는 div 한번 감싸야 함
+    - flex-1 적용 → 상위 main/flex 구조에서 남은 화면 높이 채우기
+    - max-width 설정 → 페이지별 디자인 가이드에 맞춰서 (ex: 824, 1024, 1224, full)
+    - padding 적용 → 좌우 여백 통일 (ex: px-4)
+    - 중앙 정렬 유지 → mx-auto
+
+
+    * max-width
+    824 → 로그인, 커뮤니티 상세/글쓰기
+    1024 → 레시피 상세, 챗봇, 커뮤니티리스트, 마이페이지
+    1224 → 레시피 리스트
+    full → 메인
+
+    * 824 레이아웃 예시
+    ex) <div className="page-layout max-w-824">
+  */
+
+  /* 페이지 레이아웃 기본 값 */
+  .page-layout {
+    @apply flex-1 w-full px-4 mx-auto;
+  }
+
+  /* max-width 별 */
+  .max-w-824 {
+    @apply max-w-[51.5rem];
+  }
+  .max-w-1024 {
+    @apply max-w-[64rem];
+  }
+  .max-w-1224 {
+    @apply max-w-[76.5rem];
+  }
+  .max-w-full {
+    @apply max-w-full;
+  }
 }