VPR/errors.html at main · windows10101713/VPR · 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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>VPR | Errors</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Space+Grotesk:wght@500;700&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body data-page="errors">
    <div class="app-shell">
      <aside class="sidebar">
        <div>
          <a class="brand brand-link" href="index.html">
            <div class="brand-mark">V</div>
            <div>
              <p class="eyebrow">Virtual Program Runner</p>
              <h1>VPR</h1>
            </div>
          </a>
          <nav class="menu">
            <a class="menu-item" href="index.html"><span>홈</span><small>Home</small></a>
            <a class="menu-item" href="editor.html"><span>에디터</span><small>Editor</small></a>
            <a class="menu-item" href="examples.html"><span>예제</span><small>Examples</small></a>
            <a class="menu-item" href="assistant.html"><span>AI 도우미</span><small>Assistant</small></a>
            <a class="menu-item is-active" href="errors.html"><span>에러 해결</span><small>Error Fix</small></a>
            <a class="menu-item" href="community.html"><span>공유</span><small>Community</small></a>
          </nav>
        </div>
        <div class="sidebar-card">
          <p class="eyebrow">에러 가이드</p>
          <h2>오류를 따로 해석</h2>
          <p>코드 편집 화면과 분리해 오류 메시지 이해에 집중할 수 있게 만들었습니다.</p>
        </div>
      </aside>

      <main class="main-content page-stack">
        <header class="topbar">
          <div>
            <p class="eyebrow">Error Playground</p>
            <h2 id="page-title">오류 메시지를 붙여넣고 해결 방향 찾기</h2>
          </div>
          <div class="topbar-actions">
            <label class="language-switch" for="localeSelect">
              <span>언어</span>
              <select id="localeSelect">
                <option value="ko">한국어</option>
                <option value="en">English</option>
              </select>
            </label>
            <label class="language-switch" for="themeSelect">
              <span>테마</span>
              <select id="themeSelect">
                <option value="light">Light</option>
                <option value="dark">Dark</option>
              </select>
            </label>
            <a class="ghost-button" href="editor.html">코드로 돌아가기</a>
          </div>
        </header>

        <section class="page-intro">
          <div>
            <p class="eyebrow">Error Fix</p>
            <h3>대표 오류 유형부터 빠르게 해석</h3>
          </div>
          <p>입력한 메시지를 바탕으로 초보자가 먼저 점검할 만한 방향을 제시합니다.</p>
        </section>

        <section class="feature-grid single-column-grid">
          <article class="feature-card wide">
            <p class="eyebrow">에러 진단</p>
            <h3>오류 메시지 붙여넣기</h3>
            <label>
              언어
              <select id="errorLanguageSelect"></select>
            </label>
            <label>
              파일명
              <input id="errorFileInput" type="text" placeholder="예: src/main.py" />
            </label>
            <textarea id="errorInput" placeholder="예: SyntaxError: invalid syntax"></textarea>
            <label>
              관련 코드 (선택)
              <textarea id="errorCodeInput" placeholder="에러가 난 코드 일부를 붙여넣으면 라인 기준 수정 제안이 더 정확해집니다."></textarea>
            </label>
            <button class="primary-button small" id="errorButton" type="button">해결 방법 보기</button>
            <div class="response-box" id="errorResponse"></div>
          </article>

          <article class="feature-card">
            <p class="eyebrow">대표 패턴</p>
            <h3>자주 보는 오류 체크리스트</h3>
            <div class="response-box compact-box">
              <strong>SyntaxError</strong>
              <p>괄호, 따옴표, 콜론, 세미콜론 누락 확인</p>
              <strong>null / undefined</strong>
              <p>값 존재 여부와 반환값 확인</p>
              <strong>index out of range</strong>
              <p>반복문 종료 조건과 배열 길이 확인</p>
            </div>
          </article>
        </section>
      </main>
    </div>

    <script src="app.js"></script>
  </body>
</html>