사용자 화면 사이드바 스타일을 Thred 기준으로 정렬.

좌측 네비게이션과 카테고리의 간격 및 hover 인터랙션을 원본 패턴에 맞게 보정하고, 테마 전환/사이드바 전환 애니메이션과 샘플 폴더 Git 제외 설정을 함께 반영해 사용자 화면 일관성을 높였다.

Co-authored-by: Cursor <cursoragent@cursor.com>

components/site/LeftSidebar.vue

@@ -1,4 +1,13 @@
 <script setup>
+defineProps({
+  menuOpen: {
+    type: Boolean,
+    required: true
+  }
+})
+
+const { isDarkMode, toggleTheme } = useThemeMode()
+
 const { data: tags } = await useFetch('/api/tags', {
   default: () => []
 })
@@ -12,40 +21,55 @@ const { data: navigation } = await useFetch('/api/navigation', {
 </script>
 
 <template>
-  <aside class="left-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
+  <aside
+    class="left-sidebar site-sidebar hidden overflow-hidden border-r border-[var(--site-line)] transition-[width,opacity,border-color] duration-300 ease-out lg:flex lg:flex-col"
+    :class="menuOpen ? 'w-[287px] opacity-100' : 'w-0 opacity-0 border-transparent'"
+  >
     <div class="left-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
-      <div class="left-sidebar__block site-sidebar-section py-3 pl-0 pr-3">
-        <nav class="left-sidebar__nav grid gap-1 text-[15px]">
-          <NuxtLink
-            v-for="item in navigation.primary"
-            :key="item.id"
-            class="left-sidebar__nav-link py-2 pl-3"
-            :to="item.url"
-          >
-            {{ item.label }}
-          </NuxtLink>
+      <div class="left-sidebar__block site-sidebar-section py-3 pl-4 pr-3 sm:pl-5 xl:pl-0">
+        <nav class="left-sidebar__nav" data-nav="menu">
+          <ul class="flex flex-col gap-[3px] text-[15px] text-[var(--site-text)]">
+            <li
+              v-for="item in navigation.primary"
+              :key="item.id"
+              class="group relative flex w-full items-center"
+            >
+              <NuxtLink
+                class="left-sidebar__nav-link flex flex-1 items-center gap-2 rounded-[10px] py-1.5 pr-3 pl-0 leading-tight transition-[padding,background-color] duration-200 before:h-4 before:w-1 before:flex-none before:rounded-sm before:rounded-l-none before:bg-[var(--site-line)] before:transition-[width,height,border-radius,background-color] before:duration-200 hover:bg-[#f2f2f2] hover:px-3 hover:before:h-2 hover:before:w-2 hover:before:rounded-full hover:before:bg-[rgba(17,17,17,0.25)]"
+                :to="item.url"
+              >
+                <span class="left-sidebar__nav-link-label flex-1 transition-transform duration-200 group-hover:translate-x-[3px]">{{ item.label }}</span>
+              </NuxtLink>
+            </li>
+          </ul>
         </nav>
       </div>
 
-      <div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
-        <div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
+      <div class="left-sidebar__block site-sidebar-section px-5 py-4 pr-3 xl:pl-0">
+        <div class="left-sidebar__section-title flex items-center justify-between pr-2 text-xs font-semibold uppercase tracking-[0.01em] site-muted">
           <span>Categories</span>
-          <span>⌃</span>
+          <span class="text-sm">⌃</span>
         </div>
-        <div class="left-sidebar__category-grid mt-4 grid grid-cols-2 gap-x-6 gap-y-4 text-sm">
+        <div class="left-sidebar__category-grid mt-1.5 grid grid-cols-2 gap-x-2 gap-y-[2px] text-[0.8rem] font-medium">
           <NuxtLink
             v-for="tag in tags"
             :key="tag.id"
-            class="left-sidebar__category flex items-center gap-3"
+            class="left-sidebar__category group flex items-center gap-2 rounded-[10px] py-2 pr-3 pl-0 leading-tight transition-[padding,background-color,color] duration-200 hover:bg-[#f2f2f2] hover:px-3"
             :to="`/tag/${tag.slug}`"
           >
-            <span class="left-sidebar__category-color h-4 w-1 rounded-full" :style="{ backgroundColor: tag.color }" />
-            <span class="left-sidebar__category-name">{{ tag.name }}</span>
+            <span class="left-sidebar__category-color h-4 w-1 rounded-sm rounded-l-none transition-all duration-200 group-hover:h-2 group-hover:w-2 group-hover:rounded-full" :style="{ backgroundColor: tag.color }" />
+            <span class="left-sidebar__category-name flex-1 truncate transition-transform duration-200 group-hover:translate-x-[3px]">{{ tag.name }}</span>
+            <span
+              v-if="tag.postCount"
+              class="left-sidebar__category-count invisible text-xs font-medium opacity-0 transition-opacity duration-200 group-hover:visible group-hover:opacity-100"
+            >
+              {{ tag.postCount }}
+            </span>
           </NuxtLink>
         </div>
       </div>
 
-      <div class="left-sidebar__block site-sidebar-section py-5 pl-0 pr-3">
+      <div class="left-sidebar__block site-sidebar-section px-5 py-5 pr-3 xl:pl-0">
         <div class="left-sidebar__section-title flex items-center justify-between text-xs font-semibold uppercase site-muted">
           <span>Authors</span>
           <span>⌃</span>
@@ -68,12 +92,22 @@ const { data: navigation } = await useFetch('/api/navigation', {
         <NuxtLink
           v-for="item in navigation.footer"
           :key="item.id"
+          class="site-interactive"
           :to="item.url"
         >
           {{ item.label }}
         </NuxtLink>
       </nav>
-      <span class="left-sidebar__theme-dot">☾</span>
+      <button
+        class="left-sidebar__theme-dot site-panel-hover site-interactive grid h-7 w-7 place-items-center rounded-full border border-[var(--site-line)]"
+        type="button"
+        :aria-label="isDarkMode ? '라이트 모드로 전환' : '다크 모드로 전환'"
+        :title="isDarkMode ? '라이트 모드' : '다크 모드'"
+        @click="toggleTheme"
+      >
+        <span v-if="isDarkMode">☀</span>
+        <span v-else>☾</span>
+      </button>
     </footer>
   </aside>
 </template>

components/site/PostCard.vue

@@ -8,7 +8,7 @@ defineProps({
 </script>
 
 <template>
-  <article class="post-card site-section">
+  <article class="post-card site-section site-panel-hover">
     <div class="post-card__body site-section-body flex gap-4">
       <img
         v-if="post.featuredImage"
@@ -20,7 +20,7 @@ defineProps({
       <div v-else class="post-card__thumb h-20 w-36 shrink-0 rounded-lg bg-[linear-gradient(135deg,#06333a,#f4a261)]" />
       <div class="post-card__content min-w-0">
         <h2 class="post-card__title text-base font-semibold leading-tight">
-          <NuxtLink class="post-card__title-link hover:opacity-70" :to="post.to">
+          <NuxtLink class="post-card__title-link site-interactive hover:opacity-70" :to="post.to">
             {{ post.title }}
           </NuxtLink>
         </h2>

components/site/RightSidebar.vue

@@ -10,7 +10,7 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
 </script>
 
 <template>
-  <aside class="right-sidebar site-sidebar hidden w-[287px] lg:flex lg:flex-col">
+  <aside class="right-sidebar site-sidebar hidden w-[287px] border-l border-[var(--site-line)] lg:flex lg:flex-col">
     <div class="right-sidebar__scroll min-h-0 flex-1 overflow-y-auto">
       <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
         <div class="right-sidebar__profile flex items-center gap-3">
@@ -55,13 +55,13 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
           <span>↗</span>
         </div>
         <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
-          <NuxtLink class="right-sidebar__link font-semibold" to="/post/hello-sori-studio">
+          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/post/hello-sori-studio">
             sori.studio 첫 글과 방향
           </NuxtLink>
-          <NuxtLink class="right-sidebar__link font-semibold" to="/pages/projects">
+          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/projects">
             Projects and services
           </NuxtLink>
-          <NuxtLink class="right-sidebar__link font-semibold" to="/pages/links">
+          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/links">
             Links and portal
           </NuxtLink>
         </div>

components/site/SiteHeader.vue

@@ -1,5 +1,6 @@
 <script setup>
 const { menuOpen, toggleMenu } = useMenuState()
+const { isDarkMode, toggleTheme } = useThemeMode()
 
 const { data: siteSettings } = await useFetch('/api/site-settings', {
   default: () => ({
@@ -53,9 +54,19 @@ const { data: siteSettings } = await useFetch('/api/site-settings', {
         <NuxtLink class="site-header__buy site-accent-button rounded-lg px-4 py-2 font-semibold" to="/pages/about">
           Subscribe
         </NuxtLink>
-        <NuxtLink class="site-header__nav-link hover:text-ink" to="/pages/about">
+        <NuxtLink class="site-header__nav-link site-interactive rounded-md px-2 py-1" to="/pages/about">
           Account
         </NuxtLink>
+        <button
+          class="site-header__theme-toggle site-panel-hover site-interactive grid h-8 w-8 place-items-center rounded-full border border-[var(--site-line)]"
+          type="button"
+          :aria-label="isDarkMode ? '라이트 모드로 전환' : '다크 모드로 전환'"
+          :title="isDarkMode ? '라이트 모드' : '다크 모드'"
+          @click="toggleTheme"
+        >
+          <span v-if="isDarkMode">☀</span>
+          <span v-else>☾</span>
+        </button>
       </nav>
     </div>
   </header>

components/site/TagHeader.vue

@@ -14,10 +14,7 @@ defineProps({
 <template>
   <section class="tag-header site-section">
     <div class="tag-header__inner site-section-header">
-      <p class="tag-header__eyebrow text-xs font-semibold uppercase text-muted">
-        Tag
-      </p>
-      <h1 class="tag-header__title mt-3 text-4xl font-semibold leading-tight">
+      <h1 class="tag-header__title mt-3 text-xl font-semibold leading-tight">
         {{ title }}
       </h1>
       <p v-if="description" class="tag-header__description mt-3 text-sm leading-6 text-muted">