따꼼 트러블 슈팅 | 아이카드에서 기본 프로필 이미지 오류 해결 과정

1. 문제 상황

아이카드에서 프로필 이미지가 설정되지 않은 경우 기본 이미지가 표시되지 않는 문제가 있었습니다. 이미지 경로를 설정했지만, "/default-profile.jpg" 이미지가 불러와지지 않았습니다.

 

2. 원인 분석

Next.js 프로젝트에서 기본 이미지를 Supabase의 스토리지에서 가져오려면 Supabase의 Storage URL을 사용해야 했습니다. Image 컴포넌트에 로컬 이미지 경로가 아닌, Supabase의 스토리지 URL을 src 속성에 지정해야만 이미지가 정상적으로 표시될 수 있음을 알게 되었습니다.

 

3. 해결 방법

1. Supabase 기본 프로필 이미지 URL 설정
.env.local 파일에 Supabase의 기본 프로필 이미지 URL을 환경 변수로 추가했습니다.

# .env.local
NEXT_PUBLIC_SUPABASE_DEFAULT_IMAGE_URL=경로/public/default-profile.jpg

 

2. 클라이언트 파일에서 기본 이미지 URL 설정
supabaseClient.ts 파일을 만들어 환경 변수를 가져와 기본 이미지 URL로 설정했습니다. 기본 이미지 URL이 없을 경우 대체 이미지 "/fallback-profile.jpg"를 사용하도록 했습니다.

// supabaseClient.ts
export const DEFAULT_PROFILE_IMAGE_URL = process.env.NEXT_PUBLIC_SUPABASE_DEFAULT_IMAGE_URL || "/fallback-profile.jpg";

 

3. ChildCard 컴포넌트에서 기본 이미지 URL 적용
ChildCard 컴포넌트에서 프로필 이미지가 없을 경우 DEFAULT_PROFILE_IMAGE_URL을 사용하여 기본 이미지를 불러오도록 수정했습니다.

 

import React from "react";
import { Child } from "@/types/childType";
import Image from "next/image";
import { DEFAULT_PROFILE_IMAGE_URL } from "@/lib/supabaseClient";

interface ChildCardProps {
  child?: Child;
  onEdit?: () => void;
}

export const ChildCard = ({ child, onEdit }: ChildCardProps) => {
  if (!child) {
    return <div>아이가 등록되지 않았습니다.</div>;
  }

  return (
    <>
      <div>
        <Image
          src={child.profile || DEFAULT_PROFILE_IMAGE_URL} // 기본 이미지 설정
          alt="아이 프로필 이미지"
          width={150}
          height={150}
        />
        <h2>아이 이름: {child.name}</h2>
        <p>생년월일: {child.birth}</p>
        {child.notes && <p>특이사항: {child.notes}</p>}
        <button>수정</button>
      </div>
      <div>
        <h3>이번 달 접종 리스트</h3>
        <button>전체 접종 체크리스트로 이동</button>
      </div>
    </>
  );
};

export default ChildCard;

 

4. 결과

위 설정을 통해 기본 프로필 이미지가 Supabase에서 정상적으로 불러와지게 되었으며, child가 프로필 이미지를 설정하지 않았을 때도 기본 이미지가 표시되었습니다.

 

5. 배운 점

• 환경 변수 활용
  이미지 URL과 같은 환경에 따라 변경될 가능성이 있는 데이터는 환경 변수로 관리하여, 코드의 가독성을 높이고 수정의 용이성을 높일 수 있다는 점을 배웠습니다.
• Supabase Storage URL 사용
  Supabase Storage에 저장된 파일에 접근할 때는 직접 URL을 사용해야 하며, 이를 통해 이미지를 안정적으로 불러올 수 있다는 점을 알게 되었습니다.
• 기본 이미지 URL 설정 방식
  Image 컴포넌트에서 기본 이미지를 설정할 때, 직접 경로를 작성하는 대신 환경 변수와 클라이언트 파일을 이용하여 재사용 가능하고 유지 관리하기 좋은 구조로 설정하는 방법을 익혔습니다.