# DT側 対応内容・工数（社内用）

| 項目 | 内容 |
|---|---|
| 対象サイト | TakaHisa Downtown（姉妹店） |
| リポジトリ | `syn-okami/takahisa-downtown-lp` |
| 本番URL | https://downtown.takahisa.ae/ |
| デプロイ先 | 顧客リポ（URL未確定、確定後にリリース） |
| 技術スタック | Next.js 16.1 + React 19 + TypeScript + Tailwind v4（`output: 'export'` 静的書き出し） |
| 多言語 | 実質EN単独（schema は en + ja あるが ja は未稼働、今回スコープ外で維持） |
| 関連設計書 | [DESIGN.md](DESIGN.md) |
| 関連issue | https://github.com/syn-okami/takahisa-downtown-lp/issues/4 |

> ⚠️ **本セッションスコープ外**: `C:\WorkSpace\AI\takahisaDT\` のソースは別セッションで管理。本ドキュメントは設計・工数試算用の参照資料であり、実装はDT側セッションで行う。

---

## 0. 前提

- 店舗写真等の素材は顧客側から即時提供される
- 中級フロントエンジニア（Next.js経験あり） + AI補助前提
- DT側 i18n半端実装は触らない（EN単独運用維持）

---

## 1. ゴール（DT側だけの観点）

DTサイトに以下が追加される:

1. ヘッダーロゴ脇に「Business Bay」サブテキスト
2. ナビゲーションに「Locations」メニュー項目（`/locations` ルートへリンク）
3. 新ページ「Locations」を1言語分（EN）追加
4. フッターに「Sister Restaurant」ブロック（BT本店へのリンク）
5. `app/layout.tsx` の構造化データに `sameAs`（BT本店URL）追加
6. ロケールスキーマに `locations` キー追加

---

## 2. 改修対象ファイル一覧

### 既存ファイル（編集）

| ファイル | 主な変更 |
|---|---|
| `app/sections/HeaderSection/HeaderSection.tsx` | `navLinks` 配列にLocations追加、ロゴ脇サブテキスト追加 |
| `app/sections/FooterSection/FooterSection.tsx` | 姉妹店ブロック追加 |
| `app/layout.tsx` | 構造化データの `sameAs` にBT本店URL追加 |
| `app/locales/en.schema.json` | `locations` セクションの翻訳キー追加 |
| `app/locales/ja.schema.json` | 同上（運用は EN のみだがスキーマ統一） |

### 新規ファイル

| ファイル | 内容 |
|---|---|
| `app/locations/page.tsx` | Locationsページのルート（`/locations`） |
| `app/sections/LocationsSection/LocationsSection.tsx` | Locationsセクションコンポーネント |
| `app/lib/sisterRestaurant.ts`（推奨）| BT本店URL等の定数管理 |
| `public/assets/images/locations/bluewaters.jpg` | カード写真（顧客供給） |
| `public/assets/images/locations/downtown.jpg` | カード写真（顧客供給） |

---

## 3. タスク別 工数

| # | タスク | 工数 | 概要 |
|---|---|---|---|
| 3.1 | 準備・調査 | 0.15人日 | コンポーネント設計パターン確認・Tailwind v4記法確認 |
| 3.2 | ヘッダー改修 | 0.2〜0.3人日 | navLinks配列に1行 + ロゴ脇span追加 |
| 3.3 | Locationsページ新規 | 0.7〜1.0人日 | page.tsx + LocationsSection.tsx |
| 3.4 | フッター改修 | 0.2人日 | 姉妹店ブロック + 定数ファイル |
| 3.5 | 構造化データ拡張 | 0.2〜0.3人日 | layout.tsx の sameAs 追加 + 任意で@graph |
| 3.6 | ロケールスキーマ追加 | 0.15人日 | en/ja.schema.json に locations キー追加 |
| 3.7 | テスト・検証 | 0.3〜0.4人日 | lint/build/manual確認 |
| 3.8 | リリース | 0.3人日 | 顧客リポURL確定後 |
| | **DT側合計** | **約 2.5〜3.5人日** | |

---

## 4. タスク詳細

### 4.1 準備・調査（0.15人日）

- [ ] 既存セクションのコンポーネント設計パターン確認（`ShopSection.tsx` 等）
- [ ] Tailwind v4 のクラス使い方を既存コードから参照
- [ ] GSAP アニメーションパターンの確認

### 4.2 ヘッダー改修（0.2〜0.3人日）

**改修箇所**: `app/sections/HeaderSection/HeaderSection.tsx`

#### (a) navLinks 配列に Locations 追加

```tsx
// line 31-38 を以下に変更
const navLinks: NavLink[] = [
  { href: "#concept", label: "Shop Concept" },
  { href: "#awards", label: "Awards" },
  { href: "#intro", label: "Chef Introduction" },
  { href: "#grandmenu", label: "Grand Menu" },
  { href: "#gallery", label: "TakaHisa Gallery" },
  { href: "/locations", label: "Locations" },  // 新規
  { href: "#shop", label: "Shop Information" },
];
```

#### (b) ロゴ脇サブテキスト追加

```tsx
// line 313-320 を以下に変更
<div className="navbar-logo opacity-0 md:opacity-100 flex flex-col">
  <Link href={"/"} className="font-tnr text-[3.2rem] text-[#DAAF59]">
    TakaHisa Downtown
  </Link>
  <span className="font-georgia text-[1rem] text-[#DAAF59]/70 tracking-widest">
    Business Bay
  </span>
</div>
```

フルスクリーンnav（line 401-572）の navLinks表示・GSAPアニメーションは配列を増やすだけで自動対応。

### 4.3 Locationsページ新規作成（0.7〜1.0人日）

#### (a) ルートページ `app/locations/page.tsx`

```tsx
"use client";
import HeaderSection from "../sections/HeaderSection/HeaderSection";
import FooterSection from "../sections/FooterSection/FooterSection";
import LocationsSection from "../sections/LocationsSection/LocationsSection";
import { locales } from "../locales/locales";

export default function LocationsPage() {
  const translations = locales['en'];
  return (
    <>
      <HeaderSection />
      <main className="main relative bg-black">
        <LocationsSection
          hero={translations.locations.hero}
          items={translations.locations.items}
        />
      </main>
      <FooterSection
        contactText={translations.footerSection.contact_text}
        emailLink={translations.footerSection.email_link}
        snsLink={translations.footerSection.sns_link}
        copyrightText={translations.footerSection.copyright_text}
      />
    </>
  );
}
```

#### (b) LocationsSection コンポーネント新規

`app/sections/LocationsSection/LocationsSection.tsx`

既存セクション（`ShopSection.tsx`, `ConceptSection.tsx` 等）のスタイルパターン踏襲:
- Tailwind v4 / `font-tnr` / `font-georgia` / `text-[#DAAF59]` / `bg-black` 等の既存カラー
- GSAP `ScrollTrigger` でアニメーション

**構造**: Hero + カード×2 + Map

**工数内訳**:
- `page.tsx` 新規作成: 0.5h
- `LocationsSection.tsx` 新規作成（カード×2 + 地図 + アニメーション）: 4〜5h
- スタイル微調整・レスポンシブ: 1〜1.5h
- 計: 約 5.5〜7h = **0.7〜1.0人日**

### 4.4 フッター姉妹店ブロック追加（0.2人日）

**改修箇所**: `app/sections/FooterSection/FooterSection.tsx`

#### (a) 定数ファイル新規

```ts
// app/lib/sisterRestaurant.ts
export const SISTER_RESTAURANT = {
  name: "TakaHisa Bluewaters",
  url: "https://takahisa.ae/",
  location: "Bluewaters Island, Dubai",
  label: "Sister Restaurant"
};
```

#### (b) FooterSection 改修

```tsx
import { SISTER_RESTAURANT } from "@/app/lib/sisterRestaurant";

// 既存のコピーライト直前に挿入
<div className="footer-sister mx-auto w-fit pt-[6rem] text-center">
  <p className="font-georgia text-[1.2rem] tracking-widest text-[#DAAF59] uppercase mb-2">
    {SISTER_RESTAURANT.label}
  </p>
  <a
    href={SISTER_RESTAURANT.url}
    target="_blank"
    rel="noopener noreferrer"
    className="font-tnr text-[2rem] text-white hover:text-[#DAAF59] transition-colors"
  >
    {SISTER_RESTAURANT.name} →
  </a>
  <p className="font-georgia text-[1rem] text-white/60 mt-1">
    {SISTER_RESTAURANT.location}
  </p>
</div>
```

### 4.5 構造化データ拡張（0.2〜0.3人日）

**改修箇所**: `app/layout.tsx` line 66-112

```ts
// 現状（line 108-111）
"sameAs": [
  "https://www.facebook.com/takahisadubai/",
  "https://www.instagram.com/takahisa_downtown/"
]

// 改修後
"sameAs": [
  "https://takahisa.ae/",  // BT本店追加
  "https://www.facebook.com/takahisadubai/",
  "https://www.instagram.com/takahisa_downtown/"
]
```

Locationsページ用に `app/locations/layout.tsx` で `@graph` 構造化データを記述するなら追加 1h。

### 4.6 ロケールスキーマ追加（0.15人日）

**改修箇所**: `app/locales/en.schema.json` および `app/locales/ja.schema.json`

```json
{
  ...既存キー...,
  "locations": {
    "hero": {
      "title": "Our Locations",
      "subtitle": "Choose your TakaHisa experience in Dubai"
    },
    "items": [
      {
        "name": "TakaHisa Bluewaters",
        "badge": "Flagship Restaurant",
        "concept": "Our flagship restaurant on Bluewaters Island...",
        "address": "Banyan Tree Dubai, 1st Floor",
        "siteUrl": "https://takahisa.ae/",
        "reservationUrl": "https://www.sevenrooms.com/reservations/takahisa",
        "image": "/assets/images/locations/bluewaters.jpg",
        "viewLabel": "View Restaurant",
        "bookLabel": "Book a Table",
        "isCurrent": false
      },
      {
        "name": "TakaHisa Downtown",
        "badge": "Second Branch",
        "concept": "Our Downtown branch in Business Bay...",
        "address": "Volante Tower 1, 4F, Business Bay",
        "siteUrl": "https://downtown.takahisa.ae/",
        "reservationUrl": "https://www.sevenrooms.com/explore/takahisabusinessbay",
        "image": "/assets/images/locations/downtown.jpg",
        "viewLabel": "View Restaurant",
        "bookLabel": "Book a Table",
        "isCurrent": true
      }
    ]
  }
}
```

`ja.schema.json` も同じ構造で追加（中身は英語コピペ or 日本語訳）。

### 4.7 テスト・検証（0.3〜0.4人日）

- `npm run lint` → エラーなし
- `npm run build` → `output: 'export'` での `out/` 生成成功
- `npm run dev` でローカル動作確認:
  - Locationsメニュークリック → `/locations` 遷移
  - ロゴサブテキストの表示
  - フッター姉妹店リンク動作（別タブ）
  - レスポンシブ
- ビルド出力（`out/locations/index.html`）の手動確認
- Google Rich Results Test で構造化データ検証

### 4.8 リリース（0.3人日）

DT側顧客リポURL確定後に実行。BT側と同じパターン:
1. `git fetch deploy && git log main..deploy/main --oneline`
2. `release/YYYY-MM-DD-N` を deploy に push
3. 顧客リポで PR 作成・マージ
4. リリースタグを syn-okami 側に残す

---

## 5. 懸念点（バッファ外、注記のみ）

| # | 懸念点 | 対処方針 |
|---|---|---|
| 5.1 | 顧客レビュー追加ラウンド | 1ラウンド前提。追加発生時は別途相談 |
| 5.2 | `output: 'export'` の制約 | dynamic route 不可。静的ルート（`/locations`）のみ採用 |
| 5.3 | DT i18n半端実装 | スコープ外、触らない。Locationsページは EN表示 |
| 5.4 | 既存GSAPアニメーションとの干渉 | 既存パターン踏襲で回避 |
| 5.5 | 写真素材の解像度 | 顧客供給前提、解像度確認は受領時に実施 |

---

## 6. 受入条件

実装完了の判定基準:

- [ ] ヘッダーロゴ脇に「Business Bay」サブテキストが表示される
- [ ] ナビに「Locations」が表示され、クリックで `/locations` に遷移する
- [ ] `/locations` ページが既存の世界観で表示される（カード×2、地図、レスポンシブ）
- [ ] 「View Restaurant」「Book a Table」がそれぞれ別タブで起動する
- [ ] フッター姉妹店リンクが動作する（別タブ、BT本店へ）
- [ ] `npm run build` が成功し、`out/locations/index.html` が生成される
- [ ] `app/layout.tsx` の構造化データ `sameAs` に BT本店URL が含まれる
- [ ] Google Rich Results Test で構造化データが valid
- [ ] モバイル / タブレット / PC で破綻なし

---

## 7. 関連リンク

- 全体設計書: [DESIGN.md](DESIGN.md)
- BT側 scope: [bt-scope.md](bt-scope.md)
- DT側 README: `C:\WorkSpace\AI\takahisaDT\git\takahisa-downtown-lp\README.md`
- DT本番サイト: https://downtown.takahisa.ae/
- 関連issue: https://github.com/syn-okami/takahisa-downtown-lp/issues/4

---

## 8. DT側セッションへの引き継ぎ事項

本ドキュメントを参照して実装を進める際は、DT側セッション（`C:\WorkSpace\AI\takahisaDT\`）で:

1. デザインカンプ確定後、`feature/locations-page` ブランチを作成
2. 上記タスク 4.1〜4.6 を順次実装
3. `npm run lint && npm run build` でローカル検証
4. PR作成 → 顧客レビュー → マージ
5. 顧客リポURL確定後、リリースフロー実行