광터지하차도 새 모델 프로젝트 시작
This commit is contained in:
김지영 committed
commit
4c331d8ee9
12 files changed
+324420
No files matched your search
+60
@@ -0,0 +1,60 @@
|
||||
const stages = [
|
||||
{ number: '01', title: '도면 다시 읽기', detail: '평면 선형, 종단 표고, A-A/B-B 단면 위치와 축척 확인', state: '진행 예정' },
|
||||
{ number: '02', title: '주요 구조 만들기', detail: '확인된 중심선과 단면값으로 바닥판·벽체 형상 구성', state: '대기' },
|
||||
{ number: '03', title: '세부 형상과 뷰어', detail: '부재 선택, 숨김, 시점 전환과 치수 표시 추가', state: '대기' },
|
||||
]
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<main className="shell">
|
||||
<header className="topbar">
|
||||
<a className="brand" href="#top"><span className="brand-icon">G</span>도면 모델 작업실</a>
|
||||
<div className="project-label"><span className="live-dot" />새 프로젝트 <b>/</b> 광터지하차도 BLOCK7</div>
|
||||
<a className="drawing-link" href="/drawings/광터지하차도_일반도(BLOCK7).dxf" download>원본 도면 받기 <span>↓</span></a>
|
||||
</header>
|
||||
|
||||
<section className="intro" id="top">
|
||||
<div>
|
||||
<span className="kicker">새로 시작하는 도면 기반 모델</span>
|
||||
<h1>광터지하차도 BLOCK7</h1>
|
||||
<p>기존 모델을 가져오지 않고, 원본 도면을 다시 확인해 구조와 배치를 새로 구성합니다.</p>
|
||||
</div>
|
||||
<span className="status-pill">도면 분석 준비</span>
|
||||
</section>
|
||||
|
||||
<section className="workspace">
|
||||
<div className="viewer-card">
|
||||
<div className="viewer-head">
|
||||
<div><span className="eyebrow">3D 미리보기</span><h2>모델 영역</h2></div>
|
||||
<span className="review-tag">도면 검토용</span>
|
||||
</div>
|
||||
<div className="empty-viewer">
|
||||
<div className="axis-mark"><i /><i /><i /></div>
|
||||
<strong>도면 분석이 끝나면 모델을 표시합니다</strong>
|
||||
<p>평면 선형과 단면의 기준을 확인한 뒤 형상을 만들 예정입니다.</p>
|
||||
</div>
|
||||
<div className="viewer-foot"><span>원본 도면 기준으로 치수와 위치를 확인합니다</span><span>단위: m</span></div>
|
||||
</div>
|
||||
|
||||
<aside className="side-card">
|
||||
<span className="eyebrow">프로젝트 단계</span>
|
||||
<h2>처음부터 차근차근</h2>
|
||||
<div className="stage-list">
|
||||
{stages.map((stage) => (
|
||||
<article className="stage" key={stage.number}>
|
||||
<span className="stage-number">{stage.number}</span>
|
||||
<div><strong>{stage.title}</strong><p>{stage.detail}</p></div>
|
||||
<span className="stage-state">{stage.state}</span>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
<div className="source-note"><strong>참고 자료</strong><p>이전 분석 문서는 참고용으로만 보관했습니다. 새 모델의 기준은 원본 DXF를 다시 확인해 정합니다.</p></div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<footer>추정값은 확인된 도면 치수와 구분해 기록합니다.</footer>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -0,0 +1,46 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;600;700&display=swap');
|
||||
:root { font-family: 'DM Sans', 'Noto Sans KR', sans-serif; color: #26332e; background: #edf1ed; font-synthesis: none; text-rendering: optimizeLegibility; }
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; min-width: 320px; min-height: 100vh; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
.shell { max-width: 1440px; margin: 0 auto; padding: 0 36px 24px; }
|
||||
.topbar { height: 74px; display: flex; align-items: center; border-bottom: 1px solid #dce3dd; gap: 32px; }
|
||||
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 14px; }
|
||||
.brand-icon { display: grid; place-items: center; width: 30px; height: 30px; color: white; background: #597567; border-radius: 9px; }
|
||||
.project-label { margin-left: auto; color: #63736a; font-size: 12px; }
|
||||
.project-label b { color: #a4aea7; padding: 0 7px; }
|
||||
.live-dot { display: inline-block; width: 7px; height: 7px; background: #86a578; border-radius: 50%; margin-right: 7px; }
|
||||
.drawing-link { font-size: 12px; font-weight: 600; color: #456354; padding: 10px 13px; border: 1px solid #d6e0d8; border-radius: 9px; background: #f5f7f4; }
|
||||
.drawing-link span { margin-left: 8px; }
|
||||
.intro { padding: 38px 2px 26px; display: flex; justify-content: space-between; align-items: end; }
|
||||
.kicker, .eyebrow { display: block; color: #718078; text-transform: uppercase; letter-spacing: .08em; font-size: 10px; font-weight: 700; }
|
||||
h1 { font-size: 30px; letter-spacing: -.04em; margin: 8px 0 7px; }
|
||||
.intro p { color: #758179; font-size: 13px; margin: 0; }
|
||||
.status-pill, .review-tag { border: 1px solid #d4dfd6; color: #567061; background: #f6f8f5; padding: 8px 11px; font-size: 11px; font-weight: 600; border-radius: 20px; }
|
||||
.workspace { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, .9fr); gap: 18px; }
|
||||
.viewer-card, .side-card { border: 1px solid #dce3dd; background: #f8faf7; border-radius: 15px; box-shadow: 0 10px 30px #354b3c0a; }
|
||||
.viewer-card { padding: 20px; }
|
||||
.viewer-head { display: flex; justify-content: space-between; align-items: center; padding-bottom: 17px; }
|
||||
h2 { margin: 5px 0 0; font-size: 17px; letter-spacing: -.025em; }
|
||||
.empty-viewer { height: min(58vh, 490px); min-height: 330px; border: 1px dashed #cbd6ce; border-radius: 11px; background: radial-gradient(ellipse at center, #f3f6f2 0, #e9eeea 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center; color: #58675e; }
|
||||
.empty-viewer strong { font-size: 14px; margin-top: 25px; }
|
||||
.empty-viewer p { color: #859088; font-size: 12px; margin: 8px 18px; }
|
||||
.axis-mark { position: relative; width: 54px; height: 46px; }
|
||||
.axis-mark i { position: absolute; left: 26px; bottom: 5px; width: 1px; height: 38px; background: #92a49a; transform-origin: bottom; }
|
||||
.axis-mark i:nth-child(2) { transform: rotate(90deg); }
|
||||
.axis-mark i:nth-child(3) { transform: rotate(-45deg); background: #b3a789; height: 27px; }
|
||||
.viewer-foot { display: flex; justify-content: space-between; color: #87928a; font-size: 10px; padding: 13px 2px 0; }
|
||||
.side-card { padding: 21px 19px; }
|
||||
.side-card h2 { font-size: 18px; margin: 7px 0 21px; }
|
||||
.stage-list { display: grid; }
|
||||
.stage { display: grid; grid-template-columns: 33px 1fr; gap: 10px; padding: 15px 0; border-top: 1px solid #e5eae5; }
|
||||
.stage-number { color: #84968a; font-size: 11px; font-weight: 700; padding-top: 2px; }
|
||||
.stage strong { font-size: 12px; }
|
||||
.stage p { margin: 5px 0 0; color: #7e8982; font-size: 11px; line-height: 1.6; }
|
||||
.stage-state { grid-column: 2; color: #88958c; font-size: 10px; margin-top: 5px; }
|
||||
.stage:first-child .stage-state { color: #5d7b68; }
|
||||
.source-note { margin-top: 15px; padding: 14px; border-radius: 10px; background: #eff3ee; }
|
||||
.source-note strong { font-size: 11px; }
|
||||
.source-note p { color: #768279; font-size: 10px; line-height: 1.7; margin: 6px 0 0; }
|
||||
footer { color: #849087; font-size: 10px; padding: 19px 3px 0; }
|
||||
@media (max-width: 820px) { .shell { padding: 0 18px 20px; } .topbar { height: 64px; gap: 10px; } .project-label { display: none; } .drawing-link { margin-left: auto; font-size: 10px; } .intro { padding-top: 28px; align-items: start; flex-direction: column; gap: 16px; } h1 { font-size: 25px; } .workspace { grid-template-columns: 1fr; } .empty-viewer { min-height: 290px; height: 45vh; } }
|
||||
@@ -0,0 +1,8 @@
|
||||
import React from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import App from './App.jsx'
|
||||
import './index.css'
|
||||
|
||||
createRoot(document.getElementById('root')).render(
|
||||
<React.StrictMode><App /></React.StrictMode>,
|
||||
)
|
||||
Reference in new issue
Block a user