릴리스: v1.2.16 메인 화면 사이드와 헤더 단순화

frontend/src/App.vue

@@ -294,41 +294,11 @@ async function logout() {
 
       <aside class="rightRail" :class="{ 'rightRail--closed': !rightRailOpen }" :aria-hidden="!rightRailOpen">
         <template v-if="!usesLocalRightRail">
-          <div class="rightRail__top">
-            <button class="ghostIcon ghostIcon--iconOnly" type="button" aria-label="상태">
-              <img :src="iconGridView" alt="" />
-            </button>
-          </div>
-          <section class="contextCard">
-            <div class="contextCard__label">Context</div>
-            <h2 class="contextCard__title">{{ routeMeta.contextTitle }}</h2>
-            <p class="contextCard__text">{{ routeMeta.contextText }}</p>
-            <button class="contextCard__action" type="button" @click="routeMeta.action">
+          <section class="rightRailAction">
+            <button class="rightRailAction__button" type="button" @click="routeMeta.action">
               {{ routeMeta.actionLabel }}
             </button>
           </section>
-          <section class="contextCard">
-            <div class="contextCard__label">Account</div>
-            <div class="contextStat">
-              <span class="contextStat__name">현재 사용자</span>
-              <span class="contextStat__value">{{ accountName }}</span>
-            </div>
-            <div class="contextStat">
-              <span class="contextStat__name">권한</span>
-              <span class="contextStat__value">{{ isAdmin ? 'Admin' : auth.user ? 'Member' : 'Guest' }}</span>
-            </div>
-          </section>
-          <section class="contextCard contextCard--links">
-            <div class="contextCard__label">Jump</div>
-            <button class="contextLink" type="button" @click="$router.push('/')">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('link')" /></svg>
-              <span>게임 목록으로</span>
-            </button>
-            <button v-if="auth.user" class="contextLink" type="button" @click="$router.push('/me')">
-              <svg viewBox="0 0 24 24" aria-hidden="true"><path :d="railGlyph('link')" /></svg>
-              <span>내 티어표 열기</span>
-            </button>
-          </section>
         </template>
         <div id="local-right-rail-root" class="localRightRailRoot"></div>
       </aside>
@@ -733,83 +703,23 @@ async function logout() {
   gap: 18px;
 }
 
-.localRightRailRoot {
-  min-height: calc(100vh - 40px);
-}
-
-.contextCard {
+.rightRailAction {
   display: grid;
-  gap: 12px;
-  padding: 16px;
-  border-radius: 18px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
 }
 
-.contextCard__label {
-  font-size: 12px;
-  color: rgba(255, 255, 255, 0.42);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-}
-
-.contextCard__title {
-  margin: 0;
-  font-size: 22px;
-  line-height: 1.2;
-}
-
-.contextCard__text {
-  margin: 0;
-  font-size: 14px;
-  line-height: 1.6;
-  color: rgba(255, 255, 255, 0.66);
-}
-
-.contextCard__action {
+.rightRailAction__button {
   width: 100%;
   padding: 12px 14px;
-  border-radius: 12px;
-  border: 0;
-  background: #4b7fe9;
+  border-radius: 14px;
+  border: 1px solid rgba(77, 127, 233, 0.96);
+  background: rgba(77, 127, 233, 0.88);
   color: #fff;
   font-weight: 800;
   cursor: pointer;
 }
 
-.contextCard--links {
-  gap: 10px;
-}
-
-.contextLink {
-  width: 100%;
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 11px 12px;
-  border-radius: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.03);
-  color: rgba(255, 255, 255, 0.86);
-  cursor: pointer;
-}
-
-.contextStat {
-  display: flex;
-  justify-content: space-between;
-  gap: 12px;
-  align-items: center;
-}
-
-.contextStat__name {
-  color: rgba(255, 255, 255, 0.56);
-  font-size: 13px;
-}
-
-.contextStat__value {
-  font-size: 14px;
-  font-weight: 700;
+.localRightRailRoot {
+  min-height: calc(100vh - 40px);
 }
 
 .toastStack {