[기본 레이아웃 컴포넌트] 우디(류정우) 미션 제출합니다.

[jw-r]

🎯 1단계. 기본 레이아웃 컴포넌트

배포

스토리북

공통

• 의미있는 커밋 메시지 작성
• PR에 관련 없는 변경 사항이 포함 유무 확인

Container 컴포넌트

• minWidth, maxWidth 속성 적용
• npm 배포
• README.md 작성
• 테스트 코드를 작성하였나요? (선택 사항)

Grid 컴포넌트

• rows, columns, gap 속성 적용
• npm 배포
• README.md 작성
• 테스트 코드를 작성하였나요? (선택 사항)

Flex 컴포넌트

• direction, justify, align, gap 속성 적용
• npm 배포
• README.md 작성
• 테스트 코드를 작성하였나요? (선택 사항)

📌 구현한 내용 설명

모든 컴포넌트를 다음을 공통 props로 갖습니다

• as

  • 컴포넌트의 시맨틱 태그를 사용자가 선택 가능하게 만들고 싶었습니다

• sx

  • 컴포넌트에 inline 스타일을 직접 작성할 수 있게 하는 것으로 보다 유연한 컴포넌트를 구현했습니다

• className

  • 컴포넌트의 props가 너무 많아지는 것은 가독성이 좋지 않고, 스타일을 위한 prop과 HTML 태그의 속성과 구분하기가 어려웠습니다
  • 핵심적인 props 제외하고 미리 정의된 className으로 쉽게 스타일을 적용할 수 있도록 만들었습니다
  • className='h-12 w-12'와 같이 width과 height를 모든 컴포넌트에 적용할 수 있습니다.

  // 미리 정의된 클래스를 사용하여 width과 height 설정 가능
  <Container className='w-12 h-screen' />
  
  // width, height 스타일을 원하는 값으로 동적 생성 가능
  <Container className='w-[12px] h-[30px]' />

  • 각 컴포넌트마다 고유의 스타일을 두는 것으로 독립성과 확장성을 신경썼습니다.

  // Flex 컴포넌트 고유의 class
  // justify-content: center, align-items: center 일괄 적용 class
  <Flex className='center' />

쉬운 네이밍

• Flex 컴포넌트의 justify 속성에 들어갈 수 있는 값은 start, end, center, between, around로, 일반적으로 flex-start, space-between등을 적용해야 하는 것과 다르게 단순화 되어있습니다. 이로 인해 사용자는 보다 간편하게 스타일을 적용할 수 있습니다

그 외, 공통 요구사항과 같습니다

[jeongwusi]

안녕하세요 우디~!
미션 수행 하시느라 고생 많으셨습니다. 😊

CSS 클래스도 일일이 만들어 주시고...! 고민한 흔적이 많이 느껴졌습니다. 너무 멋있는데용?!! 정식으로 서비스 해도 될 거 같아욤 😊

반응형과 크로스 브라우징

크롬

사파리

파이어폭스

다양한 브라우저(크롬, 사파리, 파이어폭스)에서 실험을 해보았을 때는 반응형과 크로스 브라우징이 잘 되는 것을 확인을 할 수 있었습니다. 👍🏻👍🏻👍🏻

가독성, 사용성

이 부분에 대해서는 아쉬움이 조금 있었는데요...! 아무래도 우디가 멋있는 라이브러리를 만들면서 많은 기능을 해당 라이브러리에서 사용을 할 수 있지만, 어떤 기능이 있는지 문서에서 제대로 확인을 할 수 없었던 거 같아요! 예를 들어서 예제 코드도 하나의 코드에 Container, Flex, Grid를 포함했지만, '각각의 컴포넌트에 맞는 예제 코드를 보여주면서 어떤 Props가 필요하고 어떤 값을 넣어야 할 지에 대한 설명하면 어떨까?' 라는 생각을 하였습니다.

컴포넌트의 Props에 대해서도 필수와 선택을 나눠서 설명을 해주면 좋을 거 같습니다. 그리고 CSS 클래스도 코드가 굉장히 방대한데 우디가 이 부분도 사용자가 적극적으로 사용하는 것을 원할 경우 세세한 문서 작성을 하면 사용자가 빠르게 인지하고 우디가 의도한 바에 따라서 사용 할 수 있을 것으로 보입니다. ^_^

마지막으로... 아래의 사진과 같이 npm 배포 사이트에 README.md 관련된 파일이 업데이트가 안된 거 같아욤 🥹 이 부분도 참고를 해주시면 감사하겠습니다. 🤗

의미론적 네이밍, 재사용성

generateGridInlineStyle 등 네이밍에 진심인 것이 보였으며, 재사용이 필요한 경우 최대한 파일을 분리하여 모듈화 한 점에 대해서 깊은 인상을 받았습니다. 💯 저도 우디를 많이 본받아야겠다는 생각을 하였습니다. 🙌🏻

그럼... 확인 부탁드리며, 수정 후 재요청 주세용!!

감사합니다. 🙇🏻

[jw-r]

이렇게 꼼꼼하게 체크해주시다니 너무 감사해요!!!

README.md 파일을 업데이트 해봤는데 혹시 부족한 점이 있다면 말씀해주시면 감사하겠습니다🤩

[jeongwusi]

확인하였습니다 우디~!!

다음 미션도 화이팅입니당 💪🏻