Meeting Log #4 (25.01.10)

1️⃣ 진행상황 점검

A팀

• card 사용 작업중

  • 적용안되는 부분이 있어서 보류
  • 카드의 범위에 대한 고민중 > SIPE 홈페이지에 있는 부분을 살펴보고 커스텀의 범위를 새로이 정하는 것이 좋을듯함
  • 정 안되면 안에있는 요소들을 바꾸면서 공통화할 수 있는 여지가 있는지 visual shpae이 아닌 code의 shape을 보고 코드의 유사도를 통해 판단하는게 좋을 것 같음 (보이는 것에 속지말자!)
    • 관련링크
    

• button -> 적용이 안되어서 대안 고민중

• avatar -> 금/토 중으로 작업 예정

• main page에 typography 적용중

• flex를 적용중

  • 상위 flex & 하위 felx > 상위에서 적용한 css variable이 하위 요소에 상속되는 문제가 존재 > 이에 대한 해결방안을 모색해야할 것으로 보임

• E2E 테스트

  • sipe.team 레포지토리에 붙여놨음 (의현) > feat/side branch
  • playwright 사용
  • 각 페이지 들어가서 스크린샷 찍기
  • 정의한 애들마다 .png로 결과물이 도출됨 (이미지 diff를 보여줌)
  • 동적인 데이터는 diff로 찍힐 것으로 예상됨 (픽셀 레벨의 변경이기 때문) > 채널톡이 local에서는 안보임

추가논의

• 특정 스타일과 강하게 결합된 것 외에, unstyled 방식을 제공하는 방안에 대해 방향성에 대한 논의가 필요할 것으로 필요함.
• 일단은 컴포넌트 자체가 많지 않음. 그래서 컴포넌트 자체를 많이 만들어놓는게 중요하다.

P팀

• flex package 추가
• icon package 추가
• avatar 수정
• grid 정의중
• accordian 정의중
• checkbox는 토/일 중으로 업로드 예정
• A팀 요청사항중 우선순위가 높은 것부터 작업 예정

T팀

• 이정민

  • Conventional Commit 을 기준으로 husky + lint staged를 통한 커밋 컨벤션 구현
  • Conventional Commit을 많이 반영하여, pre-push 훅을 통한 브랜치 컨벤션 구현
  • 리액트, 스토리북 기반 ESLINT 플러그인 개선 ( ing ) > biome의 한계 극복 위함

• 조세민

  • Bug Report 이슈 템플릿 생성 ( ing )
  • 템플릿 생성 스크립트 반영하여 Contribution Guide 재 작성

작업 예정사항

• feature request등 템플릿 생성
• story book ui testing이 안되는 것 같음 > 작업 예정
• test coverage unknown으로 등장하는 이슈 해결 예정 (Readme.md상 에러)
• story book link 수정
• 스토리북 커스텀 예정 (예시 - MS fluent UI)

2️⃣ 논의하고 싶은 내용

반응형

• 어떤식으로 지원하는게 좋을까?

  • theme provider를 제공하자 > break point를 객체 형식으로 주입
    (주입한 녀석에 따라서 스타일도 객체형식으로 주입할 수 있도록. 현재는 사이즈가 숫자 하나로 들어가지만 sm일떄는 10, md일때는 20.. 꼴로 다양하게 지원이 가능하도록 해보자)

  • 반응형에 도움이 될만한 요소 - 참고자료

    • 주입 결과

      

  • 타입 추론을 동적으로 하는것에 대해 고민을 할 필요가 있음

icon

• icon 이라는 컴포넌트는 wrapper가 필요해 보인다.

• icon asset을 지원하는 컴포넌트인지 몰랐음 (서로의 생각 차이가 있었음)

  • icon asset에 필요한 게 없는 경우가 더 많다. (추가되기 쉬운 구조임)

• wrapper를 하나 새로 만드는게 어떤가?

  • 사용자가 필요한 asset을 자유롭게 주입하는 기능을 하는 컴포넌트를 만들자!

패키지 인증

• npm에서 받는게 아닌 github package registry에서 받는 형식이라 이에 대한 가이드가 필요함
• 인증 정보 저장

npm adduser --scope @sipe-team --registry https://npm.pkg.github.com --auth-type legacy

• 진행과정 (토큰 발급 필요)

구현 원칙

• className과 style은 무조건 주입한 녀석을 우선순위로 가지도록 한다. (컴포넌트 내부에 정의한 것이 아닌 아닌 외부에서 주입한 스타일이 우선적으로 적용되도록)
  (css variable은 이에 해당되지 않음!)
• 다형성은 웬만하면 기본기능으로 제공 (asChild)
  • forwardRef는 곧 사라질 예정이므로 크게 신경쓰지 마라 (Generic을 기본으로 지원하는게 잘 안되기에 크게 신경X)
• Props extends할 때 ComponentProps로 받아야하나?
  • asChild로 하면 하위 요소에도 주입할 수 있음. > 다른 인터페이스이므로 신경안써도 된다! (제네릭으로 하지 않아도 됨)
  • props extends시 ComponentProps로 확장해주자!

3️⃣ 마지막 iteration

A팀

• 효진
• 진현
• 정민
• 대엽
• 의현

P팀

• 효진
• 여진
• 신원
• 대엽
• 미진
• 지훈

T팀

• 효진
• 세민
• 정민
• 신원
• 의현