로그인페이지 리뉴얼얼

logo 적용용
chevron 적용용
2025-11-05 17:40:56 +09:00 · 2025-11-05 16:34:25 +09:00 · 2025-11-05 16:15:17 +09:00 · 2025-11-05 15:48:40 +09:00 · 2025-11-05 15:46:16 +09:00 · 2025-11-05 15:41:25 +09:00
10 changed files with 226 additions and 187 deletions
--- a/.cursor/work/mainpagework.md
+++ b/.cursor/work/mainpagework.md
@@ -0,0 +1,38 @@
+[✅] 1. **전체 페이지 수직 분할 (기본 구조)**
+* `<body>` 또는 최상위 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`로 정렬을 변경할 수 있습니다.
--- 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;
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -38,7 +38,7 @@ export default function LoginPage() {
          </div>

          {/* 체크박스 */}
-          <div className="flex items-center space-x-4">
+          <div className="flex items-center space-x-4 justify-start">
            <label className="flex items-center">
              <input type="checkbox" className="mr-2" />
              <span className="text-sm">아이디 기억하기</span>
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,166 +1,165 @@
+"use client";
+
 import Link from "next/link";

-export default function Home() {
+// 이미지 상수
+const imgLogo = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
+
+type CheckboxProps = {
+  className?: string;
+  status?: "Inactive" | "Focused" | "Disabled";
+};
+
+function Checkbox({ className, status = "Inactive" }: CheckboxProps) {
  return (
-    <div className="min-h-screen bg-white">
-      {/* 헤더 */}
-      <header className="bg-white shadow-sm sticky top-0 z-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="flex justify-between items-center h-16">
-            <div className="flex items-center">
-              <h1 className="text-2xl font-bold text-blue-600">XR LMS</h1>
-            </div>
-            <nav className="hidden md:flex space-x-8">
-              <Link href="#" className="text-gray-700 hover:text-blue-600 transition">강의</Link>
-              <Link href="#" className="text-gray-700 hover:text-blue-600 transition">커뮤니티</Link>
-              <Link href="#" className="text-gray-700 hover:text-blue-600 transition">공지사항</Link>
-              <Link href="#" className="text-gray-700 hover:text-blue-600 transition">마이페이지</Link>
-            </nav>
-            <div className="flex items-center space-x-4">
-              <Link
-                href="/registeragreement"
-                className="px-4 py-2 text-gray-700 hover:text-blue-600 transition"
-              >
-                회원가입
-              </Link>
-              <Link 
-                href="/login"
-                className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition"
-              >
-                로그인
-              </Link>
-            </div>
-          </div>
-        </div>
-      </header>
-
-      {/* 히어로 섹션 */}
-      <section className="bg-gradient-to-r from-blue-600 to-purple-600 text-white py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
-          <h2 className="text-5xl font-bold mb-6">
-            혁신적인 XR 학습 플랫폼
-          </h2>
-          <p className="text-xl mb-8 text-blue-100">
-            몰입형 경험을 통해 새로운 차원의 학습을 시작하세요
-          </p>
-          <div className="flex justify-center space-x-4">
-            <Link
-              href="/login"
-              className="px-8 py-3 bg-white text-blue-600 rounded-lg font-semibold hover:bg-gray-100 transition"
-            >
-              시작하기
-            </Link>
-            <button className="px-8 py-3 bg-transparent border-2 border-white text-white rounded-lg font-semibold hover:bg-white hover:text-blue-600 transition">
-              알아보기
-            </button>
-          </div>
-        </div>
-      </section>
-
-      {/* 주요 기능 */}
-      <section className="py-20 bg-gray-50">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h3 className="text-3xl font-bold text-center mb-12">주요 기능</h3>
-          <div className="grid md:grid-cols-3 gap-8">
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
-              <div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
-                </svg>
-              </div>
-              <h4 className="text-xl font-semibold mb-2">다양한 강의</h4>
-              <p className="text-gray-600">
-                XR 기술을 활용한 몰입형 학습 경험을 제공합니다
-              </p>
-            </div>
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
-              <div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z" />
-                </svg>
-              </div>
-              <h4 className="text-xl font-semibold mb-2">커뮤니티</h4>
-              <p className="text-gray-600">
-                학습자들과 함께 소통하고 경험을 공유하세요
-              </p>
-            </div>
-            <div className="bg-white p-6 rounded-lg shadow-md hover:shadow-lg transition">
-              <div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-4">
-                <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
-                </svg>
-              </div>
-              <h4 className="text-xl font-semibold mb-2">학습 추적</h4>
-              <p className="text-gray-600">
-                진도율과 성취도를 한눈에 확인하고 관리하세요
-              </p>
-            </div>
-          </div>
-        </div>
-      </section>
-
-      {/* 인기 강의 */}
-      <section className="py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <h3 className="text-3xl font-bold text-center mb-12">인기 강의</h3>
-          <div className="grid md:grid-cols-4 gap-6">
-            {[1, 2, 3, 4].map((item) => (
-              <div key={item} className="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition cursor-pointer">
-                <div className="h-48 bg-gradient-to-br from-blue-400 to-purple-500"></div>
-                <div className="p-4">
-                  <h4 className="font-semibold mb-2">XR 기초 강의 {item}</h4>
-                  <p className="text-sm text-gray-600 mb-2">강사명 • {item * 10}명 수강</p>
-                  <div className="flex items-center justify-between">
-                    <span className="text-blue-600 font-semibold">무료</span>
-                    <span className="text-yellow-500">⭐ 4.{item + 5}</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </section>
-
-      {/* 푸터 */}
-      <footer className="bg-gray-900 text-white py-12">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid md:grid-cols-4 gap-8">
-            <div>
-              <h4 className="text-xl font-bold mb-4">XR LMS</h4>
-              <p className="text-gray-400 text-sm">
-                혁신적인 학습 경험을 제공하는 플랫폼
-              </p>
-            </div>
-            <div>
-              <h5 className="font-semibold mb-4">학습</h5>
-              <ul className="space-y-2 text-sm text-gray-400">
-                <li><Link href="#" className="hover:text-white transition">강의 목록</Link></li>
-                <li><Link href="#" className="hover:text-white transition">카테고리</Link></li>
-                <li><Link href="#" className="hover:text-white transition">신규 강의</Link></li>
-              </ul>
-            </div>
-            <div>
-              <h5 className="font-semibold mb-4">지원</h5>
-              <ul className="space-y-2 text-sm text-gray-400">
-                <li><Link href="#" className="hover:text-white transition">공지사항</Link></li>
-                <li><Link href="#" className="hover:text-white transition">FAQ</Link></li>
-                <li><Link href="#" className="hover:text-white transition">문의하기</Link></li>
-              </ul>
-            </div>
-            <div>
-              <h5 className="font-semibold mb-4">회사</h5>
-              <ul className="space-y-2 text-sm text-gray-400">
-                <li><Link href="#" className="hover:text-white transition">소개</Link></li>
-                <li><Link href="#" className="hover:text-white transition">이용약관</Link></li>
-                <li><Link href="#" className="hover:text-white transition">개인정보처리방침</Link></li>
-              </ul>
-            </div>
-          </div>
-          <div className="mt-8 pt-8 border-t border-gray-800 text-center text-sm text-gray-400">
-            © 2024 XR LMS. All rights reserved.
-          </div>
-        </div>
-      </footer>
+    <div className={className}>
+      <div className="absolute border border-[#b9b9b9] border-solid left-0 rounded-[4px] size-[18px] top-0" />
+    </div>
+  );
+}
+
+export default function LoginPage() {
+  return (
+    <div className="bg-white min-h-screen flex flex-col items-center justify-center py-8">
+      {/* 로고 */}
+      <div className="mb-16 w-[179px] h-[185px] flex items-center justify-center">
+        <div className="relative w-full h-full overflow-hidden pointer-events-none">
+          <img
+            alt="Logo"
+            className="absolute h-[291.74%] left-[-100%] max-w-none top-[-95.73%] w-[301.18%]"
+            src={imgLogo}
+          />
+        </div>
+      </div>
+
+      {/* 콘텐츠 영역 */}
+      <div className="flex flex-col gap-[54px] items-center w-full max-w-[480px] px-4">
+        {/* 입력 폼 영역 */}
+        <div className="flex flex-col gap-[20px] items-start w-full">
+          {/* 아이디 입력 필드 */}
+          <div className="flex flex-col gap-[8px] items-center w-full">
+            <div className="flex flex-col gap-[4px] items-center w-full">
+              <div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
+                <div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
+                  <input
+                    type="text"
+                    placeholder="아이디(이메일)"
+                    className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
+                    style={{ fontVariationSettings: "'wght' 500" }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 비밀번호 입력 필드 */}
+          <div className="flex flex-col gap-[8px] items-center w-full">
+            <div className="flex flex-col gap-[4px] items-center rounded-[8px] w-full">
+              <div className="bg-white border border-[#b9b9b9] border-solid relative rounded-[8px] w-full">
+                <div className="box-border flex gap-[10px] items-center px-[16px] py-[10px] rounded-[inherit] w-full">
+                  <input
+                    type="password"
+                    placeholder="비밀번호"
+                    className="basis-0 font-['Pretendard_Variable',sans-serif] grow leading-[1.6] min-h-px min-w-px not-italic overflow-ellipsis overflow-hidden relative shrink-0 text-[16px] text-[#b9b9b9] w-full outline-none bg-transparent"
+                    style={{ fontVariationSettings: "'wght' 500" }}
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* 체크박스 영역 */}
+          <div className="flex gap-[46px] items-center justify-start w-full">
+            <div className="flex gap-[10px] items-center">
+              <Checkbox className="relative shrink-0 size-[18px]" />
+              <p
+                className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
+                style={{ fontVariationSettings: "'wght' 500" }}
+              >
+                아이디 기억하기
+              </p>
+            </div>
+            <div className="flex gap-[10px] items-center">
+              <Checkbox className="relative shrink-0 size-[18px]" />
+              <p
+                className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[14px] text-[#515151] whitespace-pre"
+                style={{ fontVariationSettings: "'wght' 500" }}
+              >
+                자동 로그인
+              </p>
+            </div>
+          </div>
+        </div>
+
+        {/* 로그인 버튼 */}
+        <div className="flex flex-col gap-[16px] items-center w-full">
+          <button
+            type="submit"
+            className="bg-[#2b82e8] box-border flex gap-[10px] items-center justify-center px-[120px] py-[13px] rounded-[8px] w-full hover:bg-[#1e6bc7] transition-colors"
+          >
+            <p
+              className="font-['Pretendard_Variable',sans-serif] leading-[1.6] not-italic relative shrink-0 text-[16px] text-white text-center whitespace-pre"
+              style={{ fontVariationSettings: "'wght' 700" }}
+            >
+              로그인
+            </p>
+          </button>
+        </div>
+      </div>
+
+      {/* 하단 링크 영역 */}
+      <div className="mt-8 flex gap-[6px] items-center justify-center flex-wrap">
+        <Link
+          href="/registeragreement"
+          className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] hover:opacity-80 transition-opacity"
+        >
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            회원가입
+          </p>
+        </Link>
+        <div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            |
+          </p>
+        </div>
+        <button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            아이디 찾기
+          </p>
+        </button>
+        <div className="box-border flex gap-[10px] h-[46px] items-center justify-center px-0 py-[13px] shrink-0">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            |
+          </p>
+        </div>
+        <button className="box-border flex gap-[10px] h-[46px] items-center justify-center py-[13px] shrink-0 hover:opacity-80 transition-opacity cursor-pointer">
+          <p
+            className="font-['Pretendard_Variable',sans-serif] leading-[normal] not-italic relative shrink-0 text-[#515151] text-[12px] text-center whitespace-pre"
+            style={{ fontVariationSettings: "'wght' 500" }}
+          >
+            비밀번호 재설정
+          </p>
+        </button>
+      </div>
+
+      {/* 카피라이트 */}
+      <div className="mt-8 flex flex-col font-['Pretendard','Noto_Sans',sans-serif] justify-center text-[16px] text-[rgba(0,0,0,0.55)] text-center tracking-[-0.08px]">
+        <p className="leading-[1.45] whitespace-pre" style={{ fontVariationSettings: "'CTGR' 0, 'wdth' 100, 'wght' 500" }}>
+          Copyright ⓒ 2025 XL LMS. All rights reserved
+        </p>
+      </div>
    </div>
  );
 }
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,13 +14,13 @@
      },
      "devDependencies": {
        "@tailwindcss/postcss": "^4",
-        "@types/node": "^20",
-        "@types/react": "^19",
+        "@types/node": "20.19.24",
+        "@types/react": "19.2.2",
        "@types/react-dom": "^19",
        "eslint": "^9",
        "eslint-config-next": "16.0.1",
        "tailwindcss": "^4",
-        "typescript": "^5"
+        "typescript": "5.9.3"
      }
    },
    "node_modules/@alloc/quick-lru": {
@@ -67,7 +67,6 @@
      "integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.27.1",
        "@babel/generator": "^7.28.5",
@@ -1524,7 +1523,6 @@
      "integrity": "sha512-6mDvHUFSjyT2B2yeNx2nUgMxh9LtOWvkhIU3uePn2I2oyNymUAX1NIsdgviM4CH+JSrp2D2hsMvJOkxY+0wNRA==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "csstype": "^3.0.2"
      }
@@ -1585,7 +1583,6 @@
      "integrity": "sha512-BnOroVl1SgrPLywqxyqdJ4l3S2MsKVLDVxZvjI1Eoe8ev2r3kGDo+PcMihNmDE+6/KjkTubSJnmqGZZjQSBq/g==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@typescript-eslint/scope-manager": "8.46.2",
        "@typescript-eslint/types": "8.46.2",
@@ -2116,7 +2113,6 @@
      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2458,7 +2454,6 @@
        }
      ],
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "baseline-browser-mapping": "^2.8.19",
        "caniuse-lite": "^1.0.30001751",
@@ -3026,7 +3021,6 @@
      "integrity": "sha512-t5aPOpmtJcZcz5UJyY2GbvpDlsK5E8JqRqoKtfiKE3cNh437KIqfJr3A3AKf5k64NPx6d0G3dno6XDY05PqPtw==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.8.0",
        "@eslint-community/regexpp": "^4.12.1",
@@ -5390,7 +5384,6 @@
      "resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
      "integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=0.10.0"
      }
@@ -5400,7 +5393,6 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
      "integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
      "license": "MIT",
-      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -6087,7 +6079,6 @@
      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "engines": {
        "node": ">=12"
      },
@@ -6250,7 +6241,6 @@
      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
      "dev": true,
      "license": "Apache-2.0",
-      "peer": true,
      "bin": {
        "tsc": "bin/tsc",
        "tsserver": "bin/tsserver"
@@ -6526,7 +6516,6 @@
      "integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
      "dev": true,
      "license": "MIT",
-      "peer": true,
      "funding": {
        "url": "https://github.com/sponsors/colinhacks"
      }
--- a/package.json
+++ b/package.json
@@ -9,18 +9,18 @@
    "lint": "eslint"
  },
  "dependencies": {
+    "next": "16.0.1",
    "react": "19.2.0",
-    "react-dom": "19.2.0",
-    "next": "16.0.1"
+    "react-dom": "19.2.0"
  },
  "devDependencies": {
-    "typescript": "^5",
-    "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
    "@tailwindcss/postcss": "^4",
-    "tailwindcss": "^4",
+    "@types/node": "20.19.24",
+    "@types/react": "19.2.2",
+    "@types/react-dom": "^19",
    "eslint": "^9",
-    "eslint-config-next": "16.0.1"
+    "eslint-config-next": "16.0.1",
+    "tailwindcss": "^4",
+    "typescript": "5.9.3"
  }
 }
--- a/public/chevron.svg
+++ b/public/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289Z" fill="#5F5F5F"/>
+</svg>
--- a/public/hero.png
+++ b/public/hero.png
--- a/public/logo.png
+++ b/public/logo.png
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,7 +1,11 @@
 {
  "compilerOptions": {
    "target": "ES2017",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
@@ -19,7 +23,9 @@
      }
    ],
    "paths": {
-      "@/*": ["./*"]
+      "@/*": [
+        "./*"
+      ]
    }
  },
  "include": [
@@ -30,5 +36,7 @@
    ".next/dev/types/**/*.ts",
    "**/*.mts"
  ],
-  "exclude": ["node_modules"]
+  "exclude": [
+    "node_modules"
+  ]
 }
Author	SHA1	Message	Date
wallace	86a9e1e17f	로그인페이지 리뉴얼얼	2025-11-05 17:40:56 +09:00
wallace	7639c027e3	logo 적용용	2025-11-05 16:34:25 +09:00
wallace	c524626a00	chevron 적용용	2025-11-05 16:15:17 +09:00
wallace	4663dd5ba6	메인페이지지	2025-11-05 15:48:40 +09:00
wallace	ef82f69edc	메인 헤더 수정중	2025-11-05 15:46:16 +09:00
wallace	bfee0c4717	feat: implement page vertical layout structure - add flex column to body, set min-height 100vh, complete mainpagework item 1	2025-11-05 15:41:25 +09:00