作業ディレクトリ

cd /home/kenji/dev_portal_front

1) フォルダ準備（既にあればスキップOK）

mkdir -p apps/field_detail/src/components/figma
mkdir -p apps/field_detail/src/components/ui

2) Figma(Make) 生成物の配置

• top画面の TSX/TS/CSS/SVG → apps/field_detail/src/components/figma/
• Figmaの共通UI群（button.tsx など）→ apps/field_detail/src/components/ui/
  • 既存と重複するファイルはマージしてください

3) 一括“正規化”（Figma特有の import 修正）

対象は components/figma と components/ui のみ（方針は変えません）

# A) import の末尾に付いた @version を削除（"..." と '...' の両方）
grep -RIl --include='*.ts' --include='*.tsx' '"[^"]*@[0-9]' apps/ai_analytics/src/components \
| xargs -r sed -E -i 's/"([^"]+)@[0-9][^"]*"/"\1"/g'
grep -RIl --include='*.ts' --include='*.tsx' "'[^']*@[0-9]" apps/ai_analytics/src/components \
| xargs -r sed -E -i "s/'([^']+)@[0-9][^']*'/'\1'/g"

# B) radix-ui/ → @radix-ui/（先頭が @ でない場合のみ付与：@@事故防止）
grep -RIl --include='*.ts' --include='*.tsx' 'radix-ui/' apps/ai_analytics/src/components \
| xargs -r sed -E -i 's|(^|[^@])radix-ui/|\1@radix-ui/|g'

# C) 念のため @@radix-ui/ を @radix-ui/ に圧縮（混入時の保険）
grep -RIl --include='*.ts' --include='*.tsx' '@@radix-ui/' apps/ai_analytics/src/components \
| xargs -r sed -E -i 's|@+radix-ui/|@radix-ui/|g'

# D) 置換副作用のゴミ（""@ / ''@）があれば掃除
grep -RIl --include='*.ts' --include='*.tsx' '""@' apps/ai_analytics/src/components | xargs -r sed -i 's/""@/"/g'
grep -RIl --include='*.ts' --include='*.tsx' "''@" apps/ai_analytics/src/components | xargs -r sed -i "s/''@/'/g"

# E) figma → ui の相対参照をこの階層に合わせて補正（"./ui/" → "../ui/"）
grep -RIl --include='*.ts' --include='*.tsx' 'from "\./ui/' apps/ai_analytics/src/components/figma \
| xargs -r sed -i 's|from "\./ui/|from "../ui/|g'
grep -RIl --include='*.ts' --include='*.tsx' "from '\./ui/" apps/ai_analytics/src/components/figma \
| xargs -r sed -i "s|from '\./ui/|from '../ui/|g"

4) 依存導入（field_detail コンテナ内）

# 未起動なら起動
docker compose up -d --build ai_analytics

# 使っている @radix-ui/react-* を検出→不足だけ入れる
docker compose exec field_detail sh -lc '
RADIX_PKGS=$(grep -RhoE "@radix-ui/react-[a-z-]+" src/components || true);
[ -n "$RADIX_PKGS" ] && echo "Install: $RADIX_PKGS" && npm i $RADIX_PKGS || echo "No @radix-ui packages found";
'

# 周辺依存（足りなければ入る／入っていればスキップ）
docker compose exec field_detail sh -lc '\
npm i clsx class-variance-authority tailwind-merge lucide-react sonner cmdk embla-carousel-react input-otp react-hook-form react-resizable-panels react-day-picker recharts next-themes vaul >/dev/null 2>&1 || true'

5) 表示（まずは App.tsx で直描画）

Figmaの“top”メインコンポーネント名に合わせて import パスを調整してください

// apps/field_detail/src/App.tsx
import Top from "@/components/figma/Top";   // 例: Top.tsx を貼った場合
// import Top from "@/components/figma/ScreenRoot";  // 生成名に合わせて変更

export default function App() {
  return <Top />;
}

6) 再起動＆確認

docker compose restart field_detail
# → http://localhost:5175

つまずいたら

docker compose logs --tail=200 field_detail

• Failed to resolve import "...@1.x.y" → 3-A/B を再実行
• Failed to resolve import "radix-ui/..." → 3-B を再実行
• @@radix-ui/... → 3-C を再実行
• from "./ui/... 解決失敗 → 3-E で "./ui/" → "../ui/" を再実行

この流れで“top”画面も、他モデルと同じ構成のまま追加・反映できます。

docker_compose

services:
  model_detail:
    build: { context: ./apps/model_detail, dockerfile: Dockerfile.dev }
    ports: ["5173:5173"]
    volumes: ["./apps/model_detail:/app", "/app/node_modules"]

  view_common:
    build: { context: ./apps/view_common, dockerfile: Dockerfile.dev }
    ports: ["5174:5173"]     # ホスト側だけ変える
    volumes: ["./apps/view_common:/app", "/app/node_modules"]

コマンド例

• すべて起動：docker compose up（または -d でデタッチ）
• 個別起動：docker compose up -d view_common
• 個別停止：docker compose stop view_common
• 個別ログ：docker compose logs -f view_common

① view_common アプリを用意（最短は model_detail を丸コピー）

リポジトリのルートで：

cd /home/kenji/dev_portal_front

# まだ無ければ作成（model_detail をベースにコピー）
cp -a apps/model_detail apps/view_common

# ノイズ除去（あれば）
rm -rf apps/view_common/node_modules apps/view_common/dist

# （任意）package.json の name を view_common に変更
sed -i 's/"name": *"[^"]*"/"name": "view_common"/' apps/view_common/package.json

必要なファイル（index.html, src/main.tsx, vite.config.ts, Dockerfile.dev…）がコピーされていれば OK です。
vite.config.ts の server は model_detail と同じで大丈夫です。

---

② docker-compose.yml にサービスを追加 → 起動

view_common サービスがまだなら追加（すでに追加済みならスキップ）：

services:
  model_detail:
    build: { context: ./apps/model_detail, dockerfile: Dockerfile.dev }
    ports: ["5173:5173"]
    volumes: ["./apps/model_detail:/app", "/app/node_modules"]
    # ...省略...

  view_common:
    build: { context: ./apps/view_common, dockerfile: Dockerfile.dev }
    ports: ["5174:5173"]      # ← ホスト側は 5174
    volumes: ["./apps/view_common:/app", "/app/node_modules"]
    # ...model_detail と同様の env/command/working_dir ...

起動：

docker compose up -d --build view_common
docker compose ps
docker compose logs --tail=50 view_common

→ ブラウザ: http://localhost:5174

---

③ 依存インストール（view_common 向けに書き換え）

ホスト側で grep する代わりに、コンテナ内で検出→インストールすると安全です。

# Radix を検出→不足があれば npm i（コンテナ内で実施）
docker compose exec view_common sh -lc '
RADIX_PKGS=$(grep -RhoE "@radix-ui/react-[a-z-]+" src || true);
[ -n "$RADIX_PKGS" ] && echo "Install: $RADIX_PKGS" && npm i $RADIX_PKGS || echo "No radix packages found";
'

# 周辺依存（足りなければ入る / 入っていれば何もしない）
docker compose exec view_common sh -lc '\
npm i clsx class-variance-authority tailwind-merge lucide-react sonner cmdk embla-carousel-react input-otp react-hook-form react-resizable-panels react-day-picker recharts next-themes vaul >/dev/null 2>&1 || true'

もし view_common にまだ src/ が無くて grep が空でも問題ありません。Figmaコードを貼った後にもう一度上を実行すればOKです。

---

④ Figma(Make) のコードを置いたらお決まりの正規化（view_common側）

作業ディレクトリはルートでOKです。apps/view_common/src を対象にしてコマンドを実行：

# @version を除去（"..."）
grep -RIl --include='*.ts' --include='*.tsx' '"[^"]*@[0-9]' apps/view_common/src \
| xargs -r sed -E -i 's/"([^"]+)@[0-9][^"]*"/"\1"/g'

# @version を除去（'...'）
grep -RIl --include='*.ts' --include='*.tsx' "'[^']*@[0-9]" apps/view_common/src \
| xargs -r sed -E -i "s/'([^']+)@[0-9][^']*'/'\1'/g"

# radix-ui/ → @radix-ui/ に復元
grep -RIl --include='*.ts' --include='*.tsx' 'radix-ui/' apps/view_common/src \
| xargs -r sed -i 's|radix-ui/|@radix-ui/|g'

# 置換副作用のゴミ（""@ / ''@）があれば掃除
grep -RIl --include='*.ts' --include='*.tsx' '""@' apps/view_common/src | xargs -r sed -i 's/""@/"/g'
grep -RIl --include='*.ts' --include='*.tsx' "''@" apps/view_common/src | xargs -r sed -i "s/''@/'/g"

# 依存を再チェック＆インストール（コンテナ内）
docker compose exec view_common sh -lc '\
RADIX_PKGS=$(grep -RhoE "@radix-ui/react-[a-z-]+" src || true);
[ -n "$RADIX_PKGS" ] && npm i $RADIX_PKGS || true'

必要なら再起動：

docker compose restart view_common

① view_common アプリを用意（最短は model_detail を丸コピー）

② docker-compose.yml にサービスを追加 → 起動

③ 依存インストール（view_common 向けに書き換え）

④ Figma(Make) のコードを置いたらお決まりの正規化（view_common側）