windpacer/homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

모바일 메뉴 사라짐 해결

Browse Source
This commit is contained in:
Wind
2026-02-19 07:52:07 +09:00
parent 2ef5d95981
commit e33d42bd7e
16 changed files with 47016 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
html/assets/images/icons/icons.svg
View File

@@ -35,17 +35,17 @@
<path d="M 392 290 L 392 470 L 266 380 Z"/>
<!-- 중앙 스템 -->
<rect x="246" y="210" width="20" height="170" rx="10"/>
<rect x="246" y="240" width="20" height="150" rx="10"/>
<!-- 상단 사각형 케이스 (외곽) -->
<rect x="156" y="50" width="200" height="160"
<rect x="156" y="80" width="200" height="160"
stroke="currentColor"
stroke-width="20"
fill="none"
rx="10"/>
<!-- 내부 사각형 -->
<rect x="156" y="50" width="200" height="50"
<rect x="156" y="80" width="200" height="50"
stroke="currentColor"
stroke-width="15"
fill="none"
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

8
html/assets/js/i18n.js
View File

@@ -167,7 +167,7 @@ const translations = {
'nav.services' : '실적 플랜트',
'nav.about' : '회사소개',
'nav.contact' : '문의하기',
'nav.quote' : '견적 요청',
'nav.quote' : '상담 신청',
// HERO
'hero.badge' : '정밀 공정 제어 시스템',
@@ -238,14 +238,14 @@ const translations = {
'inst.i5.desc' : 'pH, 전도도, 산소, 용존 가스 분석기',
'inst.i6.title' : '컨트롤 밸브',
'inst.i6.desc' : 'HART 통신 지원 스마트 포지셔너',
'inst.i7.title' : '진동 모니터',
'inst.i7.desc' : '예측 유지보수를 위한 가속도계 및 속도 센서',
'inst.i7.title' : '온오프 밸브',
'inst.i7.desc' : '공압, 전기식 셧오프 밸브',
'inst.i8.title' : '스마트 데이터 로거',
'inst.i8.desc' : '클라우드 연결 기능을 갖춘 IoT 데이터 수집 장치',
'inst.custom.title' : '맞춤형 통합 솔루션 제공',
'inst.custom.desc' : '모든 계측기기는 당사의 DCS 및 SCADA 플랫폼과 원활하게 통합됩니다. 특수 응용 분야에 맞는 커스텀 구성이 가능합니다.',
'inst.custom.btn' : '맞춤 구성 요청',
'inst.quote' : '견적 요청 →',
'inst.quote' : '상담 신청 →',
// REFERENCES
'svc.badge' : '실적 플랜트 분야',

20
html/assets/js/script.js
View File

@@ -68,13 +68,27 @@ document.addEventListener('DOMContentLoaded', () => {
// ============================================================
// 메뉴 토글
// ============================================================
const menuBtn = document.querySelector('.menu-btn');
const navMenu = document.querySelector('.nav-menu');
const menuBtn = document.querySelector('#mobile-menu-btn');
const navMenu = document.querySelector('#mobile-menu');
const closeBtn = document.querySelector('#close-menu-btn');
if (menuBtn && navMenu) {
// 메뉴열기
menuBtn.addEventListener('click', () => {
navMenu.classList.toggle('open');
navMenu.classList.remove('translate-x-full');
menuBtn.classList.toggle('open');
});
//메뉴닫기
if (closeBtn) {
closeBtn.addEventListener('click', () => {
navMenu.classList.add('translate-x-full');
});
}
//메뉴 링크 클릭 시 닫기
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click',() => {
navMenu.classList.add('translate-x-full');
});
});
}
// ============================================================

198
html/assets/js/모바일메뉴 사라짐.md Normal file
View File

@@ -0,0 +1,198 @@
모바일 메뉴가 동작하지 않는 문제를 찾았습니다! 🔍
🔴 문제점 발견
1. 클래스명 불일치 (가장 큰 문제!)
script.js:
javascriptconst menuBtn = document.querySelector('.menu-btn'); // ❌ .menu-btn
const navMenu = document.querySelector('.nav-menu'); // ❌ .nav-menu
index.html:
html<button id="mobile-menu-btn" class="md:hidden text-white p-2">
<!-- ❌ 클래스가 없고 ID만 있음 -->
</button>
<div id="mobile-menu" class="fixed inset-0 z-[60] ...">
<!-- ❌ 클래스가 없고 ID만 있음 -->
</div>
→ .menu-btn과 .nav-menu 클래스가 HTML에 없습니다!
2. 닫기 버튼도 작동 안 함
script.js:
javascriptdocument.querySelectorAll('.modal .close-btn').forEach(btn => {
// ❌ .close-btn 클래스를 찾지만...
});
index.html:
html<button id="close-menu-btn" class="text-white text-3xl">&times;</button>
<!-- ❌ .close-btn 클래스가 없음 -->
3. 이벤트 핸들러 중복
script.js 하단:
javascript// 메뉴 토글 코드가 있는데...
const menuBtn = document.querySelector('.menu-btn');
index.html 하단:
html<!-- 하지만 HTML에 별도의 스크립트는 없음 (좋음) -->
📋 문제 요약
요소script.js에서 찾는 것index.html 실제메뉴 버튼.menu-btn#mobile-menu-btn (클래스 없음)메뉴.nav-menu#mobile-menu (클래스 없음)닫기 버튼.modal .close-btn#close-menu-btn (클래스 없음)
✅ 해결 방법 (3가지 옵션)
옵션 1: script.js 수정 (권장)
ID로 찾도록 변경:
javascriptconst menuBtn = document.querySelector('#mobile-menu-btn'); // ID로 변경
const navMenu = document.querySelector('#mobile-menu'); // ID로 변경
옵션 2: index.html 수정
클래스 추가:
html<button id="mobile-menu-btn" class="menu-btn md:hidden text-white p-2">
<div id="mobile-menu" class="nav-menu fixed inset-0 z-[60] ...">
<button id="close-menu-btn" class="close-btn text-white text-3xl">
옵션 3: 둘 다 수정
HTML에 클래스 추가 + script.js도 ID로 변경
🎯 추가 문제점
4. 메뉴 링크 클릭 시 닫기 기능 없음
모바일 메뉴에서 링크 클릭해도 메뉴가 안 닫힙니다:
javascript// 이 기능이 script.js에 없음!
// 메뉴 내부 링크 클릭 시 메뉴 닫기
5. translate-x-full 제어 없음
html<div id="mobile-menu" class="... translate-x-full ...">
이 translate-x-full 클래스를 제거/추가하는 JavaScript가 없습니다!
🔧 수정이 필요한 부분 정리
script.js 수정 필요:
Line 74-75: .menu-btn → #mobile-menu-btn
Line 75: .nav-menu → #mobile-menu
Line 76-79: translate-x-full 제어 추가
닫기 버튼 이벤트 추가
메뉴 링크 클릭 시 닫기 추가
index.html (선택사항):
클래스 추가하면 더 좋지만, script.js만 수정해도 됨
💡 결론
가장 큰 문제: script.js가 존재하지 않는 .menu-btn과 .nav-menu 클래스를 찾고 있어서 menuBtn과 navMenu가 모두 null이 되고, 이벤트가 등록되지 않습니다.
→ ID로 찾도록 변경하면 해결됩니다! 👍<div id="mobile-menu" class="... translate-x-full ...">
이부분 상세하게 다시 알려줘오전 7:37translate-x-full 부분을 상세하게 설명드릴게요!
🔍 현재 상황 분석
index.html 67번 라인:
html<div id="mobile-menu" class="fixed inset-0 z-[60] bg-slate-900 flex flex-col p-8 transition-transform translate-x-full duration-500 overflow-y-auto">
📐 translate-x-full의 의미
Tailwind CSS 클래스:
csstranslate-x-full {
transform: translateX(100%);
}
```
**의미**: 화면 밖 오른쪽으로 완전히 이동 (숨김 상태)
### 시각적 설명:
```
[화면] [메뉴]
┌─────┐ ┌─────┐
│ │ │메뉴 │ ← 100% 오른쪽으로 이동
│ │ │숨김 │ (보이지 않음)
└─────┘ └─────┘
❌ 현재 문제점
1. 항상 숨겨진 상태
htmltranslate-x-full ← 이 클래스가 계속 있으면 메뉴가 계속 숨겨짐
2. JavaScript가 이 클래스를 제어하지 않음
script.js 현재 코드:
javascriptmenuBtn.addEventListener('click', () => {
navMenu.classList.toggle('open'); // ❌ 'open' 클래스만 토글
menuBtn.classList.toggle('open'); // ❌ 의미 없음
});
```
**문제**: `open` 클래스가 CSS에 정의되어 있지 않음!
---
## ✅ 올바른 동작 방식
### 작동 원리:
```
닫힌 상태: translate-x-full (오른쪽 밖에 숨김)
↓ (버튼 클릭)
열린 상태: translate-x-full 제거 (화면에 표시)
필요한 JavaScript:
javascriptmenuBtn.addEventListener('click', () => {
navMenu.classList.toggle('translate-x-full');
// ↑
// 이 클래스를 추가/제거해야 함!
});
🎯 정확한 수정 방법
script.js 74-79 라인을 이렇게 수정해야 합니다:
javascript// ❌ 현재 (작동 안 함)
const menuBtn = document.querySelector('.menu-btn');
const navMenu = document.querySelector('.nav-menu');
if (menuBtn && navMenu) {
menuBtn.addEventListener('click', () => {
navMenu.classList.toggle('open'); // ❌ 의미 없음
menuBtn.classList.toggle('open'); // ❌ 의미 없음
});
}
// ✅ 수정 (올바른 방법)
const menuBtn = document.querySelector('#mobile-menu-btn');
const navMenu = document.querySelector('#mobile-menu');
const closeBtn = document.querySelector('#close-menu-btn');
if (menuBtn && navMenu) {
// 메뉴 열기
menuBtn.addEventListener('click', () => {
navMenu.classList.remove('translate-x-full'); // ← 이게 핵심!
});
// 메뉴 닫기
if (closeBtn) {
closeBtn.addEventListener('click', () => {
navMenu.classList.add('translate-x-full'); // ← 다시 숨김
});
}
// 메뉴 링크 클릭 시 닫기
navMenu.querySelectorAll('a').forEach(link => {
link.addEventListener('click', () => {
navMenu.classList.add('translate-x-full');
});
});
}
🎬 애니메이션 동작 순서
1. 초기 상태 (페이지 로드):
html<div id="mobile-menu" class="... translate-x-full ...">
↑
메뉴가 오른쪽 밖에 숨겨짐
2. 햄버거 버튼 클릭:
javascriptnavMenu.classList.remove('translate-x-full');
```
```
화면 밖 → 화면 안으로 슬라이드 (0.5초 duration-500)
3. X 버튼 클릭 또는 링크 클릭:
javascriptnavMenu.classList.add('translate-x-full');
```
```
화면 안 → 화면 밖으로 슬라이드
📊 클래스 상태 변화
상태translate-x-full위치보임닫힘✅ 있음화면 오른쪽 밖 (+100%)❌ 안 보임열림❌ 없음화면 안 (0%)✅ 보임
🎨 CSS 트랜지션
htmltransition-transform duration-500
↑ ↑
변환 애니메이션 0.5초 동안
이 두 클래스 덕분에 부드럽게 슬라이드됩니다!
🔑 핵심 정리
translate-x-full: 메뉴를 오른쪽 밖으로 숨김
remove('translate-x-full'): 메뉴를 화면에 표시
add('translate-x-full'): 메뉴를 다시 숨김
transition-transform duration-500: 부드러운 애니메이션
현재 문제: JavaScript가 translate-x-full을 제어하지 않아서 메뉴가 계속 숨겨진 상태입니다!

13
html/index.html
View File

@@ -3,7 +3,9 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hanmo Control & Network Co., Ltd. | Control Precision</title>
<meta name="description" content="한모씨앤앤은 공정제어 전문 기업입니다. 다양한 정보를 확인하세요.">
<title>한모씨앤앤 | Hanmo Control & Network - DCS SCADA 자동제어</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@200;300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap" rel="stylesheet">
@@ -55,7 +57,8 @@
<button onclick="location.href='#contact'" class="bg-blue-600 hover:bg-blue-700 text-white px-7 py-2.5 rounded-full text-xs font-bold shadow-xl transition-all active:scale-95 font-industrial tracking-widest uppercase" data-i18n="nav.quote">Inquiry</button>
</div>
<button id="mobile-menu-btn" class="md:hidden text-white p-2">
<button id="mobile-menu-btn" class="menu-btn md:hidden text-white p-2">
<i class="fas fa-bars text-2xl"></i>
</button>
</div>
@@ -166,7 +169,7 @@
<!-- BATCH PROCESS SECTION -->
<section id="batch" class="pt-32 pb-32 bg-slate-50">
<div class="container mx-auto px-6">
<div class="text-center max-w-3xl mx-auto mb-8"> <!--아래 내용과의 간겨 mb-16에서 줄임-->
<div class="text-center max-w-3xl mx-auto mb-8"> <!--아래 내용과의 간격 mb-16에서 줄임-->
<h2 class="text-blue-600 font-bold uppercase tracking-widest text-[11px] mb-4 font-industrial" data-i18n="batch.badge">Process Automation</h2>
<h3 class="text-4xl md:text-6xl font-light text-slate-900 mb-8 premium-kerning font-premium" data-i18n="batch.title">Batch Process Control</h3>
<p class="text-slate-500 text-lg leading-relaxed font-light" data-i18n="batch.desc">Not only precision control, but also production planning,process data & historical lot management, you can get it by our Batch Manager software.</p>
@@ -291,14 +294,14 @@
</div>
</div>
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
<div class="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-sliders-h text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
<div class="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-faucet text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i6.title">Control Valves</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i6.desc">Smart positioners with HART communication</p>
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Komoto (Motoyama Korea)</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Azbil</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Honeywell</div></div>
<!-- <a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a> -->
</div>
</div>
<div class="bg-white rounded-[2.5rem] overflow-hidden border border-slate-100 hover:border-blue-200 transition-all hover:shadow-2xl group">
<div class="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><i class="fas fa-wave-square text-6xl text-blue-300 group-hover:text-blue-600 transition-colors"></i></div>
<div class="h-32 bg-gradient-to-br from-blue-50 to-blue-100 flex items-center justify-center"><svg class="w-20 h-20 text-blue-300 group-hover:text-blue-600 transition-colors"><use href="assets/images/icons/icons.svg#icon-xv"></use></svg></div>
<div class="p-8"><h4 class="text-lg font-semibold text-slate-900 mb-3 font-premium" data-i18n="inst.i7.title">Shutoff Valves</h4><p class="text-slate-500 text-sm leading-relaxed mb-6 font-light" data-i18n="inst.i7.desc">Accelerometers and velocity sensors for predictive maintenance</p>
<div class="space-y-2 text-xs text-slate-600 mb-6"><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Automa</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Proval</div><div class="flex gap-2"><i class="fas fa-check text-blue-600"></i> Flowserve</div></div>
<!-- <a href="#contact" class="text-blue-600 font-bold text-xs uppercase tracking-widest hover:text-blue-700" data-i18n="inst.quote">Get Quote →</a> -->

2
html/status.json
View File

@@ -1 +1 @@
{"cpu_temp": "39", "nvme_temp": "34", "uptime_days": 5, "last_update": "09:22:01"}
{"cpu_temp": "40", "nvme_temp": "33", "uptime_days": 6, "last_update": "07:51:01"}