design: 공통 컴포넌트 제작(댓글 컴포넌트, category button, contents button)

[WonJuneKim]

💡 작업 내용

• category button 구현
• contents button 구현
• 댓글 컴포넌트 구현

💡 자세한 설명

✅css 요소 호출 방식

import * as S from './Bookmark.style';

과 같이 export 되는 스타일들을 하나의 객체로 가져오는 방법을 사용했습니다.

✅카테고리 버튼 주석처리

<button type="button" css={S.categoryButtonStyle} {...attributes}>
      <ImageComponent css={S.imgWrap} />
      {/* <div css={S.spacer} /> */}
      <span css={S.labelStyle}>{label}</span>
    </button>

의 부분에서 각 카테고리 버튼의 간격이 다른 관계로 이 경우 간격을 지정해 줘야하기 때문에 해당 부분을 추가 후 주석 처리 하였습니다. 현재는 최상위 컨테이너에 있는 디자인 속성이 반영된 상태입니다.

✅ (기존)Chips 컴포넌트와 (신규) Tag 컴포넌트 관련

Chips 컴포넌트가 기존이 있는 것을 인지하지 못하여 추가로 생성하였습니다.
두 코드의 차이는 Chips : children으로 이름을 받습니다. Tag : label 에 해당하는 props를 전달받아야하고, div 관련 속성 재설정이 가능합니다.

사실상 큰 차이가 없어 하나의 컴포넌트로 통일하도록 하겠습니다.

✅ (기존)MenuTap과 (신규) DotButton 관련

동일 건으로, MenuTap은 menuData 배열을 받아 동적으로 메뉴 항목을 렌더링 한다는 점에서 차이가 있습니다.
컴포넌트 재사용성을 고려해 MenuTap으로 사용하는 것이 바람직해 보여, 이 부분 코멘트 꼭 부탁드립니다!! (현재 DotButton과 Comment 분자가 연결되어 있는 상태입니다.)

✅ 스타일링 속성 중 컬러팔레트가 아닌 부분

export const createdTime = css`
  ${typo.Comment.Regular}
  color: #67727E;
`;

과 같이 처리된 부분들이 있습니다. 해당 부분은 다른 두분의 pr에서도 컬러를 네이밍 해준 기록이 확인되어 머지 후 팔레트에 맞춰서 호출하는 방식으로 변경하겠습니다.

✅ Bookmark, LikeButton 동작 관련

해당 컴포넌트 클릭 시 시각적으로 전환되도록 구현하였습니다.

✅ Contents Button 컴포넌트

클릭 동작까지 구현 완료되었습니다.

+) 태그는 항상 2개, 제목의 최대 길이까지 전달받았습니다. 이 부분 이슈 발행 후 수정하도록 하겠습니다.

✅ Comment 컴포넌트

export interface CommentProps extends ComponentPropsWithRef<'div'> {
  imgUrl: string | React.ComponentType<React.SVGProps<SVGSVGElement>>;
  nickname: string;
  createdTime: string;
  comment: string;
  likeCount: number;
  initialLikeState?: 'default' | 'press';
}

        {typeof ImgComponent === 'string' ? (
          <img src={ImgComponent} alt={nickname} css={S.profileImage} />
        ) : (
          <ImgComponent css={S.profileImage} />
        )}

와 같이 처리된 부분이 있습니다. 해당 부분은 댓글 컴포넌트의 샘플 이미지를 임의의 svg로 출력하기 위해 설정해놓은 부분이며, 서버 연동시에는 imgUrl 을 전달 받아서 띄워주는 것으로 생각하고 있습니다.

+) 사진에 보이시는 인물 사진 부분을 따로 atom으로 처리하는 것 어떻게 생각하시는지 의견이 궁금합니다.
전송받은 imgUrl을 다시 한번 특정한 모양에 넣어서 처리하기 때문에 재사용성을 고려하더라도 현재 생성되어 있는 atoms/ProfileIcon 처럼 처리하는 것이 좋다고 생각합니다.

디자인된 해당 컴포넌트의 가로 폭은 1175px로 매우 깁니다. 스토리북 사용 시 돋보기 - 버튼을 클릭해 전체 비율을 확인해시면 감사하겠습니다.

추가로, 현재 답글 버튼 클릭 시 닉네임이 하단에 출력되지 않는데, 댓글 organism 구현 시 이 부분 수정 완료 후 반영하도록 하겠습니다.

+) 디자이너 분과 답글 버튼 클릭 시 글을 작성할 수 있는 input area의 크기를 논의 중입니다. 해당 사안 결정되면 바로 반영하도록 하겠습니다.

📗 참고 자료 (선택)

📢 리뷰 요구 사항

Comment 컴포넌트 관련 이슈나 코멘트 있으시면 부탁드리겠습니다!!!!!(정말 정말 필요합니다!)
다수의 atoms 및 기본 요소들이 섞여있기도 하고, 코드가 다소 지저분하다고 생각합니다.

🚩 후속 작업

✅ Bookmark

const Bookmark = ({ bookmarkState = false, ...attributes }: BookmarkProps) => {
  const [isPressed, setIsPressed] = useState(bookmarkState);

1. bookmark 의 상태를 boolean으로 수정했습니다.
2. Contents Button에서 해당 state가 처리되도록 하는 것이 하닌 Bookmark 내에서 처리되도록 수정하였습니다.
3. 스토리북에서도 해당 상태에 따라 아이콘이 변경되게 수정하였습니다. (클릭 시, 상태 지정해서 변경 시 모두)

✅ Category Button

요청 사항대로 가장 긴 길이를 가진 "오늘의 톡픽 모음 .zip" 기준으로 크기를 재설정하였습니다.
추가로, 이전에 주석처리된 부분은 삭제하였습니다.

✅ Comment Profile

export interface CommentProfileProps {
  stance: 'pros' | 'cons';
  imgUrl?: string;
}

위 코드와 같이 찬성/반대 라는 뜻을 가진 "pros/cons" 로 상태를 지정한 새로운 atom을 생성하였습니다.
기존 ProfileIcon 컴포넌트를 참고하였으며, 해당 컴포넌트와 1)imgUrl이 항상 존재하는 점 2)크기가 다른 점 을 고려해 재사용하지 않고 별도의 atom 컴포넌트로 제작하였습니다.

✅ Comment

  const handleReplySubmit = () => {
    console.log('작성한 답글:', replyText);
  };

  const menuData: MenuItem[] = [
    {
      label: '수정',
      onClick: () => {
        console.log('수정 클릭됨!!');
      },
    },
    {
      label: '삭제',
      onClick: () => {
        console.log('삭제 클릭됨!!');
      },
    },
  ];

와 같이 버튼이 눌리는 부분에 대한 콘솔로그를 추가하였습니다. 해당 부분은 추후 들어갈 액션이나 코드를 위해 남겨두었습니다.

✅ ContentsButton

        <div css={S.chipsContainer}>
          {tagLabels.map((tagLabel) => (
            <Chips key={tagLabel}>{tagLabel}</Chips>
          ))}
        </div>

1)ContentsButton 컴포넌트의 태그는 항상 2개이며, 키 값은 chips 컴포넌트의 라벨 명으로 지정해두었습니다.
2) hover시 디자인 변경, hover 시 사진이 커지는 애니메이션이 추가되었습니다.

+) ContentsButton.stories 에 일부 추가 css가 구현되어있습니다. 이는 Cips를 지정할 때 지정된 position: absolute; position: relative 속성 때문에 의도적으로 Default 와 press 상태의 컴포넌트를 겹치지 않고 보기위해 지정된 부분입니다.

✅ 기타

맡은 컴포넌트의 storybook 코드를 Default, 그리고 All 만 보여지게 수정하였습니다.

✅ 셀프 체크리스트

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

closes #142