From 135cc0759fad7c18b7a5c57f7a8756d407fdc98b Mon Sep 17 00:00:00 2001
From: ttipo <kysung114y@gmail.com>
Date: Sun, 21 Jun 2026 00:36:48 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20=EC=A0=80=EC=9E=A5=EC=86=8C=20?=
 =?UTF-8?q?=EC=97=B0=EB=8F=99=20=ED=8F=BC=20=E2=80=94=20=ED=91=9C=EC=8B=9C?=
 =?UTF-8?q?=20=EC=A0=9C=EB=AA=A9=20=EC=B5=9C=EC=83=81=EB=8B=A8=20+=20?=
 =?UTF-8?q?=ED=85=9C=ED=94=8C=EB=A6=BF=20=EC=85=80=EB=A0=89=ED=8A=B8=20?=
 =?UTF-8?q?=EB=B3=B5=EC=9B=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 필드 순서 변경: 표시 제목(name)을 최상단으로(기존 slug 가 최상단)
- 템플릿을 체크박스 → 기존 셀렉트 구조로 복원
  (없음[빈 저장소] / {템플릿slug} 템플릿, 가용 시에만 옵션 노출)

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 frontend/src/pages/relay/ProjectReposPage.vue | 118 +++++++++++++-----
 1 file changed, 84 insertions(+), 34 deletions(-)

diff --git a/frontend/src/pages/relay/ProjectReposPage.vue b/frontend/src/pages/relay/ProjectReposPage.vue
index 3d55390..c65782d 100644
--- a/frontend/src/pages/relay/ProjectReposPage.vue
+++ b/frontend/src/pages/relay/ProjectReposPage.vue
@@ -232,6 +232,22 @@ async function unlinkRepo(repo: ApiRepo) {
         class="card form"
         @submit.prevent="linkRepo"
       >
+        <div class="fblock">
+          <div class="flabel">
+            <span class="req">*</span> 표시 제목
+          </div>
+          <div class="fhint">
+            목록과 화면에 표시되는 이름입니다.
+          </div>
+          <input
+            v-model="name"
+            type="text"
+            class="tinput"
+            placeholder="예: 3분기 신제품 런칭 캠페인"
+            maxlength="40"
+          >
+        </div>
+
         <div class="fblock">
           <div class="flabel">
             <span class="req">*</span> 저장소 이름(slug)
@@ -273,19 +289,6 @@ async function unlinkRepo(repo: ApiRepo) {
           </div>
         </div>
 
-        <div class="fblock">
-          <div class="flabel">
-            <span class="req">*</span> 표시 제목
-          </div>
-          <input
-            v-model="name"
-            type="text"
-            class="tinput"
-            placeholder="예: 3분기 신제품 런칭 캠페인"
-            maxlength="40"
-          >
-        </div>
-
         <div class="fblock">
           <div class="flabel">
             <span class="req">*</span> 설명
@@ -322,17 +325,40 @@ async function unlinkRepo(repo: ApiRepo) {
           </div>
         </div>
 
-        <div
-          v-if="meta?.template.available"
-          class="fblock"
-        >
-          <label class="check">
-            <input
-              v-model="useTemplate"
-              type="checkbox"
-            >
-            <span>템플릿 저장소(<code>{{ meta.template.slug }}</code>)를 복제해 생성</span>
-          </label>
+        <!-- 템플릿 -->
+        <div class="fblock">
+          <div class="flabel">
+            템플릿
+          </div>
+          <div class="fhint">
+            템플릿을 사용하면 해당 저장소의 폴더 구조·파일이 새 저장소에 그대로 복제됩니다.
+            (기본 브랜치는 템플릿을 따릅니다)
+          </div>
+          <div class="select-wrap">
+            <select v-model="useTemplate">
+              <option :value="false">
+                없음 (빈 저장소)
+              </option>
+              <option
+                v-if="meta?.template.available"
+                :value="true"
+              >
+                {{ meta.template.slug }} 템플릿
+              </option>
+            </select>
+            <span class="caret">
+              <svg
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+              >
+                <path d="m6 9 6 6 6-6" />
+              </svg>
+            </span>
+          </div>
         </div>
 
         <div class="form-footer">
@@ -598,18 +624,42 @@ textarea.tarea {
   background: var(--accent-weak);
   color: var(--accent);
 }
-.check {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  font-size: 0.844rem;
-  color: var(--text-2);
+/* 템플릿 select */
+.select-wrap {
+  position: relative;
+}
+.select-wrap select {
+  appearance: none;
+  -webkit-appearance: none;
+  width: 100%;
+  height: 2.5rem;
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+  padding: 0 2.375rem 0 0.75rem;
+  font-family: inherit;
+  font-size: 0.875rem;
+  color: var(--text);
+  background: #fff;
   cursor: pointer;
 }
-.check code {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  font-size: 0.8125rem;
-  color: var(--text);
+.select-wrap select:focus {
+  outline: none;
+  border-color: var(--accent);
+  box-shadow: 0 0 0 3px var(--accent-weak);
+}
+.select-wrap .caret {
+  position: absolute;
+  right: 0.75rem;
+  top: 50%;
+  transform: translateY(-50%);
+  color: var(--text-3);
+  pointer-events: none;
+  display: grid;
+  place-items: center;
+}
+.select-wrap .caret svg {
+  width: 1rem;
+  height: 1rem;
 }
 .form-footer {
   display: flex;