Merge pull request #75 from hiiragi17/claude/implement-issue-67-responsive-a

feat(layout): レスポンシブ基盤の追加 (#67 PR A)

Author: hiiragi17

src/app/history/page.tsx

@@ -154,7 +154,7 @@ export default function HistoryPage() {
         )}
 
         {/* Stats */}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-8">
           <div className="bg-white rounded-lg shadow-sm p-6">
             <p className="text-sm text-gray-600 mb-1">総振り返り数</p>
             <p className="text-3xl font-bold text-gray-900">{reflections.length}</p>
@@ -194,9 +194,9 @@ export default function HistoryPage() {
             </button>
           </div>
         ) : (
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
             {/* Calendar - Left side */}
-            <div className="lg:col-span-1">
+            <div className="md:col-span-1 lg:col-span-1">
               <Calendar
                 reflections={reflections}
                 frameworks={frameworks}
@@ -206,7 +206,7 @@ export default function HistoryPage() {
 
             {/* Reflection Detail Panel - Right side */}
             {selectedDetail && (
-              <div className="lg:col-span-2 bg-white rounded-lg shadow-sm overflow-hidden flex flex-col">
+              <div className="md:col-span-1 lg:col-span-2 bg-white rounded-lg shadow-sm overflow-hidden flex flex-col">
                 {/* Panel Header */}
                 <div className="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between flex-shrink-0">
                   <h2 className="text-xl font-bold text-gray-900">

src/components/layout/ResponsiveGrid.test.tsx

@@ -0,0 +1,44 @@
+import { describe, it, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import ResponsiveGrid from './ResponsiveGrid';
+
+describe('ResponsiveGrid', () => {
+  it('applies grid with the specified base columns and gap', () => {
+    const { container } = render(
+      <ResponsiveGrid cols={2} gap={6}>
+        <div>a</div>
+        <div>b</div>
+      </ResponsiveGrid>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('grid');
+    expect(grid.className).toContain('grid-cols-2');
+    expect(grid.className).toContain('gap-6');
+  });
+
+  it('applies responsive column classes for each breakpoint', () => {
+    const { container } = render(
+      <ResponsiveGrid cols={1} smCols={2} mdCols={3} lgCols={4} xlCols={6}>
+        <div>a</div>
+      </ResponsiveGrid>,
+    );
+
+    const grid = container.firstElementChild as HTMLElement;
+    expect(grid.className).toContain('sm:grid-cols-2');
+    expect(grid.className).toContain('md:grid-cols-3');
+    expect(grid.className).toContain('lg:grid-cols-4');
+    expect(grid.className).toContain('xl:grid-cols-6');
+  });
+
+  it('renders children and custom element', () => {
+    const { container, getByText } = render(
+      <ResponsiveGrid cols={1} as="section">
+        <span>child</span>
+      </ResponsiveGrid>,
+    );
+
+    expect(container.firstElementChild?.tagName).toBe('SECTION');
+    expect(getByText('child')).toBeInTheDocument();
+  });
+});

src/components/layout/ResponsiveGrid.tsx

@@ -0,0 +1,99 @@
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+type ColCount = 1 | 2 | 3 | 4 | 5 | 6;
+type GapSize = 2 | 3 | 4 | 6 | 8;
+
+export interface ResponsiveGridProps {
+  children: ReactNode;
+  cols?: ColCount;
+  smCols?: ColCount;
+  mdCols?: ColCount;
+  lgCols?: ColCount;
+  xlCols?: ColCount;
+  gap?: GapSize;
+  className?: string;
+  as?: 'div' | 'section' | 'ul';
+}
+
+const baseColClasses: Record<ColCount, string> = {
+  1: 'grid-cols-1',
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-4',
+  5: 'grid-cols-5',
+  6: 'grid-cols-6',
+};
+
+const smColClasses: Record<ColCount, string> = {
+  1: 'sm:grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+  4: 'sm:grid-cols-4',
+  5: 'sm:grid-cols-5',
+  6: 'sm:grid-cols-6',
+};
+
+const mdColClasses: Record<ColCount, string> = {
+  1: 'md:grid-cols-1',
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+};
+
+const lgColClasses: Record<ColCount, string> = {
+  1: 'lg:grid-cols-1',
+  2: 'lg:grid-cols-2',
+  3: 'lg:grid-cols-3',
+  4: 'lg:grid-cols-4',
+  5: 'lg:grid-cols-5',
+  6: 'lg:grid-cols-6',
+};
+
+const xlColClasses: Record<ColCount, string> = {
+  1: 'xl:grid-cols-1',
+  2: 'xl:grid-cols-2',
+  3: 'xl:grid-cols-3',
+  4: 'xl:grid-cols-4',
+  5: 'xl:grid-cols-5',
+  6: 'xl:grid-cols-6',
+};
+
+const gapClasses: Record<GapSize, string> = {
+  2: 'gap-2',
+  3: 'gap-3',
+  4: 'gap-4',
+  6: 'gap-6',
+  8: 'gap-8',
+};
+
+export default function ResponsiveGrid({
+  children,
+  cols = 1,
+  smCols,
+  mdCols,
+  lgCols,
+  xlCols,
+  gap = 4,
+  className,
+  as: Component = 'div',
+}: ResponsiveGridProps) {
+  return (
+    <Component
+      className={cn(
+        'grid',
+        baseColClasses[cols],
+        smCols && smColClasses[smCols],
+        mdCols && mdColClasses[mdCols],
+        lgCols && lgColClasses[lgCols],
+        xlCols && xlColClasses[xlCols],
+        gapClasses[gap],
+        className,
+      )}
+    >
+      {children}
+    </Component>
+  );
+}

src/components/layout/SidebarLayout.test.tsx

@@ -0,0 +1,82 @@
+import { describe, it, expect } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import SidebarLayout from './SidebarLayout';
+
+describe('SidebarLayout', () => {
+  it('renders sidebar, main content, and optional right panel', () => {
+    render(
+      <SidebarLayout
+        sidebar={<div>sidebar-content</div>}
+        rightPanel={<div>right-panel</div>}
+      >
+        <div>main-content</div>
+      </SidebarLayout>,
+    );
+
+    expect(screen.getByText('sidebar-content')).toBeInTheDocument();
+    expect(screen.getByText('main-content')).toBeInTheDocument();
+    expect(screen.getByText('right-panel')).toBeInTheDocument();
+  });
+
+  it('omits right panel when not provided', () => {
+    const { container } = render(
+      <SidebarLayout sidebar={<div>sidebar</div>}>
+        <div>main</div>
+      </SidebarLayout>,
+    );
+
+    const asides = container.querySelectorAll('aside');
+    expect(asides).toHaveLength(1);
+  });
+
+  it('uses semantic main and aside landmarks', () => {
+    render(
+      <SidebarLayout sidebar={<div>s</div>}>
+        <div>m</div>
+      </SidebarLayout>,
+    );
+
+    expect(screen.getByRole('main')).toBeInTheDocument();
+    expect(screen.getByRole('complementary')).toBeInTheDocument();
+  });
+
+  it('applies the sidebarWidth variant', () => {
+    const { container } = render(
+      <SidebarLayout sidebar={<div>s</div>} sidebarWidth="lg">
+        <div>m</div>
+      </SidebarLayout>,
+    );
+
+    const aside = container.querySelector('aside');
+    expect(aside?.className).toContain('md:w-72');
+  });
+
+  it('assigns distinct aria-labels to left and right asides', () => {
+    render(
+      <SidebarLayout
+        sidebar={<div>s</div>}
+        rightPanel={<div>r</div>}
+        sidebarAriaLabel="主要ナビゲーション"
+        rightPanelAriaLabel="詳細パネル"
+      >
+        <div>m</div>
+      </SidebarLayout>,
+    );
+
+    expect(screen.getByRole('complementary', { name: '主要ナビゲーション' })).toBeInTheDocument();
+    expect(screen.getByRole('complementary', { name: '詳細パネル' })).toBeInTheDocument();
+  });
+
+  it('right panel has a bounded md width to prevent overflow', () => {
+    const { container } = render(
+      <SidebarLayout sidebar={<div>s</div>} rightPanel={<div>r</div>}>
+        <div>m</div>
+      </SidebarLayout>,
+    );
+
+    const asides = container.querySelectorAll('aside');
+    const rightAside = asides[asides.length - 1];
+    expect(rightAside.className).toContain('md:w-64');
+    expect(rightAside.className).toContain('lg:w-80');
+  });
+});

src/components/layout/SidebarLayout.tsx

@@ -0,0 +1,65 @@
+import type { ReactNode } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface SidebarLayoutProps {
+  sidebar: ReactNode;
+  children: ReactNode;
+  rightPanel?: ReactNode;
+  sidebarWidth?: 'sm' | 'md' | 'lg';
+  className?: string;
+  stickyBreakpoint?: 'md' | 'lg';
+  sidebarAriaLabel?: string;
+  rightPanelAriaLabel?: string;
+}
+
+const sidebarWidthClasses: Record<NonNullable<SidebarLayoutProps['sidebarWidth']>, string> = {
+  sm: 'md:w-56 lg:w-60',
+  md: 'md:w-64 lg:w-72',
+  lg: 'md:w-72 lg:w-80',
+};
+
+const stickyTopClass = 'md:sticky md:top-20';
+
+export default function SidebarLayout({
+  sidebar,
+  children,
+  rightPanel,
+  sidebarWidth = 'md',
+  className,
+  stickyBreakpoint = 'md',
+  sidebarAriaLabel = 'サイドバー',
+  rightPanelAriaLabel = '関連情報パネル',
+}: SidebarLayoutProps) {
+  const stickyClass =
+    stickyBreakpoint === 'md' ? stickyTopClass : 'lg:sticky lg:top-20';
+
+  return (
+    <div
+      className={cn(
+        'flex flex-col md:flex-row gap-6 w-full',
+        className,
+      )}
+    >
+      <aside
+        aria-label={sidebarAriaLabel}
+        className={cn(
+          'w-full shrink-0',
+          sidebarWidthClasses[sidebarWidth],
+          stickyClass,
+          'md:self-start',
+        )}
+      >
+        {sidebar}
+      </aside>
+      <main className="flex-1 min-w-0">{children}</main>
+      {rightPanel && (
+        <aside
+          aria-label={rightPanelAriaLabel}
+          className="w-full md:w-64 lg:w-80 shrink-0 lg:self-start lg:sticky lg:top-20"
+        >
+          {rightPanel}
+        </aside>
+      )}
+    </div>
+  );
+}