map-test/index.html at main · smee6/map-test · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D 매장 지도 에디터</title>
    <link rel="stylesheet" href="./src/styles/style.css">
</head>

<body>
    <!-- 왼쪽 사이드바: 오브젝트 리스트 -->
<div id="left-sidebar">
    <div id="object-list">
        <h2>Shelf List</h2>
        <ul id="object-ul"></ul>
    </div>
</div>

    <!-- 오른쪽 사이드바: 생성 UI 및 프로젝트 관리 -->
    <div id="right-sidebar">
        <div id="ui">
            <!-- 매장 영역 설정 -->
            <div id="store-settings">
                <h2>매장 설정</h2>
                <label for="store-width">Width:</label>
                <input type="number" id="store-width" value="50">
                <label for="store-depth">Depth:</label>
                <input type="number" id="store-depth" value="50">
                <button id="create-store">매장 생성</button>
            </div>
            <!-- 선반 생성 UI -->
            <div id="shelf-creator">
                <h2>선반 생성</h2>
                <label for="shelf-width">Width:</label>
                <input type="number" id="shelf-width" value="6">
                <label for="shelf-height">Height:</label>
                <input type="number" id="shelf-height" value="2">
                <label for="shelf-depth">Depth:</label>
                <input type="number" id="shelf-depth" value="2">
                <label for="shelf-color">Color:</label>
                <input type="color" id="shelf-color" value="#7DCFED">
                <button id="add-shelf">선반 추가</button>
            </div>
            <!-- 타일 생성 UI -->
            <div id="tile-creator">
                <h2>타일 생성</h2>
                <label for="tile-width">Width:</label>
                <input type="number" id="tile-width" value="10">
                <label for="tile-depth">Depth:</label>
                <input type="number" id="tile-depth" value="6">
                <label for="tile-color">Color:</label>
                <input type="color" id="tile-color" value="#808080">
                <button id="add-tile">타일 추가</button>
            </div>
            <!-- 선택 오브젝트 삭제 UI -->
            <div id="object-controls">
                <h2>선택 오브젝트</h2>
                <button id="delete-object">선택 삭제</button>
            </div>
            <!-- Grid Snap 토글 -->
            <div id="grid-options">
                <h2>Grid 옵션</h2>
                <label for="grid-snap-toggle">Grid Snap:</label>
                <input type="checkbox" id="grid-snap-toggle" checked>
            </div>
            <!-- 프로젝트 관리 UI -->
            <div id="project-controls">
                <h2>프로젝트 관리</h2>
                <button id="save-project">Save Project</button>
                <button id="load-project">Load Project</button>
                <button id="export-map">Export Map</button>
            </div>
        </div>
    </div>

    <!-- 중앙 컨테이너: 3D 씬 렌더링 영역 -->
    <div id="center-container">
        <div id="container"></div>
    </div>

    <!-- 파일로 프로젝트 불러오기를 위한 숨겨진 파일 입력 -->
    <input type="file" id="project-file-input" style="display: none;">

    <script type="module" src="./src/main.js"></script>
</body>

</html>