카카오테크캠퍼스 2기 | STEP2 | 18일차(24-07-17) 회고

 

⭕ 카카오테크캠퍼스 2기 | STEP2 | 18일차(24-07-17) 회고

📝 Chakra UI

• 음 Chakra UI를 사용하게 되면서, 얼마나 쉽게 사용할 수 있을지, 그리고 생산성이 얼마나 향상될지에 대해 궁금했다. 새로운 라이브러리를 배우는 과정에서 초기에는 다소 어려움이 있었지만, Chakra UI의 공식 문서와 다양한 튜토리얼을 통해 기본 사용법을 익히는 데 많은 도움이 되었다. 또한 예제 코드를 직접 실행해 보며 실습을 통해 이해도를 높였다.

---

 

Accordion 컴포넌트

• Chakra UI의 Accordion 컴포넌트는 상품 상세 정보를 깔끔하고 쉽게 표현할 수 있었다. AccordionItem, AccordionButton, AccordionPanel 등의 컴포넌트들을 조합하여 아코디언의 기본 구조를 빠르게 완성할 수 있었다.

<AccordionItem>
  <AccordionButton className="accordion-button">
    <Box className="box-title">상품 상세 정보</Box>
    <AccordionIcon />
  </AccordionButton>
  <AccordionPanel className="accordion-panel">
    {productDetail.productDetailInfo.announcements.map((announcement) => (
      <Box key={announcement.displayOrder} className="announcement-box">
        <Text className="announcement-title">{announcement.name}:</Text>
        <Text className="announcement-value">{announcement.value}</Text>
      </Box>
    ))}
  </AccordionPanel>
</AccordionItem>

---

 

Box 컴포넌트

• Box 컴포넌트를 사용하면 내용을 감싸는 컨테이너로 활용할 수 있으며, padding, margin 등 다양한 스타일 속성을 쉽게 적용할 수 있었다.

<Box padding="4" margin="2" className="announcement-box">
  <Text fontWeight="bold" className="announcement-title">
    {announcement.name}:
  </Text>
  <Text className="announcement-value">{announcement.value}</Text>
</Box>

---

 

• Chakra UI의 컴포넌트들은 기본적으로 스타일이 적용되어 있어, 디자인 요구사항에 맞춰 스타일을 커스터마이징하려고 할 때 기본 스타일과 충돌이 발생했다. 아코디언 버튼의 배경색을 변경하려고 했지만, Chakra UI의 기본 스타일이 우선 적용되어 원하는 스타일이 반영되지 않았다.
• 이러한 문제를 해결하기 위해 css prop을 사용하여 Emotion의 스타일 객체를 컴포넌트에 직접 전달했다. 이를 통해 Chakra UI의 기본 스타일을 변경하는 방법을 찾았다. 하지만 이는 Chakra UI의 간편함이라는 장점을 다소 희석시키는 요인이 되었다.

const accordionStyles = css`
  .accordion-button {
    background-color: #f5f5f5;
  }
  .accordion-panel {
    background-color: #ffffff;
  }
`;

<Accordion allowToggle css={accordionStyles}>
  {/* 아코디언 항목들 */}
</Accordion>

 

📝 Daily Scrum

• STEP1 진행 후 PR

 

😋 Today 회고

• 처음 접하는 Chakra UI 라이브러리를 학습할 수 있어서 좋은 기회였다. 스토리북과 같은 도구와 함께 새로운 프로젝트를 시작할 때 유용하게 사용할 수 있는 템플릿을 마련할 수 있을 것 같다.

 

➡️ 참고 링크

https://v2.chakra-ui.com/

Chakra UI - A simple, modular and accessible component library that gives you the building blocks you need to build your React a