조재훈
이재준
내가 쓴 글 - 내가 작성한 글과 댓글을 합쳐서 페이지에서 확인 가능
내 알림 - 나에게 온 좋아요, 댓글 알림과 나에게 온 멘션(메시지)알림을 합쳐서 페이지에서 확인 가능
내가 쓴 글, 내 알림 - 게시글 클릭 시 스레드 상세보기로 연결
스켈레톤 UI - 데이터 Pending간에 스켈레톤이 출력되도록
새로운 알림 유무 확인하여 사이드바에 표출
Date포맷팅
백윤서
로그인, 회원가입 모달
프로필 모달
- 유효성 검사
- 프로필 사진 업로드, 드래그 앤 드랍 구현
토스트 메시지
이용 방법 모달
로그인 여부에 따른 사이드바 분기처리
김성빈
- 커밋 컨벤션 강제 자동화
- commitlint로 대문자로 시작하는 prefix 강제
- 변경된 파일에 eslint, prettier를 실행해 lint를 강제
- 다크 모드 구현
- content, bg 색상 팔레트 생성, 기존 컬러를 해당 팔레트로 전환
- root element의 className으로 전환
- dark 여부는 localstorage 저장
- Open graph 태그 도입
- title, sitename, image, description 값을 지정
- (디자인) thumbnail image 직접 제작
- Sentry 연동
- Sentry에 ErrorBoundary, react-query onError 연동해 오류를 수집
- 로그 수집 SaaS가 없어서 활동 내역을 captureMessage로 수집
- (잔여 문제) Event Listener, UncaughtPromise 오류 수집 필요
- GA4 연동
- 로그 수집을 Sentry에서 Custom Event로 수집하도록 전환
- (잔여 문제) 사용자 유입 경로, 사용자 그룹, 퍼널 경로 추적 구성 필요
- 간단한 퍼블리싱
- 사이드바, 로그인, 회원가입 모달
- 스레드 자세히 보기 뷰
- 좋아요 토글 버튼
PPT 순서 (볼드체는 새로 추가된 것들)
- 데나무 숲 인삿말
- 팀원소개 = >1분
- 기획의도 ⇒ 1.5분
- 주요기능 - 기획
- 와이어프레임
- 주요기능 - 개발 이후
PPT에서 설명할 주요 기능
채널/ 게시글(자세히보기)
익명 체크 여부?
멘션
내작글
내 알림
슬랙 알림
채널, 게시글 자세히보기,
- 기술스택 요약
- 협업방식 - 컨벤션
- 협업 방식 - 브랜치 전략
- 시연영상
리드미 순서
1. 기술 스택 뱃지
2. 프로젝트 소개
빈 칭찬 게시판이 부담되셔서 글을 못 적으셨나요? 아니면 존재 자체도 모르셨나요?
익명으로 칭찬 게시판에 글을 남겨주세요!
오늘 하루 누구에게 위로 받고 싶은 순간이 있으셨나요?
익명으로 위로 게시판에 자신의 감정을 올리고 위로 받아보세요!
데브코스 중 캠은 켜놨지만 종일 딴짓한 적이 있지 않으신가요?
하루종일 애썼지만 결과물이 안나와 힘든적이 있지 않으신가요?
답답한 마음을 무능 게시판에 해소하세요!
데브코스 간 생긴 일에 대해 익명으로 하고 싶었던 칭찬, 응원, 고해성사를 할 수 있는 데나무숲
프로젝트 자세한 설명
- 어떤 기능을 어떠한 스택을 통해 어떻게 공유하였는지
프로젝트 사용 방법 (주요기능) ⇒ 시연연상
대본 작성 도와주기
비회원 유저 액션
비회원 유저도 여러 채널과 스레드를 볼 수 있습니다. 다만 좋아요, 글 작성, 댓글 작성은 로그인 유저만 가능합니다.
회원가입(은 했다 치고) 로그인 -윤서
로그인 시 input값 validation을 하고 로그인을 합니다.
로그인을 하면 사이드바에 유저가 접근할 수 있는 아이콘이 뜹니다.
또한 초기 로그인 이후에는 자동 로그인이 됩니다.
소개페이지 모달 - 윤서
이용 방법 모달을 클릭하면 데브나무 소개와 게시판 별 이용 안내를 담고 있습니다.
프로필 변경 - 윤서
내 정보 수정 아이콘을 클릭하면 내 정보를 수정할 수 있는 모달이 뜹니다.
사진 업로드 버튼을 클릭하면 사진을 첨부할 수 있고, 드래그 앤 드랍으로도 첨부가 가능합니다.
닉네임과 비밀번호는 각각 변경이 가능합니다.
수정이 완료되면 성공했다는 토스트 메시지가 뜹니다.
칭찬 응원 무능 잡담 게시판별 리스트 + 스레드 상세보기 - 재민
스레드 리스트는 무한 스크롤을 사용하여 스크롤을 올릴때마다 데이터 일부분을 요청하도록 구현했습니다.
또한, 게시판 별로 마지막으로 보던 스크롤 위치를 기억하고 유지하도록 했습니다.
스레드에 마우스를 호버하면 툴바가 나타납니다. 이 툴바를 통해 좋아요, 댓글 달기를 할 수 있으며, 본인이 작성한 글이라면 스레드 편집 및 삭제가 가능합니다.
스레드를 클릭하면 해당 스레드의 상세한 내용과 댓글들을 볼 수 있습니다.
글 작성 / 수정, 멘션 + 슬랙 알림기능 - 재훈
각 채널에서 글 작성이 가능합니다.
(익명 체크박스 클릭) 익명 체크여부를 통해 업로드 시 익명 여부를 정할 수 있고
- 익명 체크 풀고 글 써주세요!
(글 업로드) 유저가 정한 닉네임과 프로필로 스레드가 작성됩니다.
또한 (슬랙 칭찬채널을 보여주며) 멘션된 대상들에게는 슬랙 채널에 알림이 갑니다.
(작성한 글 호버)자신이 작성한 글을 호버시 나오는 툴바에 수정을 통해
(스레드 수정)스레드 수정이 가능합니다.
댓글 작성 기능 - 재훈
(제가
쇼피아가 쓴 글 들어가 주세요!) 스레드에 댓글도 동일하게 글 작성이 가능하며 (멘션 자동완성
조재훈을 재로 검색) 데브코스 인원들 대상으로 멘션을 자동완성으로 이용할 수 있습니다. - 익명 체크 되어있는 상태로 글 써주세요!
익명 체크 시 익명으로 댓글이 올라갑니다.
(창 하나 더 띄워서 제껄로 로그인 해서 내 알림 확인)댓글 작성 시 해당 스레드를 작성한 유저에게 알림이 갑니다.
ID - huns@dev.dev / PW - 1234qwer
좋아요 클릭
(스레드 디테일 뷰에서 좋아요 클릭) 좋아요를 클릭 시 낙관적 업데이트를 통해 바로 채널과 스레드 UI에 반영됩니다.
(한번 더 클릭 해서 좋아요 삭제도 보여주기)
댓글 삭제 / 스레드 삭제
(댓글 지우고)또한 자신이 쓴 글에서 댓글 삭제와
(스레드 지우고)스레드 삭제가 가능합니다.
내 알림, 내가 쓴 글 확인 - 재준
내 알림에서는 나에게 온 알림을 확인할 수 있습니다.
누군가 내 글에 좋아요나 댓글을 단 경우 혹은누군가 나를 멘션한 경우 알림이 옵니다.
슬랙과 동일하게 멘션 알림의 경우 강조가 되며, 내 알림에 있는 리스트 아이템들을 클릭 시 해당 스레드 자세히보기로 연결이 됩니다.
내가 쓴 글에서는 내가 작성한 글과 댓글을 모두 확인할 수 있습니다. 이 역시 슬랙과 마찬가지로 해당 스레드 자세히 보기로 연결됩니다.
다크모드 변경 - 성빈
(사용 가능하다고 언급) -끝-
로그아웃 - 윤서
로그아웃 버튼을 클릭하면 로그아웃 토스트 메시지와 함께 홈화면으로 이동합니다.
기술스택 요약
저희 프로젝트는
react, ts로 작업을 하였으며 ESLint와 Prettier를 이용해 포맷팅하고 commit 컨벤션을 lint-staged와 husky를 통해 강제하였습니다.
구현에 사용한 주요 라이브러리는 react-router-dom, react-hook-form, tanstackQuery, Zustand, TailwindCSS, Shadcn, toss/slash 가 있으며
마지막으로 Sentry와 Google Analytics를 통해 오류, 사용자 활동을 수집하고 vercel로 배포하여 관리 중입니다.
브랜치 전략 (PPT, 대본)
다음으로, 저희 팀의 브랜치 전략을 소개해드리겠습니다.
저희 팀은 개발 과정에서 작업 브랜치를 생성하고 메인 브랜치에 스쿼시 머지하는, “스쿼지 머지” 방식을 채택하고 있습니다.
[스쿼시 머지 간략 소개]: 빼도 됨
스쿼시 머지는 다음과 같은 흐름으로 이루어집니다. 먼저, 개발할 기능이나 작업에 대한 브랜치를 메인 브랜치에서 생성합니다. 이 작업 브랜치에서 개발을 진행하고, 작업이 완료되면 메인 브랜치로 스쿼시 머지를 수행합니다. 이 과정에서 작업 브랜치의 변경 내용이 메인 브랜치에 하나의 커밋으로 합쳐지게 됩니다.
이 방법을 채택하게 된 이유는 다음과 같은 장점이 있기 때문입니다.
먼저, 브랜치 구조가 단순해져 팀원들이 코드의 흐름을 더 쉽게 이해하고 협업할 수 있습니다.
또한, 작업 브랜치에서 개발된 기능이 메인 브랜치로 스쿼시 머지되므로, 작은 단위로 빠르게 배포할 수 있습니다. 이는 사용자 요구 사항에 빠르게 대응할 수 있는 장점을 제공합니다.
마지막으로 PR의 커밋이 하나의 커밋으로 메인 브랜치에 들어가기 때문에 메인 브랜치의 커밋을 깔끔하게 관리할 수 있기 때문입니다.
이렇게 저희 팀은 스쿼시 머지를 통해 효율적이고 협업에 용이한 브랜치 전략을 사용하고 있습니다.
저희 팀의 브랜치 전략입니다.
저희팀은 작업 브랜치를 생성하고, 메인에 스쿼시 머지를 하는 방식을 채택하고 있습니다.
스쿼시 머지는 작업 브랜치에서 완료되면 변경 내용이 메인 브랜치에 하나의 커밋으로 합쳐지는 방법입니다.
이 방법을 채택한 경우,
브랜치 구조가 단순해져서 팀원들이 코드의 흐름을 더 쉽게 이해할 수 있다는 장점이 있습니다.
또 작업 브랜치에서 개발된 기능이, 메인으로 바로 바로 머지되어, 작은 단위의 빠른 배포가 가능해지는 장점을 가지게 됩니다.
마지막으로 pr의 커밋이 하나의 커밋으로 메인에 합쳐지기 때문에 메인 브랜치의 커밋이 깔끔하게 관리됩니다.
저희는 이러한 장점 때문에 스쿼시 머지를 선택하엿습니다.
팀원 소개
👥 팀원 소개
ㅤ | ㅤ | ㅤ | ㅤ | ㅤ |
ㅤ | ㅤ | ㅤ | ㅤ | ㅤ |
ㅤ | ㅤ | ㅤ | ㅤ | ㅤ |
ㅤ | ㅤ | ㅤ | ㅤ | ㅤ |
ㅤ | ㅤ | ㅤ | ㅤ | ㅤ |