Commit @ef3a937d145e5b6a29d57e39b2a2c044795ca83a

임동욱 08-18

feat: 시안이 지정한 아이콘 버튼 복구 — 행 관리 4화면 + 테마 토글

아이콘이 없어 텍스트로 대체돼 있던 자리를 시안대로 되돌린다. `@fox`에 Phosphor 전량이
들어왔으므로 더 이상 막힐 이유가 없다.

- students: 돋보기(FoxMagnifyingGlassIcon) — "조회" 텍스트 버튼을 대체
- admins · boards · decoration-items: 연필(FoxPencilSimpleIcon)·휴지통(FoxTrashIcon)
- 테마 토글: 손으로 그린 monitor/moon/sun 3종을 @fox 아이콘으로 교체하고
components/ui/icons/ 디렉터리를 제거했다(다른 사용처 없음)

버튼을 `components/ui/button`이 아니라 `FoxIconButton`으로 쓴 이유 — @fox 아이콘은 스스로
크기를 갖지 않고 감싼 슬롯이 정하는 규약인데, 그 슬롯 크기를 실제로 정의하는 CSS가 있는 건
@fox 쪽뿐이다. Tailwind 제거(e3d3133)가 빌드 설정만 바꾸고 components/ui 19개 파일은 그대로
둔 탓에 `size-9`·`inline-flex` 같은 클래스가 전부 무효라, 그쪽에 아이콘을 넣으면 SVG가 기본
300×150으로 그려진다.

테마 토글은 같은 이유로 실제 버그였다 — 표시 전환을 Tailwind의 `hidden theme-*:contents`에
기대고 있어서 세 아이콘이 한꺼번에 보이고 있었다. 같은 동작을 CSS 모듈로 다시 세웠고,
`aria-label` 대신 `sr-only` 텍스트로 현재 선택을 읽히는 기존 접근성 설계는 그대로 유지했다
(IconButton에 label을 넘기면 aria-label이 내용을 덮어쓴다).

검증 — 컴파일된 CSS를 주입해 `` 3상태를 실제로 전환했다. 속성 없음→system,
light→light, dark→dark로 **매번 하나만** 표시되고 20×20px(--fox-icon-4)로 그려진다.
FoxIconButton은 sm/ghost에서 28px 버튼에 24×24 아이콘이다.

남은 것 — sidebar-group.tsx의 셰브론은 손으로 그린 채로 뒀다. 회전(`rotate-90`)과
크기(`size-4`)를 Tailwind 클래스에 기대고 있어 그 둘을 실재하는 CSS로 옮기기 전에는 글리프만
바꿔도 나아지지 않는다. components/ui 전체 리스타일과 함께 처리한다.

Co-Authored-By: Claude Opus 5

@ef3a937d145e5b6a29d57e39b2a2c044795ca83a

ef3a937

app/(protected)/(basic)/_components/theme-toggle-button.module.scss (added)

+++ app/(protected)/(basic)/_components/theme-toggle-button.module.scss

...	...	@@ -0,0 +1,43 @@
	1	+// 테마 토글 버튼 스타일.
	2	+//
	3	+// 아이콘 3종을 항상 DOM에 두고 CSS만으로 하나를 고른다 — 이 전환을 React state로 하면
	4	+// 서버·클라이언트 출력이 달라져 hydration이 깨진다(선택값이 localStorage에 있기 때문).
	5	+//
	6	+// 원래 Tailwind의 `hidden theme-*:contents` 유틸리티가 하던 일인데, Tailwind 제거(e3d3133)
	7	+// 이후 그 클래스들을 정의한 CSS가 사라져 세 아이콘이 한꺼번에 보이고 있었다. 같은 동작을
	8	+// 실재하는 CSS로 다시 세운다.
	9	+
	10	+@use "@fox/styles/abstracts" as fox;
	11	+
	12	+.icon {
	13	+ display: none;
	14	+ inline-size: fox.icon(4);
	15	+ block-size: fox.icon(4);
	16	+}
	17	+
	18	+// @fox 아이콘은 스스로 크기를 갖지 않는다 — 감싼 쪽이 정한다.
	19	+.icon > svg {
	20	+ inline-size: 100%;
	21	+ block-size: 100%;
	22	+}
	23	+
	24	+// "system"은 `<html>`에 속성이 없는 상태로 표현된다(lib/constants/theme).
	25	+:global(:root:not([data-theme])) .system,
	26	+:global(:root[data-theme="light"]) .light,
	27	+:global(:root[data-theme="dark"]) .dark {
	28	+ display: block;
	29	+}
	30	+
	31	+// 현재 선택을 스크린리더에만 알린다. 보이는 글자가 없으므로 이 텍스트가 버튼의 접근성
	32	+// 이름이 된다 — IconButton에 `label`을 넘기지 않는 이유다(`aria-label`은 내용을 덮어쓴다).
	33	+.srOnly {
	34	+ position: absolute;
	35	+ inline-size: 1px;
	36	+ block-size: 1px;
	37	+ padding: 0;
	38	+ margin: -1px;
	39	+ overflow: hidden;
	40	+ clip-path: inset(50%);
	41	+ white-space: nowrap;
	42	+ border: 0;
	43	+}

dd1e9be

ef3a937

app/(protected)/(basic)/_components/theme-toggle-button.tsx

--- app/(protected)/(basic)/_components/theme-toggle-button.tsx

+++ app/(protected)/(basic)/_components/theme-toggle-button.tsx


 import { useThemePreference } from '@/app/(protected)/(basic)/_hooks/use-theme-preference';
 import { IconButton } from '@/components/ui/icon-button';
-import { MonitorIcon } from '@/components/ui/icons/monitor-icon';
-import { MoonIcon } from '@/components/ui/icons/moon-icon';
-import { SunIcon } from '@/components/ui/icons/sun-icon';
+import {
+  FoxMonitorIcon,
+  FoxMoonIcon,
+  FoxSunIcon,
+} from '@fox/core/icons';
+import styles from './theme-toggle-button.module.scss';
 
 /**
- * 헤더 우측 테마 토글 버튼 — 아이콘 3종(모니터/해/달)을 항상 DOM에 전부 렌더하고, design이
- * globals.css에 정의한 `theme-system`/`theme-light`/`theme-dark` 커스텀 variant가 `<html
- * data-theme>` 값에 따라 CSS만으로 하나만 보이게 한다. 서버·클라이언트 출력이 항상 동일해
- * hydration 불일치가 없다 — React state로 아이콘을 고르지 않는다(계획 §4-4, §10 게이트 확정).
+ * 헤더 우측 테마 토글 버튼 — 아이콘 3종(모니터/해/달)을 항상 DOM에 전부 렌더하고,
+ * `theme-toggle-button.module.scss`가 `<html data-theme>` 값에 따라 CSS만으로 하나만 보이게
+ * 한다. 서버·클라이언트 출력이 항상 동일해 hydration 불일치가 없다 — React state로 아이콘을
+ * 고르지 않는다.
  *
- * 아이콘·라벨 쌍을 감싸는 `<span className="hidden theme-*:contents">` 래퍼에 표시 전환을
- * 건다(아이콘 자체나 `sr-only` 라벨 각각에 개별로 걸지 않는다) — `display: contents`는 자신의
- * 박스를 없애는 것이라, `sr-only`의 clip 기법이 의존하는 박스 자체가 있는 요소(라벨 span)에
- * 직접 걸면 클리핑이 무효화돼 텍스트가 그대로 노출된다. 래퍼는 그 자신의 박스만 지우고
- * 자식(아이콘의 내부 span, 라벨 span)은 각자의 박스를 그대로 유지하므로 안전하다. 아이콘
- * 컴포넌트에는 `className`을 넘기지 않는다 — svg가 아니라 이 래퍼가 표시를 전담한다.
+ * 표시 전환은 아이콘·라벨 쌍을 감싸는 래퍼에 건다(아이콘이나 `sr-only` 라벨 각각에 걸지
+ * 않는다). 숨겨진 쪽은 라벨도 함께 사라져야 스크린리더가 현재 선택 하나만 읽는다.
+ *
+ * `IconButton`에 `label`을 넘기지 않는다 — `aria-label`은 내용을 덮어쓰므로, 넘기면 테마에
+ * 따라 바뀌는 `sr-only` 텍스트가 무시된다.
  */
 export function ThemeToggleButton() {
   const { cycleThemePreference } = useThemePreference();
 
   return (
     <IconButton onClick={cycleThemePreference}>
-      <span className="hidden theme-system:contents">
-        <MonitorIcon />
-        <span className="sr-only">테마 변경 (현재: 시스템 설정)</span>
+      <span className={`${styles.icon} ${styles.system}`}>
+        <FoxMonitorIcon />
+        <span className={styles.srOnly}>테마 변경 (현재: 시스템 설정)</span>
       </span>
-      <span className="hidden theme-light:contents">
-        <SunIcon />
-        <span className="sr-only">테마 변경 (현재: 라이트)</span>
+      <span className={`${styles.icon} ${styles.light}`}>
+        <FoxSunIcon />
+        <span className={styles.srOnly}>테마 변경 (현재: 라이트)</span>
       </span>
-      <span className="hidden theme-dark:contents">
-        <MoonIcon />
-        <span className="sr-only">테마 변경 (현재: 다크)</span>
+      <span className={`${styles.icon} ${styles.dark}`}>
+        <FoxMoonIcon />
+        <span className={styles.srOnly}>테마 변경 (현재: 다크)</span>
       </span>
     </IconButton>
   );

dd1e9be

ef3a937

app/(protected)/(basic)/admins/_components/admin-member-row-actions.tsx

--- app/(protected)/(basic)/admins/_components/admin-member-row-actions.tsx

+++ app/(protected)/(basic)/admins/_components/admin-member-row-actions.tsx


 
 import { useState, useTransition } from 'react';
 import { Button } from '@/components/ui/button';
+import { FoxIconButton } from '@fox/core/components/fox-icon-button';
+import { FoxPencilSimpleIcon, FoxTrashIcon } from '@fox/core/icons';
 import { useFeedback } from '@/app/_hooks/use-feedback';
 import type { AdminMember } from '@/lib/domain/admin-member';
 import { deleteAdminMemberAction } from '../_actions';

  * **본인 계정 삭제는 막는다**(시안 ⑤). 화면에서 버튼을 비활성으로 두되, 실제 차단은 Server
  * Action이 세션의 adminId와 대조해 수행한다 — 화면 비활성은 안내일 뿐 신뢰 경계가 아니다.
  *
- * 시안은 연필·휴지통 아이콘 버튼을 지정하지만 `components/ui/icons/`에 두 아이콘이 아직 없다
- * (신규 아이콘 추가는 공용 컴포넌트 신설이라 design 레인 소관). 로직 우선 단계라 텍스트
- * 버튼으로 대체했고, 아이콘 부재는 별도로 보고한다.
+ * 시안의 연필·휴지통 아이콘 버튼이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
+ * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로 정의하는
+ * 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
+ *
+ * 본인 계정 안내는 `<span title>`로 감싸 남긴다 — FoxIconButton은 `label`을 `aria-label`로만
+ * 쓰고 네이티브 툴팁을 렌더하지 않으며, 비활성 버튼은 스스로 hover 이벤트를 받지 못한다.
  */
 export function AdminMemberRowActions({
   member,

 
   return (
     <div className="flex items-center gap-1">
-      <Button
-        type="button"
-        variant="ghost"
+      <FoxIconButton
+        type="ghost"
         size="sm"
-        onClick={() => setIsEditOpen(true)}
-      >
-        수정
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
-        size="sm"
-        onClick={confirmDelete}
-        disabled={isSelf || isDeleting}
-        title={isSelf ? SELF_DELETE_HINT : undefined}
-      >
-        {isDeleting ? '삭제 중...' : '삭제'}
-      </Button>
+        icon={<FoxPencilSimpleIcon />}
+        label="수정"
+        onAction={() => setIsEditOpen(true)}
+      />
+      <span title={isSelf ? SELF_DELETE_HINT : undefined}>
+        <FoxIconButton
+          type="ghost"
+          size="sm"
+          icon={<FoxTrashIcon />}
+          label={isDeleting ? '삭제 중' : '삭제'}
+          disabled={isSelf || isDeleting}
+          onAction={confirmDelete}
+        />
+      </span>
 
       {isEditOpen && (
         <AdminMemberEditModal

dd1e9be

ef3a937

app/(protected)/(basic)/boards/_components/board-row-actions.tsx

--- app/(protected)/(basic)/boards/_components/board-row-actions.tsx

+++ app/(protected)/(basic)/boards/_components/board-row-actions.tsx


 
 import { useState, useTransition } from 'react';
 import { Button } from '@/components/ui/button';
+import { FoxIconButton } from '@fox/core/components/fox-icon-button';
+import { FoxPencilSimpleIcon, FoxTrashIcon } from '@fox/core/icons';
 import { useFeedback } from '@/app/_hooks/use-feedback';
 import type { BoardPost, BoardType } from '@/lib/domain/board-post';
 import { deleteBoardPostAction } from '../_actions';

  * 표시만 바꾸지만, 관리자 화면에서 다시 볼 방법이 없으므로 사용자에게는 되돌릴 수 없는 동작으로
  * 안내한다.
  *
- * 시안은 연필·휴지통 아이콘 버튼을 지정하지만 `components/ui/icons/`에 두 아이콘이 아직 없어
- * (신규 아이콘 추가는 design 레인 소관) 텍스트 버튼으로 대체했다 — 관리자 회원 목록과 같은 처리다.
+ * 시안의 연필·휴지통 아이콘 버튼이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
+ * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로 정의하는
+ * 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
  */
 export function BoardRowActions({ boardType, post }: BoardRowActionsProps) {
   const { showAlert, hideAlert, showToast } = useFeedback();

 
   return (
     <div className="flex items-center gap-1">
-      <Button
-        type="button"
-        variant="ghost"
+      <FoxIconButton
+        type="ghost"
         size="sm"
-        onClick={() => setIsEditOpen(true)}
-      >
-        수정
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
+        icon={<FoxPencilSimpleIcon />}
+        label="수정"
+        onAction={() => setIsEditOpen(true)}
+      />
+      <FoxIconButton
+        type="ghost"
         size="sm"
-        onClick={confirmDelete}
+        icon={<FoxTrashIcon />}
+        label={isDeleting ? '삭제 중' : '삭제'}
         disabled={isDeleting}
-      >
-        {isDeleting ? '삭제 중...' : '삭제'}
-      </Button>
+        onAction={confirmDelete}
+      />
 
       {isEditOpen && (
         <BoardPostFormModal

dd1e9be

ef3a937

app/(protected)/(basic)/decoration-items/_components/decoration-item-row-actions.tsx

--- app/(protected)/(basic)/decoration-items/_components/decoration-item-row-actions.tsx

+++ app/(protected)/(basic)/decoration-items/_components/decoration-item-row-actions.tsx


 
 import { useState, useTransition } from 'react';
 import { Button } from '@/components/ui/button';
+import { FoxIconButton } from '@fox/core/components/fox-icon-button';
+import { FoxPencilSimpleIcon, FoxTrashIcon } from '@fox/core/icons';
 import { useFeedback } from '@/app/_hooks/use-feedback';
 import type { DecorationItem } from '@/lib/domain/decoration-item';
 import { deleteDecorationItemAction } from '../_actions';

  * 슬롯에 직접 [취소]/[삭제] 버튼을 넣어 구성한다. 삭제는 되돌릴 수 없는 동작이라 얼럿 문구에
  * 명시한다.
  *
- * 시안은 연필·휴지통 아이콘 버튼을 지정하지만 `components/ui/icons/`에 아직 없어(신규 아이콘
- * 추가는 공용 컴포넌트 신설이라 design 레인 소관) admins와 동일하게 텍스트 버튼으로 대체했다.
+ * 시안의 연필·휴지통 아이콘 버튼이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
+ * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로 정의하는
+ * 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
  */
 export function DecorationItemRowActions({
   item,

 
   return (
     <div className="flex items-center gap-1">
-      <Button
-        type="button"
-        variant="ghost"
+      <FoxIconButton
+        type="ghost"
         size="sm"
-        onClick={() => setIsEditOpen(true)}
-      >
-        수정
-      </Button>
-      <Button
-        type="button"
-        variant="ghost"
+        icon={<FoxPencilSimpleIcon />}
+        label="수정"
+        onAction={() => setIsEditOpen(true)}
+      />
+      <FoxIconButton
+        type="ghost"
         size="sm"
-        onClick={confirmDelete}
+        icon={<FoxTrashIcon />}
+        label={isDeleting ? '삭제 중' : '삭제'}
         disabled={isDeleting}
-      >
-        {isDeleting ? '삭제 중...' : '삭제'}
-      </Button>
+        onAction={confirmDelete}
+      />
 
       {isEditOpen && (
         <DecorationItemEditModal

dd1e9be

ef3a937

app/(protected)/(basic)/students/_components/student-row-actions.tsx

--- app/(protected)/(basic)/students/_components/student-row-actions.tsx

+++ app/(protected)/(basic)/students/_components/student-row-actions.tsx


 'use client';
 
 import { useState } from 'react';
-import { Button } from '@/components/ui/button';
+import { FoxIconButton } from '@fox/core/components/fox-icon-button';
+import { FoxMagnifyingGlassIcon } from '@fox/core/icons';
 import type { StudentMember } from '@/lib/domain/student-member';
 import { StudentDetailModal } from './student-detail-modal';
 

  * 클라이언트로 내리지 않기 위해 이 셀만 분리했다 — §2.4 "'use client'는 최말단에만"). 팝업에
  * 필요한 데이터는 이미 이 행이 갖고 있는 member를 그대로 전달한다(재조회 없음).
  *
- * 기획 시안은 "돋보기 아이콘 버튼"을 지정하지만 `components/ui/icons/`에 아직 돋보기 아이콘이
- * 없다(신규 아이콘 추가는 공용 컴포넌트 신설이라 design 레인 소관, §4.2). 로직 우선 단계라
- * 아이콘 대신 텍스트 버튼("조회")으로 대체했고, 아이콘 부재는 별도로 보고한다.
+ * 시안의 "돋보기 아이콘 버튼"이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
+ * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로
+ * 정의하는 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
  */
 export function StudentRowActions({ member }: StudentRowActionsProps) {
   const [isDetailOpen, setIsDetailOpen] = useState(false);
 
   return (
     <>
-      <Button
-        type="button"
-        variant="ghost"
+      <FoxIconButton
+        type="ghost"
         size="sm"
-        onClick={() => setIsDetailOpen(true)}
-      >
-        조회
-      </Button>
+        icon={<FoxMagnifyingGlassIcon />}
+        label="조회"
+        onAction={() => setIsDetailOpen(true)}
+      />
       {isDetailOpen && (
         <StudentDetailModal
           member={member}

dd1e9be

components/ui/icons/monitor-icon.tsx (deleted)

--- components/ui/icons/monitor-icon.tsx

...	...	@@ -1,34 +0,0 @@
	1	-interface MonitorIconProps {
	2	- /** 표시 제어용 클래스 패스스루(예: 테마 CSS 변형자 `hidden theme-system:contents`) —
	3	- * 감싸는 `<span>`에 적용된다(`display: contents`는 CSS 스펙상 대체 요소인 `<svg>`
	4	- * 루트에는 적용되지 않고 `none`으로 계산되므로, 아이콘 자체가 아니라 span에
	5	- * 걸어야 실제로 전환이 동작한다). 디자인 값(색상·치수 등) 주입은 금지 — 색은
	6	- * 상위 요소의 currentColor를 상속한다. */
	7	- className?: string;
	8	-}
	9	-
	10	-/**
	11	- * 시스템(OS) 테마를 상징하는 모니터 아이콘(화면 사각형 + 받침). 직접 작도한 인라인 SVG.
	12	- * `stroke="currentColor"`라 버튼 등 상위 요소의 text 색 토큰을 그대로 상속하며,
	13	- * 장식용이므로 `aria-hidden`을 부여한다 — 접근성 이름은 소비처(IconButton)가 책임진다.
	14	- */
	15	-export function MonitorIcon({ className }: MonitorIconProps) {
	16	- return (
	17	- <span className={className}>
	18	- <svg
	19	- viewBox="0 0 24 24"
	20	- fill="none"
	21	- stroke="currentColor"
	22	- strokeWidth="2"
	23	- strokeLinecap="round"
	24	- strokeLinejoin="round"
	25	- aria-hidden="true"
	26	- className="size-5"
	27	- >
	28	- <rect x="3" y="4" width="18" height="13" rx="1.5" />
	29	- <path d="M8 21h8" />
	30	- <path d="M12 17v4" />
	31	- </svg>
	32	- </span>
	33	- );
	34	-}

dd1e9be

components/ui/icons/moon-icon.tsx (deleted)

--- components/ui/icons/moon-icon.tsx

...	...	@@ -1,34 +0,0 @@
	1	-interface MoonIconProps {
	2	- /** 표시 제어용 클래스 패스스루(예: 테마 CSS 변형자 `hidden theme-dark:contents`) —
	3	- * 감싸는 `<span>`에 적용된다(`display: contents`는 CSS 스펙상 대체 요소인 `<svg>`
	4	- * 루트에는 적용되지 않고 `none`으로 계산되므로, 아이콘 자체가 아니라 span에
	5	- * 걸어야 실제로 전환이 동작한다). 디자인 값(색상·치수 등) 주입은 금지 — 색은
	6	- * 상위 요소의 currentColor를 상속한다. */
	7	- className?: string;
	8	-}
	9	-
	10	-/**
	11	- * 다크 테마를 상징하는 초승달 아이콘(단일 path). 직접 작도한 인라인 SVG — 큰 원호(외곽)와
	12	- * 작은 원호(안쪽 오려내기)를 이어 붙인 표준 초승달 구성법을 사용했다(외부 아이콘
	13	- * 저작물 복제 없음).
	14	- * `stroke="currentColor"`라 버튼 등 상위 요소의 text 색 토큰을 그대로 상속하며,
	15	- * 장식용이므로 `aria-hidden`을 부여한다 — 접근성 이름은 소비처(IconButton)가 책임진다.
	16	- */
	17	-export function MoonIcon({ className }: MoonIconProps) {
	18	- return (
	19	- <span className={className}>
	20	- <svg
	21	- viewBox="0 0 24 24"
	22	- fill="none"
	23	- stroke="currentColor"
	24	- strokeWidth="2"
	25	- strokeLinecap="round"
	26	- strokeLinejoin="round"
	27	- aria-hidden="true"
	28	- className="size-5"
	29	- >
	30	- <path d="M20 14.5A8.5 8.5 0 1 1 9.5 4A6.5 6.5 0 0 0 20 14.5Z" />
	31	- </svg>
	32	- </span>
	33	- );
	34	-}

dd1e9be

components/ui/icons/sun-icon.tsx (deleted)

--- components/ui/icons/sun-icon.tsx

...	...	@@ -1,40 +0,0 @@
	1	-interface SunIconProps {
	2	- /** 표시 제어용 클래스 패스스루(예: 테마 CSS 변형자 `hidden theme-light:contents`) —
	3	- * 감싸는 `<span>`에 적용된다(`display: contents`는 CSS 스펙상 대체 요소인 `<svg>`
	4	- * 루트에는 적용되지 않고 `none`으로 계산되므로, 아이콘 자체가 아니라 span에
	5	- * 걸어야 실제로 전환이 동작한다). 디자인 값(색상·치수 등) 주입은 금지 — 색은
	6	- * 상위 요소의 currentColor를 상속한다. */
	7	- className?: string;
	8	-}
	9	-
	10	-/**
	11	- * 라이트 테마를 상징하는 해 아이콘(중심 원 + 8방향 광선). 직접 작도한 인라인 SVG.
	12	- * `stroke="currentColor"`라 버튼 등 상위 요소의 text 색 토큰을 그대로 상속하며,
	13	- * 장식용이므로 `aria-hidden`을 부여한다 — 접근성 이름은 소비처(IconButton)가 책임진다.
	14	- */
	15	-export function SunIcon({ className }: SunIconProps) {
	16	- return (
	17	- <span className={className}>
	18	- <svg
	19	- viewBox="0 0 24 24"
	20	- fill="none"
	21	- stroke="currentColor"
	22	- strokeWidth="2"
	23	- strokeLinecap="round"
	24	- strokeLinejoin="round"
	25	- aria-hidden="true"
	26	- className="size-5"
	27	- >
	28	- <circle cx="12" cy="12" r="4" />
	29	- <path d="M12 2v2.5" />
	30	- <path d="M12 19.5V22" />
	31	- <path d="M2 12h2.5" />
	32	- <path d="M19.5 12H22" />
	33	- <path d="M4.93 4.93l1.77 1.77" />
	34	- <path d="M17.3 17.3l1.77 1.77" />
	35	- <path d="M4.93 19.07l1.77-1.77" />
	36	- <path d="M17.3 6.7l1.77-1.77" />
	37	- </svg>
	38	- </span>
	39	- );
	40	-}

dd1e9be

ef3a937

components/ui/sidebar-group.tsx

--- components/ui/sidebar-group.tsx

+++ components/ui/sidebar-group.tsx

...	...	@@ -52,9 +52,11 @@
52	52
53	53	/**
54	54	* 펼침/접힘 표시용 셰브론(오른쪽 화살표 — 펼치면 90도 회전해 아래를 향한다). 그룹 헤딩
55		- * 전용 장식 요소라 components/ui/icons/에 별도 파일로 승격하지 않고 이 파일 안에 둔다.
56		- * moon-icon.tsx/sun-icon.tsx와 동일한 인라인 SVG 관례(stroke=currentColor로 상위 text
57		- * 색 토큰 상속, 장식용이라 aria-hidden).
	55	+ * 전용 장식 요소라 이 파일 안에 둔다.
	56	+ *
	57	+ * ⚠️ 손으로 그린 마지막 아이콘이다. 디자인시스템에 같은 그림(`FoxCaretRightIcon`)이 있지만,
	58	+ * 회전(`rotate-90`)과 크기(`size-4`)를 Tailwind 클래스에 기대고 있어 그 두 개를 실재하는
	59	+ * CSS로 옮기기 전에는 바꿔도 나아지지 않는다 — components/ui 전체 리스타일과 함께 처리한다.
58	60	*/
59	61	function ChevronIcon({ className }: { className?: string }) {
60	62	return (

Add a comment

Open 0
Closed 0

List

...	...	@@ -1,38 +1,40 @@
1	1	import { useThemePreference } from '@/app/(protected)/(basic)/_hooks/use-theme-preference';
2	2	import { IconButton } from '@/components/ui/icon-button';
3		-import { MonitorIcon } from '@/components/ui/icons/monitor-icon';
4		-import { MoonIcon } from '@/components/ui/icons/moon-icon';
5		-import { SunIcon } from '@/components/ui/icons/sun-icon';
	3	+import {
	4	+ FoxMonitorIcon,
	5	+ FoxMoonIcon,
	6	+ FoxSunIcon,
	7	+} from '@fox/core/icons';
	8	+import styles from './theme-toggle-button.module.scss';
6	9
7	10	/**
8		- * 헤더 우측 테마 토글 버튼 — 아이콘 3종(모니터/해/달)을 항상 DOM에 전부 렌더하고, design이
9		- * globals.css에 정의한 `theme-system`/`theme-light`/`theme-dark` 커스텀 variant가 `<html
10		- * data-theme>` 값에 따라 CSS만으로 하나만 보이게 한다. 서버·클라이언트 출력이 항상 동일해
11		- * hydration 불일치가 없다 — React state로 아이콘을 고르지 않는다(계획 §4-4, §10 게이트 확정).
	11	+ * 헤더 우측 테마 토글 버튼 — 아이콘 3종(모니터/해/달)을 항상 DOM에 전부 렌더하고,
	12	+ * `theme-toggle-button.module.scss`가 `<html data-theme>` 값에 따라 CSS만으로 하나만 보이게
	13	+ * 한다. 서버·클라이언트 출력이 항상 동일해 hydration 불일치가 없다 — React state로 아이콘을
	14	+ * 고르지 않는다.
12	15	*
13		- * 아이콘·라벨 쌍을 감싸는 `<span className="hidden theme-*:contents">` 래퍼에 표시 전환을
14		- * 건다(아이콘 자체나 `sr-only` 라벨 각각에 개별로 걸지 않는다) — `display: contents`는 자신의
15		- * 박스를 없애는 것이라, `sr-only`의 clip 기법이 의존하는 박스 자체가 있는 요소(라벨 span)에
16		- * 직접 걸면 클리핑이 무효화돼 텍스트가 그대로 노출된다. 래퍼는 그 자신의 박스만 지우고
17		- * 자식(아이콘의 내부 span, 라벨 span)은 각자의 박스를 그대로 유지하므로 안전하다. 아이콘
18		- * 컴포넌트에는 `className`을 넘기지 않는다 — svg가 아니라 이 래퍼가 표시를 전담한다.
	16	+ * 표시 전환은 아이콘·라벨 쌍을 감싸는 래퍼에 건다(아이콘이나 `sr-only` 라벨 각각에 걸지
	17	+ * 않는다). 숨겨진 쪽은 라벨도 함께 사라져야 스크린리더가 현재 선택 하나만 읽는다.
	18	+ *
	19	+ * `IconButton`에 `label`을 넘기지 않는다 — `aria-label`은 내용을 덮어쓰므로, 넘기면 테마에
	20	+ * 따라 바뀌는 `sr-only` 텍스트가 무시된다.
19	21	*/
20	22	export function ThemeToggleButton() {
21	23	const { cycleThemePreference } = useThemePreference();
22	24
23	25	return (
24	26	<IconButton onClick={cycleThemePreference}>
25		- <span className="hidden theme-system:contents">
26		- <MonitorIcon />
27		- <span className="sr-only">테마 변경 (현재: 시스템 설정)</span>
	27	+ <span className={`${styles.icon} ${styles.system}`}>
	28	+ <FoxMonitorIcon />
	29	+ <span className={styles.srOnly}>테마 변경 (현재: 시스템 설정)</span>
28	30	</span>
29		- <span className="hidden theme-light:contents">
30		- <SunIcon />
31		- <span className="sr-only">테마 변경 (현재: 라이트)</span>
	31	+ <span className={`${styles.icon} ${styles.light}`}>
	32	+ <FoxSunIcon />
	33	+ <span className={styles.srOnly}>테마 변경 (현재: 라이트)</span>
32	34	</span>
33		- <span className="hidden theme-dark:contents">
34		- <MoonIcon />
35		- <span className="sr-only">테마 변경 (현재: 다크)</span>
	35	+ <span className={`${styles.icon} ${styles.dark}`}>
	36	+ <FoxMoonIcon />
	37	+ <span className={styles.srOnly}>테마 변경 (현재: 다크)</span>
36	38	</span>
37	39	</IconButton>
38	40	);

...	...	@@ -2,6 +2,8 @@
2	2
3	3	import { useState, useTransition } from 'react';
4	4	import { Button } from '@/components/ui/button';
	5	+import { FoxIconButton } from '@fox/core/components/fox-icon-button';
	6	+import { FoxPencilSimpleIcon, FoxTrashIcon } from '@fox/core/icons';
5	7	import { useFeedback } from '@/app/_hooks/use-feedback';
6	8	import type { AdminMember } from '@/lib/domain/admin-member';
7	9	import { deleteAdminMemberAction } from '../_actions';
...	...	@@ -25,9 +27,12 @@
25	27	* 본인 계정 삭제는 막는다(시안 ⑤). 화면에서 버튼을 비활성으로 두되, 실제 차단은 Server
26	28	* Action이 세션의 adminId와 대조해 수행한다 — 화면 비활성은 안내일 뿐 신뢰 경계가 아니다.
27	29	*
28		- * 시안은 연필·휴지통 아이콘 버튼을 지정하지만 `components/ui/icons/`에 두 아이콘이 아직 없다
29		- * (신규 아이콘 추가는 공용 컴포넌트 신설이라 design 레인 소관). 로직 우선 단계라 텍스트
30		- * 버튼으로 대체했고, 아이콘 부재는 별도로 보고한다.
	30	+ * 시안의 연필·휴지통 아이콘 버튼이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
	31	+ * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로 정의하는
	32	+ * 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
	33	+ *
	34	+ * 본인 계정 안내는 `<span title>`로 감싸 남긴다 — FoxIconButton은 `label`을 `aria-label`로만
	35	+ * 쓰고 네이티브 툴팁을 렌더하지 않으며, 비활성 버튼은 스스로 hover 이벤트를 받지 못한다.
31	36	*/
32	37	export function AdminMemberRowActions({
33	38	member,
...	...	@@ -72,24 +77,23 @@
72	77
73	78	return (
74	79	<div className="flex items-center gap-1">
75		- <Button
76		- type="button"
77		- variant="ghost"
	80	+ <FoxIconButton
	81	+ type="ghost"
78	82	size="sm"
79		- onClick={() => setIsEditOpen(true)}
80		- >
81		- 수정
82		- </Button>
83		- <Button
84		- type="button"
85		- variant="ghost"
86		- size="sm"
87		- onClick={confirmDelete}
88		- disabled={isSelf \|\| isDeleting}
89		- title={isSelf ? SELF_DELETE_HINT : undefined}
90		- >
91		- {isDeleting ? '삭제 중...' : '삭제'}
92		- </Button>
	83	+ icon={<FoxPencilSimpleIcon />}
	84	+ label="수정"
	85	+ onAction={() => setIsEditOpen(true)}
	86	+ />
	87	+ <span title={isSelf ? SELF_DELETE_HINT : undefined}>
	88	+ <FoxIconButton
	89	+ type="ghost"
	90	+ size="sm"
	91	+ icon={<FoxTrashIcon />}
	92	+ label={isDeleting ? '삭제 중' : '삭제'}
	93	+ disabled={isSelf \|\| isDeleting}
	94	+ onAction={confirmDelete}
	95	+ />
	96	+ </span>
93	97
94	98	{isEditOpen && (
95	99	<AdminMemberEditModal

...	...	@@ -1,7 +1,8 @@
1	1	'use client';
2	2
3	3	import { useState } from 'react';
4		-import { Button } from '@/components/ui/button';
	4	+import { FoxIconButton } from '@fox/core/components/fox-icon-button';
	5	+import { FoxMagnifyingGlassIcon } from '@fox/core/icons';
5	6	import type { StudentMember } from '@/lib/domain/student-member';
6	7	import { StudentDetailModal } from './student-detail-modal';
7	8
...	...	@@ -14,23 +15,22 @@
14	15	* 클라이언트로 내리지 않기 위해 이 셀만 분리했다 — §2.4 "'use client'는 최말단에만"). 팝업에
15	16	* 필요한 데이터는 이미 이 행이 갖고 있는 member를 그대로 전달한다(재조회 없음).
16	17	*
17		- * 기획 시안은 "돋보기 아이콘 버튼"을 지정하지만 `components/ui/icons/`에 아직 돋보기 아이콘이
18		- * 없다(신규 아이콘 추가는 공용 컴포넌트 신설이라 design 레인 소관, §4.2). 로직 우선 단계라
19		- * 아이콘 대신 텍스트 버튼("조회")으로 대체했고, 아이콘 부재는 별도로 보고한다.
	18	+ * 시안의 "돋보기 아이콘 버튼"이다. 버튼은 `components/ui/button`이 아니라 `FoxIconButton`을
	19	+ * 쓴다 — 아이콘은 스스로 크기를 갖지 않고 감싼 슬롯이 정하는데, 그 슬롯 크기를 실제로
	20	+ * 정의하는 건 @fox 쪽뿐이다(components/ui는 Tailwind 제거 이후 무스타일이다).
20	21	*/
21	22	export function StudentRowActions({ member }: StudentRowActionsProps) {
22	23	const [isDetailOpen, setIsDetailOpen] = useState(false);
23	24
24	25	return (
25	26	<>
26		- <Button
27		- type="button"
28		- variant="ghost"
	27	+ <FoxIconButton
	28	+ type="ghost"
29	29	size="sm"
30		- onClick={() => setIsDetailOpen(true)}
31		- >
32		- 조회
33		- </Button>
	30	+ icon={<FoxMagnifyingGlassIcon />}
	31	+ label="조회"
	32	+ onAction={() => setIsDetailOpen(true)}
	33	+ />
34	34	{isDetailOpen && (
35	35	<StudentDetailModal
36	36	member={member}

Delete comment