@simplysm/solid 13.0.69 → 13.0.71

package/src/components/layout/FormTable.tsx

@@ -6,15 +6,15 @@ export interface FormTableProps extends JSX.HTMLAttributes<HTMLTableElement> {}
 
 const baseClass = clsx(
   "border-separate border-spacing-0 border-0",
-  // 모든 셀: 수직 중앙, 오른쪽/아래 패딩
+  // All cells: vertical center, right/bottom padding
   "[&_td]:align-middle [&_th]:align-middle",
   "[&_td]:pr-1.5 [&_th]:pr-1.5",
   "[&_td]:pb-1 [&_th]:pb-1",
-  // 행의 마지막 셀: 오른쪽 패딩 제거
+  // Last cell in row: remove right padding
   "[&_tr>*:last-child]:pr-0",
-  // 마지막 행 셀: 아래 패딩 제거
+  // Cells in last row: remove bottom padding
   "[&_tr:last-child>*]:pb-0",
-  // th: 오른쪽 정렬, 콘텐츠 너비, 줄바꿈 방지
+  // th: right align, content width, prevent wrapping
   "[&_th]:w-0 [&_th]:whitespace-nowrap [&_th]:pl-1 [&_th]:text-right",
 );
 

package/src/components/layout/sidebar/Sidebar.tsx

@@ -38,18 +38,18 @@ export interface SidebarProps extends JSX.HTMLAttributes<HTMLElement> {
 }
 
 /**
- * 사이드바 본체 컴포넌트
+ * Sidebar body component
  *
  * @remarks
- * - SidebarContainer 내부에서 사용해야 함 (`position: absolute`로 컨테이너에 종속)
- * - Context에서 toggle 상태를 읽어 열림/닫힘 애니메이션 적용
- * - 토글 버튼 미포함 - useSidebarContext().setToggle로 외부에서 제어
+ * - Must be used inside SidebarContainer (`position: absolute` dependency)
+ * - Reads toggle state from Context to apply open/close animation
+ * - Does not include toggle button - controlled externally via useSidebarContext().setToggle
  *
  * @example
  * ```tsx
  * <Sidebar>
  *   <Sidebar.User menus={userMenus}>
- *     <span>사용자</span>
+ *     <span>User</span>
  *   </Sidebar.User>
  *   <Sidebar.Menu menus={menuItems} />
  * </Sidebar>
@@ -66,10 +66,10 @@ const SidebarBase: ParentComponent<SidebarProps> = (props) => {
 
   const { toggle } = useSidebarContext();
 
-  // Tailwind sm: breakpoint 감지
+  // Detect Tailwind sm: breakpoint
   const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
 
-  // 사이드바 열림 여부 계산
+  // Calculate sidebar open state
   const isOpen = createMemo(() => {
     if (isDesktop()) {
       return !toggle();
@@ -77,7 +77,7 @@ const SidebarBase: ParentComponent<SidebarProps> = (props) => {
     return toggle();
   });
 
-  // transform 계산: 닫힘 시 왼쪽으로 숨김
+  // Calculate transform: hide left when closed
   const getTransform = () => {
     return isOpen() ? "translateX(0)" : "translateX(-100%)";
   };

package/src/components/layout/sidebar/SidebarContainer.tsx

@@ -12,6 +12,7 @@ import clsx from "clsx";
 import { twMerge } from "tailwind-merge";
 import { SidebarContext, SM_MEDIA_QUERY } from "./SidebarContext";
 import { mergeStyles } from "../../../helpers/mergeStyles";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 const backdropClass = clsx(
   "absolute",
@@ -31,17 +32,17 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
 }
 
 /**
- * 사이드바 컨테이너 컴포넌트
+ * Sidebar container component
  *
  * @remarks
- * - `position: relative`로 Sidebar를 포함하는 컨테이너 역할
- * - 부모 요소에 높이가 지정되어야 함 (`h-full` 사용)
- * - 콘텐츠 영역의 `overflow-auto`는 사용자가 직접 적용해야 함
- * - SidebarContext.Provider로 toggle 상태 공유
- * - toggle 상태는 메모리에만 유지 (페이지 새로고침 시 초기화)
- * - 데스크탑(640px+)에서 padding-left + transition으로 콘텐츠 확장/축소
- * - 모바일(640px-)에서 backdrop 렌더링 및 클릭 시 닫기
- * - 페이지 이동 시 모바일에서 자동 닫기
+ * - Acts as container with `position: relative` for Sidebar
+ * - Parent element must have height specified (use `h-full`)
+ * - Content area's `overflow-auto` must be applied by user
+ * - Shares toggle state via SidebarContext.Provider
+ * - Toggle state is kept in memory only (reset on page refresh)
+ * - On desktop (640px+): uses padding-left + transition to expand/collapse content
+ * - On mobile (640px-): renders backdrop and closes on click
+ * - Auto closes on mobile when page navigates
  *
  * @example
  * ```tsx
@@ -49,11 +50,11 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
  *   <SidebarContainer>
  *     <Sidebar>
  *       <SidebarUser menus={userMenus}>
- *         <span>사용자</span>
+ *         <span>User</span>
  *       </SidebarUser>
  *       <SidebarMenu menus={menuItems} />
  *     </Sidebar>
- *     <main class="h-full overflow-auto">콘텐츠</main>
+ *     <main class="h-full overflow-auto">Content</main>
  *   </SidebarContainer>
  * </div>
  * ```
@@ -61,12 +62,13 @@ export interface SidebarContainerProps extends JSX.HTMLAttributes<HTMLDivElement
 export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class", "style"]);
 
+  const i18n = useI18nOptional();
   const [toggle, setToggle] = createSignal(false);
 
-  // Tailwind sm: breakpoint 감지
+  // Detect Tailwind sm: breakpoint
   const isDesktop = createMediaQuery(SM_MEDIA_QUERY);
 
-  // 사이드바 열림 여부 계산
+  // Calculate sidebar open state
   const isOpen = createMemo(() => {
     if (isDesktop()) {
       return !toggle();
@@ -74,19 +76,19 @@ export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props)
     return toggle();
   });
 
-  // backdrop 클릭 시 닫기
+  // Close on backdrop click
   const handleBackdropClick = () => {
     setToggle(false);
   };
 
-  // 모바일에서 페이지 이동 시 자동 닫기
+  // Auto-close on page navigation on mobile
   useBeforeLeave(() => {
     if (!isDesktop() && toggle()) {
       setToggle(false);
     }
   });
 
-  // 데스크탑에서 사이드바 열림 시 padding-left 적용 (16rem = w-64)
+  // Apply padding-left on desktop when sidebar is open (16rem = w-64)
   const getPaddingLeft = () => {
     if (isDesktop() && isOpen()) {
       return "16rem";
@@ -111,7 +113,7 @@ export const SidebarContainer: ParentComponent<SidebarContainerProps> = (props)
             onClick={handleBackdropClick}
             onKeyDown={(e) => e.key === "Escape" && handleBackdropClick()}
             role="button"
-            aria-label="사이드바 닫기"
+            aria-label={i18n?.t("sidebar.closeSidebar") ?? "Close sidebar"}
             tabIndex={0}
           />
         </Show>

package/src/components/layout/sidebar/SidebarContext.ts

@@ -1,18 +1,18 @@
 import { createContext, useContext, type Accessor, type Setter } from "solid-js";
 
 /**
- * Tailwind sm: breakpoint에 해당하는 미디어 쿼리
+ * Media query corresponding to Tailwind sm: breakpoint
  * @see tailwind.config.ts screens.sm (640px)
  */
 export const SM_MEDIA_QUERY = "(min-width: 640px)";
 
 /**
- * 사이드바 toggle 상태 공유 Context
+ * Sidebar toggle state shared Context
  *
  * @remarks
- * toggle 시맨틱:
- * - `toggle=false` (기본값): 데스크탑(640px+)에서 열림, 모바일(640px-)에서 닫힘
- * - `toggle=true`: 데스크탑(640px+)에서 닫힘, 모바일(640px-)에서 열림 (오버레이)
+ * toggle semantics:
+ * - `toggle=false` (default): open on desktop (640px+), closed on mobile (640px-)
+ * - `toggle=true`: closed on desktop (640px+), open on mobile (640px-) as overlay
  */
 export interface SidebarContextValue {
   toggle: Accessor<boolean>;
@@ -24,16 +24,16 @@ export const SidebarContext = createContext<SidebarContextValue>();
 export function useSidebarContext(): SidebarContextValue {
   const context = useContext(SidebarContext);
   if (!context) {
-    throw new Error("useSidebarContext는 SidebarContainer 내부에서만 사용할 수 있습니다");
+    throw new Error("useSidebarContext can only be used inside SidebarContainer");
   }
   return context;
 }
 
 /**
- * SidebarContext를 선택적으로 사용 (Context 없으면 undefined 반환)
+ * Optionally use SidebarContext (returns undefined if no Context)
  *
  * @remarks
- * SidebarContainer 외부에서도 사용 가능한 컴포넌트(예: Topbar)에서 사용
+ * Used in components that can be used outside SidebarContainer (e.g., Topbar)
  */
 export function useSidebarContextOptional(): SidebarContextValue | undefined {
   return useContext(SidebarContext);

package/src/components/layout/sidebar/SidebarMenu.tsx

@@ -33,12 +33,12 @@ const headerClass = clsx(
 
 export interface SidebarMenuProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> {
   /**
-   * 메뉴 아이템 배열
+   * Menu items array
    */
   menus: AppMenu[];
 }
 
-// 내부 Context: 초기 펼침 상태 공유
+// Internal Context: share initial open state
 interface MenuContextValue {
   initialOpenItems: Accessor<Set<AppMenu>>;
 }
@@ -46,25 +46,25 @@ interface MenuContextValue {
 const MenuContext = createContext<MenuContextValue>();
 
 /**
- * 사이드바 메뉴 컴포넌트
+ * Sidebar menu component
  *
  * @remarks
- * - "MENU" 헤더 고정 표시
- * - List/ListItem으로 재귀적 메뉴 렌더링
- * - pathname 정확 일치로 선택 상태 판단 (query string 무시)
- * - 선택된 메뉴의 부모들은 초기 렌더링 시 자동 펼침
- * - 외부 링크(://포함)는 새 탭에서 열기
+ * - "MENU" header always shown
+ * - Recursive menu rendering with List/ListItem
+ * - Selection state determined by exact pathname match (ignores query string)
+ * - Parent items of selected menu automatically open on initial render
+ * - External links (containing ://) open in new tab
  *
  * @example
  * ```tsx
  * <SidebarMenu menus={[
- *   { title: "대시보드", href: "/dashboard", icon: IconHome },
+ *   { title: "Dashboard", href: "/dashboard", icon: IconHome },
  *   {
- *     title: "설정",
+ *     title: "Settings",
  *     icon: IconSettings,
  *     children: [
- *       { title: "프로필", href: "/settings/profile" },
- *       { title: "보안", href: "/settings/security" },
+ *       { title: "Profile", href: "/settings/profile" },
+ *       { title: "Security", href: "/settings/security" },
  *     ],
  *   },
  * ]} />
@@ -75,7 +75,7 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
 
   const location = useLocation();
 
-  // 현재 pathname과 일치하는 메뉴의 부모들을 찾아 펼침 상태 계산
+  // Find parents of menu matching current pathname and calculate open state
   const findSelectedPath = (
     menus: AppMenu[],
     pathname: string,
@@ -94,11 +94,11 @@ export const SidebarMenu: Component<SidebarMenuProps> = (props) => {
     return null;
   };
 
-  // pathname 변경에 반응하여 펼침 상태 재계산
+  // Recalculate open state in response to pathname change
   const initialOpenItems = createMemo(() => {
     const selectedPath = findSelectedPath(local.menus, location.pathname);
     return selectedPath
-      ? new Set(selectedPath.slice(0, -1)) // 마지막 항목(선택된 메뉴)은 제외하고 부모들만 펼침
+      ? new Set(selectedPath.slice(0, -1)) // Open parents only, exclude last item (selected menu)
       : new Set<AppMenu>();
   });
 
@@ -128,18 +128,18 @@ const MenuItem: Component<MenuItemProps> = (props) => {
 
   const hasChildren = () => props.menu.children !== undefined && props.menu.children.length > 0;
 
-  // 외부 링크 여부 확인
+  // Check if external link
   const isExternalLink = () => props.menu.href?.includes("://") ?? false;
 
-  // 선택 상태
+  // Selection state
   const isSelected = () => props.menu.href === location.pathname;
 
-  // 펼침 상태 계산 (object reference로 비교)
+  // Calculate open state (compare by object reference)
   const shouldBeOpen = () => menuContext.initialOpenItems().has(props.menu);
 
   const [open, setOpen] = createSignal(false);
 
-  // pathname 변경에 반응하여 펼침 상태 업데이트
+  // Update open state in response to pathname change
   createEffect(() => {
     if (shouldBeOpen()) {
       setOpen(true);

package/src/components/layout/sidebar/SidebarUser.tsx

@@ -40,44 +40,44 @@ export interface SidebarUserMenu {
 
 export interface SidebarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
   /**
-   * 사용자 이름 (필수)
+   * User name (required)
    */
   name: string;
 
   /**
-   * 아바타 아이콘 (미입력 시 기본 사용자 아이콘)
+   * Avatar icon (defaults to user icon if not provided)
    */
   icon?: Component<TablerIconProps>;
 
   /**
-   * 부가 정보 (이메일 등, 미입력 시 이름만 표시)
+   * Additional information (email, etc.; shows name only if not provided)
    */
   description?: string;
 
   /**
-   * 드롭다운 메뉴 (있을 때만 클릭 가능)
+   * Dropdown menu (clickable only when provided)
    */
   menus?: SidebarUserMenu[];
 }
 
 /**
- * 사이드바 사용자 정보 컴포넌트
+ * Sidebar user information component
  *
  * @remarks
- * - name, icon, description props로 사용자 정보 표시
- * - icon 미입력 시 기본 사용자 아이콘 표시
- * - description 미입력 시 이름만 세로 중앙 정렬
- * - menus가 있을 때만 클릭 가능 및 ripple 효과 적용
- * - 클릭 시 드롭다운 메뉴 펼침/접힘
+ * - Displays user info via name, icon, description props
+ * - Shows default user icon if icon not provided
+ * - Shows name only with vertical centering if description not provided
+ * - Clickable and ripple effect apply only when menus provided
+ * - Click toggles dropdown menu
  *
  * @example
  * ```tsx
  * <SidebarUser
- *   name="홍길동"
- *   description="hong@example.com"
+ *   name="John Doe"
+ *   description="john@example.com"
  *   menus={[
- *     { title: "프로필", onClick: () => navigate("/profile") },
- *     { title: "로그아웃", onClick: handleLogout },
+ *     { title: "Profile", onClick: () => navigate("/profile") },
+ *     { title: "Logout", onClick: handleLogout },
  *   ]}
  * />
  * ```

package/src/components/layout/topbar/Topbar.tsx

@@ -5,6 +5,7 @@ import { Icon } from "../../display/Icon";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../form-control/Button";
 import { useSidebarContextOptional } from "../sidebar/SidebarContext";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 import { TopbarActions } from "./TopbarActions";
 import { TopbarContainer } from "./TopbarContainer";
 import { TopbarMenu } from "./TopbarMenu";
@@ -15,24 +16,24 @@ export type { TopbarMenuItem, TopbarMenuProps } from "./TopbarMenu";
 export type { TopbarUserMenu, TopbarUserProps } from "./TopbarUser";
 
 const baseClass = clsx(
-  // 레이아웃
+  // Layout
   "flex",
   "flex-row",
   "gap-2",
   "items-center",
-  // 크기
+  // Size
   "min-h-12",
   "px-2",
-  // 배경/테두리
+  // Background/border
   "bg-white",
   "dark:bg-base-900",
   "border-b",
   "border-base-200",
   "dark:border-base-700",
-  // 스크롤
+  // Scroll
   "overflow-x-auto",
   "overflow-y-hidden",
-  // 기타
+  // Other
   "select-none",
 );
 
@@ -41,20 +42,20 @@ export interface TopbarProps extends JSX.HTMLAttributes<HTMLElement> {
 }
 
 /**
- * 상단바 본체 컴포넌트
+ * Topbar main component
  *
  * @remarks
- * - SidebarContext가 있을 경우 사이드바 토글 버튼 자동 표시
- * - SidebarContainer 내부에서 사용하면 토글 버튼이 나타남
- * - 단독 사용 시 토글 버튼 없이 순수 Topbar로 동작
+ * - Automatically shows sidebar toggle button if SidebarContext exists
+ * - Toggle button appears when used inside SidebarContainer
+ * - Acts as pure Topbar without toggle button when used standalone
  *
  * @example
  * ```tsx
  * <Topbar>
- *   <h1 class="text-lg font-bold">앱 이름</h1>
+ *   <h1 class="text-lg font-bold">App Name</h1>
  *   <Topbar.Menu menus={menuItems} />
  *   <div class="flex-1" />
- *   <Topbar.User menus={userMenus}>사용자</Topbar.User>
+ *   <Topbar.User menus={userMenus}>User</Topbar.User>
  * </Topbar>
  * ```
  */
@@ -68,8 +69,9 @@ interface TopbarComponent extends ParentComponent<TopbarProps> {
 const TopbarBase: ParentComponent<TopbarProps> = (props) => {
   const [local, rest] = splitProps(props, ["children", "class"]);
 
-  // SidebarContext 선택적 사용 (Context 없으면 토글 버튼 미표시)
+  // Optional use of SidebarContext (toggle button not shown if Context doesn't exist)
   const sidebarContext = useSidebarContextOptional();
+  const i18n = useI18nOptional();
 
   const handleToggle = () => {
     sidebarContext?.setToggle((v) => !v);
@@ -80,7 +82,7 @@ const TopbarBase: ParentComponent<TopbarProps> = (props) => {
   return (
     <header {...rest} data-topbar class={getClassName()}>
       <Show when={sidebarContext}>
-        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label="사이드바 토글">
+        <Button variant="ghost" onClick={handleToggle} class="p-2" aria-label={i18n?.t("topbar.toggleSidebar") ?? "Toggle sidebar"}>
           <Icon icon={IconMenu2} size="1.5em" />
         </Button>
       </Show>

package/src/components/layout/topbar/TopbarContainer.tsx

@@ -10,21 +10,21 @@ export interface TopbarContainerProps extends JSX.HTMLAttributes<HTMLDivElement>
 }
 
 /**
- * Topbar + 콘텐츠 영역을 감싸는 레이아웃 컨테이너
+ * Layout container wrapping Topbar and content area
  *
  * @remarks
- * - `flex flex-col h-full` 구조로 Topbar와 콘텐츠를 수직 배치
- * - TopbarContext.Provider로 actions 상태 공유
- * - 부모 요소에 높이가 지정되어야 함
+ * - Uses `flex flex-col h-full` structure to vertically layout Topbar and content
+ * - Shares actions state via TopbarContext.Provider
+ * - Parent element must have height specified
  *
  * @example
  * ```tsx
  * <TopbarContainer>
  *   <Topbar>
- *     <h1>앱 이름</h1>
+ *     <h1>App Name</h1>
  *     <TopbarMenu menus={menuItems} />
  *   </Topbar>
- *   <main class="flex-1 overflow-auto">콘텐츠</main>
+ *   <main class="flex-1 overflow-auto">Content</main>
  * </TopbarContainer>
  * ```
  */

package/src/components/layout/topbar/TopbarContext.ts

@@ -17,7 +17,7 @@ export const TopbarContext = createContext<TopbarContextValue>();
 export function useTopbarActionsAccessor(): Accessor<JSX.Element | undefined> {
   const context = useContext(TopbarContext);
   if (!context) {
-    throw new Error("useTopbarActionsAccessor는 Topbar.Container 내부에서만 사용할 수 있습니다");
+    throw new Error("useTopbarActionsAccessor can only be used inside Topbar.Container");
   }
   return context.actions;
 }
@@ -25,7 +25,7 @@ export function useTopbarActionsAccessor(): Accessor<JSX.Element | undefined> {
 export function createTopbarActions(accessor: () => JSX.Element): void {
   const context = useContext(TopbarContext);
   if (!context) {
-    throw new Error("createTopbarActions는 Topbar.Container 내부에서만 사용할 수 있습니다");
+    throw new Error("createTopbarActions can only be used inside Topbar.Container");
   }
 
   context.setActions(() => accessor());

package/src/components/layout/topbar/TopbarMenu.tsx

@@ -16,6 +16,7 @@ import { Button } from "../../form-control/Button";
 import { Dropdown } from "../../disclosure/Dropdown";
 import { List } from "../../data/list/List";
 import { ListItem } from "../../data/list/ListItem";
+import { useI18nOptional } from "../../../providers/i18n/I18nContext";
 
 const desktopNavBaseClass = clsx("hidden sm:flex", "flex-row gap-1", "items-center");
 const mobileWrapperClass = clsx("flex sm:hidden");
@@ -30,31 +31,31 @@ export interface TopbarMenuItem {
 
 export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "children"> {
   /**
-   * 메뉴 아이템 배열
+   * Menu items array
    */
   menus: TopbarMenuItem[];
 }
 
 /**
- * Topbar 드롭다운 메뉴 컴포넌트
+ * Topbar dropdown menu component
  *
  * @remarks
- * - children이 있는 항목: 클릭 시 드롭다운 표시
- * - children이 없는 항목: 클릭 시 바로 네비게이션
- * - 외부 링크(://포함)는 새 탭에서 열기
- * - pathname 정확 일치로 선택 상태 판단
- * - 하위 메뉴는 List/ListItem으로 렌더링 (모든 계층 펼침)
+ * - Items with children: show dropdown on click
+ * - Items without children: navigate directly on click
+ * - External links (containing ://): open in new tab
+ * - Selection determined by exact pathname match
+ * - Submenus rendered with List/ListItem (all levels expanded)
  *
  * @example
  * ```tsx
  * <TopbarMenu menus={[
- *   { title: "대시보드", href: "/dashboard", icon: IconHome },
+ *   { title: "Dashboard", href: "/dashboard", icon: IconHome },
  *   {
- *     title: "메뉴1",
+ *     title: "Menu 1",
  *     icon: IconFolder,
  *     children: [
- *       { title: "서브메뉴1", href: "/menu1/sub1" },
- *       { title: "서브메뉴2", href: "/menu1/sub2" },
+ *       { title: "Submenu 1", href: "/menu1/sub1" },
+ *       { title: "Submenu 2", href: "/menu1/sub2" },
  *     ],
  *   },
  * ]} />
@@ -63,21 +64,22 @@ export interface TopbarMenuProps extends Omit<JSX.HTMLAttributes<HTMLElement>, "
 export const TopbarMenu: Component<TopbarMenuProps> = (props) => {
   const [local, rest] = splitProps(props, ["menus", "class"]);
   const [mobileMenuOpen, setMobileMenuOpen] = createSignal(false);
+  const i18n = useI18nOptional();
 
   return (
     <>
-      {/* 데스크탑 메뉴 (640px 이상에서만 표시) */}
+      {/* Desktop menu (shown only on 640px and above) */}
       <nav {...rest} data-topbar-menu class={twMerge(desktopNavBaseClass, local.class)}>
         <For each={local.menus}>{(menu) => <TopbarMenuButton menu={menu} />}</For>
       </nav>
 
-      {/* 모바일 햄버거 (640px 미만에서만 표시) */}
+      {/* Mobile hamburger (shown only below 640px) */}
       <div class={mobileWrapperClass}>
         <Dropdown open={mobileMenuOpen()} onOpenChange={setMobileMenuOpen}>
           <Dropdown.Trigger>
             <Button
               variant="ghost"
-              aria-label="메뉴"
+              aria-label={i18n?.t("topbarMenu.menu") ?? "Menu"}
               aria-haspopup="menu"
               aria-expanded={mobileMenuOpen()}
             >
@@ -120,7 +122,7 @@ const TopbarMenuButton: Component<TopbarMenuButtonProps> = (props) => {
     return false;
   };
 
-  // 현재 메뉴 또는 하위 메뉴가 선택되었는지 확인 (createMemo로 캐싱)
+  // Check if current menu or submenu is selected (cached with createMemo)
   const isSelected = createMemo(() => {
     if (props.menu.href === location.pathname) return true;
     if (props.menu.children) {
@@ -200,7 +202,7 @@ const TopbarMenuDropdownItem: Component<TopbarMenuDropdownItemProps> = (props) =
       }
       props.onClose();
     }
-    // href가 없고 children만 있는 경우 클릭해도 닫히지 않음
+    // if no href but has children, clicking doesn't close the menu
   };
 
   return (

package/src/components/layout/topbar/TopbarUser.tsx

@@ -18,31 +18,31 @@ export interface TopbarUserMenu {
 
 export interface TopbarUserProps extends Omit<JSX.HTMLAttributes<HTMLDivElement>, "onClick"> {
   /**
-   * 드롭다운 메뉴 (있을 때만 드롭다운 표시)
+   * Dropdown menu (dropdown shown only when provided)
    */
   menus?: TopbarUserMenu[];
 
   /**
-   * 사용자 정보 영역 (커스터마이징)
+   * User information area (customizable)
    */
   children: JSX.Element;
 }
 
 /**
- * Topbar 사용자 정보 컴포넌트
+ * Topbar user information component
  *
  * @remarks
- * - children으로 사용자 정보 표시 커스터마이징
- * - menus가 있을 때 클릭 시 Dropdown으로 메뉴 표시
- * - Button의 ghost 스타일 사용
+ * - Customize user info display with children
+ * - When menus provided, click shows Dropdown menu
+ * - Uses Button's ghost style
  *
  * @example
  * ```tsx
  * <TopbarUser menus={[
- *   { title: "프로필", onClick: () => navigate("/profile") },
- *   { title: "로그아웃", onClick: handleLogout },
+ *   { title: "Profile", onClick: () => navigate("/profile") },
+ *   { title: "Logout", onClick: handleLogout },
  * ]}>
- *   <span>사용자명</span>
+ *   <span>Username</span>
  * </TopbarUser>
  * ```
  */