Storybook 문서화 기본 설정 및 예시 컴포넌트 추가

[MatchaKim]

수정 사유 Reason for modification

소스를 수정한 사유가 무엇인지 체크해 주세요. Please check the reason you modified the source. ([X] X는 대문자여야 합니다.)

• 버그수정 Bug fixes
• 기능개선 Enhancements
• 기능추가 Adding features
• 기타 Others

아이디어 발전 방안으로 제안된 프론트엔드 컴포넌트 문서화 도구 Storybook을 도입하였습니다.

기본 제공되는 컴포넌트에 대한 이해도를 높이고, 직관적이게 UI 확인 가능한 환경을 구성하였습니다.

또한 컴포넌트뿐만 아니라 제공되는 페이지들 역시 직접 들어가 보지 않고도 Docs 형태로 확인할 수 있어, 어떤 페이지로 구성되어 있고 어떤 기능이 제공되는지 한눈에 파악할 수 있습니다. 이를 통해 해당 Repository의 React 템플릿 가치가 더욱 커질 것으로 기대됩니다.

수정된 소스 내용 Modified source

검토자를 위해 수정된 소스 내용을 설명해 주세요. Please describe the modified source for reviewers.

추가된 스토리북의 원칙

1. 기존 코드에 영향을 주지 않는다
2. 기존 파일구조에 영향을 주지 않는다

따라서 다음과 같이 구성하였습니다.

stories
│
├─ Welcome.mdx                        # 스토리북 메인화면 가이드 문서
│
├─ components                         # 하위 파일 및 폴더 구조는 기존 components 폴더와 동일
│  ├─ FooComponent.stories.tsx        # 컴포넌트명.stories.tsx
│  └─ ...
│
└─ pages                              # 하위 파일 및 폴더 구조는 기존 pages 폴더와 동일
   └─ example
      └─ Login.stories.jsx            # 페이지명.stories.jsx

Storybook 설정 추가

• .storybook/main.js, .storybook/preview.js 파일 생성 및 환경 구성
• 글로벌 CSS(base.css, layout.css 등) Storybook 환경에 적용

예시 스토리 작성

• src/stories/components/ 디렉토리에 기본 제공 컴포넌트(EgovRadioButtonGroup, EgovPaging 등) 스토리 추가
• src/stories/pages/ 디렉토리에 주요 페이지(EgovLogin, EgovError 등) 스토리 추가
• Lint 대응

JUnit 테스트 JUnit tests

테스트를 완료하셨으면 다음 항목에 [대문자X]로 표시해 주세요. When you're done testing, check the following items.

• JUnit 테스트 JUnit tests
• 수동 테스트 Manual testing

테스트 브라우저 Test Browser

테스트를 진행한 브라우저를 선택해 주세요. Please select the browser(s) you ran the test on. (다중 선택 가능 you can select multiple) [X] X는 대문자여야 합니다.

• Chrome
• Firefox
• Edge
• Safari
• Opera
• Internet Explorer
• 기타 Others

테스트 스크린샷 또는 캡처 영상 Test screenshots or captured video

테스트 전과 후의 스크린샷 또는 캡처 영상을 이곳에 첨부해 주세요. Please attach screenshots or video captures of your before and after tests here.

[eGovFrameSupport]

conflicts 확인 후 수정 바랍니다.

[MatchaKim]

conflicts 확인 후 수정 바랍니다.

@eGovFrameSupport
conflict 수정하였습니다.
감사합니다.

[eGovFrameSupport]

테스트 결과, 로그인이 필요한 페이지의 경우는 검증이 어렵습니다.
이를 위해 #89 PR에 관련 기능을 추가하신 것으로 보이는데, 검증을 위해 취합 바랍니다.

[eGovFrameSupport]

표준프레임워크에 대한 지속적인 참여에
대단히 감사드립니다.