[ Feature/dev 96 ] webp 호환되는지 확인 후 이미지 렌더링

[Happhee]

🔥 Related Issues

https://linear.app/fewletter/issue/DEV-96/webp-지원여부에-따른-이미지-렌더링

💜 작업 내용

• webp 이미지 렌더 확인 후 Png 확장자로 변경 / webp 유지
• 테스트 코드 작성

✅ PR Point

• imageModel 로 확인

export class ImageModel {
  constructor() {
    this.imageSrc =
      "https://d3ex4vlh373syu.cloudfront.net/images/2024-07-04/nOF8xld3qCU4ZjM9.webp";
  }

  isWebpImage() {
    return this.imageSrc.endsWith(".webp");
  }

  async supportsWebP(): Promise<boolean> {
    const img = new Image();
    return new Promise((resolve) => {
      img.onload = () => {
        resolve(true);
      };
      img.onerror = () => resolve(false);
      img.src = this.imageSrc;
    });
  }

  async checkWebpSupport() {
    const isSupported = await this.supportsWebP();
    this.webpBrowser = isSupported;
  }

  static changePngImage({ imageSrc }: { imageSrc: string }) {
    return imageSrc.replace(".webp", ".png");
  }

  get webpBrowser() {
    return this.isWebpBrowser;
  }
  set webpBrowser(isSurported: boolean) {
    this.isWebpBrowser = isSurported;
  }

  private imageSrc: string;
  private isWebpBrowser: boolean = false;
}

• 각 페이지 별 테스트

const mockData: WorkbookServerInfo = {
  id: 1,
  name: 2,
  mainImageUrl:
    "https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0c2db3c3-340a-4654-8b79-5e125973af4d%2F%E1%84%83%E1%85%A2%E1%84%8C%E1%85%B5_29.webp&blockId=b245d009-e5f8-410f-b1a1-01d66bc6af84&width=3600",
  title: "사소한 것들의 역사 - 기술편",
  description:
    "기술의 역사 속 흥미로운 이야기를 통해 과거와 현재를 연결합니다. 제임스 와트의 라디에이터부터 다이슨의 혁신적인 발명품까지, 일상 속에서 쉽게 지나쳤던 기술들의 기원과 발전 과정을 흥미롭게 알아보세요. 이 책은 다양한 기술의 역사와 그 뒷이야기를 통해 독자들에게 새로운 통찰과 지식을 제공합니다.",
  category: "사회",
  createdAt: "2024-06-19T15:00:03.943077",
  writers: [
    {
      id: 1,
      name: "Fig.1",
      url: "https://www.fig1.kr/history",
    },
  ],
  articles: [
    {
      id: 1,
      title: "겨울철 노벨상 후보들",
    },
    {
      id: 2,
      title: "예나 지금이나 같은 킥보드 문제",
    },
    {
      id: 3,
      title: "스타일러, LG가 최초가 아니라고요?",
    },
    {
      id: 4,
      title: "마사지 기계의 시초는 바이브레이터?!",
    },
    {
      id: 5,
      title: "K(imchi)-냉장고와 아파트의 상관관계",
    },
    {
      id: 6,
      title: "셋 중 가장 늦게 발명된 것은?",
    },
    {
      id: 7,
      title: "의외로 다양하고 복잡한 자물쇠의 역사",
    },
    {
      id: 8,
      title: "80년 동안 바뀌지 않던 기술을 바꾼 다이슨",
    },
    {
      id: 9,
      title: "애플이 프린터도 만들어?",
    },
    {
      id: 10,
      title: "에어프라이어와 전자레인지가 뒤늦게 성공한 이유",
    },
    {
      id: 11,
      title: "선풍기와 에어서큘레이터 뭐가 다른 거죠?",
    },
    {
      id: 12,
      title: "로지텍 첫 마우스 못생김",
    },
    {
      id: 13,
      title: "다이슨이 얼마나 혁신적인지 역사로 알 수 있음",
    },
    {
      id: 14,
      title: "삐삐가 사라졌다고? 어제도 썼는데?!",
    },
    {
      id: 15,
      title: "에어컨 만든 사람 노벨평화상 줘라",
    },
    {
      id: 16,
      title: "한때 메시와 호날두가 뛰놀던 K-MP3 시장",
    },
    {
      id: 17,
      title: "전세계 콘센트 하나로 통일 좀 해줘라",
    },
    {
      id: 18,
      title: "인터넷, 위성으로 하는 거 아닌가요?",
    },
    {
      id: 19,
      title: "커피 부심이 있는 이탈리아인 아내를 두면 생기는 일",
    },
    {
      id: 20,
      title: "기괴한 세탁기의 세계..",
    },
    {
      id: 21,
      title: "결국 애플이 다 이기는 이어폰의 역사",
    },
  ],
};

describe("워크북 상세 모델 테스트", () => {
  let workbookInfoModel: WorkbookInfolModel;

  beforeEach(() => {
    workbookInfoModel = new WorkbookInfolModel({
      initWorkbookServerInfo: mockData,
      initWebpBrowser: { isWebpBrowser: false }, // webp 지원 x
    });
  });

  it("워크북 클라이언트 상세 데이터 변환 테스트", () => {
    const workbookClientInfo = workbookInfoModel.workbookClientInfo;
    expect(workbookClientInfo).toEqual(
      expect.objectContaining({
        ...mockData,
        mainImageUrl:
          "https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F0c2db3c3-340a-4654-8b79-5e125973af4d%2F%E1%84%83%E1%85%A2%E1%84%8C%E1%85%B5_29.png&blockId=b245d009-e5f8-410f-b1a1-01d66bc6af84&width=3600",
      }), //확장자 png
    );
  });
});

[soomin9106]

오 이렇게 모델도 만들었군용 👍

[soomin9106]

모델 만든 거를 바탕으로 훅 사용하니까 로직 관리가 편해보이네용!!

[Happhee]

@soomin9106 감사합니다! 저도 확실히 유지보수성에서 모델이 참 역할을 잘하고 있다는 생각이 드네욥ㅎㅎ

[soomin9106]

확인 완료 했습니다!!