design: Organism 컴포넌트 개발 (Header, BalanceGameList)

[alwubin]

💡 작업 내용

• Notification UI 수정
• Header UI 구현
• BalanceGameCategoryButton, CategoryBar UI 구현
• BalanceGameList UI 구현
• 구현한 컴포넌트 스토리북에 추가

💡 자세한 설명

✅ Notification

<NotificationButton css={buttonStyle} onClick={handleNotification} />
{isOpen ? (
        <div css={notificationStyle}>
          <div css={titleStyle}>알림</div>
          <div css={notificationContentStyle}>
            {notifications.map((notification) => (
              <div css={notificationItemStyle}>
                <NotificationItem
                  category={notification.category}
                  date={notification.date}
                  title={notification.title}
                  content={notification.content}
                  isNew={notification.isNew}
                />
              </div>
            ))}

헤더에 알림 버튼(종소리 모양) 클릭 시 이전에 구현해놓은 NotificationList가 출력되도록 수정해놓았습니다.

✅ BalanceGameList

export interface ContentItemProps {
  optionAImg?: string;
  optionBImg?: string;
  id: number;
  title: string;
  tagLabels: string[];
  bookmarkState?: boolean;
  optionA?: string;
  optionB?: string;
}

api가 수정된 부분에 맞추어 수정해놓았지만, 옵션 값들에 대한 ImgUrl이 확실하지 않아 (등록하지 않을 시 기본 제공되는 이미지.. 등등) 추후 변경된 값 재적용 필요합니다.

✅ BalanceGameCategoryButton

      <BalanceGameCategoryButton
        label="인기"
        icon={<Popular />}
        active={activeTab === 'Popular'}
        badgeText={getBadgeText('Popular')}
        onClick={() => setActiveTab('Popular')}
      />

여기서의 label은 실제 카테고리 바에 출력되는 버튼명과 같아서 영어로 수정하지 않았습니다. 혹시 더 괜찮은 아이디어 있으면 알려주시면 감사하겠습니다.

📗 참고 자료 (선택)

📢 리뷰 요구 사항 (선택)

🚩 후속 작업 (선택)

✅ 셀프 체크리스트

• PR 제목을 형식에 맞게 작성했나요?
• 브랜치 전략에 맞는 브랜치에 PR을 올리고 있나요? (master/main이 아닙니다.)
• 이슈는 close 했나요?
• Reviewers, Labels, Projects를 등록했나요?
• 작업 도중 문서 수정이 필요한 경우 잘 수정했나요?
• 테스트는 잘 통과했나요?
• 불필요한 코드는 제거했나요?

closes #147

[WonJuneKim]

이번 구현도 고생 많으셨습니다 👍
Header, BalanceGameList 관련된 내용 찬찬히 살펴보고 코멘트 남겼습니다 한번 확인해주시면 감사하겠습니다!! 😆
카테고리 바도 정말 이쁜거같아욥ㅎㅎㅎ

[WonJuneKim]

const popularStyle = css`
  border-radius: 10px 0 0 10px;
`;

const worldCupStyle = css`
  border-radius: 0 10px 10px 0;
`;

const inactiveLineStyle = (label: string) => {
  switch (label) {
    case '인기':
      return popularStyle;
    case '월드컵':
      return worldCupStyle;
    default:
      return baseStyle;
  }
};

(스타일 네이밍은 임의로 지정해봤어요)
저 같은 경우에는 조건부 스타일은 이런식으로 처리하는 경우가 많은데, if 문 쓰는 방식도 있었군요!

[alwubin]

원래는 삼항연산자를 쓰는걸 좋아하는데, multi 삼항연산자에 대한 eslint가 있어서 수정했답니다ㅎㅎ.. 근데 저 borderRadius 부분만 추가되고 나머지 기본 style은 네가지 모두 동일하게 사용해서 조건문으로 사용해보았습니다! switch문도 좋은 방법 중 하나네용😄

[WonJuneKim]

최근에는 React.FC를 통한 선언 방법 보다는

const BalanceGameCategoryButton = ({
  label,
  icon,
  active,
  badgeText,
  onClick,
}: ButtonProps) => {

와 같이 명시적으로 props을 선언해주는 방식이 더 권장된다고 하더라구요!
한번 참고해주시면 좋을거 같습니다 😄

[alwubin]

권장되는 방식이라니! 몰랐어용 수정해놓도록 할게요😅

[WonJuneKim]

ImgUrl 코멘트 남겨주신 부분 확인했습니다!

[WonJuneKim]

제 에디터에서는 소숫점으로 디자인을 선언하니까 브라우저마다 반영되는게 다를 수도 있다고 경고 문고 뜨더라구요! 혹시 이런 에러나 경고 메시지 뜨시지 않았는지 궁금합니다!
(피그마에서 이렇게 소숫점으로 되어있는 부분들이 있을 때마다 경고 메시지가 떠서 질문드려욥!!)

[alwubin]

아뇨?! 소수점에 대한 따로 경고문은 보지 못했어요, 저는 크롬 사용하고있는데 다른 브라우저에서는 경고문이 따로 뜨는걸까욥?!

[areumH]

컴포넌트 구현하시느라 수고 많으셨어요!!!! 카테고리 바 너무 이쁘네요 👍👍

[areumH]

api로 받아오는 데이터의 타입은 추후에 확정된 후 types/game.ts 파일 내의 타입 수정 후 임포트해와서 사용하는 방식으로 수정하면 좋을 것 같습니다!!

[alwubin]

넵, 확인했습니다!

[areumH]

현재 피그마의 정의서에 따르면 더보기 1회 클릭 시 게임 카드가 6개 추가되는 것으로 나와있어요!!! 개수 수정 부탁드립니다 😊

[alwubin]

아정말요?! 수정해놓도록 하겠습니다! ☺️