sori.studio/components/site/RightSidebar.vue

<script setup>
const { data: siteSettings } = await useFetch('/api/site-settings', {
  default: () => ({
    title: 'sori.studio',
    description: 'sori.studio 개인 블로그',
    logoText: '井',
    copyrightText: '©2026 sori.studio'
  })
})
</script>

<template>
  <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">
          <div class="right-sidebar__logo grid h-12 w-12 place-items-center rounded-2xl bg-[var(--site-invert)] text-2xl font-bold text-[var(--site-invert-text)]">
            {{ siteSettings.logoText }}
          </div>
          <div>
            <p class="right-sidebar__title font-semibold">
              {{ siteSettings.title }}
            </p>
            <p class="right-sidebar__description text-sm site-muted">
              {{ siteSettings.description }}
            </p>
          </div>
        </div>
        <form class="right-sidebar__subscribe mt-4 flex gap-2">
          <input class="right-sidebar__input min-w-0 flex-1 rounded-lg px-3 py-2 text-sm site-input" placeholder="Your email">
          <button class="right-sidebar__button rounded-lg px-4 py-2 text-sm font-semibold site-button" type="button">
            Subscribe
          </button>
        </form>
      </div>

      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
        <div class="right-sidebar__row flex items-center justify-between">
          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
            Follow
          </p>
          <div class="right-sidebar__social flex gap-3 text-sm">
            <span>f</span>
            <span>𝕏</span>
            <span>rss</span>
          </div>
        </div>
      </div>

      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
        <div class="right-sidebar__row flex items-center justify-between">
          <p class="right-sidebar__eyebrow text-xs font-semibold uppercase site-muted">
            Recommended
          </p>
          <span>↗</span>
        </div>
        <div class="right-sidebar__links mt-4 grid gap-3 text-sm">
          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/post/hello-sori-studio">
            sori.studio 첫 글과 방향
          </NuxtLink>
          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/projects">
            Projects and services
          </NuxtLink>
          <NuxtLink class="right-sidebar__link site-interactive font-semibold" to="/pages/links">
            Links and portal
          </NuxtLink>
        </div>
      </div>

      <div class="right-sidebar__block site-sidebar-section py-5 pl-5 pr-0">
        <p class="right-sidebar__about text-sm leading-6 site-muted">
          {{ siteSettings.description }}
        </p>
        <NuxtLink class="right-sidebar__about-button mt-4 inline-flex rounded-lg px-4 py-2 text-sm font-semibold site-accent-button" to="/pages/about">
          About {{ siteSettings.title }}
        </NuxtLink>
      </div>
    </div>

    <footer class="right-sidebar__footer py-4 pl-5 pr-0 text-xs site-muted">
      {{ siteSettings.copyrightText }}
    </footer>
  </aside>
</template>