Step1

frontend/src/views/Settings.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="settings">
+    <h2>설정</h2>
+    <p>애플리케이션 설정을 관리합니다.</p>
+    
+    <div class="settings-form">
+      <div class="form-group">
+        <label>내보내기 경로</label>
+        <input type="text" v-model="form.exportPath" placeholder="./exports">
+      </div>
+      
+      <div class="form-group">
+        <label>로그 보관 기간 (일)</label>
+        <input type="number" v-model="form.retentionDays" min="1">
+      </div>
+      
+      <div class="form-group">
+        <label>웹 서버 포트</label>
+        <input type="number" v-model="form.port" min="1" max="65535">
+      </div>
+      
+      <div class="actions">
+        <button class="btn-primary">저장</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+
+const form = ref({
+  exportPath: './exports',
+  retentionDays: 30,
+  port: 8080
+})
+</script>
+
+<style scoped>
+.settings h2 { margin-bottom: 1rem; }
+
+.settings-form {
+  background: white;
+  border-radius: 8px;
+  padding: 1.5rem;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-width: 500px;
+}
+
+.form-group {
+  margin-bottom: 1rem;
+}
+
+.form-group label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.form-group input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+}
+
+.actions {
+  margin-top: 1.5rem;
+}
+
+.btn-primary {
+  padding: 0.5rem 1rem;
+  background: #3498db;
+  color: white;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+</style>