From 068fac72bfd8329ad884805c2ae41f0260a7a888 Mon Sep 17 00:00:00 2001 From: KINDNICK <68893236+KINDNICK@users.noreply.github.com> Date: Thu, 27 Nov 2025 00:01:19 +0900 Subject: [PATCH] =?UTF-8?q?Fix=20:=20=EC=9D=B4=EB=A9=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=8F=20=ED=96=89=EC=82=AC=20=EA=B8=B0=EA=B0=84=20=EC=97=B0?= =?UTF-8?q?=EC=9E=A5=20=ED=8F=AC=ED=8A=B8=ED=8F=B4=EB=A6=AC=EC=98=A4=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .claude/settings.local.json | 4 +- CLAUDE.md | 84 +++++++++++++++++++++++++++---------- README.md | 3 +- components/footer.html | 2 +- contact.html | 13 ++++-- gallery.html | 12 ++++++ index.html | 19 +++++---- portfolio.html | 29 ++++++++++--- qna.html | 15 +++---- services.html | 6 +-- 10 files changed, 133 insertions(+), 54 deletions(-) diff --git a/.claude/settings.local.json b/.claude/settings.local.json index 2865cd0..f2181de 100644 --- a/.claude/settings.local.json +++ b/.claude/settings.local.json @@ -18,7 +18,9 @@ "Bash(curl:*)", "Bash(netstat:*)", "Bash(ipconfig)", - "Bash(ping:*)" + "Bash(ping:*)", + "Bash(dir:*)", + "Bash(nul)" ], "deny": [], "ask": [] diff --git a/CLAUDE.md b/CLAUDE.md index 50ef665..a382ae5 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -6,6 +6,8 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co This is the official website for 밍글 스튜디오 (Mingle Studio), a motion capture studio located in Incheon, South Korea. The website is a multi-page static site built with vanilla HTML, CSS, and JavaScript, showcasing motion capture services, studio galleries, and client portfolios. +**Tech Stack:** Pure HTML5, CSS3 (with CSS Variables), Vanilla JavaScript (ES6+), no framework dependencies + ## Architecture & Structure ### Page Architecture @@ -19,8 +21,9 @@ The site follows a modular component-based structure: ### Component Loading System The site uses a dynamic component loading system implemented in `js/common.js`: - Header and footer are loaded via `fetch()` API from `components/` directory -- Fallback system: Static backup footer is hidden when dynamic loading succeeds +- **Fallback System**: Pages should include a static backup footer in HTML that gets hidden when dynamic loading succeeds (check `backupFooter` logic in `loadComponents()`) - Components are initialized after DOM load with proper error handling +- Loading sequence: `showPageLoading()` → `loadComponents()` → `initLazyLoading()` → `hidePageLoading()` ### CSS Architecture - **CSS Variables**: Defined in `:root` of `common.css` with motion capture/VTuber orange theme @@ -30,20 +33,8 @@ The site uses a dynamic component loading system implemented in `js/common.js`: ## Development Commands -### Quick Start (권장) -**Windows:** -```cmd -# 더블클릭으로 실행 -start-server.bat -``` +### Server Options -**macOS/Linux:** -```bash -# 터미널에서 실행 -./start-server.sh -``` - -### Manual Server Start **Node.js (권장):** ```bash npm run dev # http://localhost:8000 @@ -52,29 +43,45 @@ npm run serve # 같은 기능 npm test # 도움말 + 서버 시작 ``` -**Python:** +**Python (Alternative):** ```bash -python server.py # 커스텀 서버 (추천) -python -m http.server 8000 # 기본 서버 +python server.py # Custom server with auto-open on port 8001 +python -m http.server 8000 # Basic Python server on port 8000 ``` +**Note:** The custom Python server (`server.py`) uses port 8001 and includes automatic port detection, browser opening, and clean URL support (`.html` extension optional). + ### Development Features -- **자동 브라우저 열기**: 서버 시작 시 자동으로 브라우저에서 사이트 열림 -- **Clean URLs**: `.html` 확장자 없이 접근 가능 (`/about`, `/services` 등) -- **개발 최적화**: 캐시 비활성화, CORS 헤더 추가 -- **오류 처리**: 포트 충돌 및 기본적인 오류 상황 처리 +- **Auto Browser Opening**: Python server automatically opens http://localhost:8001 (or available port) +- **Clean URLs**: `.html` extension optional for access (e.g., `/about` works as `/about.html`) +- **Dev Optimizations**: Cache disabled, CORS headers added +- **Port Auto-Detection**: Python server finds available ports from 8001-8020 if default is occupied +- **Error Handling**: Port conflicts and basic error scenarios handled gracefully ### Available URLs +When using npm scripts (port 8000): - Homepage: http://localhost:8000/ - About: http://localhost:8000/about -- Services: http://localhost:8000/services +- Services: http://localhost:8000/services - Portfolio: http://localhost:8000/portfolio - Gallery: http://localhost:8000/gallery - Contact: http://localhost:8000/contact - Q&A: http://localhost:8000/qna +When using `python server.py` (port 8001 or auto-detected): +- The server will display available URLs with the detected port + ## Key Technical Details +### JavaScript Module System +- **Common Utilities** (`js/common.js`): Exports functions via `window.commonUtils` object for use in page-specific scripts + - Navigation handling with hamburger menu + - Notification system with 4 types (success, error, warning, info) + - Lazy loading for YouTube iframes and images using IntersectionObserver + - Loading state management (page-level and component-level) + - Utility functions: `debounce`, `throttle`, `isValidEmail` +- **Popup System** (`js/popup.js`): Cookie-based "don't show today" functionality for main page popups + ### SEO Optimization - Structured data (JSON-LD) with LocalBusiness schema for search engines - Comprehensive meta tags including Open Graph, Twitter Cards, and Korean platform-specific tags @@ -108,7 +115,38 @@ python -m http.server 8000 # 기본 서버 - SOOP/streaming VODs: Direct iframe source for broadcast examples ### Navigation Updates -When adding new pages, update `components/header.html` navigation links and ensure corresponding CSS/JS files follow the naming convention. +When adding new pages, update `components/header.html` navigation links and ensure corresponding CSS/JS files follow the naming convention (`css/[page].css`, `js/[page].js`). + +## Important Notes + +### File Structure Conventions +- Each page has three files: `[page].html`, `css/[page].css`, `js/[page].js` +- Backup files may exist (e.g., `index_backup.html`, `index_new.html`) - these are not actively used +- All pages must include placeholders for dynamic components: + - `
` for header + - `` for footer +- Page-specific CSS and JS are loaded after common files for proper override capability + +### Styling System +Access the orange motion capture theme via CSS variables defined in `common.css`: +```css +--primary-color: #ff8800; +--gradient-main: linear-gradient(135deg, #ff8800 0%, #ff6600 100%); +--navbar-height: 70px; +``` + +### Common Utilities Access +Page-specific scripts can access common functions via `window.commonUtils`: +```javascript +// Show notification +window.commonUtils.showNotification('Message', 'success'); + +// Validate email +window.commonUtils.isValidEmail('test@example.com'); + +// Use debounce/throttle +const debouncedFn = window.commonUtils.debounce(myFn, 300); +``` ## Business Context diff --git a/README.md b/README.md index 5545fdb..31beda5 100644 --- a/README.md +++ b/README.md @@ -116,7 +116,8 @@ npx serve . 프로젝트에 대한 문의사항이 있으시면 연락주세요: -- **이메일**: hello@minglestudio.com +- **비지니스 문의**: minglestudio@minglestudio.co.kr +- **예약 문의**: help@minglestudio.co.kr - **전화**: 010-1234-5678 - **주소**: 서울특별시 강남구 테헤란로 123 diff --git a/components/footer.html b/components/footer.html index a0662b8..82fc45c 100644 --- a/components/footer.html +++ b/components/footer.html @@ -3,7 +3,7 @@
회사명: 밍글 스튜디오 | 대표: 김희진
주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호
-
전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com
+
전화: 010-9288-9190 | 비지니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr
사업자등록번호: 208-12-73755
© 2025 밍글 스튜디오. All rights reserved.
diff --git a/contact.html b/contact.html index 22e8eb4..3a50807 100644 --- a/contact.html +++ b/contact.html @@ -86,11 +86,18 @@ 010-9288-9190 +
+
💼
+

비지니스 문의

+

제휴 및 협력 문의

+ minglestudio@minglestudio.co.kr +
+
✉️
-

이메일 문의

+

예약 및 문의

24시간 접수 가능

- minglestudio.mocap@gmail.com + help@minglestudio.co.kr
@@ -184,7 +191,7 @@
회사명: 밍글 스튜디오 | 대표: 김희진
주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호
-
전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com
+
전화: 010-9288-9190 | 비지니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr
사업자등록번호: 208-12-73755
© 2025 밍글 스튜디오. All rights reserved.
diff --git a/gallery.html b/gallery.html index 46c3ca0..2182a9e 100644 --- a/gallery.html +++ b/gallery.html @@ -176,6 +176,18 @@ + + + + diff --git a/index.html b/index.html index 71e9eb0..a46b9b4 100644 --- a/index.html +++ b/index.html @@ -105,7 +105,7 @@ "description": "인천 모션캡쳐 전문 스튜디오 - OptiTrack 28대 카메라 시스템", "url": "https://minglestudio.co.kr", "telephone": "010-9288-9190", - "email": "minglestudio.mocap@gmail.com", + "email": "help@minglestudio.co.kr", "address": { "@type": "PostalAddress", "streetAddress": "주부토로 236, 인천테크노밸리 A동 B105호", @@ -191,7 +191,7 @@ "description": "OptiTrack 기반 28대 카메라 시스템으로 전신/페이셜 모션캡쳐 가능. 시간당 22만원(VAT 포함). 인천테크노밸리 위치.", "url": "https://minglestudio.co.kr", "telephone": "010-9288-9190", - "email": "minglestudio.mocap@gmail.com", + "email": "help@minglestudio.co.kr", "address": { "@type": "PostalAddress", "streetAddress": "주부토로 236, 인천테크노밸리 A동 B105호", @@ -270,7 +270,7 @@ "contactPoint": { "@type": "ContactPoint", "telephone": "+82-10-9288-9190", - "email": "minglestudio.mocap@gmail.com", + "email": "help@minglestudio.co.kr", "contactType": "customer service", "availableLanguage": "Korean" }, @@ -335,11 +335,11 @@
이벤트 기간
-
~ 12/31
+
~ 2025년 2월 말
-
문의 메일
-
minglestudio.mocap@gmail.com
+
예약 문의
+
help@minglestudio.co.kr
@@ -446,7 +446,7 @@
🎮

실시간 스트리밍

-

서비스 준비중 (곧 출시 예정)

+

스트리밍글 서비스로 라이브 방송 가능

@@ -616,7 +616,8 @@
- 📧 minglestudio.mocap@gmail.com + 📧 예약: help@minglestudio.co.kr + 💼 비지니스: minglestudio@minglestudio.co.kr 📍 인천 부평구 주부토로 236, 인천테크노밸리
@@ -630,7 +631,7 @@
회사명: 밍글 스튜디오 | 대표: 김희진
주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호
-
전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com
+
전화: 010-9288-9190 | 비지니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr
사업자등록번호: 208-12-73755
© 2025 밍글 스튜디오. All rights reserved.
diff --git a/portfolio.html b/portfolio.html index 13a5453..3ebdf0f 100644 --- a/portfolio.html +++ b/portfolio.html @@ -172,8 +172,8 @@
-
@@ -186,7 +186,24 @@
- + +
+
+ +
+
+

첫사랑 (백아) | 치요 cover

+

밍글 스튜디오에서 제작된 모션캡쳐 영상

+
+ 치요 + cover + 크로아 +
+
+
+ @@ -547,8 +564,8 @@
📡
-

스트리밍 서비스

-

현재 준비중 (곧 출시 예정)

+

스트리밍글 서비스

+

실시간 라이브 방송 지원

@@ -580,7 +597,7 @@
회사명: 밍글 스튜디오 | 대표: 김희진
주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호
-
전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com
+
전화: 010-9288-9190 | 비지니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr
사업자등록번호: 208-12-73755
© 2025 밍글 스튜디오. All rights reserved.
diff --git a/qna.html b/qna.html index 277483d..001c9d3 100644 --- a/qna.html +++ b/qna.html @@ -117,7 +117,7 @@

아래 방법으로 예약하실 수 있습니다:

@@ -131,7 +131,7 @@

아래 양식을 복사하여 이메일로 문의해주세요:

- 📧 이메일 바로 보내기 + 📧 이메일 바로 보내기

최소 2주 전에 연락주시면 원활하게 준비가 가능합니다.

@@ -346,8 +346,9 @@ +
-

실시간 스트리밍 서비스는 현재 준비중입니다.

-

서비스 준비가 완료되는 대로 안내해드리겠습니다.

+

네, 스트리밍글 서비스를 통해 실시간 스트리밍이 가능합니다.

+

모션캡쳐 데이터를 실시간으로 송출하여 라이브 방송에 활용하실 수 있습니다.

+

자세한 내용은 Services 페이지의 스트리밍글 서비스 항목을 참고해주세요.

@@ -376,7 +377,7 @@

견학 및 투어는 미리 문의를 통해 가능 여부를 확인해야 합니다:

@@ -409,7 +410,7 @@
회사명: 밍글 스튜디오 | 대표: 김희진
주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호
-
전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com
+
전화: 010-9288-9190 | 비지니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr
사업자등록번호: 208-12-73755
© 2025 밍글 스튜디오. All rights reserved.
diff --git a/services.html b/services.html index d7e21fd..442d612 100644 --- a/services.html +++ b/services.html @@ -607,7 +607,7 @@

아래 양식을 복사하여 이메일로 문의해주세요:

제목: [스튜디오 대관 문의]
-
받는 사람: minglestudio.mocap@gmail.com
+
받는 사람: help@minglestudio.co.kr
1. 성함 및 소속
@@ -647,7 +647,7 @@
- + 📧 이메일 바로 보내기
@@ -764,7 +764,7 @@
회사명: 밍글 스튜디오 | 대표: 김희진
주소: (21330) 인천광역시 부평구 주부토로 236, 인천테크노밸리 A동 B105호
-
전화: 010-9288-9190 | 이메일: minglestudio.mocap@gmail.com
+
전화: 010-9288-9190 | 비지니스 문의: minglestudio@minglestudio.co.kr | 예약 문의: help@minglestudio.co.kr
사업자등록번호: 208-12-73755
© 2025 밍글 스튜디오. All rights reserved.