릴리스: v1.3.37 가이드와 관리자 아이템 모달 정리

frontend/src/App.vue

@@ -526,6 +526,12 @@ function submitGlobalSearch() {
           <div class="guideModal__sidebar">
             <div class="guideModal__eyebrow">Guide</div>
             <div class="guideModal__title">티어 메이커 기능 안내</div>
+            <div class="guideModal__mobilePicker">
+              <label class="guideModal__mobileLabel" for="guide-step-select">단계 선택</label>
+              <select id="guide-step-select" class="guideModal__mobileSelect" :value="guideStepIndex" @change="selectGuideStep(Number($event.target.value))">
+                <option v-for="(step, index) in guideSteps" :key="step.id + '-select'" :value="index">{{ index + 1 }}. {{ step.title }}</option>
+              </select>
+            </div>
             <div class="guideModal__list">
               <button
                 v-for="(step, index) in guideSteps"
@@ -1266,7 +1272,7 @@ function submitGlobalSearch() {
 
 .guideModal__dialog {
   width: min(1180px, calc(100vw - 40px));
-  min-height: min(760px, calc(100dvh - 64px));
+  height: min(760px, calc(100dvh - 64px));
   display: grid;
   grid-template-columns: 260px minmax(0, 1fr);
   border-radius: 28px;
@@ -1299,6 +1305,28 @@ function submitGlobalSearch() {
   letter-spacing: -0.04em;
 }
 
+.guideModal__mobilePicker {
+  display: none;
+}
+
+.guideModal__mobileLabel {
+  font-size: 11px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--theme-text-faint);
+}
+
+.guideModal__mobileSelect {
+  width: 100%;
+  min-height: 56px;
+  padding: 0 18px;
+  border-radius: 18px;
+  border: 1px solid rgba(77, 127, 233, 0.46);
+  background: rgba(77, 127, 233, 0.14);
+  color: var(--theme-text-strong);
+  font-weight: 800;
+}
+
 .guideModal__list {
   display: grid;
   gap: 8px;
@@ -1341,8 +1369,10 @@ function submitGlobalSearch() {
   display: grid;
   grid-template-rows: auto minmax(0, 1fr);
   padding: 24px 28px 28px;
+  min-height: 0;
 }
 
+
 .guideModal__close {
   justify-self: end;
   border: 0;
@@ -1354,6 +1384,7 @@ function submitGlobalSearch() {
 
 .guideModal__content {
   min-width: 0;
+  min-height: 0;
   display: grid;
   grid-template-columns: 52px minmax(0, 1fr) 52px;
   gap: 16px;
@@ -1362,6 +1393,7 @@ function submitGlobalSearch() {
 
 .guideModal__body {
   min-width: 0;
+  min-height: 0;
   display: grid;
   gap: 18px;
 }
@@ -1617,7 +1649,7 @@ function submitGlobalSearch() {
 @media (max-width: 1200px) {
   .guideModal__dialog {
     grid-template-columns: 1fr;
-    min-height: auto;
+    height: min(860px, calc(100dvh - 40px));
   }
 
   .guideModal__sidebar {
@@ -1669,20 +1701,55 @@ function submitGlobalSearch() {
 
   .guideModal__dialog {
     width: min(100%, calc(100vw - 24px));
+    height: min(100%, calc(100dvh - 24px));
+  }
+
+  .guideModal__sidebar {
+    gap: 14px;
+    padding: 20px 18px;
+  }
+
+  .guideModal__mobilePicker {
+    display: grid;
+    gap: 8px;
+  }
+
+  .guideModal__list {
+    display: none;
   }
 
   .guideModal__main {
     padding: 20px 18px 18px;
+    min-height: 0;
   }
 
   .guideModal__content {
     grid-template-columns: 1fr;
+    min-height: 0;
   }
 
   .guideModal__arrow {
     display: none;
   }
 
+  .guideModal__body {
+    align-content: start;
+    overflow: auto;
+    padding-right: 2px;
+  }
+
+  .guideModal__mediaPlaceholder {
+    border-radius: 22px;
+  }
+
+  .guideModal__stepTitle {
+    font-size: 24px;
+  }
+
+  .guideModal__stepSummary {
+    font-size: 15px;
+  }
+
   .guideModal__footer {
     flex-direction: column;
     align-items: stretch;
@@ -1695,10 +1762,6 @@ function submitGlobalSearch() {
   .guideDockButton {
     display: none;
   }
-
-  .guideModal__list {
-    grid-template-columns: 1fr 1fr;
-  }
 }
 
 @media (max-width: 860px) {