SPACE_DEV_CLUB

Velog와 유사한 웹 사이트 설계 프로젝트를 6명의 팀원과 진행하게 되었다.

Stack 선정한것 업데이트, 역할 분담

나는 6명으로 구성된 팀과 Velog와 유사한 기능을 수행하는 프로젝트를 설계하고 있다.

rebase로 문제 해결하기

이전 글에서 작성한것 처럼 상세 페이지의 윗 부분을 구현했다. 이제 이와 같이 프로필 부분과 이전 및 다음 페이지, 댓글 폼을 구현해야 한다.

상세 페이지 리팩토링

상세 페이지 UI 리펙토링

다크모드에 대해..(ContextAPI)

UI 수정과 상세 페이지 스키마

동적 라우팅을 적용하고, user와 post 데이터를 통해 조건에 맞는 상세 페이지를 랜더링 해보자.

변경된 스키마 구조에 따른 리팩토링. 포스트에 좋아요 갯수와 댓글을 데이터 받아 UI에 출력.

날짜 기능 수정 및 대댓글 접기

댓글과 대댓글 정렬, 해시태그, 관심 있는 포스트

댓글 조회 완성 및 댓글 생성. ContextAPI 적용. swr mutate 사용.

댓글과 대댓글 생성, 삭제, 수정 기능 완료

시리즈 연결 및 접근제어에 대한 작업을 했다. 그리고 리팩토링 시도와 문제점을 발견했다.

페이지 이동시 리랜더링 되지 않는 시리즈 박스 해결 및 정규 표현식으로 헤더 추출

정규표현식, 모달 통일, 에러처리 및 민감한 정보 고려, 해결하지 못한 문제점

공유하기 기능 구현 (클립보드 복사, 페이스북, 카카오톡)

게시글 삭제(댓글과 대댓글 함께..), 목차 클릭시 이동 및 현재 스크롤 위치에 맞는 UI

SSR 에러 해결, 게시글 수정 기능 구현, 스켈레톤 로딩

기능을 하나씩 알아보면서 리팩토링 과정을 공유하는 글

이번에는 Velog의 댓글 입력 부분과 생성된 댓글이 노출되는 부분의 UI를 설계해볼 것이다.