릴리스: v0.1.16 티어표 편집 화면 마감 정리

frontend/src/views/TierEditorView.vue

@@ -359,7 +359,7 @@ onUnmounted(() => {
 
 <template>
   <section class="head">
-    <div>
+    <div class="head__meta">
       <div class="kicker">{{ gameName || gameId }}</div>
       <input v-model="title" class="titleInput" placeholder="티어표 이름을 입력하세요" :readonly="!canEdit" />
       <input
@@ -396,6 +396,7 @@ onUnmounted(() => {
       </div>
       <div ref="exportBoardEl" class="exportBoard" :class="{ 'exportBoard--active': isExporting }">
         <div v-if="isExporting" class="exportBoard__title">{{ title || gameName || gameId }}</div>
+        <div v-if="isExporting && description" class="exportBoard__description">{{ description }}</div>
         <div ref="groupListEl" class="rows">
         <div v-for="g in groups" :key="g.id" class="row">
           <div class="row__label">
@@ -455,20 +456,20 @@ onUnmounted(() => {
 
 <style scoped>
 .head {
-  display: flex;
+  display: grid;
   gap: 14px;
-  align-items: flex-end;
-  justify-content: space-between;
-  flex-wrap: wrap;
   padding: 6px 2px 14px;
 }
+.head__meta {
+  display: grid;
+  gap: 10px;
+}
 .kicker {
   font-size: 12px;
   opacity: 0.7;
-  margin-bottom: 6px;
 }
 .titleInput {
-  width: min(520px, 92vw);
+  width: min(100%, 920px);
   font-size: 22px;
   font-weight: 800;
   letter-spacing: -0.02em;
@@ -480,8 +481,7 @@ onUnmounted(() => {
   outline: none;
 }
 .descInput {
-  margin-top: 10px;
-  width: min(520px, 92vw);
+  width: min(100%, 920px);
   padding: 10px 12px;
   border-radius: 14px;
   border: 1px solid rgba(255, 255, 255, 0.12);
@@ -492,13 +492,14 @@ onUnmounted(() => {
 }
 .hint {
   opacity: 0.78;
-  margin-top: 8px;
   font-size: 13px;
 }
 .actions {
   display: flex;
   gap: 10px;
   align-items: center;
+  justify-content: flex-end;
+  flex-wrap: wrap;
 }
 .toggle {
   display: inline-flex;
@@ -559,13 +560,13 @@ onUnmounted(() => {
   border: 1px solid rgba(255, 255, 255, 0.12);
   background: rgba(255, 255, 255, 0.04);
   border-radius: 16px;
-  padding: 12px;
+  padding: 20px;
   align-self: start;
 }
 .boardTools {
   display: flex;
   justify-content: flex-end;
-  margin-bottom: 10px;
+  margin-bottom: 14px;
 }
 .exportBoard--active {
   display: grid;
@@ -577,6 +578,13 @@ onUnmounted(() => {
   letter-spacing: -0.03em;
   text-align: left;
 }
+.exportBoard__description {
+  margin-top: -4px;
+  font-size: 14px;
+  line-height: 1.5;
+  opacity: 0.74;
+  text-align: left;
+}
 .rows {
   display: grid;
   gap: 10px;
@@ -594,7 +602,7 @@ onUnmounted(() => {
   display: flex;
   gap: 8px;
   align-items: center;
-  justify-content: flex-start;
+  justify-content: center;
   padding: 10px 8px;
   font-weight: 900;
   overflow: hidden;
@@ -619,13 +627,13 @@ onUnmounted(() => {
   border-radius: 10px;
   padding: 6px 8px;
   font-weight: 900;
-  text-align: left;
+  text-align: center;
   outline: none;
   min-width: 0;
 }
 .row__exportName {
   width: 100%;
-  text-align: left;
+  text-align: center;
   font-weight: 900;
   word-break: break-word;
 }