Post와 관련된 layout을 페이지별로 분리 - #145

src/app/(auth)/_components/AuthHeader.module.scss

@@ -0,0 +1,48 @@
+@import '@/styles/variables/colors.scss';
+@import '@/styles/variables/textSize.scss';
+@import '@/styles/variables/fontWeight.scss';
+@import '@/styles/variables/zIndex.scss';
+
+.container {
+  position: sticky;
+  z-index: $header;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  padding: 0 24px;
+  height: 60px;
+  margin: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: $bgWhite;
+}
+
+.left {
+  position: absolute;
+  left: 24px;
+
+  button {
+    padding: 0;
+  }
+}
+
+.center {
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.right {
+  position: absolute;
+  right: 24px;
+
+  button {
+    padding: 0;
+  }
+}

src/app/(auth)/_components/AuthHeader.tsx

@@ -0,0 +1,71 @@
+'use client';
+
+import { useSelectedLayoutSegment } from 'next/navigation';
+
+import BackBtn from '@components/BackBtn';
+import Heading from '@/components/ui/Heading';
+import { ReactNode } from 'react';
+
+import s from './AuthHeader.module.scss';
+
+const headerConfig = {
+  login: {
+    title: '로그인',
+    goto: '/entry',
+  },
+  signup: {
+    title: '회원가입',
+    goto: '/entry',
+  },
+} as const;
+
+export default function AuthHeader() {
+  const segment = useSelectedLayoutSegment();
+
+  if (segment === 'entry') return null;
+
+  const { title, goto } = headerConfig[segment as keyof typeof headerConfig];
+
+  return (
+    <Header>
+      <Header.Left>
+        <BackBtn goto={goto} />
+      </Header.Left>
+      <Header.Center>
+        <Heading
+          as="h2"
+          fontSize="20px"
+          fontWeight="semiBold"
+          title={title}
+          color="black"
+        />
+      </Header.Center>
+    </Header>
+  );
+}
+
+interface HeaderProps {
+  children: ReactNode;
+}
+
+function Header({ children }: HeaderProps) {
+  return <header className={s.container}>{children}</header>;
+}
+
+Header.Left = function HeaderLeft({ children }: HeaderProps) {
+  if (!children) return null;
+
+  return <div className={s.left}>{children}</div>;
+};
+
+Header.Center = function HeaderCenter({ children }: HeaderProps) {
+  if (!children) return null;
+
+  return <div className={s.center}>{children}</div>;
+};
+
+Header.Right = function HeaderRight({ children }: HeaderProps) {
+  if (!children) return null;
+
+  return <div className={s.right}>{children}</div>;
+};

src/app/(auth)/entry/page.tsx

@@ -1,5 +1,8 @@
 import Link from 'next/link';
 import Image from 'next/image';
+import BoxButton from '@/components/ui/BoxButton';
+import Heading from '@/components/ui/Heading';
+
 import s from './page.module.scss';
 
 export default function EntryPage() {
@@ -16,15 +19,35 @@ export default function EntryPage() {
               priority
             />
             <h1 className={s.title}>WAGU BOOK</h1>
+            <Heading
+              as="h2"
+              fontSize="18px"
+              fontWeight="bold"
+              color="black"
+              title="너와 나의 맛집 기록"
+            />
           </div>
-          <h2 className={s.subTitle}>너와 나의 맛집 기록</h2>
         </div>
         <div className={s.btnArea}>
-          <Link className={s.signupBtn} href="/signup">
-            회원가입
+          <Link
+            style={{
+              width: '100%',
+            }}
+            href="/signup"
+          >
+            <BoxButton width="100%" height="56px" variant="fill">
+              회원가입
+            </BoxButton>
           </Link>
-          <Link className={s.loginBtn} href="/login">
-            로그인
+          <Link
+            style={{
+              width: '100%',
+            }}
+            href="/login"
+          >
+            <BoxButton width="100%" height="56px" variant="outline">
+              로그인
+            </BoxButton>
           </Link>
         </div>
       </div>

src/app/(auth)/layout.tsx

@@ -1,12 +1,13 @@
-import BackHeader from '@/components/BackHeader';
 import { ReactNode } from 'react';
 
+import AuthHeader from '@/app/(auth)/_components/AuthHeader';
+
 export default function layout({
   children,
 }: Readonly<{ children: ReactNode }>) {
   return (
     <div>
-      <BackHeader />
+      <AuthHeader />
       {children}
     </div>
   );

src/app/(auth)/login/page.tsx

@@ -47,6 +47,7 @@ export default function LoginPage() {
       <form className={s.form} onSubmit={handleSubmit}>
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="아이디"
           name="username"
           placeholder="아이디를 입력해 주세요"
@@ -55,6 +56,7 @@ export default function LoginPage() {
         />
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="비밀번호"
           name="password"
           placeholder="비밀번호를를 입력해 주세요"

src/app/(auth)/signup/page.module.scss

@@ -14,7 +14,7 @@
   justify-content: flex-start;
   align-items: center;
 
-  background-color: $bgColor;
+  background-color: $bgWhite;
 }
 
 .inputBox {

src/app/(auth)/signup/page.tsx

@@ -28,38 +28,43 @@ export default function SignupPage() {
       <form className={s.form} action={formAction}>
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="아이디"
           name="username"
           type="text"
           placeholder="아이디를 입력해 주세요"
         />
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="비밀번호"
           name="password"
           type="password"
           placeholder="비밀번호를 입력해 주세요"
         />
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="비밀번호 확인"
           name="passwordConfirm"
           type="password"
           placeholder="비밀번호를 다시 입력해 주세요"
         />
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="이름"
           name="name"
           type="text"
-          placeholder="이름을 입력해 주세요"
+          placeholder="실명을 입력해 주세요"
         />
         <InputBox
           className={s.inputBox}
+          height="56px"
           label="휴대폰 번호"
           name="phoneNumber"
           type="text"
-          placeholder="휴대폰 번호를 입력해 주세요"
+          placeholder="000-0000-0000"
         />
         {!signupState.succ && (
           <p className={s.message}>{signupState.message}</p>

src/app/(post)/layout.tsx

@@ -1,18 +1,13 @@
 'use client';
 
-import BackHeader from '@/components/BackHeader';
-import { useCheckSession } from '@/hooks/useCheckSession';
 import { ReactNode } from 'react';
 
+import { useCheckSession } from '@/hooks/useCheckSession';
+
 export default function Layout({
   children,
 }: Readonly<{ children: ReactNode }>) {
   useCheckSession();
 
-  return (
-    <>
-      <BackHeader />
-      {children}
-    </>
-  );
+  return <div>{children}</div>;
 }

src/app/(post)/posts/[postId]/page.tsx

@@ -11,7 +11,7 @@ import { CategoriesEN, ProfileWithoutFollowResponse } from '@/types';
 import { formatNumberToKRW } from '@/utils';
 import { UserIcon, WithText } from '@/components/UserIcon';
 import { PROFILE_IMG } from '@/constants/path';
-import PostHeader from './_components/PostHeader';
+import PostHeader from '../_components/PostHeader';
 
 import s from './page.module.scss';
 

src/app/(post)/store/[storeId]/layout.tsx

@@ -0,0 +1,14 @@
+import { ReactNode } from 'react';
+
+import Header from '@/components/Header';
+
+export default function StoreLayout({
+  children,
+}: Readonly<{ children: ReactNode }>) {
+  return (
+    <>
+      <Header />
+      {children}
+    </>
+  );
+}

src/app/(post)/write/_component/WritePageHeader.module.scss

@@ -0,0 +1,48 @@
+@import '@/styles/variables/colors.scss';
+@import '@/styles/variables/textSize.scss';
+@import '@/styles/variables/fontWeight.scss';
+@import '@/styles/variables/zIndex.scss';
+
+.container {
+  position: sticky;
+  z-index: $header;
+  top: 0;
+  left: 0;
+  right: 0;
+
+  padding: 0 24px;
+  height: 60px;
+  margin: 0;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: $bgWhite;
+}
+
+.left {
+  position: absolute;
+  left: 24px;
+
+  button {
+    padding: 0;
+  }
+}
+
+.center {
+  width: 100%;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.right {
+  position: absolute;
+  right: 24px;
+
+  button {
+    padding: 0;
+  }
+}