릴리스: v0.1.11 관리자 레이아웃과 자유 티어표 흐름 정리

frontend/src/views/HomeView.vue

@@ -9,9 +9,6 @@ const router = useRouter()
 const items = ref([])
 const error = ref('')
 const games = computed(() => items.value)
-const suggestOpen = ref(false)
-const suggestName = ref('')
-const suggestError = ref('')
 
 onMounted(async () => {
   try {
@@ -26,26 +23,15 @@ function goGame(gameId) {
   router.push(`/games/${gameId}`)
 }
 
+function goFreeform() {
+  router.push('/editor/freeform/new')
+}
+
 function thumbUrl(g) {
   if (!g.thumbnailSrc) return ''
   return toApiUrl(g.thumbnailSrc)
 }
 
-async function submitSuggest() {
-  suggestError.value = ''
-  const name = (suggestName.value || '').trim()
-  if (!name) {
-    suggestError.value = '게임 이름을 입력해주세요.'
-    return
-  }
-  try {
-    await api.suggestGame(name)
-    suggestName.value = ''
-    suggestOpen.value = false
-  } catch (e) {
-    suggestError.value = '제안 전송에 실패했어요.'
-  }
-}
 </script>
 
 <template>
@@ -54,13 +40,17 @@ async function submitSuggest() {
     <p class="hero__desc">
       게임을 선택하면 새 티어표를 만들거나, 다른 사람들이 올린 티어표를 볼 수 있어요.
     </p>
-    <div class="hero__actions">
-      <button class="smallBtn" @click="suggestOpen = true">새로운 게임 제안</button>
-    </div>
   </section>
 
   <div v-if="error" class="error">{{ error }}</div>
   <section class="grid">
+    <button class="card card--freeform" @click="goFreeform">
+      <div class="thumbWrap thumbWrap--freeform">
+        <div class="thumbFallback">+</div>
+      </div>
+      <div class="card__eyebrow">템플릿 없이 시작</div>
+      <div class="card__title">직접 티어표 만들기</div>
+    </button>
     <button v-for="g in games" :key="g.id" class="card" @click="goGame(g.id)">
       <div class="thumbWrap">
         <img v-if="thumbUrl(g)" class="thumb" :src="thumbUrl(g)" :alt="g.name" />
@@ -69,19 +59,6 @@ async function submitSuggest() {
       <div class="card__title">{{ g.name }}</div>
     </button>
   </section>
-
-  <div v-if="suggestOpen" class="modalBack" @click.self="suggestOpen = false">
-    <div class="modal">
-      <div class="modal__title">새로운 게임 제안</div>
-      <div class="modal__desc">목록에 없는 게임을 입력해 주세요. (관리자가 확인 후 추가)</div>
-      <input v-model="suggestName" class="modal__input" placeholder="게임 이름" @keydown.enter.prevent="submitSuggest" />
-      <div v-if="suggestError" class="modal__error">{{ suggestError }}</div>
-      <div class="modal__actions">
-        <button class="smallBtn" @click="suggestOpen = false">닫기</button>
-        <button class="smallBtn smallBtn--primary" @click="submitSuggest">제안하기</button>
-      </div>
-    </div>
-  </div>
 </template>
 
 <style scoped>
@@ -98,27 +75,6 @@ async function submitSuggest() {
   opacity: 0.86;
   line-height: 1.5;
 }
-.hero__actions {
-  margin-top: 12px;
-}
-.smallBtn {
-  padding: 8px 10px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(255, 255, 255, 0.06);
-  color: rgba(255, 255, 255, 0.92);
-  cursor: pointer;
-  font-weight: 800;
-}
-.smallBtn:hover {
-  background: rgba(255, 255, 255, 0.08);
-}
-.smallBtn--primary {
-  background: rgba(96, 165, 250, 0.18);
-}
-.smallBtn--primary:hover {
-  background: rgba(96, 165, 250, 0.24);
-}
 .grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
@@ -148,6 +104,9 @@ async function submitSuggest() {
   background: rgba(255, 255, 255, 0.07);
   border-color: rgba(255, 255, 255, 0.18);
 }
+.card--freeform {
+  background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(16, 185, 129, 0.12));
+}
 .thumbWrap {
   width: 100%;
   height: 140px;
@@ -158,6 +117,11 @@ async function submitSuggest() {
   display: grid;
   place-items: center;
 }
+.thumbWrap--freeform {
+  background:
+    radial-gradient(circle at top, rgba(96, 165, 250, 0.18), transparent 50%),
+    rgba(0, 0, 0, 0.18);
+}
 .thumb {
   width: 100%;
   height: 100%;
@@ -172,54 +136,12 @@ async function submitSuggest() {
   font-weight: 800;
   letter-spacing: -0.02em;
 }
-.modalBack {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.55);
-  display: grid;
-  place-items: center;
-  z-index: 50;
-}
-.modal {
-  width: min(520px, 92vw);
-  border-radius: 16px;
-  border: 1px solid rgba(255, 255, 255, 0.14);
-  background: rgba(11, 18, 32, 0.92);
-  backdrop-filter: blur(10px);
-  padding: 14px;
-}
-.modal__title {
-  font-weight: 900;
-  font-size: 18px;
-}
-.modal__desc {
-  margin-top: 6px;
-  opacity: 0.78;
-  font-size: 13px;
-}
-.modal__input {
-  margin-top: 12px;
-  width: 100%;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.18);
-  color: rgba(255, 255, 255, 0.92);
-  outline: none;
-  box-sizing: border-box;
-}
-.modal__error {
-  margin-top: 10px;
-  padding: 10px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(239, 68, 68, 0.3);
-  background: rgba(239, 68, 68, 0.12);
-}
-.modal__actions {
-  margin-top: 12px;
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
+.card__eyebrow {
+  font-size: 12px;
+  font-weight: 800;
+  opacity: 0.7;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
 }
 @media (max-width: 720px) {
   .grid {