PR

작업 내용

의존성 설치 및 환경 설정

• zustand 설치
  • 전역 관리 라이브러리를 통한 상태 관리를 위해 설치
  • 가볍고 의존성이 없다는 점과 러닝 커브가 낮다는 점에서 선택하였음
• react-konva, konva 설치
  • 캔버스 관련 라이브러리 설치
  • konva를 선택한 이유
    • 레퍼런스가 어느정도 되어 있다
    • react 지원이 되고 상태관리와 함께 연동이 가능하다
    • npm 다운로드 수가 많다
    • 바닐라 자바스크립트로 짜기에는 무조건 된다고 하기 힘들 정도의 규모기 때문에 라이브러리를 사용하기로 했음
• vitest 설치
  • 프론트엔드 테스팅을 위한 라이브러리
• package.json
  • node 버전 명시
• tailwind
  • tailwind className명 순서 정리 플러그인

메인 퍼블리싱

• 메인영역에 들어가는 모든 컴포넌트 퍼블리싱
  • 캔버스
  • 유저가 조작하여 캔버스를 갱신할 수 있는 영역
    • 뷰 상태 관리
    • 음성파일 AI 변환
      • 파일 상태 관리
      • 드래그 앤 드롭을 통한 파일 업로드
    • 텍스트(회의록) AI 변환
      • 회의록 상태 관리
    • 리스트 뷰를 통한 캔버스 조작
      • 계층 구조 표현
      • hover시 추가, 삭제 아이콘
      • 키워드 더블클릭시 input태그로 변경하여 수정상태 조작
  • 로그인 모달
    • 깃허브, 구글 로그인 버튼 추가
    • 바깥 영역 클릭 시 닫힘
  • 컴포넌트별 스타일 추가
• 아이콘 추가
  • 서비스에 사용되는 모든 아이콘 png 파일 src/assets에 저장
• 캔버스 데이터 구조 설계 및 반영
  • 데이터 구조 Node 타입 선언 및 Node 타입으로 된 더미 데이터 임시 보관
• custom hook을 사용한 상태 관리
  • useAccordian
    • 아코디언 상태 관리
  • useModal
    • 모달 상태 관리
  • useNodeActions
    • 노드 상태 관리
  • useSection
    • 섹션별로 useSearchParams를 이용하여 메인 조작 영역 관리

etc

• 풀 리퀘스트 템플릿 추가

논의하고 싶은 내용

• CI 방식 협의
• 모노레포 구성 방식