개발자센터 디자인 리뉴얼

package.json

@@ -50,10 +50,10 @@
  "@types/react": "^18.3.3",
  "@typescript-eslint/eslint-plugin": "^7.16.1",
  "@typescript-eslint/parser": "^7.16.1",
- "@unocss/eslint-plugin": "^0.61.5",
- "@unocss/preset-icons": "^0.61.5",
- "@unocss/preset-wind": "^0.61.5",
- "@unocss/reset": "^0.61.5",
+ "@unocss/eslint-plugin": "^0.63.3",
+ "@unocss/preset-icons": "^0.63.3",
+ "@unocss/preset-wind": "^0.63.3",
+ "@unocss/reset": "^0.63.3",
  "@vinxi/plugin-mdx": "^3.7.1",
  "clsx": "^2.1.1",
  "concurrently": "^8.2.2",
@@ -152,13 +152,13 @@
  "unified": "^11.0.5",
  "unist-util-visit": "^5.0.0",
  "universal-cookie": "^7.2.0",
- "unocss": "^0.61.5",
+ "unocss": "^0.63.3",
  "vinxi": "^0.4.1",
  "vite-imagetools": "^7.0.4",
  "yaml-eslint-parser": "^1.2.3",
  "zod": "^3.23.8"
  },
- "packageManager": "pnpm@9.6.0",
+ "packageManager": "pnpm@9.12.1",
  "pnpm": {
  "patchedDependencies": {
  "[email protected]": "patches/[email protected]",

packages/lint-local-links-valid/package.json

@@ -24,6 +24,5 @@
  },
  "peerDependencies": {
  "eslint": ">=9.0.0"
- },
- "packageManager": "[email protected]"
+ }
 }

src/components/TableOfContents.tsx

@@ -4,14 +4,17 @@ import {
  createEffect,
  createSignal,
  For,
+ type JSXElement,
  onCleanup,
  Show,
  untrack,
 } from "solid-js";
 
 import type { Heading } from "~/genCollections";
+import { useSystemVersion } from "~/state/system-version";
 
 interface Props {
+ children?: JSXElement;
  theme: "aside" | "island";
  headings: Heading[];
 }
@@ -22,6 +25,10 @@ function useActiveId(
 ) {
  const [activeId, setActiveId] = createSignal(headings()[0]?.id ?? null);
 
+ createEffect(() => {
+ setActiveId(headings()[0]?.id ?? null);
+ });
+
  createEffect(() => {
  const observer = new IntersectionObserver(
  (entries) => {
@@ -90,11 +97,23 @@ function useActiveId(
 
 export default function TableOfContents(props: Props) {
  const [childActiveId, setChildActiveId] = createSignal<string | null>(null);
- const activeId = useActiveId(() => props.headings, childActiveId);
+ const [headings, setHeadings] = createSignal<Heading[]>([]);
+ const activeId = useActiveId(headings, childActiveId);
+ const { systemVersion } = useSystemVersion();
+
+ createEffect(() => {
+ void systemVersion();
+ setHeadings(
+ filterHeadingsById(
+ props.headings,
+ [...document.querySelectorAll("article :is(h2, h3)")].map((h) => h.id),
+ ),
+ );
+ });
 
  return (
- <ul class="m-0 flex flex-col list-none gap-6px p-0">
- <For each={props.headings}>
+ <ul class="m-0 flex flex-col list-none gap-1 p-0">
+ <For each={headings()}>
  {(heading) => (
  <Item
  heading={heading}
@@ -126,7 +145,7 @@ function Item(props: {
  <a
  href={`#${props.heading.id}`}
  class={clsx(
- "py-6px block break-keep text-sm font-semibold",
+ "py-1 block break-keep text-[14px] leading-5 font-medium",
  props.isActive ? "text-slate-8" : "text-slate-4",
  )}
  >
@@ -168,14 +187,14 @@ function SubItem(props: {
  return (
  <li
  class={clsx(
- "text-sm transition-colors duration-300",
+ "text-[14px] leading-5 transition-colors duration-300",
  // props.isActive && "bg-slate-100",
  )}
  >
  <a
  href={`#${props.heading.id}`}
  class={clsx(
- "py-6px block break-keep font-medium text-sm transition-[padding-top,padding-bottom] duration-300",
+ "py-1 block break-keep font-medium text-[14px] leading-5 transition-[padding-top,padding-bottom] duration-300 hover:text-portone",
  props.isActive
  ? "text-portone py-8px"
  : props.isParentActive
@@ -212,3 +231,12 @@ function SubItem(props: {
  </li>
  );
 }
+
+function filterHeadingsById(headings: Heading[], ids: string[]): Heading[] {
+ return headings
+ .filter((heading) => ids.some((id) => id === heading.id))
+ .map((heading) => ({
+ ...heading,
+ children: filterHeadingsById(heading.children, ids),
+ }));
+}

src/components/blog/prose.tsx

@@ -67,7 +67,7 @@ export function h5(props: JSX.HTMLAttributes<HTMLHeadingElement>) {
  <h5
  {...others}
  class={clsx(
- "text-.875rem font-500 my-3 leading-[1.7] tracking-[-.006em]",
+ "text-.875rem font-medium my-3 leading-[1.7] tracking-[-.006em]",
  locals.class,
  )}
  >
@@ -82,7 +82,7 @@ export function h6(props: JSX.HTMLAttributes<HTMLHeadingElement>) {
  <h6
  {...others}
  class={clsx(
- "text-.875rem font-500 my-3 leading-[1.7] tracking-[-.006em]",
+ "text-.875rem font-medium my-3 leading-[1.7] tracking-[-.006em]",
  locals.class,
  )}
  >

src/components/prose.css

@@ -1,26 +1,26 @@
 article:has(.prose-marker) h1 {
- @apply text-1.875rem mt-12px mb-12px font-600 leading-[1.15] tracking-[-.021em] first:mt-0 last:mb-0;
+ @apply text-6 mt-12px mb-12px font-500 leading-[28.8px] tracking-[-.021em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h2 {
- @apply text-1.625rem mt-12px mb-12px font-600 leading-[1.22] tracking-[-.02em] first:mt-0 last:mb-0;
+ @apply text-5 mt-12px mb-12px font-500 leading-[24px] tracking-[-.02em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h3 {
- @apply text-1.375rem mt-12px mb-12px font-600 leading-[1.25] tracking-[-.018em] first:mt-0 last:mb-0;
+ @apply text-[18px] mt-12px mb-12px font-500 leading-[22px] tracking-[-.018em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h4 {
- @apply text-1.125rem mt-8px mb-8px font-600 leading-[1.35] tracking-[-.014em] first:mt-0 last:mb-0;
+ @apply text-[15px] mt-8px mb-8px font-500 leading-5 tracking-[-.014em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h5 {
- @apply text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
+ @apply text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) h6 {
- @apply text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
+ @apply text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) p {
- @apply mt-8px mb-8px leading-[1.5] first:mt-0 last:mb-0;
+ @apply mt-8px mb-8px leading-5 font-400 first:mt-0 last:mb-0;
 }
 article:has(.prose-marker) a {
- @apply cursor-pointer text-orange-5 hover:text-orange-7 hover:underline;
+ @apply text-orange-5 hover:text-orange-7 cursor-pointer hover:underline;
 }
 article:has(.prose-marker) blockquote {
  @apply my-2 border-l-4 pl-4;

src/components/prose.tsx

@@ -8,7 +8,7 @@ export function h1(props: JSX.IntrinsicElements["h1"]) {
  <h1
  {...rest}
  class={clsx(
- "text-1.875rem mt-12px mb-12px font-600 leading-[1.15] tracking-[-.021em] first:mt-0 last:mb-0",
+ "text-6 mt-12px mb-12px font-500 leading-[28.8px] tracking-[-.021em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -23,7 +23,7 @@ export function h2(props: JSX.IntrinsicElements["h2"]) {
  <h2
  {...rest}
  class={clsx(
- "text-1.625rem mt-12px mb-12px font-600 leading-[1.22] tracking-[-.02em] first:mt-0 last:mb-0",
+ "text-5 mt-12px mb-12px font-500 leading-[24px] tracking-[-.02em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -38,7 +38,7 @@ export function h3(props: JSX.IntrinsicElements["h3"]) {
  <h3
  {...rest}
  class={clsx(
- "text-1.375rem mt-12px mb-12px font-600 leading-[1.25] tracking-[-.018em] first:mt-0 last:mb-0",
+ "text-[18px] mt-12px mb-12px font-500 leading-[22px] tracking-[-.018em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -53,7 +53,7 @@ export function h4(props: JSX.IntrinsicElements["h4"]) {
  <h4
  {...rest}
  class={clsx(
- "text-1.125rem mt-8px mb-8px font-600 leading-[1.35] tracking-[-.014em] first:mt-0 last:mb-0",
+ "text-[15px] mt-8px mb-8px font-500 leading-5 tracking-[-.014em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -68,7 +68,7 @@ export function h5(props: JSX.IntrinsicElements["h5"]) {
  <h5
  {...rest}
  class={clsx(
- "text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
+ "text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -83,7 +83,7 @@ export function h6(props: JSX.IntrinsicElements["h6"]) {
  <h6
  {...rest}
  class={clsx(
- "text-.875rem mt-8px mb-8px font-500 leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
+ "text-.875rem mt-8px mb-8px font-medium leading-[1.4] tracking-[-.006em] first:mt-0 last:mb-0",
  local.class,
  )}
  >
@@ -98,7 +98,7 @@ export function p(props: JSX.IntrinsicElements["p"]) {
  <p
  {...rest}
  class={clsx(
- "mt-8px mb-8px leading-[1.5] first:mt-0 last:mb-0",
+ "mt-8px mb-8px leading-5 font-400 first:mt-0 last:mb-0",
  local.class,
  )}
  >

src/layouts/gnb/Dropdown.tsx

@@ -7,12 +7,12 @@ import type { SystemVersion } from "~/type";
 export interface DropdownProps {
  children: JSXElement;
  link?: string | Record<SystemVersion, string>;
- items: DropdownItem[];
+ items?: DropdownItem[];
  serverSystemVersion: SystemVersion;
 }
 export interface DropdownItem {
  label: JSXElement;
- link: string;
+ link?: string;
  systemVersion?: SystemVersion;
 }
 export default function Dropdown(props: DropdownProps) {
@@ -43,19 +43,19 @@ export default function Dropdown(props: DropdownProps) {
  </A>
  )}
  </Show>
- <div class="relative w-full">
- {showItems() && (
+ <Show when={showItems() && props.items}>
+ <div class="relative w-full">
  <div class="absolute w-max flex flex-col border bg-white py-2 shadow-lg">
  <For each={props.items}>
  {(item) => {
  const isExternalLink = createMemo(() =>
- item.link.startsWith("https://"),
+ item.link?.startsWith("https://"),
  );
  return (
  <A
  class="inline-flex items-center gap-2 px-4 py-2 hover:bg-slate-1"
  data-system-version={systemVersion}
- href={item.link}
+ href={item.link ?? ""}
  target={isExternalLink() ? "_blank" : undefined} // _self 로 설정하면 라우터가 먹히지 않음
  >
  {item.label}
@@ -67,8 +67,8 @@ export default function Dropdown(props: DropdownProps) {
  }}
  </For>
  </div>
- )}
- </div>
+ </div>
+ </Show>
  </div>
  );
 }