[wip]

家族情報ページの開発

src/app/models/family.ts

@@ -2,6 +2,7 @@
 export interface Family {
   id: string;
   dankaId: string;
+  furigana: string;
   name: string;
   relationship: string;
   birthDate: string;

src/app/pages/danka-detail/danka-detail.html

@@ -1,7 +1,7 @@
 <app-header></app-header>
 
 <div class="breadcrumb">
-  ホーム &gt; 檀家（世帯） &gt; 鈴木家
+  ホーム &gt; 檀家（世帯） &gt; {{ danka?.householdName }}
 </div>
 
 <div class="danka-detail-page">
@@ -9,117 +9,289 @@
 
   <main class="danka-detail-main">
     <section class="detail-panel">
-      <div class="page-title-row">
-        <div>
-          <h1>檀家（世帯）詳細 - 基本情報</h1>
-
-          <nav class="tab-list">
-            <a href="#" class="tab-button active">基本情報</a>
-            <a href="#" class="tab-button">家族</a>
-            <a href="#" class="tab-button">過去帳</a>
-            <a href="#" class="tab-button">家系図</a>
-          </nav>
-        </div>
+      @if (danka) {
+        <div class="page-title-row">
+          <div>
+            <h1>
+              檀家（世帯）詳細 -
+              @if (selectedTab === 'basic') {
+                基本情報
+              }
+              @if (selectedTab === 'family') {
+                家族
+              }
+              @if (selectedTab === 'kakocho') {
+                過去帳
+              }
+              @if (selectedTab === 'familyTree') {
+                家系図
+              }
+            </h1>
 
-        <button type="button" class="edit-button" [routerLink]="['/danka-edit', danka?.id]">
-          編集
-        </button>
-      </div>
+            <nav class="tab-list">
+              <button
+                type="button"
+                class="tab-button"
+                [class.active]="selectedTab === 'basic'"
+                (click)="selectedTab = 'basic'"
+              >
+                基本情報
+              </button>
 
-      <section class="family-summary">
-        <div class="family-name-area">
-          <p class="family-name">{{ danka?.householdName }}</p>
-          <p class="family-head">世帯主: {{ danka?.householder }}</p>
-        </div>
+              <button
+                type="button"
+                class="tab-button"
+                [class.active]="selectedTab === 'family'"
+                (click)="selectedTab = 'family'"
+              >
+                家族
+              </button>
 
-        <div class="family-address">
-          <p>郵便番号 〒{{ danka?.postalCode }}</p>
-          <p>住所 {{ danka?.address }}</p>
+              <button
+                type="button"
+                class="tab-button"
+                [class.active]="selectedTab === 'kakocho'"
+                (click)="selectedTab = 'kakocho'"
+              >
+                過去帳
+              </button>
+
+              <button
+                type="button"
+                class="tab-button"
+                [class.active]="selectedTab === 'familyTree'"
+                (click)="selectedTab = 'familyTree'"
+              >
+                家系図
+              </button>
+            </nav>
+          </div>
+
+          <button
+            type="button"
+            class="edit-button"
+            [routerLink]="['/danka-edit', danka.id]"
+          >
+            編集
+          </button>
         </div>
 
-        <button type="button" class="memo-button">
-          回忌を見る
-        </button>
-      </section>
+        <section class="family-summary">
+          <div class="family-name-area">
+            <p class="family-name">{{ danka.householdName }}</p>
+            <p class="family-head">世帯主: {{ danka.householder }}</p>
+          </div>
 
-      <div class="detail-content">
-        <section class="basic-info-section">
-          <div class="section-heading">
-            <h2>基本情報</h2>
+          <div class="family-address">
+            <p>郵便番号 〒{{ danka.postalCode }}</p>
+            <p>住所 {{ danka.address }}</p>
           </div>
 
-          <div class="info-form">
-            <div class="info-row">
-              <div class="info-label">世帯主</div>
-              <div class="info-value">{{ danka?.householdName }}</div>
-            </div>
+          <button type="button" class="memo-button">
+            回忌を見る
+          </button>
+        </section>
 
-            <div class="info-row">
-              <div class="info-label">郵便番号</div>
-              <div class="info-value">{{ danka?.postalCode }}</div>
-            </div>
+        @if (selectedTab === 'basic') {
+          <div class="detail-content">
+            <section class="basic-info-section">
+              <div class="section-heading">
+                <h2>基本情報</h2>
+              </div>
 
-            <div class="info-row">
-              <div class="info-label">住所</div>
-              <div class="info-value">{{ danka?.address }}</div>
-            </div>
+              <div class="info-form">
+                <div class="info-row">
+                  <div class="info-label">世帯名</div>
+                  <div class="info-value">{{ danka.householdName }}</div>
+                </div>
+
+                <div class="info-row">
+                  <div class="info-label">世帯主</div>
+                  <div class="info-value">{{ danka.householder }}</div>
+                </div>
 
-            <div class="info-row phone-row">
-              <div class="info-label">電話番号</div>
+                <div class="info-row">
+                  <div class="info-label">郵便番号</div>
+                  <div class="info-value">{{ danka.postalCode }}</div>
+                </div>
 
-              <div class="phone-table">
-                <div class="phone-header">
-                  <div>番号</div>
-                  <div>備考</div>
+                <div class="info-row">
+                  <div class="info-label">住所</div>
+                  <div class="info-value">{{ danka.address }}</div>
                 </div>
 
-                @if (danka) {
-                  @for (phone of danka.phones; track $index) {
-                    <div class="phone-item">
-                      <div>{{ phone.tel }}</div>
-                      <div>{{ phone.note }}</div>
+                <div class="info-row phone-row">
+                  <div class="info-label">電話番号</div>
+
+                  <div class="phone-table">
+                    <div class="phone-header">
+                      <div>番号</div>
+                      <div>備考</div>
                     </div>
-                  }
-                }
 
+                    @for (phone of danka.phones; track $index) {
+                      <div class="phone-item">
+                        <div>{{ phone.tel }}</div>
+                        <div>{{ phone.note }}</div>
+                      </div>
+                    }
+                  </div>
+                </div>
               </div>
-            </div>
-          </div>
-        </section>
+            </section>
+
+            <aside class="status-panel">
+              <h2>この世帯の状況</h2>
+
+              <div class="status-card-list">
+                <button
+                  type="button"
+                  class="status-card"
+                  (click)="selectedTab = 'family'"
+                >
+                  <p class="status-label">家族</p>
+                  <p class="status-count">{{ families.length }} 名</p>
+                  <p class="status-link">詳細へ</p>
+                </button>
+
+                <button
+                  type="button"
+                  class="status-card"
+                  (click)="selectedTab = 'kakocho'"
+                >
+                  <p class="status-label">過去帳</p>
+                  <p class="status-count">2 名</p>
+                  <p class="status-link">詳細へ</p>
+                </button>
+              </div>
+
+              <section class="next-memorial">
+                <h3>次の法要</h3>
 
-        <aside class="status-panel">
-          <h2>この世帯の状況</h2>
-
-          <div class="status-card-list">
-            <a href="#" class="status-card">
-              <p class="status-label">家族</p>
-              <p class="status-count">4 名</p>
-              <p class="status-link">詳細へ</p>
-            </a>
-
-            <a href="#" class="status-card">
-              <p class="status-label">過去帳</p>
-              <p class="status-count">2 名</p>
-              <p class="status-link">詳細へ</p>
-            </a>
+                <div class="memorial-card">
+                  <p class="memorial-title">佐藤 ハナ - 三回忌</p>
+                  <p class="memorial-text">
+                    対象年 2026 / 没年月日 2024-01-08
+                  </p>
+                </div>
+              </section>
+
+              <div class="status-button-list">
+                <button
+                  type="button"
+                  class="status-button"
+                  (click)="selectedTab = 'family'"
+                >
+                  家族を見る
+                </button>
+
+                <button
+                  type="button"
+                  class="status-button"
+                  (click)="selectedTab = 'kakocho'"
+                >
+                  過去帳を見る
+                </button>
+              </div>
+            </aside>
           </div>
+        }
+
+        @if (selectedTab === 'family') {
+          <section class="family-tab-content">
+            <div class="section-heading">
+              <h2>家族情報</h2>
+            </div>
+
+            <section class="family-list-summary">
+              <div>
+                <p class="family-list-title">
+                  {{ danka.householdName }}の家族 {{ families.length }}名
+                </p>
+              </div>
+
+              <p class="family-list-head">
+                ※ 世帯主：{{ danka.householder }}
+              </p>
+            </section>
+
+            <section class="family-table-section">
+              @if (families.length > 0) {
+                <div class="family-table">
+                  <div class="family-table-header">
+                    <div>氏名</div>
+                    <div>ふりがな</div>
+                    <div>関係</div>
+                    <div>年齢</div>
+                    <div>生年月日</div>
+                    <div>備考</div>
+                  </div>
+
+                  @for (family of families; track family.id) {
+                    <div class="family-table-row">
+                      <div class="family-person-name">
+                        {{ family.name }}
+                      </div>
+
+                      <div>
+                        {{ family.furigana }}
+                      </div>
+
+                      <div>
+                        {{ family.relationship || '未登録' }}
+                      </div>
 
-          <section class="next-memorial">
-            <h3>次の法要</h3>
+                      <div>
+                        -
+                      </div>
 
-            <div class="memorial-card">
-              <p class="memorial-title">佐藤 ハナ - 三回忌</p>
-              <p class="memorial-text">対象年 2026 / 没年月日 2024-01-08</p>
+                      <div>
+                        {{ family.birthDate || '未登録' }}
+                      </div>
+
+                      <div>
+                        {{ family.note || '' }}
+                      </div>
+                    </div>
+                  }
+                </div>
+              } @else {
+                <div class="empty-family-message">
+                  登録されている家族情報はありません。
+                </div>
+              }
+            </section>
+          </section>
+        }
+
+        @if (selectedTab === 'kakocho') {
+          <section class="coming-soon-section">
+            <div class="section-heading">
+              <h2>過去帳</h2>
             </div>
+
+            <p class="empty-family-message">
+              過去帳情報はこれから実装します。
+            </p>
           </section>
+        }
 
-          <div class="status-button-list">
-            <a href="#" class="status-button">家族を見る</a>
-            <a href="#" class="status-button">過去帳を見る</a>
-          </div>
-        </aside>
-      </div>
+        @if (selectedTab === 'familyTree') {
+          <section class="coming-soon-section">
+            <div class="section-heading">
+              <h2>家系図</h2>
+            </div>
+
+            <p class="empty-family-message">
+              家系図はこれから実装します。
+            </p>
+          </section>
+        }
+      } @else {
+        <p class="empty-family-message">
+          檀家情報が見つかりませんでした。
+        </p>
+      }
     </section>
   </main>
 </div>
-

src/app/pages/danka-detail/danka-detail.scss

@@ -388,3 +388,156 @@
   font-size: 14px;
   box-sizing: border-box;
 }
+
+/* =========================
+   家族タブ
+========================= */
+
+.family-tab-content {
+  margin-top: 24px;
+}
+
+.family-tab-content .section-heading {
+  margin-bottom: 16px;
+
+  h2 {
+    margin: 0;
+    font-size: 20px;
+    font-weight: 700;
+  }
+}
+
+.family-list-summary {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 16px 20px;
+  margin-bottom: 20px;
+  background: #efe4d6;
+  border: 2px solid #d8c2aa;
+  border-radius: 12px;
+}
+
+.family-list-title {
+  margin: 0;
+  font-size: 20px;
+  font-weight: 700;
+}
+
+.family-list-head {
+  margin: 0;
+  font-size: 14px;
+  color: #6f6256;
+}
+
+.family-table-section {
+  margin-top: 16px;
+}
+
+.family-table {
+  display: grid;
+  gap: 8px;
+}
+
+.family-table-header,
+.family-table-row {
+  display: grid;
+  grid-template-columns: 1.2fr 1.2fr 0.8fr 0.6fr 1fr 1.4fr;
+  gap: 10px;
+  align-items: center;
+}
+
+.family-table-header {
+  padding: 12px 14px;
+  background: #efe4d6;
+  border: 2px solid #d8c2aa;
+  border-radius: 10px;
+  font-size: 14px;
+  font-weight: 700;
+  color: #5d3b24;
+}
+
+.family-table-row {
+  min-height: 56px;
+  padding: 12px 14px;
+  background: #fffaf3;
+  border: 2px solid #d8c2aa;
+  border-radius: 10px;
+  font-size: 15px;
+  color: #2f2923;
+}
+
+.family-table-row:hover {
+  background: #fff4e8;
+}
+
+/* 既存の .family-name と名前がかぶるので、家族表の中だけに効かせる */
+.family-table-row .family-person-name {
+  margin: 0;
+  font-size: 15px;
+  font-weight: 700;
+  color: #5d3b24;
+}
+
+.empty-family-message {
+  padding: 20px;
+  background: #fffaf3;
+  border: 2px solid #d8c2aa;
+  border-radius: 12px;
+  color: #6f6256;
+  font-weight: 700;
+}
+
+.family-support-area {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 18px;
+  margin-top: 24px;
+}
+
+.support-card {
+  padding: 18px 20px;
+  background: #fffaf3;
+  border: 2px solid #d8c2aa;
+  border-radius: 14px;
+
+  h2 {
+    margin: 0 0 8px;
+    font-size: 17px;
+    font-weight: 700;
+    color: #5d3b24;
+  }
+
+  p {
+    margin: 0;
+    font-size: 14px;
+    color: #6f6256;
+    line-height: 1.7;
+  }
+}
+
+.coming-soon-section {
+  margin-top: 24px;
+}
+
+/* 家族表が狭い画面では横スクロール */
+@media (max-width: 800px) {
+  .family-list-summary {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+
+  .family-table {
+    overflow-x: auto;
+  }
+
+  .family-table-header,
+  .family-table-row {
+    min-width: 760px;
+  }
+
+  .family-support-area {
+    grid-template-columns: 1fr;
+  }
+}

src/app/pages/danka-detail/danka-detail.ts

@@ -1,7 +1,9 @@
 import { Component } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
+import { FamilyService } from '../../services/family-service';
 import { Danka } from '../../models/danka';
+import { Family } from '../../models/family';
 import { AppHeader } from '../../share/header/app-header';
 import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 
@@ -13,15 +15,21 @@ import { AppSideMenu } from '../../share/side-menu/app-side-menu';
 })
 export class DankaDetail {
   danka: Danka | undefined;
+  families: Family[] = [];
+
+  selectedTab: 'basic' | 'family' | 'kakocho' | 'familyTree' = 'basic';
 
   constructor(
     private dankaService: DankaService,
+    private familyService: FamilyService,
     private route: ActivatedRoute,
   ) {
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
+      this.families = this.familyService.getFamiliesByDankaId(id);
     }
     console.log(this.danka);
+    console.log(this.families);
   }
 }

src/app/services/family-service.ts

@@ -9,6 +9,7 @@ export class FamilyService {
     {
       id: '1',
       dankaId: '1',
+      furigana: 'すずき　はなこ',
       name: '鈴木　花子',
       relationship: '母',
       birthDate: '1975-01-01',
@@ -17,6 +18,7 @@ export class FamilyService {
     {
       id: '2',
       dankaId: '1',
+      furigana: 'すずき　たろう',
       name: '鈴木　太郎',
       relationship: '長男',
       birthDate: '2005-12-31',