yunchan/designpaca
1
0
Fork 0
Code Issues Pull requests Projects Releases 5 Packages Wiki Activity Actions

feat: strengthen design skill and refresh all showcases
Some checks failed
ci / build (push) Has been cancelled
Details

Browse source
This commit is contained in:
Yun Chan 2026-09-12 18:16:33 +09:00
parent 69e5cc1efd
commit e09d4efb1c
257 changed files with 8196 additions and 2374 deletions
Download patch file Download diff file Expand all files Collapse all files

67
apps/site/public/work/materia-interior/index.html
View file

@ -16,10 +16,7 @@
<link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/webfontworld/naver/MaruBuri.css"
/>
<link rel="stylesheet" href="./styles/fonts.css?v=20260912all" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css"
@ -28,7 +25,7 @@
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap"
/>
<link rel="stylesheet" href="./styles/main.css?v=1" />
<link rel="stylesheet" href="./styles/main.css?v=20260912all" />
<link
rel="icon"
href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' fill='%23F5F3EF'/%3E%3Crect x='6' y='6' width='20' height='20' stroke='%23161514' stroke-width='2' fill='none'/%3E%3Crect x='12' y='12' width='8' height='8' fill='%239E8062'/%3E%3C/svg%3E"
@ -64,7 +61,7 @@
</div>
<a href="#contact" class="btn">
상담 신청
상담 항목 보기
</a>
</div>
</div>
@ -79,7 +76,7 @@
<span>하이엔드 공간 인테리어</span>
</div>
<h1 id="heroHeading" class="hero-title">
빛과 트래버틴이 빚어내는<br />
빛과 돌이 빚는<br />
침묵의 <span class="italic">공간 건축</span>
</h1>
<p class="hero-desc">
@ -96,22 +93,20 @@
</div>
</div>
<div class="hero-visual" style="position: relative;">
<div class="bezel-outer">
<div class="hero-frame">
<img
src="./assets/penthouse-hero.webp"
alt="트래버틴 벽체와 훈증 오크 수납장이 조화된 하이엔드 펜트하우스 거실 전경"
width="1200"
height="1600"
loading="eager"
/>
</div>
</div>
<div class="hero-caption-pill">
<div class="hero-caption-name">한남 펜트하우스 레지던스</div>
<div class="hero-caption-meta">Hannam · 284㎡ (86평) · 2026.04 준공</div>
</div>
<div class="hero-visual">
<figure class="hero-frame">
<img
src="./assets/penthouse-hero.webp"
alt="트래버틴 벽체와 훈증 오크 수납장이 있는 주거 공간 전경"
width="1200"
height="1600"
loading="eager"
/>
<figcaption class="hero-caption-pill">
<span class="hero-caption-name">한남 펜트하우스 레지던스</span>
<span class="hero-caption-meta">공간 사진과 물성 조합을 보여 주는 프로젝트 예시</span>
</figcaption>
</figure>
</div>
</div>
</section>
@ -272,12 +267,12 @@
<div class="process-card">
<div class="process-step">PHASE 02</div>
<h3>촉각적 머티리얼 페어링</h3>
<p>실제 1:1 자재 샘플 보드를 제작하여 거주자의 라이프스타일과 촉감 선호도를 일치시킵니다.</p>
<p>맞춤형 자재 샘플 보드로 생활 방식과 촉감 선호도를 함께 살펴봅니다.</p>
</div>
<div class="process-card">
<div class="process-step">PHASE 03</div>
<h3>3D 광학 시뮬레이션</h3>
<p>주광(Daylight)과 2700K 인공 조명의 조도 분포를 가상 렌더링으로 정밀 검증합니다.</p>
<p>낮빛과 2700K 조명에서 빛이 퍼지는 모습을 공간 시뮬레이션으로 미리 살펴봅니다.</p>
</div>
<div class="process-card">
<div class="process-step">PHASE 04</div>
@ -295,12 +290,13 @@
<div style="text-align: center; margin-bottom: var(--space-6);">
<div class="eyebrow">프라이빗 컨설팅</div>
<h2 id="contactHeading" style="font-family: var(--font-serif); font-size: var(--step-2); margin-top: 6px;">
프라이빗 공간 컨설팅 신청
프라이빗 공간 상담 항목
</h2>
<p style="font-size: var(--step-0); color: var(--ink-muted); margin-top: 6px;">
월 최대 3건의 프로젝트만을 엄선하여 타협 없는 완성도를 보증합니다.
공간 유형과 규모, 예산 범위를 정리해 보세요.
</p>
</div>
<p class="demo-notice" role="note">안내: 이 페이지의 프로젝트와 상담 항목은 공간 연출 예시입니다. 입력 정보는 저장·전송되지 않으며 실제 상담으로 접수되지 않습니다.</p>
<form id="consultForm" onsubmit="return false;">
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
@ -315,18 +311,18 @@
</div>
<div class="form-group">
<label class="form-label" for="spaceArea">예상 전용면적 (평형)</label>
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" value="82평 (271㎡)" />
<input type="text" id="spaceArea" class="form-input" placeholder="예: 65평 (214㎡)" />
</div>
</div>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
<div class="form-group">
<label class="form-label" for="clientName">성함</label>
<input type="text" id="clientName" class="form-input" placeholder="성함" value="김민준" required />
<input type="text" id="clientName" class="form-input" placeholder="성함" required />
</div>
<div class="form-group">
<label class="form-label" for="clientPhone">연락처</label>
<input type="tel" id="clientPhone" class="form-input" placeholder="010-0000-0000" value="010-5920-8812" required />
<input type="tel" id="clientPhone" class="form-input" placeholder="연락처" required />
</div>
</div>
@ -341,11 +337,11 @@
<div class="form-group">
<label class="form-label" for="clientNote">공간에 바라는 철학 및 특별 요청사항</label>
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요.">거실에 웅장한 트래버틴 벽체와 자연스러운 간접 조명을 조성하고 싶습니다. 2026년 10월 착공 희망합니다.</textarea>
<textarea id="clientNote" class="form-textarea" rows="3" placeholder="추구하시는 분위기, 선호 자재, 착공 희망 시기 등을 자유롭게 적어주세요."></textarea>
</div>
<button type="button" class="btn-materia" id="btnSubmitConsult" style="width: 100%; padding: 14px; margin-top: 10px;">
프라이빗 디자인 상담 신청 완료
입력한 상담 항목 확인
</button>
</form>
</div>
@ -378,9 +374,8 @@
<!-- 푸터 (.site-foot SSOT) -->
<footer class="site-foot">
<div class="wrap foot-inner">
<p>마테리아 스튜디오 · 서울 강남구 압구정로 72길 14</p>
<p class="muted">월요일부터 금요일까지 (사전 예약제)</p>
<p class="muted">studio@materia.kr</p>
<p>마테리아 스튜디오 · 공간 설계 안내</p>
<p class="muted">이 페이지의 프로젝트·상담 항목은 예시이며 입력 정보는 저장·전송되지 않습니다.</p>
</div>
</footer>
@ -412,7 +407,7 @@
const name = document.getElementById("clientName").value || "고객님";
const spaceType = document.getElementById("spaceType").value;
const area = document.getElementById("spaceArea").value;
alert(`[마테리아 스튜디오] ${name}님의 프라이빗 공간 컨설팅 신청(${spaceType} / ${area})이 접수되었습니다.\n담당 수석 디렉터가 24시간 이내에 포트폴리오 자료와 함께 직접 연락드리겠습니다.`);
alert(`${name}님이 입력한 상담 항목을 확인했습니다. (${spaceType} / ${area || "면적 미입력"})\n실제 상담은 접수되지 않았으며 입력 정보는 저장하거나 전송하지 않습니다.`);
});
}
})();