🚀 Deploy 20260618-v0.1.54

CHANGELOG.json

@@ -1,14 +1,37 @@
 {
   "metadata": {
-    "lastUpdated": "2026-06-18T07:29:54Z",
-    "currentVersion": "0.1.53",
+    "lastUpdated": "2026-06-18T07:44:06Z",
+    "currentVersion": "0.1.54",
     "projectType": "react",
-    "totalReleases": 18,
+    "totalReleases": 19,
     "projectTypes": [
       "react"
     ]
   },
   "releases": [
+    {
+      "version": "0.1.54",
+      "project_type": "react",
+      "project_types": [
+        "react"
+      ],
+      "date": "2026-06-18",
+      "pr_number": 661,
+      "raw_summary": "## Summary by CodeRabbit\n\n## 릴리스 노트\n\n* **개선**\n  * PC에서 로그인 화면이 가운데 카드로 깔끔하게 표시됩니다\n  * 로그인 화면에서 상단 메뉴가 더 이상 보이지 않습니다\n  * 자료·질문 게시판이 넓은 화면에서도 보기 좋게 정렬됩니다\n  * 글쓰기 화면이 읽기 편한 너비로 정돈되었습니다\n  * 검색 화면에서 양옆 회색 여백이 사라졌습니다",
+      "parsed_changes": {
+        "개선": {
+          "title": "개선",
+          "items": [
+            "PC에서 로그인 화면이 가운데 카드로 깔끔하게 표시됩니다",
+            "로그인 화면에서 상단 메뉴가 더 이상 보이지 않습니다",
+            "자료·질문 게시판이 넓은 화면에서도 보기 좋게 정렬됩니다",
+            "글쓰기 화면이 읽기 편한 너비로 정돈되었습니다",
+            "검색 화면에서 양옆 회색 여백이 사라졌습니다"
+          ]
+        }
+      },
+      "parse_method": "markdown"
+    },
     {
       "version": "0.1.53",
       "project_type": "react",

CHANGELOG.md

@@ -1,7 +1,20 @@
 # Changelog
 
-**현재 버전:** 0.1.53  
-**마지막 업데이트:** 2026-06-18T07:29:54Z  
+**현재 버전:** 0.1.54  
+**마지막 업데이트:** 2026-06-18T07:44:06Z  
+
+---
+
+## [0.1.54] - 2026-06-18
+
+**PR:** #661  
+
+**개선**
+- PC에서 로그인 화면이 가운데 카드로 깔끔하게 표시됩니다
+- 로그인 화면에서 상단 메뉴가 더 이상 보이지 않습니다
+- 자료·질문 게시판이 넓은 화면에서도 보기 좋게 정렬됩니다
+- 글쓰기 화면이 읽기 편한 너비로 정돈되었습니다
+- 검색 화면에서 양옆 회색 여백이 사라졌습니다
 
 ---
 

README.md

@@ -1,7 +1,7 @@
 # 📚 세종말싸미 프론트엔드 📚
 
 <!-- AUTO-VERSION-SECTION: DO NOT EDIT MANUALLY -->
-## 최신 버전 : v0.1.52 (2026-06-18)
+## 최신 버전 : v0.1.53 (2026-06-18)
 
 [전체 버전 기록 보기](CHANGELOG.md)
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "malsami-fe",
-  "version": "0.1.53",
+  "version": "0.1.54",
   "private": true,
   "scripts": {
     "dev": "next dev",

src/app/ClientLayout.tsx

@@ -8,23 +8,30 @@ import GlobalLoginModal from "@/components/common/GlobalLoginModal";
 export default function ClientLayout({ children }: { children: React.ReactNode }) {
   const pathname = usePathname();
 
-  // 네비게이션 표시할 경로 리스트
+  // 모바일 하단 탭바를 표시할 경로 리스트 (메인 4개 페이지)
   const showNavPaths = ["/", "/board/question", "/board/document", "/mypage"];
   const shouldShowNav = showNavPaths.includes(pathname);
 
+  // 상단 글로벌 네비(PC)를 숨길 경로 — 로그인 등 인증 전·집중 화면.
+  // 그 외 모든 일반 페이지에서는 PC 상단 네비를 항상 노출해 어디서든 이동 가능하게 한다.
+  const hideTopNavPaths = ["/login"];
+  const shouldShowTopNav = !hideTopNavPaths.includes(pathname);
+
   return (
     <>
       {/* 통(중앙 고정 폭 컨테이너) 제거 — 폭 제한은 각 페이지가 콘텐츠 성격에 맞게 결정한다. */}
       <div className="min-h-screen bg-white">
-        {/* PC(lg+) 전용 상단 글로벌 네비 — 모바일에서는 숨김 */}
-        <GlobalTopNav />
+        {/* PC(lg+) 전용 상단 글로벌 네비 — 모바일에서는 숨김, 인증 전 화면(로그인)에서는 미표시 */}
+        {shouldShowTopNav && <GlobalTopNav />}
 
         {/*
           콘텐츠 영역.
           - 모바일: 하단 탭바가 보이는 경로면 탭바 높이(70px)만큼 하단 여백.
-          - PC: 상단 글로벌 네비 높이(h-16=64px)만큼 상단 여백, 하단 여백 없음.
+          - PC: 상단 글로벌 네비가 있는 경로에서만 네비 높이(h-16=64px)만큼 상단 여백.
         */}
-        <div className={`${shouldShowNav ? "pb-[70px] lg:pb-0" : ""} lg:pt-16`}>{children}</div>
+        <div className={`${shouldShowNav ? "pb-[70px] lg:pb-0" : ""} ${shouldShowTopNav ? "lg:pt-16" : ""}`}>
+          {children}
+        </div>
 
         {/* 하단 네비게이션바 - 모바일 전용 (PC는 GlobalTopNav 가 대체) */}
         {shouldShowNav && <CommonNav className="lg:hidden" />}

src/app/board/document/page.tsx

@@ -11,6 +11,7 @@ import DocumentRequestBoardSection from "@/components/documentMain/DocumentReque
 import TierBoardNavigateSection from "@/components/documentMain/TierBoardNavigateSection";
 import HotDocumentsSection from "@/components/landing/HotDocumentSection";
 import LandingHeader from "@/components/header/LandingHeader";
+import { PageContainer } from "@/components/layout/AppContainer";
 import SearchBar from "@/components/common/SearchBar";
 import Image from "next/image";
 
@@ -59,12 +60,12 @@ export default function DocumentBoardPage() {
   }, []);
 
   return (
-    <>
+    <div className="min-h-screen bg-white">
       {/* Header */}
       <LandingHeader contentType="document" />
 
       {/* Main Content */}
-      <main className="px-5">
+      <PageContainer width="wide" as="main" className="px-5">
         {/* 안내글 섹션 - 헤더로부터 40px 아래 */}
         <section aria-label="intro" className="mt-10">
           <div className="font-suit text-[24px] font-medium leading-[140%]">
@@ -125,10 +126,10 @@ export default function DocumentBoardPage() {
         <section aria-labelledby="document-request-board" className="mb-5">
           <DocumentRequestBoardSection />
         </section>
-      </main>
+      </PageContainer>
 
       {/* 플로팅 버튼 (자료 업로드) */}
       <UploadDocumentFAB isFABVisible={isFABVisible} />
-    </>
+    </div>
   );
 }

src/app/board/document/post/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from "react";
 import { useRouter } from "next/navigation";
 import CommonHeader from "@/components/header/CommonHeader";
+import { PageContainer } from "@/components/layout/AppContainer";
 import { RIGHT_ITEM } from "@/types/header";
 import subjects from "@/types/subjects";
 import { DOCUMENT_MEDIA_ALLOWED_TYPES } from "@/types/documentMediaAllowedTypes";
@@ -176,7 +177,7 @@ export default function DocumentPostPage() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col bg-white">
+    <PageContainer width="narrow" className="flex min-h-screen flex-col bg-white">
       <CommonHeader
         title="자료 작성하기"
         rightType={RIGHT_ITEM.NONE}
@@ -218,6 +219,6 @@ export default function DocumentPostPage() {
           </div>
         </main>
       </div>
-    </div>
+    </PageContainer>
   );
 }

src/app/board/question/page.tsx

@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 import LandingHeader from "@/components/header/LandingHeader";
+import { PageContainer } from "@/components/layout/AppContainer";
 import SearchBar from "@/components/common/SearchBar";
 import HotQuestionSection from "@/components/landing/HotQuestionSection";
 import MajorQuestionSection from "@/components/landing/MajorQuestionSection";
@@ -17,11 +18,11 @@ export default function QuestionPage() {
   const [bountyActiveTab, setBountyActiveTab] = useState<"최근순" | "높은순">("최근순");
 
   return (
-    <>
+    <div className="min-h-screen bg-white">
       <LandingHeader contentType="question" />
 
       {/* Main Content */}
-      <main className="px-5">
+      <PageContainer width="wide" as="main" className="px-5">
         {/* 안내글 섹션 - 헤더로부터 40px 아래 */}
         <section aria-label="intro" className="mt-10">
           <div className="text-SUIT_24 font-medium leading-[140%]">
@@ -77,10 +78,10 @@ export default function QuestionPage() {
             onViewAll={() => router.push("/board/question/bounty")}
           />
         </section>
-      </main>
+      </PageContainer>
 
       {/* 플로팅 버튼 (글쓰기) */}
       <UploadQuestionFAB isFABVisible />
-    </>
+    </div>
   );
 }

src/app/board/question/post/page.tsx

@@ -6,6 +6,7 @@ import subjects from "@/types/subjects";
 import LoadingSpinner from "@/components/common/LoadingSpinner";
 import useCommonToast from "@/global/hook/useCommonToast";
 import CommonHeader from "@/components/header/CommonHeader";
+import { PageContainer } from "@/components/layout/AppContainer";
 import { RIGHT_ITEM } from "@/types/header";
 import { QuestionPresetTag } from "@/types/api/constants/questionPresetTag";
 import { questionPostApi } from "@/apis/questionPostApi";
@@ -167,7 +168,7 @@ export default function QnaPostPage() {
   };
 
   return (
-    <div className="flex min-h-screen flex-col bg-white">
+    <PageContainer width="narrow" className="flex min-h-screen flex-col bg-white">
       <CommonHeader
         title="질문 작성하기"
         rightType={RIGHT_ITEM.NONE}
@@ -204,6 +205,6 @@ export default function QnaPostPage() {
           )}
         </div>
       </main>
-    </div>
+    </PageContainer>
   );
 }

src/app/login/page.tsx

@@ -35,12 +35,16 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="flex min-h-screen items-center justify-center bg-gray-100">
+    <div className="flex min-h-screen flex-col bg-white lg:items-center lg:justify-center lg:bg-gray-100">
       <ScrollToTopOnLoad />
-      <div className="relative flex h-screen w-full max-w-2xl flex-col bg-white">
+      {/*
+        모바일: 풀폭·풀높이 흰 화면.
+        PC(lg+): 회색 배경 중앙에 떠 있는 흰 카드(둥근 모서리·그림자·적당한 폭).
+      */}
+      <div className="relative flex min-h-screen w-full flex-col bg-white lg:min-h-0 lg:w-full lg:max-w-content-narrow lg:rounded-2xl lg:py-10 lg:shadow-xl">
         {/* 로딩/성공 오버레이 - 하나의 컨테이너로 통합 */}
         {overlayState !== "none" && (
-          <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-white">
+          <div className="absolute inset-0 z-50 flex flex-col items-center justify-center bg-white lg:rounded-2xl">
             {overlayState === "loading" ? (
               <>
                 <LoadingSpinner />
@@ -60,9 +64,12 @@ export default function LoginPage() {
             )}
           </div>
         )}
-        <CommonHeader title="로그인" rightType={RIGHT_ITEM.NONE} />
-        <div className="mt-5 h-full px-5">
-          <div className="flex h-full flex-col">
+        {/* 뒤로가기 헤더는 모바일 전용 — PC 카드에서는 숨긴다 */}
+        <div className="lg:hidden">
+          <CommonHeader title="로그인" rightType={RIGHT_ITEM.NONE} />
+        </div>
+        <div className="mt-5 h-full px-5 lg:mt-0 lg:h-auto lg:px-10">
+          <div className="flex h-full flex-col lg:h-auto">
             {/* 타이틀 */}
             <h1 className="mb-4 text-SUIT_24 font-medium text-black">
               환영합니다!{" "}

src/app/search/[query]/page.tsx

@@ -83,7 +83,7 @@ export default function SearchResultPage() {
   }, [searchParams]); // searchParams가 변경될 때마다 실행
 
   return (
-    <div className="flex min-h-screen justify-center bg-gray-100">
+    <div className="flex min-h-screen justify-center bg-white">
       <ScrollToTopOnLoad />
       <PageContainer width="wide" className="min-h-screen bg-white px-5">
         {/* 헤더 */}

src/app/search/page.tsx

@@ -11,9 +11,9 @@ export default function SearchPage() {
   const router = useRouter();
 
   return (
-    <div className="flex min-h-screen justify-center bg-gray-100">
+    <div className="flex min-h-screen justify-center bg-white">
       <ScrollToTopOnLoad />
-      <PageContainer width="wide" className="min-h-screen min-w-[386px] bg-white">
+      <PageContainer width="wide" className="min-h-screen bg-white">
         <CommonHeader title="검색" rightType={RIGHT_ITEM.NONE} />
         <div className="mb-1" />
         <div className="px-2">

src/components/layout/AppContainer.tsx

@@ -32,15 +32,20 @@ export type ContentWidth = keyof typeof CONTENT_WIDTH;
 interface PageContainerProps extends ContainerProps {
   // eslint-disable-next-line react/require-default-props
   width?: ContentWidth;
+  // 렌더할 시맨틱 태그 (기본 div). 리스트 본문 등에서 "main" 으로 쓸 수 있다.
+  // eslint-disable-next-line react/require-default-props
+  as?: "div" | "main" | "section";
 }
 
 /**
  * 페이지 본문 컨테이너.
  * 화면 중앙 정렬 + 콘텐츠 성격별 폭. 페이지는 폭을 직접 신경 쓰지 않고 이 컴포넌트로 감싼다.
  * width: "narrow"(본문/폼) | "wide"(리스트/홈) | "legacy"(기존 640/960, 기본값).
+ * as: 시맨틱 태그 지정(div|main|section, 기본 div).
  */
-export function PageContainer({ children, className = "", width = "legacy" }: PageContainerProps) {
-  return <div className={`relative mx-auto w-full ${CONTENT_WIDTH[width]} ${className}`}>{children}</div>;
+export function PageContainer({ children, className = "", width = "legacy", as = "div" }: PageContainerProps) {
+  const Tag = as;
+  return <Tag className={`relative mx-auto w-full ${CONTENT_WIDTH[width]} ${className}`}>{children}</Tag>;
 }
 
 /**

src/components/login/LoginForm.tsx

@@ -155,8 +155,8 @@ export default function LoginForm({ onShowLoading = () => {}, onShowSuccess, onH
           )}
         </div>
 
-        {/* 로그인 제출 버튼 */}
-        <div className="mb-10 mt-auto">
+        {/* 로그인 제출 버튼 — 모바일: 화면 바닥 밀착(mt-auto), PC 카드: 폼 흐름에 자연 배치 */}
+        <div className="mb-10 mt-auto lg:mb-0 lg:mt-12">
           <button
             type="submit"
             className={`w-full rounded-md py-4 text-SUIT_16 font-extrabold text-white ${

version.yml

@@ -34,14 +34,14 @@
 # - project_type은 최초 설정 후 변경하지 마세요
 # - 버전은 항상 높은 버전으로 자동 동기화됩니다
 # ===================================================================
-version: "0.1.53"
-version_code: 2 # app build number
+version: "0.1.54"
+version_code: 3 # app build number
 project_types: ["react"] # 멀티타입 배열 — 첫 항목이 primary, 직접 편집 가능
 project_type: "react" # project_types[0] 자동 미러 — 직접 수정 금지 (spring, flutter, next, react, react-native, react-native-expo, node, python, basic)
 project_paths: # 타입별 프로젝트 폴더 (레포 루트 기준 상대경로)
   react: "." # package.json
 metadata:
-  last_updated: "2026-06-18 05:55:48"
+  last_updated: "2026-06-18 07:42:35"
   last_updated_by: "Cassiiopeia"
   default_branch: "main"
   integrated_from: "SUH-DEVOPS-TEMPLATE"