Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature/#183 게스트, 유저별 workspace를 생성하고 불러오기 #191

Merged
merged 21 commits into from
Nov 26, 2024
Merged

Feature/#183 게스트, 유저별 workspace를 생성하고 불러오기 #191

merged 21 commits into from
Nov 26, 2024

Conversation

hyonun321
Copy link
Collaborator

@hyonun321 hyonun321 commented Nov 25, 2024 •
edited
Loading

📝 변경 사항

bawrvwev.mp4
  • 게스트, 유저가 별도의 workspace를 사용합니다.
    • accesstoken -> auth에서사용하는 Id로 사용
Nov-25-2024.20-50-16.mp4
  • page 별로 접속이 가능합니다.

🔍 변경 사항 설명

  • 아직 guest, 유저 workspace 선택 모달창은 아직입니다.
  • page 가 켜졌을때 socket이 붙고 꺼지면 socket이 해제됩니다.
  • 다만, 깜빡거림의 문제가 있습니다. 이를 개선중에있습니다.

노션 정리 : https://abrupt-feta-9a9.notion.site/8-Workspace-8f713bc4efad4969842ceb4e99f9cdb8?pvs=4

  • 병합을 진행하면서 캐럿이 이상하게 움직이는 editorCRDT의 useRef 관련 문제가 발생하여 이를 pageId로 판별하여 동작하도록 변경하였습니다.

🙏 질문 사항

  • page.tsx에서 socket통신이 잘일어나고 의존성 배열이 잘 들어가 있을지 궁금합니다..
  • 깜빡임을 줄일 수 있는 방법으로 workspace상에서 visibility가 false일때 그냥 socket을 다 붙여버려서 안할때랑 테스트를 해볼까 생각중입니다.
    • 깜빡임 문제를 개선하였습니다. pages리스트를 생성할때 isLoaded로 미리 값을 받아오고, 받아온 녀석을 pages 리스트에 보여주게 설정하였습니다.
    • 이로써 page를 키는순간 바로 값을 보여주고 socket 연결이 진행되며 실시간 통신이 가능해집니다.

📷 스크린샷 (선택)

  • UI 변경이 있는 경우 스크린샷이나 GIF를 첨부합니다.

✅ 작성자 체크리스트

  • Self-review: 코드가 스스로 검토됨
  • Unit tests 추가 또는 수정
  • 로컬에서 모든 기능이 정상 작동함
  • 린터 및 포맷터로 코드 정리됨
  • 의존성 업데이트 확인
  • 문서 업데이트 또는 주석 추가 (필요 시)

@hyonun321
feat: socketStore에 accessToken의존성 부여
70311db 
- socket 생성때 auth에서 사용한 accessToken을 활용
- null 일경우 guestWorkspace를 표현할 예정

#181
@hyonun321
refactor: Map으로 workspace 관리하도록 변경
83454e7 
- 현재 상황에 불필요한 부분 주석처리

#183
@hyonun321
feat: CRDT라이브러리에 AuthModule import 선언
5ff0e2e 
#183
@hyonun321
refactor: 사용자별로 client.join 하여 socket을 송신받도록 수정
72735c7 
#183
@hyonun321
chore: 불필요한 로그 제거, import 선언문 위치 수정
e31934d
@hyonun321
chore: 불필요한 선언문 제거
df45a85
@hyonun321
refactor: accessToken 이 아닌, id값을 그대로 사용하여 workspace 생성
b00ed2b 
- useSocketStore에서 id를 매개변수로 사용하게 변경
- auth 에 담아서 id값을 그대로 송신한다.

#183
@hyonun321
feat: pageId 별로 crdt 연산 수행하게 수정
dbd235d 
- pageId별로 socket room을 만들어서 관리함.
- 클라이언트에서 지정된 pageId 가 아니면 연산을 반영하지 않음.

#183
@hyonun321
chore: 불필요한 콘솔로그 및 주석 제거
45d28b3
@hyonun321
feat: page 컴포넌트 누를때 마다 socket을 연결하여 서버로부터 최신 page 인스턴스 정보 받아오기
8ea5866 
- 현재 loading 때문에 깜빡 거리는 문제 있음
- crdt 변경된 데이터를 Cache화 해서 전부 갱신하기보다 바뀐부분만 pages를 변경하여 page props로 전달

#183
@hyonun321
chore: 린트에러 수정
f76e17f 
- 객체 구조 할당으로 수신
@hyonun321 hyonun321 added FE 프론트엔드 작업 BE 백엔드 작업 labels Nov 25, 2024
@hyonun321 hyonun321 self-assigned this Nov 25, 2024
hyonun321 and others added 10 commits November 25, 2024 22:36
@hyonun321
Merge branch 'dev' into Feature/#183_게스트,_유저별_workspace를_생성하고_불러오기
cfafade
@hyonun321
chore: lint에러 수정
44ee6ac 
- ) 누락
@hyonun321
chore: 빌드에러 수정
03d7d40 
- dev와 상황 동기화 하며 누락된 id 재선언

#183
@hyonun321
feat: 페이지를 킬때 socket을 연결하고, pages 를 렌더할때 통신하여 page정보를 가져오도록 수정
71cbb2c 
- 캐럿이 이상하게 튀어서 역직렬화가 안되는 문제 발생

#183
@hyonun321
feat: editorCRDT 에디터별 상태로 관리
60aead7 
- 값이 변경될때 마다 리렌더가 일어나야함.
- crdt props 수정. 아마 any로 될 확률 높음.
- rootElement를 crdtRef로 만들어서 페이지 내부 캐럿이 다른 페이지로 튀는 현상 방지.
- 단 현재는 내부 페이지에서 캐럿이 맨처음으로 초기화 되는 현상이 있음.
- 추후 연규님 commit 과 합쳐서 현재 캐럿이 튀는 현상, 정상적으로 동작하지 않는현상 conflict 해결할 예정

#183
@hyonun321
chore: lint에러 수정
301046d
@hyonun321
Merge branch 'dev' of https://github.com/boostcampwm-2024/web33-Nocta …
2207a7b 
…into Feature/#183_게스트,_유저별_workspace를_생성하고_불러오기
@hyonun321
chore: 병합 처리
e31faa4
@hyonun321
Merge branch 'dev' of https://github.com/boostcampwm-2024/web33-Nocta …
cc68ebd 
…into Feature/#183_게스트,_유저별_workspace를_생성하고_불러오기
@Ludovico7
fix: 병합과정에서 생긴 문제 해결
8cc6dc3
pipisebastian
pipisebastian approved these changes Nov 26, 2024
View reviewed changes
Copy link
Member

@pipisebastian pipisebastian left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

너무너무너무 수고하셨습니다!!!!!!

minjungw00
minjungw00 approved these changes Nov 26, 2024
View reviewed changes
Copy link
Collaborator

@minjungw00 minjungw00 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수고많으셨습니다!

@github-actions github-actions bot merged commit c65fde7 into dev Nov 26, 2024
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@pipisebastian pipisebastian pipisebastian approved these changes

@minjungw00 minjungw00 minjungw00 approved these changes

@Ludovico7 Ludovico7 Awaiting requested review from Ludovico7

Assignees

@hyonun321 hyonun321

Labels
BE 백엔드 작업 FE 프론트엔드 작업
Projects
None yet
Milestone
사용자는 워크스페이스를 관리할 수 있다.
Development

Successfully merging this pull request may close these issues.
4 participants
@hyonun321 @minjungw00 @pipisebastian @Ludovico7