refactor: 저장소 연동 폼 — 표시 제목 최상단 + 템플릿 셀렉트 복원

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

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-06-21 00:36:48 +09:00
parent 58c0b9510d
commit 135cc0759f
+84 -34
View File
@@ -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;