SNS 직접 SVG 아이콘 정렬 수정 v1.5.42

2026-06-02 17:52:54 +09:00
parent 21d01632be
commit 79009b21e6
8 changed files with 41 additions and 16 deletions
--- a/components/site/RightSidebar.vue
+++ b/components/site/RightSidebar.vue
@@ -270,7 +270,7 @@ watch([postTocItems, () => route.fullPath], async () => {
            <a
              v-for="item in followLinks"
              :key="item.id"
-              class="site-interactive p-0.5 hover:opacity-75"
+              class="right-sidebar__social-link site-interactive inline-flex h-5 w-5 items-center justify-center p-0.5 leading-none hover:opacity-75"
              :href="item.href"
              :aria-label="item.label"
              :target="item.external ? '_blank' : undefined"
@@ -285,7 +285,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <path d="M7 10v4h3v7h4v-7h3l1-4h-4V8a1 1 0 0 1 1-1h3V3h-3a5 5 0 0 0-5 5v2z" />
              </svg>
@@ -298,7 +298,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <path d="M4 4l11.733 16H20L8.267 4z" />
                <path d="M4 20l6.768-6.768m2.46-2.46L20 4" />
@@ -312,7 +312,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <path d="M9 19c-4.3 1.4-4.3-2.5-6-3m12 5v-3.5c0-1 .1-1.4-.5-2c2.8-.3 5.5-1.4 5.5-6a4.6 4.6 0 0 0-1.3-3.2 4.2 4.2 0 0 0-.1-3.2s-1.1-.3-3.5 1.3a12.3 12.3 0 0 0-6.2 0c-2.4-1.6-3.5-1.3-3.5-1.3a4.2 4.2 0 0 0-.1 3.2A4.6 4.6 0 0 0 4 9.5c0 4.6 2.7 5.7 5.5 6-.6.6-.6 1.2-.5 2V21" />
              </svg>
@@ -325,7 +325,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <rect x="4" y="4" width="16" height="16" rx="4" />
                <circle cx="12" cy="12" r="3" />
@@ -340,7 +340,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z" />
                <rect x="2" y="9" width="4" height="12" />
@@ -355,7 +355,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <path d="M2.5 17a24.1 24.1 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.6 49.6 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.1 24.1 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.6 49.6 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
                <path d="m10 15 5-3-5-3z" />
@@ -369,7 +369,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <circle cx="5" cy="19" r="1" />
                <path d="M4 4a16 16 0 0 1 16 16" />
@@ -377,7 +377,7 @@ watch([postTocItems, () => route.fullPath], async () => {
              </svg>
              <span
                v-else-if="item.icon === 'custom' && item.iconSvg"
-                class="right-sidebar__custom-social-icon inline-flex h-4 w-4 items-center justify-center [&_svg]:h-4 [&_svg]:w-4"
+                class="right-sidebar__custom-social-icon inline-flex h-4 w-4 items-center justify-center"
                aria-hidden="true"
                v-html="item.iconSvg"
              />
@@ -390,7 +390,7 @@ watch([postTocItems, () => route.fullPath], async () => {
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"
-                class="h-4 w-4"
+                class="block h-4 w-4 shrink-0"
              >
                <path d="M10 13a5 5 0 0 0 7.54.54l2-2a5 5 0 0 0-7.07-7.07l-1.15 1.15" />
                <path d="M14 11a5 5 0 0 0-7.54-.54l-2 2a5 5 0 0 0 7.07 7.07l1.15-1.15" />
@@ -493,3 +493,15 @@ watch([postTocItems, () => route.fullPath], async () => {
    </footer>
  </aside>
 </template>
+
+<style scoped>
+.right-sidebar__custom-social-icon :deep(svg) {
+  display: block;
+  width: 1rem !important;
+  height: 1rem !important;
+  max-width: 1rem;
+  max-height: 1rem;
+  flex-shrink: 0;
+  line-height: 1;
+}
+</style>
--- a/docs/changelog.md
+++ b/docs/changelog.md
@@ -1,5 +1,9 @@
 # 업데이트 요약

+## v1.5.42
+
+- 직접 SVG로 등록한 SNS 아이콘도 기존 SNS 아이콘과 같은 크기와 중앙 정렬로 표시되게 정리했다.
+
 ## v1.5.41

 - SNS 링크가 저장 후 사라져 보이던 문제를 수정했다.
--- a/docs/deploy.md
+++ b/docs/deploy.md
@@ -1,6 +1,6 @@
 # 배포 가이드

-> 로컬 기준 v1.5.41에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.
+> 로컬 기준 v1.5.42에서 `npm run lint`, `npm run build` 검증을 통과했다. NAS 실제 컨테이너 기동과 도메인/프록시 접속 검증은 운영 배포 단계에서 진행한다.

 ## 빌드 유형

@@ -68,6 +68,11 @@ docker exec sori-studio-db pg_isready -U sori_studio -d sori_studio
 docker exec sori-studio-db psql -U sori_studio -d sori_studio -c 'SELECT count(*) AS posts_count FROM posts;'
 ```

+### v1.5.42 참고
+
+- 추가 DB 마이그레이션은 없다.
+- 공개 오른쪽 사이드바 FOLLOW 영역의 직접 SVG 아이콘 정렬만 수정한다.
+
 ### v1.5.41 마이그레이션

 - `049_fix_social_links_jsonb_string.sql`: 기존에 JSONB 문자열로 잘못 저장된 `site_settings.social_links` 값을 JSONB 배열로 복구한다.
--- a/docs/map.md
+++ b/docs/map.md
@@ -71,7 +71,7 @@
 | components/site/SiteSearchModal.vue | `Teleport`·전체 화면 딤·Tags/Posts 결과·일치 구간 강조, 열림 시 `html.site-search-open` 스크롤 잠금 |
 | components/site/LeftSidebar.vue | 왼쪽 사이드바, `lg+`는 `sticky`+고정 높이+내부 무스크롤바 스크롤, `lg` 미만은 고정 슬라이드 패널, 상단 메뉴는 `SidebarPrimaryNavList`+`provide`로 트리·펼침 상태(`sori-primary-nav-expanded`), Authors 영역은 비공개, 푸터 `footer` 링크는 `flex-wrap`·테마 버튼 `shrink-0`, 태그 카테고리·테마 점은 `site-sidebar-nav-row` 호버 |
 | components/site/SidebarPrimaryNavList.vue | 상단 네비: 부모·리프 동일 `before` 막대/호버 원형, 내부 현재 경로 `--site-accent`, 행 `w-full`+`site-sidebar-nav-row` 호버(`#F7F4EF` 라이트), `inject`·`localStorage` 펼침 |
-| components/site/RightSidebar.vue | 오른쪽 사이드바, 일반 화면은 공개 `GET /api/navigation`의 `recommended` 카드 목록(대체 텍스트·썸네일 우선, 외부 URL은 Google 파비콘 fallback), 게시글 상세 데스크톱은 Recommended 대신 H1~H3 TOC(모바일 숨김, 스크롤 위치 기반 활성 표시·내부 자동 스크롤), 설정 기반 SNS Follow(프리셋·사용자 SVG)·구독 폼, About 영역은 비공개, `lg+` 스티키 |
+| components/site/RightSidebar.vue | 오른쪽 사이드바, 일반 화면은 공개 `GET /api/navigation`의 `recommended` 카드 목록(대체 텍스트·썸네일 우선, 외부 URL은 Google 파비콘 fallback), 게시글 상세 데스크톱은 Recommended 대신 H1~H3 TOC(모바일 숨김, 스크롤 위치 기반 활성 표시·내부 자동 스크롤), 설정 기반 SNS Follow(프리셋·사용자 SVG, 16px 아이콘 중앙 정렬)·구독 폼, About 영역은 비공개, `lg+` 스티키 |
 | components/site/MainColumn.vue | 메인 화면 중앙, `lg:max-w-[720px]`로 본문 상한 |
 | components/site/HomeHero.vue | 홈 상단 720px 커버 배너, 라이트·다크 테마별 이미지 교체, 왼쪽 하단 오버레이 제목·본문 |
 | components/site/PostCard.vue | 목록의 게시물 카드, 카드 hover 인터랙션, 태그는 있을 때만 메타에 표시 |
--- a/docs/spec.md
+++ b/docs/spec.md
@@ -38,7 +38,7 @@
 - `Escape` 키는 통합 검색 모달이 열려 있으면 최우선으로 닫고, 그다음 사용자 드롭다운, 이어서 모바일에서만 좌측 슬라이드 메뉴를 닫는다.
 - `/` 키는 `INPUT`·`TEXTAREA`·`SELECT`·`contenteditable`에 포커스가 없고 `Ctrl`/`Meta`/`Alt`와 함께 눌리지 않을 때 통합 검색 모달을 연다. 헤더 검색 영역(`md+`) 클릭으로도 동일하게 연다.
 - 헤더 우측 사용자 아이콘 버튼은 로그인 상태면 회원 아바타/닉네임과 설정·로그아웃 메뉴를, 비로그인 상태면 Guest·Sign up·Sign in 메뉴를 표시한다. 회원 아바타 이미지가 없거나 비로그인 상태인 경우 사용자 메뉴 버튼에는 사람 아이콘을 표시한다.
- 오른쪽 사이드바의 FOLLOW 영역은 사이트 설정의 SNS 링크 목록을 기준으로 표시한다. 관리자가 아이콘 프리셋 또는 직접 SVG 아이콘과 주소를 등록한 항목만 노출하며, 등록된 항목이 없으면 FOLLOW 영역 자체를 숨긴다. SNS 주소는 `https://`를 생략해도 저장 시 자동 보정한다. 관리자 편집 화면은 아이콘과 주소를 기본 입력으로 사용하며, 직접 SVG 프리셋을 선택했을 때만 SVG 코드 입력을 추가로 표시한다.
+- 오른쪽 사이드바의 FOLLOW 영역은 사이트 설정의 SNS 링크 목록을 기준으로 표시한다. 관리자가 아이콘 프리셋 또는 직접 SVG 아이콘과 주소를 등록한 항목만 노출하며, 등록된 항목이 없으면 FOLLOW 영역 자체를 숨긴다. SNS 주소는 `https://`를 생략해도 저장 시 자동 보정한다. 관리자 편집 화면은 아이콘과 주소를 기본 입력으로 사용하며, 직접 SVG 프리셋을 선택했을 때만 SVG 코드 입력을 추가로 표시한다. 공개 FOLLOW 아이콘은 프리셋·직접 SVG 모두 16px 아이콘을 20px 버튼 중앙에 배치한다.

 ### 공개 화면 색상

--- a/docs/update.md
+++ b/docs/update.md
@@ -1,5 +1,9 @@
 # 업데이트 이력

+## v1.5.42
+
+- 공개 오른쪽 사이드바: 직접 SVG SNS 아이콘도 기존 프리셋 아이콘과 같은 16px 크기와 중앙 정렬로 표시되도록 수정.
+
 ## v1.5.41

 - 관리자 사이트 설정: SNS 링크가 JSONB 배열이 아닌 JSON 문자열로 저장되어 저장 후 목록이 비어 보이던 문제 수정.
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "sori.studio",
-  "version": "1.5.41",
+  "version": "1.5.42",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "sori.studio",
-      "version": "1.5.41",
+      "version": "1.5.42",
      "hasInstallScript": true,
      "dependencies": {
        "@nuxtjs/tailwindcss": "^6.14.0",
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "sori.studio",
-  "version": "1.5.41",
+  "version": "1.5.42",
  "private": true,
  "type": "module",
  "imports": {