[add]

檀家詳細画面の家系図タブに配偶者関係を表示

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

                           <button
                             type="button"
                             class="member-chip"
-                            [class.active]="selectedFamily?.id === family.id"
+                            [class.active]="selectedFamily.id === family.id"
                             (click)="selectFamily(family)"
                           >
                             {{ family.name }}
                       </div>
                     </div>
 
+                    <section class="marriage-summary-panel">
+                      <h4>配偶関係</h4>
+
+                      <div class="marriage-summary-block">
+                        <p class="marriage-summary-label">現在の配偶者</p>
+
+                        @if (getCurrentMarriage(selectedFamily); as currentMarriage) {
+                          @if (getMarriagePartner(currentMarriage, selectedFamily); as currentPartner) {
+                            <button
+                              type="button"
+                              class="marriage-person-button"
+                              (click)="selectFamily(currentPartner)"
+                            >
+                              {{ currentPartner.name }}
+                            </button>
+                          } @else {
+                            <p class="marriage-empty-text">未登録</p>
+                          }
+                        } @else {
+                          <p class="marriage-empty-text">未登録</p>
+                        }
+                      </div>
+
+                      <div class="marriage-summary-block">
+                        <p class="marriage-summary-label">過去の配偶者</p>
+
+                        @if (getPastMarriages(selectedFamily).length > 0) {
+                          <div class="marriage-history-list">
+                            @for (relation of getPastMarriages(selectedFamily); track relation.id) {
+                              @if (getMarriagePartner(relation, selectedFamily); as pastPartner) {
+                                <button
+                                  type="button"
+                                  class="marriage-person-button secondary"
+                                  (click)="selectFamily(pastPartner)"
+                                >
+                                  <span>{{ pastPartner.name }}</span>
+                                  <small>{{ getMarriageStatusLabel(relation.status) }}</small>
+                                </button>
+                              }
+                            }
+                          </div>
+                        } @else {
+                          <p class="marriage-empty-text">未登録</p>
+                        }
+                      </div>
+                    </section>
+
                     <div class="selected-person-actions">
                       <a
                         class="selected-person-button"

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

   font-weight: 800;
 }
 
+.marriage-summary-panel {
+  margin-top: 18px;
+  padding: 14px 16px;
+  background: #fffaf3;
+  border: 2px solid #d8caba;
+  border-radius: 12px;
+  box-sizing: border-box;
+}
+
+.marriage-summary-panel h4 {
+  margin: 0 0 12px;
+  color: #2f2720;
+  font-size: 16px;
+  font-weight: 800;
+}
+
+.marriage-summary-block + .marriage-summary-block {
+  margin-top: 14px;
+}
+
+.marriage-summary-label {
+  margin: 0 0 8px;
+  color: #7b6b5c;
+  font-size: 13px;
+  font-weight: 800;
+}
+
+.marriage-history-list {
+  display: grid;
+  gap: 8px;
+}
+
+.marriage-person-button {
+  width: 100%;
+  min-height: 40px;
+  padding: 8px 10px;
+  border: 2px solid #8a6543;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 14px;
+  font-weight: 800;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  box-sizing: border-box;
+}
+
+.marriage-person-button:hover {
+  background: #f6efe6;
+}
+
+.marriage-person-button small {
+  color: #7b6b5c;
+  font-size: 12px;
+  font-weight: 800;
+}
+
+.marriage-person-button.secondary {
+  border-color: #d8caba;
+}
+
+.marriage-empty-text {
+  margin: 0;
+  color: #7b6b5c;
+  font-size: 14px;
+  font-weight: 700;
+}
+
 .selected-person-actions {
   display: grid;
   gap: 10px;

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

 import { Component } from '@angular/core';
-import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, RouterLink } from '@angular/router';
 import { DankaService } from '../../services/dankaService';
 import { FamilyService } from '../../services/family-service';
 import { KakochoService } from '../../services/kakocho-service';
     private marriageRelationService: MarriageRelationService,
     private route: ActivatedRoute,
   ) {
-    //遷移先からタブ情報を取得
     const tab = this.route.snapshot.queryParams['tab'];
     if (tab === 'family') {
       this.selectedTab = 'family';
     } else if (tab === 'familyTree') {
       this.selectedTab = 'familyTree';
     }
-    //遷移先のIDから該当の世帯と家族基本を取得
+
     const id = this.route.snapshot.params['id'];
     if (id) {
       this.danka = this.dankaService.getDankaById(id);
       this.selectedFamily = this.families[0];
       this.kakocholist = this.kakochoService.getKakochoByDankaId(id);
     }
-    console.log(this.danka);
-    console.log(this.families);
-    console.log(tab);
   }
 
-  //年齢計算の処理
-  getAge(birthDate: string) {
+  getAge(birthDate: string): string {
     if (birthDate === '') {
       return '-';
     }
 
     const birth = new Date(birthDate);
-    const today: Date = new Date();
+    const today = new Date();
     const thisYearBirthday = new Date(today.getFullYear(), birth.getMonth(), birth.getDate());
 
     let age = today.getFullYear() - birth.getFullYear();
     if (thisYearBirthday > today) {
       age--;
     }
+
     return age.toString();
-    console.log(this.kakocholist);
   }
 
-  //回忌計算の処理
   getKaiki(deathDate: string): number {
     return this.currentYear - new Date(deathDate).getFullYear() + 1;
   }
 
-  //家系図の処理
   selectFamily(family: Family): void {
     this.selectedFamily = family;
   }
     if (!id) {
       return undefined;
     }
+
     return this.families.find((family) => family.id === id);
   }
 
         relation.status !== 'current' &&
         (relation.person1Id === family.id || relation.person2Id === family.id),
     );
-
   }
 
   getMarriagePartner(relation: MarriageRelation, family: Family): Family | undefined {