gdsc-knu / 3rd-sp-3-fe Goto Github PK

Issue

✨ 기능 리스트

• 1. 채팅 구독
• 2. 채팅방 접속 상태 알림
• 3. 채팅 전송
• 4. 채팅 로그 불러오기
• 5. 채팅 파일 업로드
• 6. 채팅 파일 다운로드
• 7. 채팅 이미지 업로드

6/8(토) 오후 10시 업데이트

• 규민님과 나머지 API 관련 데이터 어떻게 처리되는지 이야기해볼 것
  • 채팅 로그를 불러올 때 request 값을 어떻게 보내야 하는지??

---

✏ 사용 이유

• 각 프로젝트에 맞는 채팅 기능을 사용할 수 있게 하기 위함

---

Issue

Issue 및 PR Template 작성

✨ 기능 리스트

• Issue Template 등록
• PR Template 등록

---

✏ 사용 이유

Isuue 및 PR 작성 시 동일한 형식을 유지하기 위해 Template를 작성

---

✨ 기능 리스트

• FSD 구조에 맞게 파일 분리
• 채팅방 이름 (ChatroomName) 구현
• 채팅 메시지 (ChatroomMessage) 구현
• 채팅 텍스트 인풋 (ChatroomTextInput) 구현
  • 메시지 전송은 미구현

✏ 사용 이유

• 텍스트 채팅 기능을 구현하기 위해 해당 이슈가 생성되었습니다.
• 메뉴에서 채팅방을 클릭하게 되면, 채팅방 섹션에 채팅이 나오는 방식으로 구현할 것입니다.

Issue

✨ 기능 리스트

---

✏ 사용 이유

---

✨ 기능 리스트

• FSD 구조에 맞게 파일 분리
• 채널 선택 (ChannelPicker) 구현
• 채널 정보 (ChannelInfo) 구현
• 채팅방 목록 (ChatroomList) 구현
• 문서 목록 (DocumentList) 구현
• 멤버 목록 (MemberList) 구현
• 음성채팅 목록 (VoiceroomList) 구현

참고

• 채널 클릭 전
  

• 채널 클릭 후
  

✏ 사용 이유

• 텍스트 채팅, 공동편집 문서, 음성 채팅들을 구현하기 위해 먼저 보여야 할 섹션 먼저 구현하고자 순서를 가장 앞당겨 개발했습니다.
• 사전에 와이어프레임에서는 채널 선택하는 부분과 채널 내부에서 선택하는 부분을 같은 곳에서 했지만 실제 개발하면서 기능 분리를 위해 아예 따로 나누었습니다.

Issue

✨ 기능 리스트

디자인

• 로그인 이후 첫 화면 디자인
• 최근문서, 즐겨찾기 문서 선택 공간 디자인
• 문서 작성 공간 디자인

기능 구현

• 로그인 성공 시 프로젝트 선택 공간으로 이동
• 문서 선택 시 문서 작성 공간으로 이동
• 문서 작성시 작성한 글 저장 후 DB(?)에 저장

---

✏ 사용 이유

• Blocknote.js : Markdown 동시편집 기능
• zustand : 로그인 성공시 컴포넌트 변경, 문서 선택 시 컴포넌트 변경 기능

---

✨ 기능 리스트

• 구글 로그인
• 로그인 된 정보 로그아웃
• 유저 정보 클라이언트 취득
  • 정보에 맞는 서버, 채팅, 협업 도구 등이 표시되도록 구현

✏ 사용 이유

• 서버, 채팅, 협업 도구 등을 이용하기 위해서 유저 정보가 필요함
• 로그인을 통해 유저 정보를 취득한 다음 그에 적절한 서버에 접속하기 위함

✨ 기능 리스트

Wire frame

• 와이어프레임 구성

Rich text editing

• BlockNote

Sync text

• liveblocks
• yjs

Chatting

• Adapter

WebSocket

• websocket (라이브러리 따로 없음)

참고: https://ko.javascript.info/websocket

✏ 사용 이유

• 프론트엔드 개발환경 세팅 중 동시편집, 채팅, 웹소켓 등 추가

✨ 기능 리스트

Project manager

• Pnpm

Module bundler

• Vite (React, Typescript + SWC)

State management

• Zustand

Routing

• React router

CSS Styling

• Styled components

Animation

• Framer motion

Hosting

• Netlify -> GDSC organization에서 fork 후 개인 계정 repository에서 진행 (organization 권한 문제)

Folder structure

• FSD (Feature-Sliced Design)

✏ 사용 이유

• GDSC 2차 프로젝트 3팀 개발환경 세팅

✨ 기능 리스트

• 새로운 키 발급
• 키 env 파일 삽입

✏ 사용 이유

• 실수로 Liveblocks API Key를 코드에 오픈한채로 커밋 -> 기존 키 폐기 후 새로운 키 발급 후 환경변수로 추가

Issue

✨ 기능 리스트

---

✏ 사용 이유

---