REV-75/설명 컴포넌트 구현

[hyoribogo]

📑 구현 내용

설명 컴포넌트 구현했습니다. 피그마 페이지

🚧 참고 사항

• 컴포넌트가 페이지 설명에 쓰이는 용도라서 이름을 PageIntro라고 지었습니다!
• 코드 내용

interface PageIntroProps {
  imageSrc?: string // npc 아이콘 이미지 url
  description: string
  colorTheme: string
}

const PageIntro = ({ imageSrc, description, colorTheme }: PageIntroProps) => {
  const boxDefaultStyle = `border-2 p-4 whitespace-pre-line border-${colorTheme}-500`
  const textDefaultStyle = `text-${colorTheme}-900 text-sm sm:text-base`

  return imageSrc ? (
    <div className={`flex items-center gap-x-8 ${boxDefaultStyle}`}>
      <img
        className="max-w-20 max-h-20 object-cover"
        src={imageSrc}
        alt="페이지를 소개하는 npc 아이콘"
      />
      <p className={`${textDefaultStyle}`}>{description}</p>
    </div>
  ) : (
    <div className={`${boxDefaultStyle}`}>
      <p className={`${textDefaultStyle}`}>{description}</p>
    </div>
  )
}

• tailwind 속성 중 whitespace-pre-line라는 속성을 지정해줬습니다. 이러면 description prop 부분에 텍스트에 한 줄 띄워서 전달하면 그대로 줄바꿈이 적용됩니다.
• 아마 디자인이 완성되면 해당 컴포넌트의 박스 부분 코드가 수정될 것 같습니다!

❓ 궁금한 점

• boxDefaultStyle이나 fontDefaultStyle처럼 중복되는 스타일 변수는 어떻게 네이밍할지 정해야 할 것 같습니다. 그리고 className을 prop으로 받을 경우에도 그냥 className으로 받을지, ~~Style으로 받을지 결정하면 좋겠습니다!

[hayamaster]

효리님 고생하셨습니다!
확인했습니다!!!

[hayamaster]

whitespace-pre-line 처음 알았습니다!!
배우고 갑니다 🙏

[hayamaster]

같은 colorTheme이므로 text와 box의 border은 항상 같은 색깔이 되겠군요?
다른 색상이 될 경우는 없겠죠?...🤔

[hyoribogo]

넹 같은 색깔이 될 것 같아요!

[khj0426]

boxDefaultStyle이나 fontDefaultStyle처럼 중복되는 스타일 변수는 커스텀 클래스로 분리하는 게 좋을 거 같아요!
아니면 @apply 를 사용할 수도 있을 것 같은데 내일 이야기 해봐요!!

전 className을 바로 props으로 받아도 괜찮은데,, 둘 중 뭐가 더 좋은지 모르겠습니다.. ㅜㅜ

• Ripple UI도 재사용되는 클래스는 apply를 적용하고 있더라구요..!

https://clownhacker.tistory.com/159
https://code.pieces.app/blog/tailwind-apply-css-replacing-complex-classes