diff --git a/src/apis/aquarium.ts b/src/apis/aquarium.ts index da9162b..0f7a726 100644 --- a/src/apis/aquarium.ts +++ b/src/apis/aquarium.ts @@ -174,3 +174,26 @@ export async function getMyFishes(): Promise { }); } } + +/** + * Aquarium Embed Code를 가져옵니다. + * @returns Embed code 정보 (html, markdown, img_url) + */ +export interface EmbedCode { + ok: boolean; + img_url: string; + html: string; + markdown: string; +} + +export async function getAquariumEmbedCode(): Promise { + try { + const res = await api.get("/aquatics/embed/aquarium/"); + return res.data; + } catch (e) { + throwMapped(e, { + 401: "로그인이 필요합니다.", + 500: "서버 오류로 embed 코드를 불러오지 못했습니다.", + }); + } +} diff --git a/src/apis/fishtank.ts b/src/apis/fishtank.ts index b4c7f68..5a4f8e3 100644 --- a/src/apis/fishtank.ts +++ b/src/apis/fishtank.ts @@ -177,3 +177,29 @@ export async function getSelectableFish(repoId: string): Promise { + try { + const res = await api.get(`/aquatics/embed/fishtank/${repoId}/`); + return res.data; + } catch (e) { + throwMapped(e, { + 401: "로그인이 필요합니다.", + 404: "피쉬탱크를 찾을 수 없습니다.", + 500: "서버 오류로 embed 코드를 불러오지 못했습니다.", + }); + } +} diff --git a/src/components/MyPage/AquariumSection.tsx b/src/components/MyPage/AquariumSection.tsx index 1b2b7c6..214d6ca 100644 --- a/src/components/MyPage/AquariumSection.tsx +++ b/src/components/MyPage/AquariumSection.tsx @@ -11,6 +11,7 @@ import { getAquariumDetail, updateAquariumFishVisibility, getMyFishes, + getAquariumEmbedCode, type MyBackground, type AquariumDetail, type UserFish, @@ -240,6 +241,21 @@ export default function AquariumSection() { }); }; + // Export 핸들러 + const handleExport = async () => { + try { + const embedCode = await getAquariumEmbedCode(); + // Markdown 코드를 클립보드에 복사 + await navigator.clipboard.writeText(embedCode.markdown); + setMessage("Markdown 코드가 클립보드에 복사되었습니다!"); + setTimeout(() => setMessage(null), 3000); + } catch (error) { + console.error("Export failed:", error); + setMessage(error instanceof Error ? error.message : "Export에 실패했습니다."); + setTimeout(() => setMessage(null), 3000); + } + }; + const itemCandidates: Item[] = useMemo( () => [ { id: "it1", name: "Corals 1", src: "/images/items/coral-1.png" }, @@ -320,7 +336,7 @@ export default function AquariumSection() {