boostcampwm2025 · as-zini · Feb 5, 2026 · Feb 5, 2026 · Feb 5, 2026 · Feb 5, 2026
diff --git a/backend/src/markdown/builders/naming-convention.builder.ts b/backend/src/markdown/builders/naming-convention.builder.ts
@@ -59,11 +59,18 @@ export class NamingConventionBuilder implements ISectionBuilder {
       ];
 
       categories.forEach((category) => {
-        // 모든 아이템을 항상 표시
+        // 'none' 값이 아닌 아이템만 필터링
+        const validItems = category.items.filter(
+          (item) => item.value !== 'none',
+        );
+
+        // 유효한 아이템이 없으면 해당 카테고리 표시 안 함
+        if (validItems.length === 0) return;
+
         lines.push(`### ${category.title}`);
         lines.push('| 구분 | 컨벤션 |');
         lines.push('| :--- | :--- |');
-        category.items.forEach((item) => {
+        validItems.forEach((item) => {
           lines.push(createTableRow(item.label, item.value || '-'));
         });
         lines.push('');

diff --git a/frontend/index.html b/frontend/index.html
@@ -14,7 +14,7 @@
   <meta name="twitter:card" content="summary_large_image" />
   <meta name="twitter:title" content="팀 문화의 시작, team.config에서" />
   <meta name="twitter:image" content="https://teamconfig.work/og-image.png" />
-  <title>frontend</title>
+  <title>team.config</title>
   <script>
     (function () {
       const STORAGE_KEY = 'ui-theme';

diff --git a/frontend/src/common/api/yjs/sync.ts b/frontend/src/common/api/yjs/sync.ts
@@ -9,11 +9,11 @@
 import { yWidgetToWidgetData } from './utils/translateData';
 import type { WidgetData } from '@/common/types/widgetData';

 function isWidgetData(value: WidgetData | null): value is WidgetData {
  return value !== null;
 }

 const isWidgetDataEqual = (prev: WidgetData, next: WidgetData): boolean => {
  if (prev.widgetId !== next.widgetId) return false;
  if (prev.type !== next.type) return false;

@@ -39,15 +39,35 @@
     const widgetsYMap = getWidgetsMap();
 
     // TODO: 리렌더링 개선
-    const widgets = [...widgetsYMap.entries()]
-      .map(([id, yWidget]) => {
-        return yWidgetToWidgetData(id, yWidget);
-      })
-      .sort((a, b) => a.focusedAt - b.focusedAt);
+    // 1. 위젯 데이터 변환
+    const widgets = [...widgetsYMap.entries()].map(([id, yWidget]) => {
+      return yWidgetToWidgetData(id, yWidget);
+    });
+
+    // 2. focusedAt 기준으로 정렬하여 zIndex 계산
+    // (가장 최근에 포커스된 위젯이 가장 높은 zIndex를 가짐)
+    const sortedByFocus = [...widgets].sort(
+      (a, b) => a.focusedAt - b.focusedAt,
+    );
+    const zIndexMap = new Map(sortedByFocus.map((w, i) => [w.widgetId, i + 1]));
+
+    // 3. 최종 위젯 리스트 생성
+    // - zIndex를 layout에 주입
+    // - DOM 순서는 createdAt(또는 고정된 기준)으로 정렬하여,
+    //   포커스 변경 시 DOM 요소가 재정렬되어 클릭 이벤트가 취소되는 현상 방지
+    const finalWidgets = widgets
+      .map((w) => ({
+        ...w,
+        layout: {
+          ...w.layout,
+          zIndex: zIndexMap.get(w.widgetId) ?? 1,
+        },
+      }))
+      .sort((a, b) => a.createdAt - b.createdAt);
 
     if (!widgetsYMap) return;
 
-    setWidgetList(widgets as WidgetData[]);
+    setWidgetList(finalWidgets as WidgetData[]);
   };
 
   const syncWorkspaceToStore = (): void => {

diff --git a/frontend/src/common/components/canvas/components/CanvasWrapper.tsx b/frontend/src/common/components/canvas/components/CanvasWrapper.tsx
@@ -3,6 +3,7 @@ import { type PropsWithChildren } from 'react';
 import { cn } from '@/common/lib/utils';
 import useWheel from '../hooks/useWheel';
 import usePanning from '../hooks/usePanning';
+import { useTheme } from '@/common/contexts/ThemeProvider';
 
 export function CanvasWrapper({ children }: PropsWithChildren) {
   const { camera, frameRef, clickedFollow } = useCanvas();
@@ -19,13 +20,17 @@ export function CanvasWrapper({ children }: PropsWithChildren) {
     handleMouseMove,
   } = usePanning();
 
+  const { theme } = useTheme();
+  const isDark = theme === 'dark';
+
   return (
     // 뷰포트 레이어
     <div
       ref={frameRef}
       className={cn(
-        'bg-background relative h-full w-full touch-none overflow-hidden select-none',
+        'relative h-full w-full touch-none overflow-hidden select-none',
         isPanning && 'cursor-grabbing',
+        isDark ? 'bg-gray-900' : 'bg-background',
       )}
       onPointerMove={handlePointerMove}
       onPointerUp={handlePointerUp}

diff --git a/frontend/src/common/components/widgetFrame/WidgetPreview.tsx b/frontend/src/common/components/widgetFrame/WidgetPreview.tsx
@@ -59,6 +59,7 @@ export function WidgetPreview({
         </div>
         <div className="max-h-[600px] overflow-x-auto">
           <SyntaxHighlighter
+            key={isDark ? 'dark' : 'light'}
             language={language}
             style={isDark ? vscDarkPlus : vs}
             customStyle={{

diff --git a/frontend/src/common/contexts/ThemeProvider.tsx b/frontend/src/common/contexts/ThemeProvider.tsx
@@ -25,12 +25,23 @@ export function ThemeProvider({ children }: { children: React.ReactNode }) {
   useEffect(() => {
     const root = document.documentElement;
 
-    // 기존 테마 클래스 제거
-    root.classList.remove('light', 'dark');
+    // 테마 변경 시 transition 비활성화
+    root.classList.add('disable-transitions');
 
-    // 새 테마 클래스 추가
+    // 기존 테마 클래스 제거 및 새 테마 추가
+    root.classList.remove('light', 'dark');
     root.classList.add(theme);
+
+    // 강제로 스타일 계산을 발생시켜 DOM 업데이트 보장
+    // eslint-disable-next-line @typescript-eslint/no-unused-expressions
+    window.getComputedStyle(root).opacity;
+
     sessionStorage.setItem('ui-theme', theme);
+
+    // transition 다시 활성화 (비동기적으로 처리하여 렌더링 이후에 적용)
+    setTimeout(() => {
+      root.classList.remove('disable-transitions');
+    }, 0);
   }, [theme]);
 
   return (

diff --git a/frontend/src/features/widgets/gitConvention/components/gitConventionWidget/BranchRules.tsx b/frontend/src/features/widgets/gitConvention/components/gitConventionWidget/BranchRules.tsx
@@ -105,7 +105,7 @@ export function BranchRules({ strategy, rules, onChange }: BranchRulesProps) {
               <Button
                 variant={'ghost'}
                 onClick={() => handleRemovePrefix(prefix)}
-                className="hover:text-destructive hover:bg-accent rounded-full p-0.5 transition-colors focus:outline-none"
+                className="hover:text-destructive hover:bg-accent h-4 w-4 rounded-full p-0 transition-colors focus:outline-none"
                 aria-label={`Remove ${prefix}`}
               >
                 <LuX size={14} />

diff --git a/frontend/src/features/widgets/gitConvention/hooks/useGitConvention.ts b/frontend/src/features/widgets/gitConvention/hooks/useGitConvention.ts
@@ -148,15 +148,15 @@ export function useGitConvention() {
   };
 
   const updateBranchRules = (rules: Partial<BranchRuleState>) => {
-    if (rules.mainBranch) {
+    if (rules.mainBranch !== undefined) {
       updatePrimitiveFieldAction(
         widgetId,
         type,
         'mainBranch',
         rules.mainBranch,
       );
     }
-    if (rules.developBranch) {
+    if (rules.developBranch !== undefined) {
       updatePrimitiveFieldAction(
         widgetId,
         type,

diff --git a/frontend/src/features/widgets/techStack/components/TechStackItem.tsx b/frontend/src/features/widgets/techStack/components/TechStackItem.tsx
@@ -42,7 +42,7 @@ export function TechStackItem({ name, slug, color }: TechStackItemProps) {
       className="hover:border-primary bg-card hover:bg-accent flex h-25.5 w-25.5 flex-col items-center justify-center gap-2 rounded-lg px-2 py-1 transition-colors select-none"
     >
       <TechIcon slug={slug} color={color} />
-      <div className="text-center text-xs font-medium text-wrap text-gray-300">
+      <div className="text-muted-foreground text-center text-xs font-medium text-wrap">
         {name}
       </div>
     </Badge>

diff --git a/frontend/src/features/widgets/techStack/components/modal/TechStackModal.tsx b/frontend/src/features/widgets/techStack/components/modal/TechStackModal.tsx
@@ -67,7 +67,7 @@ function TechStackModal({
     <ReactPortal portalTargetId={modalRootId}>
       <dialog
         style={{ left: position.x, top: position.y }}
-        className="fixed flex h-150 w-160 flex-col overflow-hidden rounded-xl border border-gray-700 bg-gray-900 shadow-2xl"
+        className="bg-background border-border fixed flex h-150 w-160 flex-col overflow-hidden rounded-xl border shadow-2xl"
       >
         {/* 헤더를 드래그 핸들로 사용 */}
         <ModalHeader
@@ -76,9 +76,9 @@ function TechStackModal({
           icon={HEADER_ICON}
           onClose={onModalClose}
         />
-        <div className="px-6.5 text-sm text-gray-400">
+        <div className="text-muted-foreground px-6.5 text-sm">
           기술 스택을&nbsp;
-          <span className="font-bold text-white">드래그 앤 드롭</span>
+          <span className="text-foreground font-bold">드래그 앤 드롭</span>
           으로 기술 스택 위젯 안에 넣어주세요!
         </div>
         <div className="custom-scrollbar flex flex-1 flex-col overflow-y-auto px-6.5 pt-2 pb-4">

diff --git a/frontend/src/features/widgets/techStack/components/modal/TeckStackAccordionList.tsx b/frontend/src/features/widgets/techStack/components/modal/TeckStackAccordionList.tsx
@@ -13,7 +13,7 @@ export function TechStackAccordionList() {
     <Accordion type="multiple" className="w-full">
       {TECH_STACK_GROUPS.map((group) => (
         <AccordionItem key={group.title} value={group.title}>
-          <AccordionTrigger className="text-xl font-bold text-white">
+          <AccordionTrigger className="text-foreground text-xl font-bold">
             {group.title}
           </AccordionTrigger>
           <AccordionContent>
@@ -31,7 +31,7 @@ export function TechStackAccordionList() {
                     value={catKey}
                     className="border-none"
                   >
-                    <AccordionTrigger className="py-2 text-lg text-sm font-semibold text-white">
+                    <AccordionTrigger className="text-foreground py-2 text-sm font-semibold">
                       {catName}
                     </AccordionTrigger>
                     <AccordionContent>

diff --git a/frontend/src/features/widgets/techStack/components/techStackWidget/SelectedTechItem.tsx b/frontend/src/features/widgets/techStack/components/techStackWidget/SelectedTechItem.tsx
@@ -17,12 +17,13 @@ function SelectedTechItem({
   onRemove,
 }: SelectedTechItemProps) {
   return (
-    <div className="group border-border bg-secondary/20 relative flex flex-col items-center justify-center gap-2 rounded-lg border">
+    <div className="group relative flex flex-col items-center justify-center gap-2">
       <Button
+        size="icon"
         onClick={onRemove}
-        className="bg-destructive text-destructive-foreground absolute -top-2 -right-2 hidden cursor-pointer rounded-full p-1 group-hover:block"
+        className="bg-destructive text-destructive-foreground hover:bg-destructive hover:text-destructive-foreground absolute -top-2 -right-2 hidden size-5 cursor-pointer rounded-full group-hover:flex"
       >
-        <LuX size={12} />
+        <LuX className="size-3" color="white" />
       </Button>
       <TechStackItem name={name} slug={slug} color={color} />
     </div>

diff --git a/frontend/src/index.css b/frontend/src/index.css
@@ -125,7 +125,7 @@
 .dark {
   --background: oklch(0.13 0.028 261.692);
   --foreground: oklch(0.985 0.002 247.839);
-  --card: oklch(0.21 0.034 264.665);
+  --card: var(--color-gray-800);
   --card-foreground: oklch(0.985 0.002 247.839);
   --popover: oklch(0.21 0.034 264.665);
   --popover-foreground: oklch(0.985 0.002 247.839);
@@ -180,6 +180,10 @@
   [role='button']:not(:disabled) {
     cursor: pointer;
   }
+
+  .disable-transitions * {
+    transition: none !important;
+  }
 }
 
 body {