palnetworks
/
pal-hom-2026
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

헤더 다국어 토글 추가

remotes/origin/main
김지은 2 months ago
parent
7b1efbcc9f
commit
2ce0c29f28
2 changed files with 37 additions and 6 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/components/Header.jsx
  2. 21
      src/css/header.css

22
src/components/Header.jsx
Unescape View File

@ -331,12 +331,13 @@ export default function PalRenewalHeader() {
</nav>
<div className="pal-header-util">
<div className="pal-header-lang">
<button type="button" className="is-active">
<div className="pal-header-lang" role="group" aria-label="언어 선택">
<button type="button" className="pal-header-lang-btn is-active" aria-pressed="true">
KOR
</button>
<span className="pal-header-lang-divider">|</span>
<button type="button">ENG</button>
<button type="button" className="pal-header-lang-btn" aria-pressed="false">
ENG
</button>
</div>
<button type="button" className={`pal-header-hamburger ${isMobileMenuOpen ? "is-active" : ""}`} aria-label={isMobileMenuOpen ? "모바일 메뉴 닫기" : "모바일 메뉴 열기"} aria-expanded={isMobileMenuOpen} aria-controls="pal-mobile-menu" onClick={toggleMobileMenu}>
@ -454,7 +455,18 @@ export default function PalRenewalHeader() {
);
})}
</ul>
{/* 모바일 언어 토글 */}
<div className="pal-mobile-lang">
<span className="pal-mobile-lang-label">Language</span>
<div className="pal-mobile-lang-toggle" role="group" aria-label="언어 선택">
<button type="button" className="pal-mobile-lang-btn is-active" aria-pressed="true">
KOR
</button>
<button type="button" className="pal-mobile-lang-btn" aria-pressed="false">
ENG
</button>
</div>
</div>
<div className="pal-mobile-contact-box">
<p>프로젝트 문의 및 협업 상담이 필요하시면 연락해 주세요.</p>
<Link to="/contact" className="pal-mobile-contact-link" onClick={closeAllMenus}>

21
src/css/header.css
Unescape View File

@ -91,7 +91,7 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
.pal-mobile-nav{margin:0;padding:0;list-style:none;}
.pal-mobile-nav-item{border-bottom:1px solid rgba(17,17,17,.06);}
.pal-mobile-nav-link,.pal-mobile-nav-toggle{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 4px;border:0;background:none;color:#111;text-align:left;text-decoration:none;cursor:pointer;}
.pal-mobile-nav-link span,.pal-mobile-nav-toggle span{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.03em;}
.pal-mobile-nav-link span,.pal-mobile-nav-toggle span{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-0.03em;text-transform:uppercase;}
.pal-mobile-nav-toggle:focus-visible,.pal-mobile-nav-link:focus-visible{outline:none;}
.pal-mobile-nav-arrow{position:relative;display:block;flex:0 0 auto;width:18px;height:18px;}
.pal-mobile-nav-arrow::before,.pal-mobile-nav-arrow::after{content:"";position:absolute;top:8px;width:10px;height:2px;border-radius:999px;background:#111;transition:transform .28s ease,background .28s ease;}
@ -123,6 +123,24 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
.pal-mobile-contact-link{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 16px;border-radius:999px;background:var(--color-primary);color:#fff;font-size:14px;font-weight:700;line-height:1;text-decoration:none;transition:background .28s ease,transform .28s ease,box-shadow .28s ease;}
.pal-mobile-contact-link:hover,.pal-mobile-contact-link:focus-visible{background:var(--color-primary-light);transform:translateY(-2px);box-shadow:0 12px 24px rgba(42,145,201,.22);outline:none;}
.pal-header-lang{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(17,17,17,.12);border-radius:999px;background:#fff;transition:border-color .3s ease,background .3s ease;}
.pal-header-lang-btn{height:100%;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(17,17,17,.55);font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease;}
.pal-header-lang-btn:hover{color:#111;}
.pal-header-lang-btn.is-active{background:#111;color:#fff;}
.pal-header-lang-btn:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px;}
body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);}
body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang-btn{color:rgba(255,255,255,.6);}
body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang-btn:hover{color:#fff;}
body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-open) .pal-header-lang-btn.is-active{background:#fff;color:#111;}
.pal-mobile-lang{display:flex;align-items:center;justify-content:space-between;padding:18px 4px 4px;margin-top:8px;border-top:1px solid rgba(17,17,17,.08);}
.pal-mobile-lang-label{font-size:13px;font-weight:500;color:rgba(17,17,17,.55);letter-spacing:.3px;}
.pal-mobile-lang-toggle{display:inline-flex;align-items:center;height:36px;padding:3px;border:1px solid rgba(17,17,17,.12);border-radius:999px;background:#fff;}
.pal-mobile-lang-btn{height:100%;padding:0 14px;border:0;border-radius:999px;background:transparent;color:rgba(17,17,17,.55);font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1;cursor:pointer;transition:background .25s ease,color .25s ease;}
.pal-mobile-lang-btn:hover{color:#111;}
.pal-mobile-lang-btn.is-active{background:#111;color:#fff;}
@media (max-width:1440px){
.pal-header-inner{padding:0 24px;}
.pal-mega-panel-inner{padding:24px 24px 24px;}
@ -144,6 +162,7 @@ body.is-dark-hero .pal-header:not(.is-scrolled):not(.is-open):not(.is-mobile-ope
.pal-header-util{min-width:auto;}
.pal-mega-panel{display:none;}
.pal-header-dim{display:none;}
.pal-header-lang{display:none;}
}
@media (max-width:767px){

Write Preview
Loading…
Cancel
Save