[Fix] repo id number

src/apis/fishtank.ts

@@ -125,7 +125,7 @@ export async function getMyBackgrounds(): Promise<MyBackground[]> {
  * @param repoId repo ID
  * @returns FishTank 상세 정보
  */
-export async function getFishtankDetail(repoId: string): Promise<FishtankDetail> {
+export async function getFishtankDetail(repoId: number): Promise<FishtankDetail> {
   try {
     const res = await api.get<FishtankDetail>(`/aquatics/fishtank/${repoId}/`);
     return res.data;
@@ -143,7 +143,7 @@ export async function getFishtankDetail(repoId: string): Promise<FishtankDetail>
  * @param repoId 레포지토리 ID
  * @param backgroundId Background.id (사용자가 소유한 배경의 background_id)
  */
-export async function applyFishtankBackground(repoId: string, backgroundId: number): Promise<void> {
+export async function applyFishtankBackground(repoId: number, backgroundId: number): Promise<void> {
   try {
     await api.post(`/aquatics/fishtank/${repoId}/background/`, {
       background_id: backgroundId,
@@ -163,7 +163,7 @@ export async function applyFishtankBackground(repoId: string, backgroundId: numb
  * @param repoId 레포지토리 ID
  * @returns 선택 가능한 물고기 목록
  */
-export async function getSelectableFish(repoId: string): Promise<SelectableFish[]> {
+export async function getSelectableFish(repoId: number): Promise<SelectableFish[]> {
   try {
     const res = await api.get<{ fishes: SelectableFish[] }>(
       `/aquatics/fishtank/${repoId}/selectable-fish/`,

src/assets/png/Backgrounds/index.ts

@@ -1,11 +1,11 @@
-import bg1 from "@/assets/png/Backgrounds/bg-deep-1.png";
-import bg2 from "@/assets/png/Backgrounds/bg-deep-2.png";
-import bg3 from "@/assets/png/Backgrounds/bg-ocean.png";
+import bgDeep1 from "@/assets/png/Backgrounds/bg-deep-1.png";
+import bgDeep2 from "@/assets/png/Backgrounds/bg-deep-2.png";
+import bgOcean from "@/assets/png/Backgrounds/bg-ocean.png";
 
 const BACKGROUND_IMAGES: Record<string, string> = {
-  "Bg Ocean": bg1,
-  "Bg Deep 1": bg2,
-  "Bg Deep 2": bg3,
+  "Bg Ocean": bgOcean,
+  "Bg Deep 1": bgDeep1,
+  "Bg Deep 2": bgDeep2,
 };
 
 export function getBackgroundImage(name?: string): string | null {

src/components/CollectionPage/RepoSelect.tsx

@@ -31,7 +31,7 @@ export default function RepoSelect({ value, onChange, customRepos }: RepoSelectP
         const repositories = await getRepositories();
 
         const repoInfos: RepoInfo[] = repositories.map((repo: Repository) => ({
-          id: repo.id.toString(),
+          id: repo.id,
           fullName: repo.full_name,
           contributions: repo.commit_count,
         }));
@@ -71,7 +71,8 @@ export default function RepoSelect({ value, onChange, customRepos }: RepoSelectP
             className={`font-abeezee /* 안쪽 그림자 적용 */ w-full cursor-pointer appearance-none rounded-md border border-[#89482D]/50 bg-[#DFC39D] px-3 py-2 pr-8 text-[0.85rem] text-[#89482D] shadow-inner transition-all duration-200 hover:shadow-[inset_-4px_4px_4px_0_rgba(137,72,45,0.2)] focus:shadow-[inset_-4px_4px_6px_0_rgba(137,72,45,0.3)] focus:ring-0 focus:outline-none`}
             value={value?.id ?? ""}
             onChange={(e) => {
-              const selected = repos.find((d) => d.id === e.target.value);
+              const value = Number(e.target.value);
+              const selected = repos.find((d) => d.id === value) ?? null;
               onChange(selected ?? null);
               e.currentTarget.blur();
             }}

src/components/CollectionPage/fishGrowthCard.tsx

@@ -49,7 +49,7 @@ const FishGrowthCard: React.FC<FishGrowthCardProps> = ({
     return allFishData
       .filter((fish) => fish.group_code === selectedFishGroup.group_code)
       .map((fish) => ({
-        id: fish.id.toString(),
+        id: fish.id,
         fullName: fish.repository_full_name,
         contributions: fish.maturity,
       }));

src/components/MyPage/FishTankSection.tsx

@@ -140,12 +140,7 @@ export default function FishTankSection() {
 
       try {
         console.log("Fetching fishtank detail for repo:", repo.id, repo.fullName);
-        // repo.id는 string이므로 숫자로 변환
-        const repoIdNum = parseInt(repo.id, 10);
-        if (isNaN(repoIdNum)) {
-          console.error("Invalid repo ID:", repo.id);
-          throw new Error(`Invalid repository ID: ${repo.id}`);
-        }
+
         const fishtankDetail = await getFishtankDetail(repo.id);
         console.log("Fishtank detail received:", fishtankDetail);
         console.log(
@@ -255,7 +250,7 @@ export default function FishTankSection() {
     }
 
     try {
-      const embedCode = await getFishtankEmbedCode(Number(repo.id));
+      const embedCode = await getFishtankEmbedCode(repo.id);
       // Markdown 코드를 클립보드에 복사
       await navigator.clipboard.writeText(embedCode.markdown);
       setMessage("Markdown 코드가 클립보드에 복사되었습니다!");
@@ -282,7 +277,7 @@ export default function FishTankSection() {
       }
 
       try {
-        const backgroundId = parseInt(selectedBgId);
+        const backgroundId = parseInt(selectedBgId, 10);
         if (isNaN(backgroundId)) {
           setMessage("Invalid background selected.");
           setTimeout(() => setMessage(null), 3000);
@@ -436,7 +431,10 @@ export default function FishTankSection() {
         <section className="mt-3 rounded-xl">
           {tab === "timeline" && (
             <div className="w-full">
-              <GrowthTimeline repoId={repo?.id || null} contributionFishes={contributionFishes} />
+              <GrowthTimeline
+                repoId={repo ? repo.id : null}
+                contributionFishes={contributionFishes}
+              />
             </div>
           )}
           {tab === "background" &&
@@ -596,7 +594,7 @@ export default function FishTankSection() {
 
       {/* GrowthTimeline */}
       <div className="mt-10 flex justify-center">
-        <GrowthTimeline repoId={repo?.id || null} contributionFishes={contributionFishes} />
+        <GrowthTimeline repoId={repo ? repo.id : null} contributionFishes={contributionFishes} />
       </div>
     </div>
   );

src/components/MyPage/GrowthTimeline.tsx

@@ -20,7 +20,7 @@ interface ContributionFishData {
 }
 
 interface GrowthTimelineProps {
-  repoId: string | null;
+  repoId: number | null;
   contributionFishes?: ContributionFishData[];
 }
 
@@ -56,11 +56,6 @@ export default function GrowthTimeline({ repoId, contributionFishes = [] }: Grow
 
   // ContributionFish 데이터를 기반으로 같은 group_code를 가진 물고기들 중 maturity가 현재 이하인 것들 필터링
   const filteredFishes = useMemo(() => {
-    console.log("GrowthTimeline: filteredFishes calculation", {
-      contributionFishesCount: contributionFishes.length,
-      fishesCount: fishes.length,
-    });
-
     if (contributionFishes.length === 0) {
       console.log("GrowthTimeline: No contributionFishes, using all fishes");
       return fishes; // ContributionFish가 없으면 기존 로직 사용

src/components/MyPage/RepoSelect.tsx

@@ -25,7 +25,7 @@ export default function RepoSelect({
         // Repository 타입을 RepoInfo 타입으로 변환
         // my_commit_count를 사용하여 현재 사용자의 기여도를 표시
         const repoInfos: RepoInfo[] = repositories.map((repo: Repository) => ({
-          id: repo.id.toString(),
+          id: repo.id,
           fullName: repo.full_name,
           contributions: repo.my_commit_count, // 사용자의 기여도 사용
         }));
@@ -62,8 +62,12 @@ export default function RepoSelect({
       ) : (
         <select
           className={`font-abeezee ${selectWidth} appearance-none rounded-md border border-white/50 bg-[#3E548E] px-3 py-2 pr-10 pl-7 text-white shadow-xl hover:shadow-2xl focus:ring-2 focus:ring-blue-300 focus:outline-none`}
-          value={value?.id ?? ""}
-          onChange={(e) => onChange(repos.find((d) => d.id === e.target.value) ?? null)}
+          value={value ? String(value.id) : ""}
+          onChange={(e) => {
+            const valueNum = Number(e.target.value); // ★
+            const selected = repos.find((d) => d.id === valueNum); // ★
+            onChange(selected ?? null);
+          }}
         >
           <option value="" disabled hidden className="text-[#B2B2B2]">
             Select a repository to visit!

src/types/aquarium.ts

@@ -15,7 +15,7 @@ export type CanvasSize = {
 };
 
 export interface RepoInfo {
-  id: string;
+  id: number;
   fullName: string;
   contributions: number;
 }