fix: gnb 활성문제

2026-06-30 11:32:39 +09:00 · 2026-06-30 11:32:39 +09:00 · 4f3b5bf1c2
parent cd43a209dd
commit 4f3b5bf1c2
6 changed files with 145 additions and 115 deletions
--- a/src/index.html
+++ b/src/index.html
@ -33,22 +33,22 @@
          <span class="gnb__hamburgerLine"></span>
        </button>
      </div>
-      <!-- 모바일 메뉴 -->
-      <nav class="gnb__mobileNav">
-        <button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
-          <span class="gnb__mobileNavCloseLine"></span>
-          <span class="gnb__mobileNavCloseLine"></span>
-        </button>
-        <ul class="gnb__mobileNavList">
-          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
-          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
-          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#history">HISTORY</a></li>
-          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#vision">VISION</a></li>
-          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
-          <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
-        </ul>
-      </nav>
    </header>
+    <!-- 모바일 메뉴 — header 밖에 위치해야 backdrop-filter containing block 이슈 방지 -->
+    <nav class="gnb__mobileNav">
+      <button class="gnb__mobileNavClose" aria-label="메뉴 닫기">
+        <span class="gnb__mobileNavCloseLine"></span>
+        <span class="gnb__mobileNavCloseLine"></span>
+      </button>
+      <ul class="gnb__mobileNavList">
+        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink isActive" href="#intro">HOME</a></li>
+        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#about">ABOUT US</a></li>
+        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#history">HISTORY</a></li>
+        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#vision">VISION</a></li>
+        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#project">PROJECTS</a></li>
+        <li class="gnb__mobileNavItem"><a class="gnb__mobileNavLink" href="#contact">CONTACT US</a></li>
+      </ul>
+    </nav>

    <main>
      <!-- 01. INTRO -->
@ -79,7 +79,7 @@
            </p>
            <div class="about__quote">
              <span class="about__quoteMark" aria-hidden="true">“</span>
-              <p class="about__quoteText">Creative Development Company<br />BODA.Lab</p>
+              <p class="about__quoteText">Creative Development<br class="divide mobile" />Company <br class="divide pc" />BODA.Lab</p>
            </div>
          </div>
          <ul class="about__expertiseList">
--- a/src/js/main.js
+++ b/src/js/main.js
@ -39,7 +39,7 @@ $(function () {
  });

  // 현재 섹션에 따라 GNB 활성화
-  const $navLinks = $(".gnb__navLink");
+  const $navLinks = $(".gnb__navLink, .gnb__mobileNavLink");
  const sections = $("section[id]").toArray();
  // 흰 배경 섹션 — 이 구간에서는 GNB를 다크 텍스트로 전환(흰 텍스트가 흰 배경에 묻히는 것 방지)
  const lightSections = ["history", "contact"];
@ -76,27 +76,28 @@ $(function () {
  updateActiveNav();

  // 섹션 이동 링크 클릭 시 Lenis로 부드럽게 스크롤
-  $(".gnb__navLink, .gnb__mobileNavLink, .gnb__logo, .scrollDown").on("click", function (e) {
+  $(".gnb__navLink, .gnb__mobileNavLink, .scrollDown").on("click", function (e) {
    e.preventDefault();
    lenis.scrollTo($(this).attr("href"));
  });

-  // 햄버거 메뉴
-  $hamburger.on("click", function () {
-    const isOpen = $hamburger.toggleClass("isOpen").hasClass("isOpen");
-    $hamburger.attr("aria-expanded", isOpen);
-    $mobileNav.toggleClass("isOpen", isOpen);
+  // 로고 클릭: 모바일에선 메뉴 토글, 데스크탑에선 intro로 스크롤
+  $(".gnb__logo").on("click", function (e) {
+    e.preventDefault();
+    if (window.matchMedia("(max-width: 768px)").matches) {
+      $mobileNav.toggleClass("isOpen");
+    } else {
+      lenis.scrollTo($(this).attr("href"));
+    }
  });

  // 모바일 메뉴 링크 클릭 시 닫기
  $(".gnb__mobileNavLink").on("click", function () {
-    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
    $mobileNav.removeClass("isOpen");
  });

  // 모바일 메뉴 닫기 버튼
  $mobileNavClose.on("click", function () {
-    $hamburger.removeClass("isOpen").attr("aria-expanded", false);
    $mobileNav.removeClass("isOpen");
  });

--- a/src/scss/page/_about.scss
+++ b/src/scss/page/_about.scss
@ -63,6 +63,18 @@
  font-weight: 100;
  line-height: 1.2;
  color: #ffffff;
+
+  &.divide {
+    display: none;
+
+    &.mobile {
+      display: none;
+    }
+
+    &.pc {
+      display: block;
+    }
+  }
 }

 .about__expertiseList {
@ -288,24 +300,41 @@
    padding: calc(#{$gnb-height-mo} + 40px) 20px 80px;
  }

-  // Figma 모바일: 헤드(타이틀+데스크+쿼트)→expertise 리스트 간격 160(PC base clamp는 그대로 둠)
  .about__inner {
    gap: 160px;
  }

-  // Figma 모바일: title→desc 간격 30(PC는 60, 기존 base 57px는 손대지 않음)
  .about__head .sectionTitle {
    margin-bottom: 30px;
  }

-  // Figma 모바일: desc→quote 간격 120(PC base 70px는 그대로 둠)
  .about__desc {
    margin-bottom: 120px;
  }

-  // Figma 모바일도 인용부호+텍스트가 PC와 동일하게 가로 배치 — 세로 스택 오버라이드 제거하고 좌우 인셋(30px)만 추가
  .about__quote {
-    padding: 0 30px;
+    position: relative;
+    display: block;
+    padding: 0 0 0 30px;
+  }
+
+  .about__quoteMark {
+    margin-top: -0.34em;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .about__quoteText {
+    .divide {
+      &.mobile {
+        display: block;
+      }
+
+      &.pc {
+        display: none;
+      }
+    }
  }

  .about__expertiseList {
--- a/src/scss/page/_contact.scss
+++ b/src/scss/page/_contact.scss
@ -334,7 +334,7 @@

 .privacyModal__head {
  display: flex;
-  align-items: flex-start;
+  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
--- a/src/scss/page/_gnb.scss
+++ b/src/scss/page/_gnb.scss
@ -53,6 +53,10 @@
  }
 }

+.gnb__mobileNav {
+  display: none;
+}
+
 .gnb__inner {
  display: flex;
  align-items: center;
@ -136,75 +140,90 @@
  transform: translateY(-6px) rotate(-45deg);
 }

-.gnb__mobileNav {
-  display: none;
-  position: fixed;
-  inset: 0;
-  z-index: 200;
-  background: #0d0d0d;
-  padding: 32px 32px 40px;
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.35s ease;
-
-  &.isOpen {
-    opacity: 1;
-    pointer-events: auto;
-  }
-}
-
-.gnb__mobileNavClose {
-  position: absolute;
-  top: 28px;
-  right: 28px;
-  width: 28px;
-  height: 28px;
-  background: none;
-  border: none;
-  padding: 0;
-  cursor: pointer;
-}
-
-.gnb__mobileNavCloseLine {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 100%;
-  height: 1px;
-  background: #ffffff;
-
-  &:nth-child(1) {
-    transform: rotate(45deg);
-  }
-  &:nth-child(2) {
-    transform: rotate(-45deg);
-  }
-}
-
-.gnb__mobileNavList {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  height: 100%;
-  gap: clamp(20px, 6vh, 36px);
-}
-
-.gnb__mobileNavLink {
-  display: block;
-  font-size: clamp(28px, 8vw, 36px);
-  font-weight: 400;
-  letter-spacing: 0.02em;
-  color: #ffffff;
-}
-
-.gnb__mobileNavLink.isActive {
-  color: #7796ff;
-}
-
@include mo {
  .gnb {
    top: 0;
  }
+  .gnb__inner {
+    padding: 0 20px;
+    height: 80px;
+  }
+
+  .gnb__nav {
+    display: none;
+  }
+
+  .gnb__hamburger {
+    display: none;
+  }
+
+  .gnb__mobileNav {
+    display: block;
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 200;
+    background: #0d0d0d;
+    padding: 32px 32px 40px;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.35s ease;
+
+    &.isOpen {
+      opacity: 1;
+      pointer-events: auto;
+    }
+  }
+
+  .gnb__mobileNavClose {
+    position: absolute;
+    top: 28px;
+    right: 28px;
+    width: 28px;
+    height: 28px;
+    background: none;
+    border: none;
+    padding: 0;
+    cursor: pointer;
+  }
+
+  .gnb__mobileNavCloseLine {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background: #ffffff;
+
+    &:nth-child(1) {
+      transform: rotate(45deg);
+    }
+    &:nth-child(2) {
+      transform: rotate(-45deg);
+    }
+  }
+
+  .gnb__mobileNavList {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    gap: clamp(20px, 6vh, 36px);
+  }
+
+  .gnb__mobileNavLink {
+    display: block;
+    font-size: clamp(28px, 8vw, 36px);
+    font-weight: 400;
+    letter-spacing: 0.02em;
+    color: #ffffff;
+  }
+
+  .gnb__mobileNavLink.isActive {
+    color: #7796ff;
+  }

  // Figma 모바일 전용 정사각 로고 마크(40x40)로 교체 — PC 워드마크는 숨김
  .gnb__logoImg--desktop {
--- a/src/scss/page/_intro.scss
+++ b/src/scss/page/_intro.scss
@ -41,22 +41,3 @@
  color: #ffffff;
  line-height: 0.8;
 }
-
-@include mo {
-  .gnb__inner {
-    padding: 0 20px;
-    height: 60px;
-  }
-
-  .gnb__nav {
-    display: none;
-  }
-
-  .gnb__hamburger {
-    display: flex;
-  }
-
-  .gnb__mobileNav {
-    display: block;
-  }
-}