일렉트론 앱의 Side bar 제작
1️⃣ 초기 화면 구현
2️⃣ antd의 Collapse를 활용해 카테고리 구현
3️⃣ material-ui의 TreeView를 활용해 카테고리 내부 구현
4️⃣ re-resizable의 Resizable을 활용해 카테고리 크기 조절 기능 구현
5️⃣ Title bar의 window control 버튼 기능 구현
6️⃣ (추가) Resizable 컴포넌트의 핸들 위치가 고정되지 않는 버그 해결
7️⃣ (추가) Resizable 컴포넌트의 높이를 영역 내의 가용 최대 높이로 변경
8️⃣ (추가) Collapse 컴포넌트의 active 패널 개수를 1개로 제한
$ git clone https://github.com/sit-or-seona/milliman-toyproject.git
$ npm install
$ npm start -> 일렉트론 실행
$ npm run react-start -> 브라우저 실행
- 환경: JavaScript, Node.js(v14.16.0), Electron, React
- 패키지: react, electron, re-resizable, antd, material-ui
- 추가 패키지
- 일렉트론 관련: electron-is-dev, electron-builder, concurrently, wait-on, cross-env
- UI 관련: styled-components, styled-reset, material-ui/icon
- 일정 관리: Notion
| 내용 |
기간 |
| 프로젝트 완성 |
2023.05.15 - 2023.05.19 (5days) |
| 추가 과제 해결 |
2023.06.01 - 2023.06.02 (2days) |
| 초기 화면 |
 |
| Side bar의 Collpase와 TreeView 구현 화면 |
 |
| 마우스로 드래그 하여 Resize한 화면 |
 |
# feat : 새로운 기능 추가
# fix : 버그 수정
# design : CSS 등 사용자 UI 디자인 추가 및 수정
# refactor : 리팩토링
# style : 비즈니스 로직과 연관 없는 코드 형식 수정
# docs : 문서 추가, 수정, 삭제
# chore : 환경설정 및 기타 변경사항
# rename : 파일 혹은 폴더명을 수정하거나 이동
# remove : 파일 삭제
├── 📁 src
│ ├── App.js
│ ├── index.js
│ ├── 📁 components
│ │ ├── 📁 SideBar
│ │ │ ├── 📁 Resizer
│ │ │ │ └── index.jsx
│ │ │ ├── 📁 TreeView
│ │ │ │ ├── index.jsx
│ │ │ │ └── style.js
│ │ │ ├── index.jsx
│ │ │ ├── style.js
│ │ │ └── categoryData.js
│ │ └── 📁 TitleBar
│ │ │ ├── 📁 TitleBarButton
│ │ │ │ └── index.jsx
│ │ │ ├── index.jsx
│ │ │ └── style.js
│ └── 📁 styles
│ ├── globalStyles.jsx
│ └── theme.jsx
...