[add]

モックアップを元にHTMLとSCSSを追加

src/app/pages/search/search.html

@@ -1 +1,143 @@
-<p>search works!</p>
+<app-header></app-header>
+
+<div class="breadcrumb">
+  ホーム &gt; まとめて検索
+</div>
+
+<div class="search-page">
+  <app-side-menu></app-side-menu>
+
+  <main class="search-main">
+    <section class="search-panel">
+      <div class="page-title-row">
+        <h1>まとめて検索</h1>
+
+        <div class="top-action-list">
+          <button type="button" class="top-button" onclick="history.back()">
+            戻る
+          </button>
+
+          <a routerLink="/" class="top-button">
+            ホーム
+          </a>
+        </div>
+      </div>
+
+      <section class="search-condition-area">
+        <div class="search-input-row">
+          <div class="search-input-box">
+            <span class="search-icon">⌕</span>
+            <input type="text" [(ngModel)]="searchKeyword"
+                   placeholder="さとう / 佐藤 / 釈 / 2024 / 母 / 三回忌"
+                   (keydown.enter)="searchAll()"/>
+          </div>
+          <button type="button" class="search-button" (click)="searchAll()">
+            検索
+          </button>
+          <button type="button" class="filter-button-main">
+            条件を絞る
+          </button>
+          <a routerLink="/danka-list" class="back-list-button">
+            一覧へ戻る
+          </a>
+        </div>
+
+        <div class="search-filter-list">
+          @for (filter of searchTypeFilters; track filter.value) {
+            <button
+              type="button"
+              class="search-filter-button"
+              [class.active]="selectedSearchType === filter.value"
+              (click)="selectedSearchType = filter.value; searchAll()"
+            >
+              {{ filter.label }}
+            </button>
+          }
+        </div>
+      </section>
+
+      <section class="search-result-panel">
+        <h2>検索結果 {{ totalResultCount }} 件</h2>
+
+        @if (totalResultCount > 0) {
+          @if (dankaResults.length > 0) {
+            <section class="result-group">
+              <h3>檀家（世帯）</h3>
+
+              @for (danka of dankaResults; track danka.id) {
+                <a class="result-row danka-result-row"
+                   [routerLink]="['/danka-detail', danka.id]">
+                  <div class="result-main-text">
+                    {{ danka.householdName }}
+                  </div>
+                  <div>
+                    世帯主: {{ danka.householder }}
+                  </div>
+                  <div>
+                    住所: {{ danka.address }}
+                  </div>
+                  <div class="result-link-text">
+                    開く
+                  </div>
+                </a>
+              }
+            </section>
+          }
+
+          @if (familyResults.length > 0) {
+            <section class="result-group">
+              <h3>家族</h3>
+              @for (family of familyResults; track family.id) {
+                <a class="result-row family-result-row"
+                   [routerLink]="['/danka', family.dankaId, 'family', family.id, 'edit']">
+                  <div class="result-main-text">
+                    {{ family.name }}
+                  </div>
+                  <div>
+                    ふりがな: {{ family.furigana }}
+                  </div>
+                  <div>
+                    関係: {{ family.relationship }}
+                  </div>
+                  <div>
+                    生年月日: {{ family.birthDate || '未登録' }}
+                  </div>
+                </a>
+              }
+            </section>
+          }
+
+          @if (kakochoResults.length > 0) {
+            <section class="result-group">
+              <h3>過去帳</h3>
+
+              @for (kakocho of kakochoResults; track kakocho.id) {
+                <a class="result-row kakocho-result-row"
+                   [routerLink]="['/danka-detail', kakocho.dankaId]"
+                   [queryParams]="{ tab: 'kakocho' }">
+                  <div class="result-main-text">
+                    {{ kakocho.kaimyo }}
+                  </div>
+                  <div>
+                    俗名: {{ kakocho.name }}
+                  </div>
+                  <div>
+                    没年月日: {{ kakocho.deathDate }}
+                  </div>
+                  <div>
+                    {{ kakocho.note || '備考なし' }}
+                  </div>
+                </a>
+              }
+            </section>
+          }
+        } @else {
+          <div class="empty-result">
+            検索結果はありません。
+          </div>
+        }
+      </section>
+    </section>
+  </main>
+</div>
+

src/app/pages/search/search.scss

@@ -0,0 +1,359 @@
+:host {
+  position: relative;
+  display: block;
+  min-height: 100vh;
+  background: #f4eee4;
+  color: #2f2720;
+}
+
+.breadcrumb {
+  position: absolute;
+  top: 28px;
+  left: 50%;
+  transform: translateX(-50%);
+  color: #7b6b5c;
+  font-size: 14px;
+  z-index: 2;
+}
+
+.search-page {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: #f4eee4;
+}
+
+.search-main {
+  flex: 1;
+  padding-right: 34px;
+  box-sizing: border-box;
+}
+
+.search-panel {
+  min-height: 650px;
+  padding: 26px 34px 36px;
+  background: #ffffff;
+  border: 2px solid #d8caba;
+  border-radius: 76px;
+  box-sizing: border-box;
+}
+
+.page-title-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  gap: 24px;
+}
+
+.page-title-row h1 {
+  margin: 0;
+  color: #2f2720;
+  font-size: 32px;
+  line-height: 1.2;
+  font-weight: 800;
+  letter-spacing: 0.02em;
+}
+
+.top-action-list {
+  display: flex;
+  gap: 8px;
+}
+
+.top-button {
+  width: 92px;
+  height: 36px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #ffffff;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 800;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.top-button:hover {
+  background: #f6efe6;
+}
+
+.search-condition-area {
+  margin-top: 8px;
+}
+
+.search-input-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 120px 140px 150px;
+  gap: 18px;
+  align-items: center;
+}
+
+.search-input-box {
+  height: 56px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #fffdf9;
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+  box-sizing: border-box;
+}
+
+.search-icon {
+  width: 30px;
+  color: #7b6b5c;
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.search-input-box input {
+  width: 100%;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: #2f2720;
+  font-size: 18px;
+  font-family: inherit;
+}
+
+.search-input-box input::placeholder {
+  color: #7b6b5c;
+}
+
+.search-button,
+.filter-button-main,
+.back-list-button {
+  height: 56px;
+  border-radius: 8px;
+  font-size: 18px;
+  font-weight: 800;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.search-button {
+  border: 2px solid #8a6543;
+  background: #8a6543;
+  color: #ffffff;
+}
+
+.search-button:hover {
+  background: #765639;
+}
+
+.filter-button-main,
+.back-list-button {
+  border: 2px solid #d8caba;
+  background: #ffffff;
+  color: #2f2720;
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.filter-button-main:hover,
+.back-list-button:hover {
+  background: #f6efe6;
+}
+
+.search-filter-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.search-filter-button {
+  min-width: 120px;
+  height: 38px;
+  padding: 0 18px;
+  border: 2px solid #d8caba;
+  border-radius: 6px;
+  background: #f1e7d8;
+  color: #2f2720;
+  font-size: 15px;
+  font-weight: 700;
+  cursor: pointer;
+  box-sizing: border-box;
+}
+
+.search-filter-button:hover {
+  background: #eadfce;
+}
+
+.search-filter-button.active {
+  background: #8a6543;
+  border-color: #8a6543;
+  color: #ffffff;
+}
+
+.search-result-panel {
+  margin-top: 16px;
+  padding: 28px 28px 34px;
+  border: 2px solid #d8caba;
+  border-radius: 62px;
+  background: #fffdf9;
+  box-sizing: border-box;
+}
+
+.search-result-panel h2 {
+  margin: 0 0 12px;
+  color: #2f2720;
+  font-size: 24px;
+  font-weight: 800;
+}
+
+.result-group {
+  margin-top: 16px;
+}
+
+.result-group h3 {
+  margin: 0 0 6px;
+  color: #6f6257;
+  font-size: 17px;
+  font-weight: 800;
+}
+
+.result-row {
+  min-height: 56px;
+  margin-top: 6px;
+  padding: 0 12px;
+  border: 2px solid #d8caba;
+  border-radius: 8px;
+  background: #ffffff;
+  color: #2f2720;
+  text-decoration: none;
+  display: grid;
+  align-items: center;
+  column-gap: 18px;
+  box-sizing: border-box;
+}
+
+.result-row:hover {
+  background: #f6efe6;
+}
+
+.danka-result-row {
+  grid-template-columns: 1.1fr 1.4fr 1.8fr 80px;
+}
+
+.family-result-row {
+  grid-template-columns: 1.1fr 1.6fr 1.2fr 1.6fr;
+}
+
+.kakocho-result-row {
+  grid-template-columns: 1.2fr 1.4fr 1.4fr 1.2fr;
+}
+
+.result-main-text {
+  font-weight: 800;
+}
+
+.result-link-text {
+  color: #3f6f45;
+  font-weight: 800;
+}
+
+.empty-result {
+  min-height: 72px;
+  padding: 22px;
+  border: 2px solid #d8caba;
+  border-radius: 10px;
+  background: #ffffff;
+  color: #7b6b5c;
+  font-size: 16px;
+  font-weight: 700;
+  box-sizing: border-box;
+}
+
+.inside-note {
+  margin: 16px 0 0;
+  color: #7b6b5c;
+  font-size: 14px;
+}
+
+.bottom-note {
+  width: 700px;
+  margin: 18px 0 22px 36px;
+  padding: 4px 12px;
+  border: 2px solid #d8caba;
+  border-radius: 4px;
+  background: #eadfce;
+  color: #7b6b5c;
+  font-size: 14px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 1100px) {
+  .search-input-row {
+    grid-template-columns: 1fr 120px;
+  }
+
+  .filter-button-main,
+  .back-list-button {
+    width: 100%;
+  }
+
+  .search-result-panel {
+    border-radius: 36px;
+  }
+
+  .result-row {
+    overflow-x: auto;
+  }
+
+  .danka-result-row,
+  .family-result-row,
+  .kakocho-result-row {
+    min-width: 860px;
+  }
+}
+
+@media (max-width: 800px) {
+  .breadcrumb {
+    position: static;
+    transform: none;
+    padding: 16px 20px 0;
+  }
+
+  .search-page {
+    flex-direction: column;
+  }
+
+  .search-main {
+    width: 100%;
+    padding: 16px 20px 32px;
+  }
+
+  .search-panel {
+    padding: 24px 20px 30px;
+    border-radius: 32px;
+  }
+
+  .page-title-row {
+    flex-direction: column;
+  }
+
+  .page-title-row h1 {
+    font-size: 26px;
+  }
+
+  .search-input-row {
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+
+  .search-filter-button {
+    flex: 1;
+    min-width: 100px;
+  }
+
+  .bottom-note {
+    width: auto;
+    margin: 10px 20px 22px;
+  }
+}