Merge pull request #48 from prgrms-web-devcourse-final-project/feat/layout#46

ahk0413 · web-flow · commit 9ebf7318dace · 2025-09-23T21:22:33.000+09:00
[feat] layout 구현
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
@@ -1,3 +1,3 @@
 <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M18 15L12 9L6 15" stroke="#1A1A1A" stroke-width="2"/>
+<path d="M18 15L12 9L6 15" stroke="currentColor" stroke-width="2"/>
 </svg>
diff --git a/src/shared/assets/icons/bell_24.svg b/src/shared/assets/icons/bell_24.svg
@@ -1,5 +1,5 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
-<path d="M12.0001 3C12.6261 3.00004 13.2303 3.10327 13.795 3.29492C13.2922 4.07481 13.0001 5.0031 13.0001 6C13.0001 8.73641 15.198 10.957 17.9249 10.9971C18.1046 11.8682 18.4263 12.7055 18.8829 13.4727C18.8903 13.485 18.8982 13.4975 18.9132 13.5225L19.4913 14.4854C20.0159 15.3596 20.2784 15.7974 20.2218 16.1562C20.184 16.3949 20.0604 16.6115 19.8751 16.7666C19.5965 16.9997 19.0869 17 18.0675 17H5.93173C4.91236 17 4.40266 16.9998 4.12411 16.7666C3.93892 16.6115 3.81615 16.3948 3.77841 16.1562C3.72179 15.7974 3.98335 15.3596 4.5079 14.4854L5.08603 13.5225C5.10095 13.4976 5.10896 13.485 5.1163 13.4727C5.69474 12.5007 6.06059 11.4167 6.18954 10.293C6.19117 10.2788 6.19221 10.264 6.1954 10.2354L6.44735 7.96973C6.7617 5.14063 9.15358 3 12.0001 3ZM16.2745 4.99121C16.9598 5.80518 17.4181 6.82049 17.5479 7.94629C16.6613 7.74127 16.0001 6.94899 16.0001 6C16.0001 5.63171 16.1008 5.28756 16.2745 4.99121Z" fill="current"/>
-<path d="M9 17C9 17.394 9.0776 17.7841 9.22836 18.1481C9.37913 18.512 9.6001 18.8427 9.87868 19.1213C10.1573 19.3999 10.488 19.6209 10.8519 19.7716C11.2159 19.9224 11.606 20 12 20C12.394 20 12.7841 19.9224 13.1481 19.7716C13.512 19.6209 13.8427 19.3999 14.1213 19.1213C14.3999 18.8427 14.6209 18.512 14.7716 18.1481C14.9224 17.7841 15 17.394 15 17L12 17H9Z" fill="current"/>
-<circle cx="18" cy="6" r="2.5" fill="current" stroke="current"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0001 3C12.6261 3.00004 13.2303 3.10327 13.795 3.29492C13.2922 4.07481 13.0001 5.0031 13.0001 6C13.0001 8.73641 15.198 10.957 17.9249 10.9971C18.1046 11.8682 18.4263 12.7055 18.8829 13.4727C18.8903 13.485 18.8982 13.4975 18.9132 13.5225L19.4913 14.4854C20.0159 15.3596 20.2784 15.7974 20.2218 16.1562C20.184 16.3949 20.0604 16.6115 19.8751 16.7666C19.5965 16.9997 19.0869 17 18.0675 17H5.93173C4.91236 17 4.40266 16.9998 4.12411 16.7666C3.93892 16.6115 3.81615 16.3948 3.77841 16.1562C3.72179 15.7974 3.98335 15.3596 4.5079 14.4854L5.08603 13.5225C5.10095 13.4976 5.10896 13.485 5.1163 13.4727C5.69474 12.5007 6.06059 11.4167 6.18954 10.293C6.19117 10.2788 6.19221 10.264 6.1954 10.2354L6.44735 7.96973C6.7617 5.14063 9.15358 3 12.0001 3ZM16.2745 4.99121C16.9598 5.80518 17.4181 6.82049 17.5479 7.94629C16.6613 7.74127 16.0001 6.94899 16.0001 6C16.0001 5.63171 16.1008 5.28756 16.2745 4.99121Z" fill="currentColor"/>
+<path d="M9 17C9 17.394 9.0776 17.7841 9.22836 18.1481C9.37913 18.512 9.6001 18.8427 9.87868 19.1213C10.1573 19.3999 10.488 19.6209 10.8519 19.7716C11.2159 19.9224 11.606 20 12 20C12.394 20 12.7841 19.9224 13.1481 19.7716C13.512 19.6209 13.8427 19.3999 14.1213 19.1213C14.3999 18.8427 14.6209 18.512 14.7716 18.1481C14.9224 17.7841 15 17.394 15 17L12 17H9Z" fill="currentColor"/>
+<circle cx="18" cy="6" r="2.5" fill="currentColor" stroke="currentColor"/>
 </svg>
diff --git a/src/shared/assets/icons/close_20.svg b/src/shared/assets/icons/close_20.svg
@@ -1,4 +1,4 @@
 <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M15 5L5 15" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M5 5L15 15" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15 5L5 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5 5L15 15" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/shared/assets/icons/close_32.svg b/src/shared/assets/icons/close_32.svg
@@ -1,4 +1,4 @@
 <svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24 8L8 24" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
-<path d="M8 8L24 24" stroke="current" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24 8L8 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 8L24 24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 </svg>
diff --git a/src/shared/assets/icons/sign_in_24.svg b/src/shared/assets/icons/sign_in_24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M4.92893 19.0711C6.32746 20.4696 8.10929 21.422 10.0491 21.8079C11.9889 22.1937 13.9996 21.9957 15.8268 21.2388C17.6541 20.4819 19.2159 19.2002 20.3147 17.5557C21.4135 15.9112 22 13.9778 22 12C22 10.0222 21.4135 8.08879 20.3147 6.4443C19.2159 4.79981 17.6541 3.51808 15.8268 2.76121C13.9996 2.00433 11.9889 1.8063 10.0491 2.19215C8.10929 2.578 6.32746 3.53041 4.92893 4.92893" stroke="currentColor" stroke-width="2"/>
+<path d="M15 12L15.7809 11.3753L16.2806 12L15.7809 12.6247L15 12ZM3 13C2.44771 13 2 12.5523 2 12C2 11.4477 2.44771 11 3 11V12V13ZM11 7L11.7809 6.3753L15.7809 11.3753L15 12L14.2191 12.6247L10.2191 7.6247L11 7ZM15 12L15.7809 12.6247L11.7809 17.6247L11 17L10.2191 16.3753L14.2191 11.3753L15 12ZM15 12V13H3V12V11H15V12Z" fill="currentColor"/>
+</svg>
diff --git a/src/shared/assets/icons/sign_out_24.svg b/src/shared/assets/icons/sign_out_24.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18.9282C9.21615 19.6303 10.5957 20 12 20C13.4043 20 14.7838 19.6303 16 18.9282C17.2162 18.2261 18.2261 17.2162 18.9282 16C19.6303 14.7838 20 13.4043 20 12C20 10.5957 19.6303 9.21615 18.9282 8C18.2261 6.78385 17.2162 5.77394 16 5.0718C14.7838 4.36965 13.4043 4 12 4C10.5957 4 9.21615 4.36965 8 5.0718" stroke="currentColor" stroke-width="2"/>
+<path d="M2 12L1.21913 11.3753L0.719375 12L1.21913 12.6247L2 12ZM11 13C11.5523 13 12 12.5523 12 12C12 11.4477 11.5523 11 11 11V12V13ZM6 7L5.21913 6.3753L1.21913 11.3753L2 12L2.78087 12.6247L6.78087 7.6247L6 7ZM2 12L1.21913 12.6247L5.21913 17.6247L6 17L6.78087 16.3753L2.78087 11.3753L2 12ZM2 12V13H11V12V11H2V12Z" fill="currentColor"/>
+</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
@@ -1,4 +1,4 @@
-<svg width="28" height="28" viewBox="0 0 24 24" fill="current" xmlns="http://www.w3.org/2000/svg">
-<circle cx="12" cy="8" r="4" fill="current"/>
-<path d="M5.33788 17.3206C5.99897 14.5269 8.77173 13 11.6426 13H12.3574C15.2283 13 18.001 14.5269 18.6621 17.3206C18.79 17.8611 18.8917 18.4268 18.9489 19.0016C19.0036 19.5512 18.5523 20 18 20H6C5.44772 20 4.99642 19.5512 5.0511 19.0016C5.1083 18.4268 5.20997 17.8611 5.33788 17.3206Z" fill="current"/>
+<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="8" r="4" fill="currentColor"/>
+<path d="M5.33788 17.3206C5.99897 14.5269 8.77173 13 11.6426 13H12.3574C15.2283 13 18.001 14.5269 18.6621 17.3206C18.79 17.8611 18.8917 18.4268 18.9489 19.0016C19.0036 19.5512 18.5523 20 18 20H6C5.44772 20 4.99642 19.5512 5.0511 19.0016C5.1083 18.4268 5.20997 17.8611 5.33788 17.3206Z" fill="currentColor"/>
 </svg>
diff --git a/src/shared/components/footer/Footer.tsx b/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/shared/components/footer/Github.tsx b/src/shared/components/footer/Github.tsx
diff --git a/src/shared/components/header/DropdownMenu.tsx b/src/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/shared/components/header/HamburgerMenu.tsx b/src/shared/components/header/HamburgerMenu.tsx
diff --git a/src/shared/components/header/Header.tsx b/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/shared/components/header/HeaderBtn.tsx b/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/shared/components/header/NavItem.tsx b/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;
+  }
 }
