gdsc-knu / 3rd-sp-3-fe

GDSC 2차 프로젝트 3팀 프론트엔드 레포

React + TypeScript + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

• @vitejs/plugin-react uses Babel for Fast Refresh
• @vitejs/plugin-react-swc uses SWC for Fast Refresh

Expanding the ESLint configuration

If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:

• Configure the top-level parserOptions property like this:

export default {
  // other rules...
  parserOptions: {
    ecmaVersion: 'latest',
    sourceType: 'module',
    project: ['./tsconfig.json', './tsconfig.node.json'],
    tsconfigRootDir: __dirname,
  },
}

• Replace plugin:@typescript-eslint/recommended to plugin:@typescript-eslint/recommended-type-checked or plugin:@typescript-eslint/strict-type-checked
• Optionally add plugin:@typescript-eslint/stylistic-type-checked
• Install eslint-plugin-react and add plugin:react/recommended & plugin:react/jsx-runtime to the extends list

3rd-sp-3-fe's Issues

프론트엔드 개발환경 세팅

✨ 기능 리스트

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팀 개발환경 세팅

메뉴 섹션 기능 구현

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

✨ 기능 리스트

Wire frame

• 와이어프레임 구성

Rich text editing

• BlockNote

Sync text

• liveblocks
• yjs

Chatting

• Adapter

WebSocket

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

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

✏ 사용 이유

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

Issue template 및 PR template 작성

Issue

Issue 및 PR Template 작성

✨ 기능 리스트

• Issue Template 등록
• PR Template 등록

---

✏ 사용 이유

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

---

API key를 .env 파일에 삽입

✨ 기능 리스트

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

✏ 사용 이유

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

구글 로그인, 인증, 인가 기능 구현

✨ 기능 리스트

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

✏ 사용 이유

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

Frontend vercel 배포

Issue

✨ 기능 리스트

---

✏ 사용 이유

---

채팅방 섹션 기능 구현

✨ 기능 리스트

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

✏ 사용 이유

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

메뉴창 내용 많아질 시 창 벗어나는 현상

Issue

✨ 기능 리스트

---

✏ 사용 이유

---

협업 공간 섹션 기능 구현

Issue

✨ 기능 리스트

디자인

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

기능 구현

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

---

✏ 사용 이유

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

---

채널 섹션 기능 구현

✨ 기능 리스트

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

참고

• 채널 클릭 전
  

• 채널 클릭 후
  

✏ 사용 이유

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