From bfee0c47176009b0e244120b7abdd6306500db07 Mon Sep 17 00:00:00 2001 From: wallace Date: Wed, 5 Nov 2025 15:41:25 +0900 Subject: [PATCH] feat: implement page vertical layout structure - add flex column to body, set min-height 100vh, complete mainpagework item 1 --- .cursor/work/mainpagework.md | 38 ++++++++++++++++++++++++++++++++++++ app/globals.css | 4 +++- app/page.tsx | 2 +- 3 files changed, 42 insertions(+), 2 deletions(-) diff --git a/.cursor/work/mainpagework.md b/.cursor/work/mainpagework.md index e69de29..53d5b30 100644 --- a/.cursor/work/mainpagework.md +++ b/.cursor/work/mainpagework.md @@ -0,0 +1,38 @@ +[✅] 1. **전체 페이지 수직 분할 (기본 구조)** +* `` 또는 최상위 wrapper div에 `display: flex`와 `flex-direction: column`을 적용합니다. +* 이는 페이지 전체를 **[헤더]**, **[메인 콘텐츠]**, **[푸터]** 3개의 큰 영역으로 수직 정렬하기 위함입니다. +* `min-height: 100vh`를 설정하여 콘텐츠가 적어도 화면 전체 높이를 차지하도록 합니다. + +[] 2. **헤더 (Navigation Bar) 영역** +* `display: flex`, `flex-direction: row`, `justify-content: space-between`을 사용하여 **로고/메뉴 그룹**과 **사용자 메뉴(내 강의실, 프로필) 그룹**을 양쪽 끝으로 배치합니다. +* 로고/메뉴 그룹 내부도 `display: flex`, `align-items: center`로 로고와 메뉴 항목들을 정렬합니다. +* **[반응형]** 모바일 화면(@media 쿼리 사용)에서는 메뉴 항목들을 숨기고 햄버거 메뉴 아이콘을 표시하도록 처리합니다. + +[] 3. **메인 콘텐츠 상단 (Hero + Sidebar) 영역** +* `main` 태그 내부에 `display: flex`, `flex-direction: row`를 가진 컨테이너를 생성합니다. +* 이 컨테이너는 **Hero 배너(좌측)**와 **사이드바(우측)** 두 부분으로 가로 분할됩니다. +* **[반응형]** 모바일 화면에서는 `flex-direction: column`으로 변경하여 사이드바가 Hero 배너 하단으로 이동하도록 순서를 조정합니다. + +[] 4. **Hero 배너 (메인 좌측)** +* Hero 배너 영역에 `flex-grow: 1`을 설정하여, 사이드바의 너비를 제외한 나머지 공간을 모두 차지하도록 합니다. +* 배너 컨테이너에 `position: relative`를, "미래 에너지, 안전의 길을 열다" 텍스트 박스에 `position: absolute`를 적용하여 텍스트를 이미지 위에 오버레이합니다. + +[] 5. **우측 사이드바 (나의 수강현황, 최근 수강 과목)** +* 사이드바 영역에 `flex-basis` 또는 `width`를 사용해 고정된 너비(예: `300px`)를 지정합니다. +* '나의 수강현황'과 '최근 수강 과목' 두 섹션은 `display: flex`, `flex-direction: column`으로 수직 정렬합니다. +* '나의 수강현황' 내부의 4개 통계(수강중, 수강완료 등)는 `display: flex`, `justify-content: space-around`로 균등하게 배치합니다. + +[] 6. **전체 과목 리스트 (메인 중단)** +* "전체 과목" 타이틀과 "지도보기" 링크를 `display: flex`, `justify-content: space-between`으로 배치합니다. +* 과목 카드 리스트는 `display: flex`, `flex-wrap: wrap`을 설정하여 카드들이 자동으로 다음 줄로 넘어가도록 합니다. +* 각 과목 카드에는 `flex-basis`를 사용해 너비를 지정합니다. (예: `flex-basis: 24%`, 4개 배치. `gap`으로 간격 조절) +* **[반응형]** 화면 크기에 따라 `flex-basis` 값을 변경합니다. (예: 태블릿 `48%`, 모바일 `100%`) + +[] 7. **공지사항 (메인 하단)** +* "공지사항" 타이틀과 "더보기" 링크를 `display: flex`, `justify-content: space-between`으로 배치합니다. +* 각 공지사항 항목(카테고리, 제목, 날짜) 역시 `display: flex`, `justify-content: space-between`을 사용하여 깔끔하게 정렬합니다. + +[] 8. **푸터 (Footer) 영역** +* `display: flex`, `flex-direction: row`, `justify-content: space-between`을 사용하여 **로고/주소/고객센터 정보** 그룹과 **저작권** 텍스트를 배치합니다. +* `flex-wrap: wrap`을 추가하여 화면이 좁아질 때 유연하게 대응합니다. +* **[반응형]** 모바일에서는 `flex-direction: column`으로 변경하고 `align-items: center` 또는 `flex-start`로 정렬을 변경할 수 있습니다. \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index a22f322..282fe5a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -32,7 +32,9 @@ } body { - height: 100vh; + display: flex; + flex-direction: column; + min-height: 100vh; background: var(--background); color: var(--foreground); font-family: Arial, Helvetica, sans-serif; diff --git a/app/page.tsx b/app/page.tsx index a87c7dc..2200483 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -2,7 +2,7 @@ import Link from "next/link"; export default function Home() { return ( -
+
{/* 헤더 */}