[feat] 공통 컴포넌트 구현 (Post)

[ghdtnals]

#️⃣연관된 이슈

ex) #이슈번호, #이슈번호
Closes #15

📝 PR 유형

해당하는 유형에 'x'로 체크해주세요.

• 기능 추가 (Feature)
• 버그 수정 (Bug Fix)
• 코드 개선 (Refactoring)
• 스타일 변경 (UI/UX)
• 문서 작업 (Documentation)
• 환경 설정 (Configuration)
• 기타 (Other)

📝작업 내용

이번 PR에서 작업한 내용을 간략히 설명해주세요(이미지 첨부 가능)

• PostList 컴포넌트에서 렌더링되는 PostListItem 컴포넌트를 구현했습니다.
• 조건부 클래스를 위한 clsx를 설치했습니다.
• 화살표 이미지 (bold)를 추가했습니다.

스크린샷 (선택)

💬리뷰 요구사항(선택)

리뷰어가 특별히 봐주었으면 하는 부분이 있다면 작성해주세요

ex) 메서드 XXX의 이름을 더 잘 짓고 싶은데 혹시 좋은 명칭이 있을까요?

• Post 컴포넌트의 이름을 PostListItem으로 변경했는데 괜찮은 이름일까요..?
• 함수나 컴포넌트 단위로 더 쪼개면 좋을 부분이 있을까요?
• 혹시 놓친 부분이나 애매한 부분이 있다면 조언 부탁드립니다 :)

[netlify]

✅ Deploy Preview for thejulge1 ready!

Name	Link
🔨 Latest commit	b5ef46d
🔍 Latest deploy log	https://app.netlify.com/sites/thejulge1/deploys/680c26d101d3e50008b4dadb
😎 Deploy Preview	https://deploy-preview-26--thejulge1.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[cozy-ito]

고생하셨습니다! 👍

[cozy-ito]

Post나 PostItem으로 표현해도 좋을 것 같아요! 😄

[cozy-ito]

나중에 진행하실 태스크로 두셔도 좋을 것 같은데,
카드 컴포넌트의 이미지는 img 태그로 사용하면 좋을 것 같아요! 🤔

이미지 로딩 중에 img 태그의 onLoad, onError 메서드 들을 활용해서 대체 이미지를 렌더링 해주면
사용자 경험 개선에 더 좋을 것 같아요! 👍

사용 예시 코드도 남겨봅니다 😄

const CardImage = ({
  src,
  ...
}: CardImageProps) => {
  const [imageStatus, setImageStatus] = useState<
    "loading" | "error" | "loaded"
  >("loading");

  const handleLoadImage = () => {
    setImageStatus("loaded");
  };

  const handleLoadErrorImage = () => {
    setImageStatus("error");
  };

  return (
    <div>
      {imageStatus === "loading" && (
        <img src={"로딩 스피너 경로"} />
      )}
      {imageStatus === "error" && (
        <img src={"대체 이미지 경로"} />
      )}
      <img
        src={src}
        onLoad={handleLoadImage}
        onError={handleLoadErrorImage}
      />
    </div>
  );
};

[almighty55555]

수고하셨습니다! 코드를 읽어놓고 승인을 잊고있었네요...