조정: 모바일 워크스페이스 배경 레이어 정리

수정: 모바일 본문 시작 위치 회귀 보정
조정: 모바일 레일 헤더 여백과 토글 버튼 스타일 통일
2026-04-03 17:58:39 +09:00 · 2026-04-03 17:57:14 +09:00 · 2026-04-03 17:54:37 +09:00 · 2026-04-03 17:52:47 +09:00 · 2026-04-03 16:36:04 +09:00 · 2026-04-03 16:21:50 +09:00
10 changed files with 370 additions and 51 deletions
--- a/backend/index.js
+++ b/backend/index.js
@@ -14,6 +14,7 @@ const topicsRoutes = require('./src/routes/topics')
 const tierListsRoutes = require('./src/routes/tierlists')
 const usersRoutes = require('./src/routes/users')
 const adminRoutes = require('./src/routes/admin')
+const shareRoutes = require('./src/routes/share')

 const app = express()
 const PORT = process.env.PORT ? Number(process.env.PORT) : 5179
@@ -88,6 +89,7 @@ app.use('/api/topics', topicsRoutes)
 app.use('/api/tierlists', tierListsRoutes)
 app.use('/api/users', usersRoutes)
 app.use('/api/admin', adminRoutes)
+app.use('/share', shareRoutes)

 app.listen(PORT, () => {
  console.log(`[backend] listening on http://localhost:${PORT}`)
--- a/backend/src/routes/share.js
+++ b/backend/src/routes/share.js
@@ -0,0 +1,75 @@
+const express = require('express')
+const { findTierListById } = require('../db')
+
+const router = express.Router()
+const APP_ORIGIN = (process.env.APP_ORIGIN || 'http://localhost:5173').replace(/\/+$/, '')
+const DEFAULT_TITLE = 'Tier Maker | 템플릿으로 쉽게 만드는 티어표'
+const DEFAULT_DESCRIPTION = '템플릿과 커스텀 이미지로 티어표를 만들고 저장하고 공유하세요.'
+const DEFAULT_IMAGE_URL = `${APP_ORIGIN}/og-card.png`
+
+function escapeHtml(value) {
+  return String(value || '')
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#39;')
+}
+
+function toAbsoluteUrl(pathname) {
+  const src = String(pathname || '').trim()
+  if (!src) return DEFAULT_IMAGE_URL
+  if (/^https?:\/\//i.test(src)) return src
+  return `${APP_ORIGIN}${src.startsWith('/') ? src : `/${src}`}`
+}
+
+function buildShareHtml({ title, description, imageUrl, shareUrl, appUrl }) {
+  const safeTitle = escapeHtml(title || DEFAULT_TITLE)
+  const safeDescription = escapeHtml(description || DEFAULT_DESCRIPTION)
+  const safeImageUrl = escapeHtml(imageUrl || DEFAULT_IMAGE_URL)
+  const safeShareUrl = escapeHtml(shareUrl || APP_ORIGIN)
+  const safeAppUrl = escapeHtml(appUrl || APP_ORIGIN)
+
+  return `<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>${safeTitle}</title>
+    <meta name="description" content="${safeDescription}" />
+    <link rel="canonical" href="${safeAppUrl}" />
+    <meta property="og:site_name" content="Tier Maker" />
+    <meta property="og:locale" content="ko_KR" />
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="${safeShareUrl}" />
+    <meta property="og:title" content="${safeTitle}" />
+    <meta property="og:description" content="${safeDescription}" />
+    <meta property="og:image" content="${safeImageUrl}" />
+    <meta property="og:image:alt" content="${safeTitle}" />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="${safeTitle}" />
+    <meta name="twitter:description" content="${safeDescription}" />
+    <meta name="twitter:image" content="${safeImageUrl}" />
+    <meta http-equiv="refresh" content="0; url=${safeAppUrl}" />
+  </head>
+  <body>
+    <script>window.location.replace(${JSON.stringify(appUrl || APP_ORIGIN)})</script>
+  </body>
+</html>`
+}
+
+router.get('/editor/:topicId/:tierListId', async (req, res) => {
+  const { topicId, tierListId } = req.params
+  const appUrl = `${APP_ORIGIN}/editor/${encodeURIComponent(topicId)}/${encodeURIComponent(tierListId)}?preview=1`
+  const shareUrl = `${APP_ORIGIN}${req.originalUrl || `/share/editor/${encodeURIComponent(topicId)}/${encodeURIComponent(tierListId)}`}`
+
+  const tierList = await findTierListById(tierListId)
+  const isPublicMatch = tierList?.isPublic && (tierList.topicSlug === topicId || tierList.topicId === topicId)
+  const title = isPublicMatch ? tierList.title : DEFAULT_TITLE
+  const description = isPublicMatch && tierList.description ? tierList.description : DEFAULT_DESCRIPTION
+  const imageUrl = isPublicMatch ? toAbsoluteUrl(tierList.thumbnailSrc) : DEFAULT_IMAGE_URL
+
+  res.type('html').send(buildShareHtml({ title, description, imageUrl, shareUrl, appUrl }))
+})
+
+module.exports = router
--- a/docs/history.md
+++ b/docs/history.md
@@ -1,5 +1,36 @@
 # 의사결정 이력

+## 2026-04-03 v1.4.74
+- 모바일에서는 `workspaceBody` 자체가 카드처럼 배경색을 가지는 것보다, 바깥 앱 셸 배경 위에 각 화면의 실제 카드/섹션만 떠 있는 편이 시각 구조가 더 명확하다고 판단했다.
+- 특히 `workspaceBody`가 좌우 마진을 가진 상태로 별도 배경색을 칠하면 “내용과 무관한 중간 레이어 박스”처럼 보일 수 있으므로, 모바일 한정으로 공통 워크스페이스 배경을 투명 처리해 불필요한 레이어감을 줄이는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.73
+- 모바일 `appShell`은 PC처럼 좌우 3열이 아니라 위쪽 레일과 아래쪽 본문이 세로로 쌓이는 2행 구조이므로, 열 정의만 1fr로 바꾸고 행 정의를 비워두면 암묵 그리드 행이 남는 높이를 늘려 본문이 아래로 밀려 보일 수 있다고 판단했다.
+- 이 문제는 각 화면 본문을 개별 조정하기보다 모바일 셸 컨테이너에서 첫 행은 `auto`, 본문 행은 `minmax(0, 1fr)`로 고정하고 전체 콘텐츠 정렬을 위쪽으로 붙이는 편이 공통 회귀를 가장 작게 되돌리는 방법이라고 정리했다.
+
+## 2026-04-03 v1.4.72
+- 모바일 상단 레일은 왼쪽 유저 카드 영역과 오른쪽 패널 토글 버튼이 같은 시각적 간격 체계를 가져야 전체 셸이 덜 비뚤어져 보이므로, 모바일에서만 `railHeader` 좌우 패딩을 본문 카드 여백보다 조금 넓은 `20px`로 맞추는 편이 낫다고 판단했다.
+- 오른쪽 레일 토글 아이콘이 모바일에서 테두리 없는 아이콘만 보이면 왼쪽 네비 토글 버튼과 컴포넌트 문법이 달라 보이므로, 모바일 한정으로 같은 버튼형 배경/테두리/라운드를 적용해 조작 가능한 컨트롤처럼 통일하는 쪽으로 정리했다.
+
+## 2026-04-03 v1.4.71
+- 모바일에서 공통 본문 하단이 딱 붙어 보이는 문제는 로그인 화면 하나만 고치는 것보다 `workspaceBody` 공통 하단 여백을 safe-area까지 포함해 보강하는 편이 이후 모든 본문 화면에 일괄 적용되어 유지보수상 낫다고 판단했다.
+- 모바일 왼쪽 네비게이션은 데스크톱의 폭 축소형 접기와 목적이 다르므로, 기존 `leftRailCollapsed`를 억지로 재사용하기보다 `mobileLeftNavOpen` 상태를 분리하고 유저 카드 우측 버튼으로 검색/메뉴 묶음만 접는 방식이 더 자연스럽다고 정리했다.
+- 오른쪽 레일은 모바일에서 기본 자동 열림이 실제 조작 공간을 빼앗는 경우가 많으므로, 모바일 진입과 라우트 이동 시 기본 닫힘으로 두되 PC 레이아웃으로 돌아오면 다시 기본 열림을 복원하는 쪽으로 맞췄다.
+- 모바일 터치에서는 짧은 탭 선택과 드래그 시작이 같은 포인터 입력에서 충돌하기 쉬우므로, Sortable에 터치 전용 지연과 threshold를 둬 탭은 선택, 길게 누르고 움직이면 드래그가 되도록 의도를 분리했다.
+
+## 2026-04-03 v1.4.70
+- 카카오톡/디스코드/X 공유 미리보기는 대개 프런트 SPA 자바스크립트를 실행하기 전에 HTML 메타를 먼저 읽으므로, 기존 `index.html` 고정 메타를 프런트 런타임에서 바꾸는 방식만으로는 티어표별 썸네일/제목/설명을 안정적으로 보여주기 어렵다고 판단했다.
+- 현재 운영 구조가 프런트 Nginx 정적 서빙 + 백엔드 API 분리 형태이므로, 모든 SPA 경로를 SSR로 바꾸기보다 공유 버튼만 `/share/editor/...` 서버 렌더링 경로를 사용하게 하고, 이 경로에서 OG 메타를 만든 뒤 기존 `preview=1` 화면으로 넘기는 방식이 가장 작은 변경이라고 정리했다.
+- 다만 비공개 티어표의 제목/설명/썸네일이 외부 크롤러에게 노출되면 안 되므로, 공유 메타 생성은 공개 티어표이면서 URL의 주제 식별자와 실제 티어표 소속이 일치하는 경우에만 개별 메타를 사용하고, 그 외에는 서비스 기본 메타로 떨어지게 제한했다.
+
+## 2026-04-03 v1.4.69
+- 아이템 검색 실패가 라벨 누락이나 이벤트 문제처럼 보일 수도 있지만, 코드상 필터링 조건 자체는 단순했으므로 한글 입력/저장 문자열의 유니코드 정규형 차이까지 먼저 흡수하는 편이 더 안전하다고 판단했다.
+- 검색 시점에만 임시 보정하는 것보다, 검색어와 저장 라벨 비교를 같은 정규화 함수로 통일하고 커스텀 파일명 기반 기본 라벨 생성도 `NFC`로 맞춰 이후 신규 업로드 항목까지 같은 규칙을 타게 정리했다.
+
+## 2026-04-03 v1.4.68
+- 우클릭 복제 UX는 카드 영역과 썸네일 이미지 중 어디를 눌러도 같은 동작이어야 하므로, 개별 카드의 버블링 이벤트만 믿기보다 전역 캡처 단계에서 아이템 우클릭을 먼저 가로채는 방식이 더 안전하다고 판단했다.
+- 편집기에서는 아이템 이미지를 브라우저 기본 이미지처럼 드래그하거나 저장 메뉴로 여는 것보다 보드 조작이 우선이므로, 썸네일 이미지의 기본 드래그도 명시적으로 꺼두는 편이 맞다고 정리했다.
+
 ## 2026-04-03 v1.4.67
 - 이미지 최적화는 해시 기반 중복 재사용을 하기 때문에, 프로필 아바타로 올린 이미지가 우연히 템플릿/사용자 아이템과 같은 `src`를 공유할 수 있다. 이때 자산 카드 쪽을 무조건 숨기면 “실제로는 프로필 이미지로 쓰이는데 관리자 필터에서 안 보이는 상태”가 생기므로, 아바타/썸네일 참조가 있는 `src`는 자산 카드도 유지하는 편이 맞다고 판단했다.

--- a/docs/todo.md
+++ b/docs/todo.md
@@ -1,6 +1,7 @@
 # 할 일 및 이슈

 ## 단기 확인
+- `v1.4.68`에서 아이템 우클릭 처리를 `window` 캡처 단계로 보강했으므로, 보드에 배치된 아이템/미사용 풀 아이템/아이템 썸네일 이미지 위에서 각각 우클릭했을 때 브라우저 기본 메뉴 대신 `아이템 복제` 메뉴가 바로 뜨는지 QA한다.
 - `v1.4.67`에서 같은 `src`가 프로필 아바타와 템플릿/사용자 아이템으로 동시에 쓰여도 자산 카드를 유지하도록 바꿨으므로, 운영 관리자 화면의 `전체 이미지`와 `프로필 이미지` 필터에서 실제 아바타가 보이고 상세 모달의 공유 참조 목록도 자연스럽게 읽히는지 QA한다.
 - 아이템 우클릭 복제 기능을 추가했으므로, 템플릿 아이템 복제/커스텀 아이템 복제/이미 보드에 배치된 아이템 복제 각각에서 복제본이 미사용 풀 맨 앞에 생기고 원본과 복제본을 서로 다른 칸에 동시에 둘 수 있는지 QA한다.
 - 복제본은 `dup-...` 새 ID로 저장되므로, 저장 후 재진입/티어표 복사본 생성/뷰어 모드 열람에서도 복제본이 그대로 유지되는지와, 템플릿 업데이트 요청에 복제된 커스텀 아이템이 포함될 때 운영상 이상이 없는지 확인한다.
--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,44 @@
 # 업데이트 로그

+## 2026-04-03 v1.4.74
+- 모바일 본문 영역에서 `workspaceBody` 배경색이 좌우 마진 안쪽에만 칠해져 중앙에 어설픈 배경 박스가 떠 있는 것처럼 보이던 부분을 정리했다.
+- 모바일에서는 공통 워크스페이스 배경을 투명하게 두고, 실제 화면별 카드/섹션 배경만 남겨 덜 미완성처럼 보이도록 조정했다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.73
+- 모바일에서 왼쪽 레일 아래 메인 컨텐츠가 화면 중간부터 시작하는 것처럼 보이던 회귀를 수정했다.
+- 원인은 모바일 `.appShell`이 1열 그리드로 바뀐 상태에서 세로 행 정의가 없어 `leftRail` 행과 `appMain` 행이 남는 높이를 나눠 가지며 위쪽이 불필요하게 늘어날 수 있던 점이었다. 모바일 그리드를 `auto + minmax(0, 1fr)` 행으로 고정하고 `align-content: start`를 적용해 상단 레일 바로 아래에 본문이 이어지도록 보정했다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.72
+- 모바일 공통 상단 헤더(`railHeader`) 좌우 패딩을 `20px`로 넓혀, 오른쪽 레일 토글 버튼과 화면 가장자리 간격이 왼쪽 유저 카드 쪽과 더 자연스럽게 맞도록 조정했다.
+- 모바일에서 오른쪽 레일 열기/닫기 아이콘도 왼쪽 네비게이션 토글과 같은 버튼형 카드 스타일로 보이도록 `42px` 크기, 테두리, 배경, 둥근 모서리를 맞췄다.
+- 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.71
+- 모바일에서 본문 페이지나 로그인 화면 하단이 카드/버튼 바로 아래에서 끊겨 보여 답답했던 부분을 줄이기 위해, 공통 워크스페이스 본문 하단에 모바일 safe-area 기반 여백을 추가했다.
+- 모바일 왼쪽 네비게이션은 유저 프로필 카드 오른쪽 토글 버튼으로 접고 펼칠 수 있게 바꾸고, 닫힘/열림 전환 시 검색창과 메뉴가 위아래로 부드럽게 스르륵 접히는 애니메이션을 추가했다.
+- 모바일 진입 시 오른쪽 레일은 기본 닫힘으로 시작하고, 모바일에서 직접 오른쪽 레일을 열었을 때도 레일 하단 컨텐츠가 화면 바닥에 붙지 않도록 safe-area 여백을 더했다.
+- 티어표 편집기 모바일 터치 조작에서 아이템을 짧게 탭하면 선택만 하고, 길게 누른 뒤 움직일 때 드래그가 시작되도록 Sortable 터치 시작 지연과 이동 임계값을 추가했다.
+- 서버 점검 안내 문구는 `서비스 내부 점검이 필요합니다.` 대신 `서비스 내부 점검중입니다.`로 다듬었고, 프런트 프로덕션 빌드(`npm run build`) 통과를 확인했다.
+
+## 2026-04-03 v1.4.70
+- 저장된 티어표의 `공유하기` 버튼이 기존 `preview=1` 편집기 주소 대신 `/share/editor/:topicId/:tierListId` 공유 전용 주소를 복사하도록 바꿨다.
+- 이 공유 전용 주소는 공개 티어표인 경우 해당 티어표의 제목, 설명, 썸네일을 기반으로 Open Graph/Twitter 메타 태그를 서버에서 동적으로 생성한 뒤, 실제 뷰어 화면 `/editor/:topicId/:tierListId?preview=1`로 즉시 이동시킨다.
+- 비공개 티어표이거나 주제 경로와 티어표 소속이 맞지 않는 경우에는 개별 제목/설명/썸네일을 노출하지 않고 서비스 기본 공유 메타를 사용하도록 제한했다.
+- 운영 프런트 Nginx에서 `/share/` 경로를 백엔드로 프록시하도록 추가해, 카카오톡/디스코드/X 같은 크롤러가 JS 실행 전에 공유 메타를 먼저 읽을 수 있게 했다.
+- `backend/index.js`, `backend/src/routes/share.js` 문법 검사와 프런트 프로덕션 빌드(`npm run build`)까지 통과하는 것을 확인했다.
+
+## 2026-04-03 v1.4.69
+- 티어표 편집 화면의 아이템 검색에서 한글 아이템명이 검색어와 눈으로는 같아 보여도 내부 유니코드 정규형 차이 때문에 일부 항목이 매칭되지 않을 수 있던 문제를 보강했다.
+- 검색어와 아이템 라벨을 비교하기 전에 `NFC`로 정규화하도록 바꾸고, 커스텀 이미지 파일명에서 기본 라벨을 만들 때도 같은 정규화를 거쳐 한글 조합형 차이로 검색이 빗나가는 상황을 줄였다.
+- 프런트 프로덕션 빌드(`npm run build`)까지 통과하는 것을 확인했다.
+
+## 2026-04-03 v1.4.68
+- 티어표 편집 화면에서 아이템을 우클릭해도 브라우저 기본 컨텍스트 메뉴가 먼저 떠서 `아이템 복제` 메뉴를 누르기 어려울 수 있던 부분을 보강했다.
+- 기존에는 각 아이템 카드의 `@contextmenu.prevent`에 주로 의존했지만, 이제는 `window` 캡처 단계에서 `[data-item-id]` 대상 우클릭을 먼저 잡아 기본 메뉴를 막고 커스텀 복제 메뉴를 열도록 바꿨다.
+- 아이템 썸네일 이미지에도 `draggable="false"`를 명시해, 이미지 자체의 기본 드래그/컨텍스트 동작이 편집 조작보다 앞서는 상황을 줄였다.
+
 ## 2026-04-03 v1.4.67
 - 관리자 아이템 관리에서 프로필 아바타가 `전체 이미지`와 `프로필 이미지` 필터에 보이지 않을 수 있던 문제를 수정했다.
 - 원인은 `image_assets`의 같은 `src`가 템플릿 아이템이나 사용자 아이템에서도 쓰이는 경우, 자산 카드 생성 단계에서 해당 `src`를 무조건 제외하던 필터였다. 이제는 `users.avatar_src`나 각종 썸네일 참조로 실제 사용 중인 자산이면 같은 이미지가 다른 아이템에 재사용되더라도 자산 카드도 함께 유지한다.
--- a/frontend/nginx.conf
+++ b/frontend/nginx.conf
@@ -19,6 +19,15 @@ server {
    proxy_set_header X-Forwarded-Proto https;
  }

+  location /share/ {
+    proxy_pass http://backend:5179/share/;
+    proxy_http_version 1.1;
+    proxy_set_header Host $host;
+    proxy_set_header X-Real-IP $remote_addr;
+    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    proxy_set_header X-Forwarded-Proto https;
+  }
+
  location /uploads/ {
    proxy_pass http://backend:5179/uploads/;
    proxy_http_version 1.1;
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -27,6 +27,7 @@ const RIGHT_RAIL_COPYRIGHT_URL = 'https://x.com/zennbox'
 const currentTopicId = computed(() => route.params.topicId || '')

 const leftRailCollapsed = ref(false)
+const mobileLeftNavOpen = ref(false)
 const rightRailOpen = ref(true)
 const searchQuery = ref('')
 const leftRailSearchPlaceholder = '주제 템플릿 검색'
@@ -312,6 +313,12 @@ onMounted(async () => {
    const saved = window.localStorage.getItem('tier-maker:right-rail-open')
    if (saved === '0') rightRailOpen.value = false
  }
+  if (isMobileLayout.value) {
+    mobileLeftNavOpen.value = false
+    rightRailOpen.value = false
+  } else {
+    rightRailOpen.value = true
+  }
  searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
 })

@@ -339,13 +346,27 @@ watch(
    searchQuery.value = typeof route.query.q === 'string' ? route.query.q : ''
    isCollapsedSearchOpen.value = false
    isGuideModalOpen.value = false
+    if (isMobileLayout.value) {
+      mobileLeftNavOpen.value = false
+      rightRailOpen.value = false
+    }
  }
 )

 watch(
  isMobileLayout,
  (mobile) => {
-    if (mobile) leftRailCollapsed.value = false
+    if (mobile) {
+      leftRailCollapsed.value = false
+      mobileLeftNavOpen.value = false
+      rightRailOpen.value = false
+      return
+    }
+    mobileLeftNavOpen.value = false
+    rightRailOpen.value = true
+    if (typeof window !== 'undefined') {
+      window.localStorage.setItem('tier-maker:right-rail-open', '1')
+    }
  },
  { immediate: true }
 )
@@ -353,7 +374,7 @@ watch(
 watch(
  usesLocalRightRail,
  (needed) => {
-    if (!needed || rightRailOpen.value) return
+    if (!needed || rightRailOpen.value || isMobileLayout.value) return
    rightRailOpen.value = true
    if (typeof window !== 'undefined') {
      window.localStorage.setItem('tier-maker:right-rail-open', '1')
@@ -368,7 +389,10 @@ function isRouteActive(path) {
 }

 function toggleLeftRail() {
-  if (isMobileLayout.value) return
+  if (isMobileLayout.value) {
+    mobileLeftNavOpen.value = !mobileLeftNavOpen.value
+    return
+  }
  leftRailCollapsed.value = !leftRailCollapsed.value
  if (typeof window !== 'undefined') {
    window.localStorage.setItem('tier-maker:left-rail-collapsed', leftRailCollapsed.value ? '1' : '0')
@@ -449,6 +473,7 @@ function reloadApp() {
    class="appShell"
    :class="{
      'appShell--leftCollapsed': leftRailCollapsed,
+      'appShell--mobileNavClosed': isMobileLayout && !mobileLeftNavOpen,
      'appShell--rightClosed': !rightRailOpen,
      'appShell--rightOverlay': isRightRailOverlay,
    }"
@@ -483,7 +508,7 @@ function reloadApp() {

        <div class="leftRail__body">
        <div class="leftRail__content">
-        <div v-if="authReady && auth.user" class="appUserCard">
+        <div v-if="authReady" class="appUserCard">
          <div class="appUserCard__button">
            <img v-if="avatarUrl" :src="avatarUrl" class="appUserCard__avatar" alt="avatar" draggable="false" />
            <div v-else class="appUserCard__avatar appUserCard__avatar--fallback">{{ accountName[0]?.toUpperCase() || 'U' }}</div>
@@ -491,40 +516,52 @@ function reloadApp() {
              <div class="appUserCard__name">{{ accountName }}</div>
              <div class="appUserCard__email">{{ accountEmail }}</div>
            </div>
+            <button
+              v-if="isMobileLayout"
+              class="appUserCard__navToggle"
+              type="button"
+              :aria-label="mobileLeftNavOpen ? '네비게이션 메뉴 닫기' : '네비게이션 메뉴 열기'"
+              :aria-expanded="mobileLeftNavOpen"
+              @click="toggleLeftRail"
+            >
+              <SvgIcon :src="mobileLeftNavOpen ? iconDockToLeft : iconDockToRight" :size="24" />
+            </button>
          </div>
        </div>

-        <form class="searchStub" @submit.prevent="submitGlobalSearch">
-          <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
-            <span class="searchStub__icon">
-              <SvgIcon :src="iconSearch" :size="24" />
-            </span>
-          </button>
-          <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
-        </form>
+        <div class="leftRail__mobileMenu">
+          <form class="searchStub" @submit.prevent="submitGlobalSearch">
+            <button class="searchStub__iconButton" type="button" :aria-label="leftRailCollapsed ? '검색 열기' : '검색'" @click="handleLeftRailSearch">
+              <span class="searchStub__icon">
+                <SvgIcon :src="iconSearch" :size="24" />
+              </span>
+            </button>
+            <input v-model="searchQuery" class="searchStub__input" type="search" :placeholder="leftRailCollapsed ? '' : leftRailSearchPlaceholder" />
+          </form>

-        <nav
-          class="leftNav"
-          :class="{ 'leftNav--hasActive': activeLeftNavIndex >= 0 }"
-          :style="{ '--left-nav-active-index': String(Math.max(activeLeftNavIndex, 0)) }"
-        >
-          <span class="leftNav__indicator" aria-hidden="true"></span>
-          <RouterLink
-            v-for="item in leftNavItems"
-            :key="item.key"
-            :to="item.path"
-            class="leftNav__item"
-            :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
-            :title="leftRailCollapsed ? item.label : ''"
-            :aria-label="leftRailCollapsed ? item.label : undefined"
+          <nav
+            class="leftNav"
+            :class="{ 'leftNav--hasActive': activeLeftNavIndex >= 0 }"
+            :style="{ '--left-nav-active-index': String(Math.max(activeLeftNavIndex, 0)) }"
          >
-            <span class="leftNav__glyph">
-              <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
-              <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
-            </span>
-            <span class="leftNav__label">{{ item.label }}</span>
-          </RouterLink>
-        </nav>
+            <span class="leftNav__indicator" aria-hidden="true"></span>
+            <RouterLink
+              v-for="item in leftNavItems"
+              :key="item.key"
+              :to="item.path"
+              class="leftNav__item"
+              :class="{ 'leftNav__item--active': isRouteActive(item.path) }"
+              :title="leftRailCollapsed ? item.label : ''"
+              :aria-label="leftRailCollapsed ? item.label : undefined"
+            >
+              <span class="leftNav__glyph">
+                <SvgIcon v-if="item.iconSrc" :src="item.iconSrc" :size="24" />
+                <svg v-else viewBox="0 0 24 24" aria-hidden="true"><path :d="item.icon" /></svg>
+              </span>
+              <span class="leftNav__label">{{ item.label }}</span>
+            </RouterLink>
+          </nav>
+        </div>

        </div>
        <div class="leftRail__bottom">
@@ -968,6 +1005,25 @@ function reloadApp() {
  transition: opacity 180ms ease, max-width 220ms ease, transform 220ms ease;
 }

+.leftRail__mobileMenu {
+  display: grid;
+}
+
+.appUserCard__navToggle {
+  display: none;
+  width: 42px;
+  height: 42px;
+  margin-left: auto;
+  border: 0;
+  border-radius: 14px;
+  background: var(--theme-surface-soft);
+  color: var(--theme-text-soft);
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .appUserCard__name {
  font-size: 14px;
  font-weight: 800;
@@ -1975,9 +2031,15 @@ function reloadApp() {
@media (max-width: 860px) {
  .appShell {
    grid-template-columns: 1fr;
+    grid-template-rows: auto minmax(0, 1fr);
+    align-content: start;
    min-height: 100dvh;
  }

+  .railHeader {
+    padding: 0 20px;
+  }
+
  .leftRail {
    min-height: auto;
    height: auto;
@@ -1994,6 +2056,33 @@ function reloadApp() {
    padding: 12px 14px;
  }

+  .appUserCard {
+    margin-bottom: 0;
+  }
+
+  .appUserCard__button {
+    padding: 8px 6px;
+  }
+
+  .appUserCard__meta {
+    max-width: none;
+  }
+
+  .appUserCard__navToggle {
+    display: inline-flex;
+  }
+
+  .workspaceHead .ghostIcon--iconOnly,
+  .rightRail__top .ghostIcon--iconOnly {
+    width: 42px;
+    height: 42px;
+    min-width: 42px;
+    border: 1px solid var(--theme-border);
+    border-radius: 14px;
+    background: var(--theme-surface-soft);
+    color: var(--theme-text-soft);
+  }
+
  .appMain {
    min-height: auto;
    border-left: 0;
@@ -2011,6 +2100,18 @@ function reloadApp() {
    overflow: visible;
  }

+  .leftRail__mobileMenu {
+    max-height: 540px;
+    opacity: 1;
+    transform: translateY(0);
+    overflow: hidden;
+    transition:
+      max-height 260ms ease,
+      opacity 220ms ease,
+      transform 220ms ease,
+      margin-top 220ms ease;
+  }
+
  .appShell--leftCollapsed .leftRail__top {
    display: none;
  }
@@ -2046,17 +2147,35 @@ function reloadApp() {
  }

  .workspaceBody {
-    padding: 0;
+    padding: 0 0 calc(28px + env(safe-area-inset-bottom));
    border-radius: 0;
+    background: transparent;
    margin: 14px 14px 0;
  }

  .workspaceBody--localRail {
-    padding: 0;
+    padding: 0 0 calc(28px + env(safe-area-inset-bottom));
    border-radius: 0;
+    background: transparent;
    margin: 14px 14px 0;
  }

+  .appShell--mobileNavClosed .leftRail__mobileMenu {
+    max-height: 0;
+    margin-top: -8px;
+    opacity: 0;
+    transform: translateY(-8px);
+    pointer-events: none;
+  }
+
+  .appShell--mobileNavClosed .leftRail__bottom {
+    display: none;
+  }
+
+  .rightRail--overlay .rightRail__body {
+    padding-bottom: calc(14px + env(safe-area-inset-bottom));
+  }
+
  .collapsedSearchModal {
    padding: 72px 16px 16px;
  }
--- a/frontend/src/lib/api.js
+++ b/frontend/src/lib/api.js
@@ -39,7 +39,7 @@ async function request(path, { method = 'GET', body, headers } = {}) {
    } else if (res.status >= 500) {
      emitBackendStatus({
        state: 'maintenance',
-        message: '서비스 내부 점검이 필요합니다. 잠시 후 다시 이용해주세요.',
+        message: '서비스 내부 점검중입니다. 잠시 후 다시 이용해주세요.',
        path,
      })
    }
--- a/frontend/src/lib/paths.js
+++ b/frontend/src/lib/paths.js
@@ -25,6 +25,10 @@ export function editorPath(topicId, tierListId, { preview = false } = {}) {
  return preview ? `${base}?preview=1` : base
 }

+export function shareEditorPath(topicId, tierListId) {
+  return `/share/editor/${encodeSegment(topicId)}/${encodeSegment(tierListId)}`
+}
+
 export function mePath() {
  return '/me'
 }
--- a/frontend/src/views/TierEditorView.vue
+++ b/frontend/src/views/TierEditorView.vue
@@ -10,7 +10,7 @@ import addPhotoAlternateIcon from '../assets/icons/add_photo_alternate.svg'
 import shareIcon from '../assets/icons/share.svg'
 import RightRailAd from '../components/RightRailAd.vue'
 import { api } from '../lib/api'
-import { editorNewPath, editorPath, loginPath, mePath, topicPath, userProfilePath } from '../lib/paths'
+import { editorNewPath, editorPath, loginPath, mePath, shareEditorPath, topicPath, userProfilePath } from '../lib/paths'
 import { toApiUrl } from '../lib/runtime'
 import { useAuthStore } from '../stores/auth'
 import { useToast } from '../composables/useToast'
@@ -102,6 +102,12 @@ const isNewTierList = computed(() => tierListId.value === 'new')
 const isOwnTierList = computed(() => !!auth.user && !!ownerId.value && ownerId.value === auth.user.id)
 const canEdit = computed(() => !!auth.user && !previewMode.value && (!ownerId.value || ownerId.value === auth.user.id))
 const iconSizeOptions = [48, 64, 80, 96, 112]
+const touchSortableOptions = {
+  delayOnTouchOnly: true,
+  delay: 180,
+  touchStartThreshold: 8,
+  fallbackTolerance: 8,
+}
 const hasCustomTitle = computed(() => !!(title.value || '').trim())
 const fallbackTimestamp = computed(() => (updatedAt.value ? updatedAt.value : Date.now()))
 const effectiveAuthorName = computed(() => {
@@ -141,7 +147,7 @@ const copiedFromLabel = computed(() => {
  return parts.join(' · ') || '복사해 온 티어표'
 })
 const customItems = computed(() => getOrderedItems().filter((item) => item?.origin === 'custom'))
-const normalizedPoolSearchQuery = computed(() => poolSearchQuery.value.trim().toLowerCase())
+const normalizedPoolSearchQuery = computed(() => normalizeSearchText(poolSearchQuery.value))
 const hasSavedTierList = computed(() => !!(persistedTierListId.value || (tierListId.value && tierListId.value !== 'new')))
 const canRequestTemplateCreate = computed(
  () => canEdit.value && hasSavedTierList.value && templateId.value === 'freeform' && customItems.value.length > 0
@@ -155,8 +161,9 @@ const templateRequestTargetLabel = computed(() => (templateId.value === 'freefor
 const shareTierListUrl = computed(() => {
  const savedTierListId = persistedTierListId.value || (tierListId.value && tierListId.value !== 'new' ? tierListId.value : '')
  if (!savedTierListId) return ''
-  if (typeof window === 'undefined') return editorPath(templateId.value, savedTierListId, { preview: true })
-  return new URL(editorPath(templateId.value, savedTierListId, { preview: true }), window.location.origin).toString()
+  const sharePath = shareEditorPath(templateId.value, savedTierListId)
+  if (typeof window === 'undefined') return sharePath
+  return new URL(sharePath, window.location.origin).toString()
 })
 watch(error, (message) => {
  if (!message) return
@@ -164,6 +171,13 @@ watch(error, (message) => {
  error.value = ''
 })

+function normalizeSearchText(text) {
+  return String(text || '')
+    .normalize('NFC')
+    .trim()
+    .toLowerCase()
+}
+
 function createAutoTierListTitle() {
  const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  const pick = (size) => Array.from({ length: size }, () => chars[Math.floor(Math.random() * chars.length)]).join('')
@@ -229,7 +243,7 @@ function isPoolItemVisible(itemId) {
  const query = normalizedPoolSearchQuery.value
  if (!query) return true
  const item = itemsById.value[itemId]
-  const label = String(item?.label || itemId || '').toLowerCase()
+  const label = normalizeSearchText(item?.label || itemId || '')
  return label.includes(query)
 }

@@ -456,13 +470,26 @@ function duplicateItemToPool() {
  pool.value = [clonedId, ...pool.value]
  selectedItemId.value = clonedId
  closeItemContextMenu()
-  toast.success('복제본을 미사용 아이템 목록에 추가했어요.')
+  toast.success('아이템 추가 완료')
 }

 function handleGlobalContextMenu(event) {
-  if (!itemContextMenu.value.open) return
  const target = event?.target
-  if (target?.closest?.('[data-item-context-menu]') || target?.closest?.('[data-item-id]')) return
+  if (target?.closest?.('[data-item-context-menu]')) {
+    event?.preventDefault?.()
+    event?.stopPropagation?.()
+    return
+  }
+
+  const itemEl = target?.closest?.('[data-item-id]')
+  if (canEdit.value && itemEl?.dataset?.itemId) {
+    event?.preventDefault?.()
+    event?.stopPropagation?.()
+    openItemContextMenu(itemEl.dataset.itemId, event)
+    return
+  }
+
+  if (!itemContextMenu.value.open) return
  closeItemContextMenu()
 }

@@ -526,6 +553,7 @@ async function initSortables() {
  destroySortables()

  groupSortable.value = Sortable.create(groupListEl.value, {
+    ...touchSortableOptions,
    animation: 160,
    handle: '[data-group-handle]',
    ghostClass: 'ghost',
@@ -539,6 +567,7 @@ async function initSortables() {
  })

  poolSortable.value = Sortable.create(poolEl.value, {
+    ...touchSortableOptions,
    group: 'tier-items',
    animation: 160,
    draggable: '[data-item-id]',
@@ -556,6 +585,7 @@ async function initSortables() {

  dropSortables.value = Object.entries(groupDropEls.value).map(([, el]) =>
    Sortable.create(el, {
+      ...touchSortableOptions,
      group: 'tier-items',
      animation: 160,
      draggable: '[data-item-id]',
@@ -605,6 +635,7 @@ function createColumnName(index = columns.value.length) {

 function createCustomItemLabel(fileName = '') {
  const normalized = String(fileName || '')
+    .normalize('NFC')
    .replace(/\.[^.]+$/, '')
    .replace(/[_-]+/g, ' ')
    .replace(/\s+/g, ' ')
@@ -1316,7 +1347,7 @@ watch(
 onMounted(() => {
  if (typeof window === 'undefined') return
  window.addEventListener('pointerdown', handleGlobalPointerDown)
-  window.addEventListener('contextmenu', handleGlobalContextMenu)
+  window.addEventListener('contextmenu', handleGlobalContextMenu, true)
  window.addEventListener('blur', closeItemContextMenu)
  window.addEventListener('scroll', closeItemContextMenu, true)
 })
@@ -1324,7 +1355,7 @@ onMounted(() => {
 onUnmounted(() => {
  if (typeof window !== 'undefined') {
    window.removeEventListener('pointerdown', handleGlobalPointerDown)
-    window.removeEventListener('contextmenu', handleGlobalContextMenu)
+    window.removeEventListener('contextmenu', handleGlobalContextMenu, true)
    window.removeEventListener('blur', closeItemContextMenu)
    window.removeEventListener('scroll', closeItemContextMenu, true)
  }
@@ -1643,9 +1674,13 @@ onUnmounted(() => {
                        :class="{ 'cell--selected': selectedItemId === id }"
                        :data-item-id="id"
                        @click.stop="selectItemByClick(id)"
-                        @contextmenu.prevent.stop="openItemContextMenu(id, $event)"
                      >
-                        <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
+                        <img
+                          :src="resolveItemSrc(itemsById[id])"
+                          class="thumb"
+                          :alt="itemsById[id]?.label || id"
+                          draggable="false"
+                        />
                        <div v-if="showCharacterNames" class="itemNameOverlay">{{ itemsById[id]?.label || id }}</div>
                        <button
                          v-if="canEdit && !isExporting"
@@ -1725,9 +1760,13 @@ onUnmounted(() => {
              }"
              :data-item-id="id"
              @click.stop="selectItemByClick(id)"
-              @contextmenu.prevent.stop="openItemContextMenu(id, $event)"
            >
-              <img :src="resolveItemSrc(itemsById[id])" class="thumb" :alt="itemsById[id]?.label || id" />
+              <img
+                :src="resolveItemSrc(itemsById[id])"
+                class="thumb"
+                :alt="itemsById[id]?.label || id"
+                draggable="false"
+              />
              <div class="poolItem__label">{{ itemsById[id]?.label || id }}</div>
              <div v-if="!canEdit" class="poolItem__state">미배치</div>
            </div>
@@ -3050,7 +3089,7 @@ onUnmounted(() => {
  padding: 8px;
  border-radius: 16px;
  border: 1px solid var(--theme-border);
-  background: var(--theme-card-bg);
+  background: color-mix(in srgb, var(--theme-main-bg) 96%, transparent);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28);
 }
Author	SHA1	Message	Date
zenn	67e192b0e1	조정: 모바일 워크스페이스 배경 레이어 정리	2026-04-03 17:58:39 +09:00
zenn	8ef011bfc8	수정: 모바일 본문 시작 위치 회귀 보정	2026-04-03 17:57:14 +09:00
zenn	9403e3698d	조정: 모바일 레일 헤더 여백과 토글 버튼 스타일 통일	2026-04-03 17:54:37 +09:00
zenn	5b15ec12fa	개선: 모바일 레이아웃 여백과 네비게이션 전환 보강	2026-04-03 17:52:47 +09:00
zenn	28c6dafa02	추가: 티어표 공유 링크 동적 메타 생성	2026-04-03 16:36:04 +09:00
zenn	f98524390b	수정: 티어 편집기 한글 아이템 검색 정규화	2026-04-03 16:21:50 +09:00
zenn	da37fe9fc9	fix color & freeze	2026-04-03 15:51:01 +09:00
zenn	d09cd7e508	수정: 에디터 아이템 우클릭 복제 메뉴 기본 메뉴 차단	2026-04-03 15:34:13 +09:00