ブログ連携
@@ -174,260 +66,31 @@ export function BlogPage() {
- {error &&
{error}
}
+ {accountError &&
{accountError}
}
+ {summaryError &&
{summaryError}
}
{success &&
{success}
}
- {/* プラットフォーム連携セクション */}
-
-
アウトプット連携
-
-
- {PLATFORMS.map((pf) => {
- const linked = accountMap.get(pf.key);
- const isEditing = editingPlatform === pf.key;
- return (
-
-
{pf.icon}
-
{pf.label}
-
- {linked ? (
- /* ── 連携済み ── */
- <>
-
{pf.urlPrefix}
- {isEditing ? (
- <>
-
- setDraftUsernames((prev) => ({
- ...prev,
- [pf.key]: e.target.value,
- }))
- }
- onKeyDown={(e) => {
- if (e.key === "Enter" && draftUsernames[pf.key]?.trim()) {
- setConfirmingPlatform(pf.key);
- }
- }}
- />
-
-
-
- ) : (
- <>
-
- {linked.username}
-
-
- {linked.last_synced_at ? "同期済み" : "未同期"}
-
-
-
-
-
- )}
-
- ) : (
- /* ── 未連携 ── */
- <>
-
{pf.urlPrefix}
-
- setDraftUsernames((prev) => ({
- ...prev,
- [pf.key]: e.target.value,
- }))
- }
- onKeyDown={(e) => {
- if (e.key === "Enter") handleSave(pf.key);
- }}
- />
-
-
- )}
-
- );
- })}
-
-
+
- {/* ブログスコア */}
{articles.length > 0 &&
}
- {/* 記事一覧 */}
{accounts.length > 0 && (
-
-
-
記事一覧
-
- {(["all", "zenn", "note", "qiita"] as PlatformFilter[]).map((f) => (
-
- ))}
-
-
-
- {articles.length === 0 ? (
-
- 記事がありません。「同期」ボタンで記事を取得してください。
-
- ) : (
- <>
-
-
- {showPagination && (
-
-
-
- {currentPage} / {totalPages}
-
-
-
- )}
-
- )}
-
+
)}
- {/* AI 分析結果 */}
diff --git a/frontend/src/components/blog/BlogPlatformList.tsx b/frontend/src/components/blog/BlogPlatformList.tsx
new file mode 100644
index 00000000..b7555240
--- /dev/null
+++ b/frontend/src/components/blog/BlogPlatformList.tsx
@@ -0,0 +1,115 @@
+import type { BlogAccount } from "../../types";
+import type { PlatformKey } from "../../hooks/useBlogAccountManager";
+import { ZennIcon } from "../icons/ZennIcon";
+import { NoteIcon } from "../icons/NoteIcon";
+import { QiitaIcon } from "../icons/QiitaIcon";
+import styles from "./BlogPage.module.css";
+
+/** 対応プラットフォーム定義 */
+const PLATFORMS = [
+ {
+ key: "zenn" as const,
+ label: "Zenn",
+ urlPrefix: "https://zenn.dev/",
+ icon:
,
+ },
+ {
+ key: "note" as const,
+ label: "note",
+ urlPrefix: "https://note.com/",
+ icon:
,
+ },
+ {
+ key: "qiita" as const,
+ label: "Qiita",
+ urlPrefix: "https://qiita.com/",
+ icon:
,
+ },
+] as const;
+
+type BlogPlatformListProps = {
+ accountMap: Map
;
+ draftUsernames: Record;
+ setDraftUsernames: React.Dispatch>>;
+ savingPlatform: string | null;
+ syncingPlatform: string | null;
+ onSave: (platform: PlatformKey) => void;
+ onSync: (platform: PlatformKey) => void;
+ onDelete: (platform: PlatformKey) => void;
+};
+
+/** プラットフォーム連携行の一覧を描画するコンポーネント。 */
+export function BlogPlatformList({
+ accountMap,
+ draftUsernames,
+ setDraftUsernames,
+ savingPlatform,
+ syncingPlatform,
+ onSave,
+ onSync,
+ onDelete,
+}: BlogPlatformListProps) {
+ return (
+
+
アウトプット連携
+
+ {PLATFORMS.map((pf) => {
+ const linked = accountMap.get(pf.key);
+ return (
+
+
{pf.icon}
+
{pf.label}
+
+ {linked ? (
+ <>
+
{pf.urlPrefix}
+
{linked.username}
+
連携済み
+
+
+
+ ) : (
+ <>
+
{pf.urlPrefix}
+
+ setDraftUsernames((prev) => ({ ...prev, [pf.key]: e.target.value }))
+ }
+ onKeyDown={(e) => {
+ if (e.key === "Enter") onSave(pf.key);
+ }}
+ />
+
+
+ )}
+
+ );
+ })}
+
+
@@ -141,7 +103,10 @@ export function CareerAnalysisPage() {
{a.status === "dead_letter" && (
)}
-
@@ -154,221 +119,14 @@ export function CareerAnalysisPage() {
);
}
- // ── 分析結果表示 ────────────────────────────────────────
-
if (phase === "detail" && selected?.result) {
- const r = selected.result;
return (
-
-
-
- v{selected.version} — {selected.target_position}
-
-
-
-
-
-
-
-
-
-
-
-
成長曲線
-
{result.growth_summary}
-
-
技術スタック評価
-
- {([1, 2, 3] as const).map(
- (p) =>
- grouped[p].length > 0 && (
-
-
- {stars[p]} {labels[p]}
-
-
- {grouped[p].map((t) => (
-
- {t.name}
-
- ))}
-
-
- ),
- )}
- {result.tech_stack.summary && (
-
{result.tech_stack.summary}
- )}
-
-
-
強み（根拠付き）
-
- {result.strengths.map((s, i) => {
- const badge = BADGE_MAP[s.evidence_source] || BADGE_MAP.resume;
- return (
-
-
- {badge.label}
- {s.title}
-
-
{s.detail}
-
- );
- })}
-
-
-
キャリアパス提案
- {result.career_paths.map((cp) => (
-
-
- {cp.title}
- {cp.label}
-
-
-
フィットスコア {cp.fit_score}
-
-
-
{cp.description}
- {cp.required_skills.length > 0 && (
-
- 必要スキル:
- {cp.required_skills.map((sk) => (
-
- {sk}
-
- ))}
-
- )}
- {cp.gap_skills.length > 0 && (
-
- ギャップ:
- {cp.gap_skills.map((sk) => (
-
- {sk}
-
- ))}
-
- )}
-
- ))}
-
-
アクションアイテム
-
- {result.action_items.map((a, i) => (
-
-
- {a.priority}
- {a.action}
-
-
{a.reason}
-
- ))}
-
-
-
学習リソース
-
-
- キャリアパス実現に向けて習得が推奨されるスキルの学習リソースです。
-
-
- {gapSkills.map((skill) => {
- const officialUrl = OFFICIAL_DOCS[skill];
- const udemyUrl = `https://www.udemy.com/courses/search/?q=${encodeURIComponent(skill)}&lang=ja`;
- return (
-
- );
- })}
-
-
-
+
+
+ v{selected.version} — {selected.target_position}
+
+
+
+
+
+
+
+
+
+
+
+
成長曲線
+
{result.growth_summary}
+
+
技術スタック評価
+
+ {([1, 2, 3] as const).map(
+ (p) =>
+ grouped[p].length > 0 && (
+
+
+ {stars[p]} {labels[p]}
+
+
+ {grouped[p].map((t) => (
+
+ {t.name}
+
+ ))}
+
+
+ ),
+ )}
+ {result.tech_stack.summary && (
+
{result.tech_stack.summary}
+ )}
+
+
+
強み（根拠付き）
+
+ {result.strengths.map((s, i) => {
+ const badge = BADGE_MAP[s.evidence_source] || BADGE_MAP.resume;
+ return (
+
+
+ {badge.label}
+ {s.title}
+
+
{s.detail}
+
+ );
+ })}
+
+
+
キャリアパス提案
+ {result.career_paths.map((cp) => (
+
+
+ {cp.title}
+ {cp.label}
+
+
+
フィットスコア {cp.fit_score}
+
+
+
{cp.description}
+ {cp.required_skills.length > 0 && (
+
+ 必要スキル:
+ {cp.required_skills.map((sk) => (
+
+ {sk}
+
+ ))}
+
+ )}
+ {cp.gap_skills.length > 0 && (
+
+ ギャップ:
+ {cp.gap_skills.map((sk) => (
+
+ {sk}
+
+ ))}
+
+ )}
+
+ ))}
+
+
アクションアイテム
+
+ {result.action_items.map((a, i) => (
+
+
+ {a.priority}
+ {a.action}
+
+
{a.reason}
+
+ ))}
+
+
+
学習リソース
+
+
+ キャリアパス実現に向けて習得が推奨されるスキルの学習リソースです。
+
+
+ {gapSkills.map((skill) => {
+ const officialUrl = OFFICIAL_DOCS[skill];
+ const udemyUrl = `https://www.udemy.com/courses/search/?q=${encodeURIComponent(skill)}&lang=ja`;
+ return (
+
+ );
+ })}
+
+
+