릴리스: v1.2.65 축소 검색 모달과 에디터 토글 동작 보정

docs/update.md

@@ -1,5 +1,17 @@
 # 업데이트 로그
 
+## 2026-03-31 v1.2.65
+- 에디터 옵션 토글의 라벨과 스위치 순서를 바꾼 뒤 체크 상태 셀렉터가 끊긴 문제를 보정해, 왼쪽 라벨·오른쪽 스위치 배치에서도 정상 동작하도록 수정함.
+- 왼쪽 사이드 축소 상태 검색은 전용 모달의 기본 스타일이 빠져 있던 문제를 복구해, 다시 중앙 상단 검색 오버레이로 열리도록 정리함.
+
+## 2026-03-31 v1.2.64
+- 메인 콘텐츠가 길어질 때 스크롤 끝이 화면 바닥에 붙지 않도록 중앙 워크스페이스 하단 여백을 추가하고, 긴 작업 화면에서도 마감선이 답답하지 않게 보정함.
+- 템플릿 요청 모달 입력창을 Settings 화면과 같은 어두운 언더라인 입력 문법으로 통일하고, 에디터의 공개/이름 표시 옵션은 체크박스 대신 스위치형 토글로 재구성함.
+
+## 2026-03-31 v1.2.63
+- 앱 셸과 워크스페이스에 걸려 있던 고정 `100dvh` 높이를 풀어, 본문이 길어질 때 중앙 `main` 영역이 잘리거나 접히는 현상을 보정함.
+- 좌우 레일은 그대로 화면 기준 높이를 유지하되, 중앙 작업 영역은 내용만큼 자연스럽게 늘어나도록 높이 계산을 다시 정리함.
+
 ## 2026-03-31 v1.2.62
 - 템플릿 요청 모달의 제목/설명 입력을 Settings 화면과 같은 어두운 입력 문법으로 맞춰 흰 배경/흰 글자처럼 보이던 문제를 정리함.
 - 앱 셸은 사이드 기본 바탕색을 중심으로 재정리하고, 중앙 바디에 배경과 좌우 보더를 줘 긴 스크롤에서도 사이드가 잘리는 듯한 인상을 줄이도록 조정함.

frontend/src/App.vue

@@ -416,7 +416,6 @@ function submitGlobalSearch() {
 <style scoped>
 .appShell {
   min-height: 100dvh;
-  height: 100dvh;
   display: grid;
   grid-template-columns: var(--left-rail-width, 248px) minmax(0, 1fr) var(--right-rail-width, 320px);
   background: rgba(14, 14, 14, 0.96);
@@ -431,7 +430,6 @@ function submitGlobalSearch() {
 .leftRail,
 .rightRail {
   min-height: 100dvh;
-  height: 100dvh;
   border-right: 1px solid rgba(255, 255, 255, 0.08);
   background: rgba(14, 14, 14, 0.92);
   box-sizing: border-box;
@@ -790,7 +788,7 @@ function submitGlobalSearch() {
 
 .appMain {
   min-width: 0;
-  min-height: 100dvh;
+  min-height: 0;
   box-sizing: border-box;
   background: rgba(18, 18, 18, 0.98);
   border-left: 1px solid rgba(255, 255, 255, 0.08);
@@ -806,7 +804,6 @@ function submitGlobalSearch() {
   grid-template-rows: 56px minmax(0, 1fr);
   gap: 0;
   min-height: 100dvh;
-  height: 100dvh;
 }
 
 .workspace--localRail {
@@ -848,7 +845,7 @@ function submitGlobalSearch() {
 
 .workspaceBody {
   min-height: 0;
-  padding: 18px 18px 0;
+  padding: 18px 18px 32px;
   border: 0;
   border-radius: 0;
   background: rgba(24, 24, 24, 0.92);
@@ -858,7 +855,7 @@ function submitGlobalSearch() {
 
 .workspaceBody--localRail {
   min-height: 0;
-  padding: 18px 18px 0;
+  padding: 18px 18px 32px;
   border: 0;
   border-radius: 0;
   background: rgba(24, 24, 24, 0.92);
@@ -896,6 +893,60 @@ function submitGlobalSearch() {
   display: none;
 }
 
+.collapsedSearchModal {
+  position: fixed;
+  inset: 0;
+  z-index: 35;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  padding: 88px 20px 20px;
+  background: rgba(0, 0, 0, 0.44);
+  backdrop-filter: blur(6px);
+}
+
+.collapsedSearchBar {
+  width: min(520px, calc(100vw - 32px));
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 18px 22px;
+  border-radius: 24px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(26, 26, 26, 0.96);
+  box-shadow: 0 28px 60px rgba(0, 0, 0, 0.34);
+}
+
+.collapsedSearchBar__icon {
+  width: 28px;
+  height: 28px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.collapsedSearchBar__icon img {
+  width: 28px;
+  height: 28px;
+  display: block;
+  filter: brightness(0) saturate(100%) invert(94%) sepia(6%) saturate(207%) hue-rotate(186deg) brightness(96%) contrast(92%);
+}
+
+.collapsedSearchBar__input {
+  min-width: 0;
+  flex: 1;
+  border: 0;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.92);
+  font-size: 18px;
+  font-weight: 700;
+  outline: none;
+}
+
+.collapsedSearchBar__input::placeholder {
+  color: rgba(255, 255, 255, 0.46);
+}
 
 .localRightRailRoot {
   min-height: auto;
@@ -1007,7 +1058,6 @@ function submitGlobalSearch() {
 @media (max-width: 860px) {
   .appShell {
     grid-template-columns: 1fr;
-    height: auto;
     min-height: 100dvh;
   }
 
@@ -1091,10 +1141,11 @@ function submitGlobalSearch() {
   }
 
   .collapsedSearchModal {
-    padding-top: 72px;
+    padding: 72px 16px 16px;
   }
 
   .collapsedSearchBar {
+    width: min(100%, calc(100vw - 24px));
     padding: 16px 18px;
     border-radius: 20px;
   }

frontend/src/views/TierEditorView.vue

@@ -744,11 +744,11 @@ onUnmounted(() => {
       <div class="templateRequestDraft">
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 제목</span>
-          <input v-model="templateRequestDraftTitle" class="input" maxlength="80" placeholder="예: 템플릿 등록 요청" />
+          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="80" placeholder="예: 템플릿 등록 요청" />
         </label>
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 설명</span>
-          <textarea v-model="templateRequestDraftDescription" class="textarea templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가용으로 신규 템플릿이 필요합니다." />
+          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가용으로 신규 템플릿이 필요합니다." />
         </label>
       </div>
       <div class="modalCard__actions">
@@ -773,11 +773,11 @@ onUnmounted(() => {
       <div class="templateRequestDraft">
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 제목</span>
-          <input v-model="templateRequestDraftTitle" class="input" maxlength="80" placeholder="예: 템플릿 업데이트 요청" />
+          <input v-model="templateRequestDraftTitle" class="templateRequestDraft__input" maxlength="80" placeholder="예: 템플릿 업데이트 요청" />
         </label>
         <label class="templateRequestDraft__field">
           <span class="templateRequestDraft__label">요청 설명</span>
-          <textarea v-model="templateRequestDraftDescription" class="textarea templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가" />
+          <textarea v-model="templateRequestDraftDescription" class="templateRequestDraft__input templateRequestDraft__textarea" maxlength="240" placeholder="예: 여름 이벤트 한정 캐릭터 추가" />
         </label>
       </div>
       <div class="modalCard__actions">
@@ -990,13 +990,15 @@ onUnmounted(() => {
       </div>
 
       <div class="editorSidebar__section editorSidebar__section--footer">
-        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': !canEdit }">
           <input v-model="isPublic" type="checkbox" :disabled="!canEdit" />
-          <span>공개</span>
+          <span class="toggleSwitch__label">공개</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
         </label>
-        <label class="toggle" :class="{ 'toggle--disabled': !canEdit }">
+        <label class="toggleSwitch" :class="{ 'toggleSwitch--disabled': !canEdit }">
           <input v-model="showCharacterNames" type="checkbox" :disabled="!canEdit" />
-          <span>캐릭터 이름 표시</span>
+          <span class="toggleSwitch__label">캐릭터 이름 표시</span>
+          <span class="toggleSwitch__track"><span class="toggleSwitch__thumb"></span></span>
         </label>
         <div class="editorSidebar__actionGrid">
           <button class="btn btn--ghost editorSidebar__button" @click="downloadImage">이미지 다운로드</button>
@@ -1132,23 +1134,56 @@ onUnmounted(() => {
   display: inline-flex;
   position: relative;
 }
-.toggle {
+.toggleSwitch {
   display: inline-flex;
-  gap: 8px;
   align-items: center;
-  padding: 8px 10px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.12);
-  background: rgba(0, 0, 0, 0.12);
-  font-weight: 800;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 10px 12px;
+  border-radius: 14px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(255, 255, 255, 0.03);
   cursor: pointer;
   user-select: none;
 }
-.toggle input {
-  width: 16px;
-  height: 16px;
+.toggleSwitch input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
 }
-.toggle--disabled {
+.toggleSwitch__track {
+  position: relative;
+  width: 42px;
+  height: 24px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.16);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  transition: background 180ms ease, border-color 180ms ease;
+  flex: 0 0 auto;
+}
+.toggleSwitch__thumb {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 18px;
+  height: 18px;
+  border-radius: 999px;
+  background: rgba(255, 255, 255, 0.94);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
+  transition: transform 180ms ease;
+}
+.toggleSwitch__label {
+  font-weight: 800;
+  color: rgba(255, 255, 255, 0.9);
+}
+.toggleSwitch input:checked ~ .toggleSwitch__track {
+  background: rgba(96, 165, 250, 0.34);
+  border-color: rgba(96, 165, 250, 0.42);
+}
+.toggleSwitch input:checked ~ .toggleSwitch__track .toggleSwitch__thumb {
+  transform: translateX(18px);
+}
+.toggleSwitch--disabled {
   opacity: 0.55;
   pointer-events: none;
 }
@@ -1305,6 +1340,25 @@ onUnmounted(() => {
   font-size: 12px;
   color: rgba(255, 255, 255, 0.64);
 }
+.templateRequestDraft__input {
+  width: 100%;
+  padding: 14px 0;
+  border: 0;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
+  background: transparent;
+  color: rgba(255, 255, 255, 0.94);
+  outline: none;
+  font-size: 18px;
+  line-height: 1.5;
+  letter-spacing: -0.02em;
+  resize: none;
+}
+.templateRequestDraft__input:focus {
+  border-bottom-color: rgba(96, 165, 250, 0.9);
+}
+.templateRequestDraft__input::placeholder {
+  color: rgba(255, 255, 255, 0.34);
+}
 .templateRequestDraft__textarea {
   min-height: 92px;
   resize: vertical;