HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🤎
프론트엔드 데브코스 5기 교육생
/
🐣
김은수팀
/팀프로젝트/
🎋
데브나무 기획서
🎋

데브나무 기획서

🎋 데나무숲(devNamu)

서비스 소개

빈 칭찬 게시판이 부담되셔서 글을 못 적으셨나요? 아니면 존재 자체도 모르셨나요?
익명으로 칭찬 게시판에 글을 남겨주세요!
 
오늘 하루 누구에게 위로 받고 싶은 순간이 있으셨나요?
익명으로 위로 게시판에 자신의 감정을 올리고 위로 받아보세요!
 
데브코스 중 캠은 켜놨지만 종일 딴짓한 적이 있지 않으신가요?
하루종일 애썼지만 결과물이 안나와 힘든적이 있지 않으신가요?
답답한 마음을 무능 게시판에 해소하세요!

기획 의도

 
notion image
데브코스 칭찬 방이 비활성화 된 이유에 대해 생각해보던 저희 팀은 익명으로 운영되면 접근이 쉬워졌을까? 라고 생각하게 됩니다.
또한 익명의 순기능을 생각하던 저희는 자신의 하루를 반성할 수 있는 고해성사의 공간도 프롱이들에게 필요하다고 생각하였습니다.
마지막으로 공부를 하면서 힘들고 지칠 때 응원을 받을 수 있는 따뜻한 공간이 있으면 좋겠다는 생각을 했습니다.
칭찬방 / 응원방 / 무능방
 

주요 기능

  • 칭찬 게시판
    • 익명으로 특정 누군가를 칭찬할 수 있다.
    • 부담 없이 가볍게 칭찬할 수 있다!
    • 예시: 오프라인 만남때 옷을 멋지게 입으심 / 설명을 착하게 도와주심 / 커피를 주심
  • 응원 게시판
    • 응원이 필요해보이는 사람을 응원하자!
    • 익명으로 응원을 부탁해보자
    • 예시: 저 오늘 힘든데 응원 좀 해주세요 ㅜㅜ
    • 예시2: 저 오늘 넘어졌는데 격려좀 해주세요ㅠㅠ
  • 무능 게시판
    • 고해성사
    • 댓글에는 표현의 자유 보장
    • 예시: 저는 캠을 켜고 사실 열심히 하는 척 집중하는 표정을 지었지만 사실 네이버 웹툰 정주행을 했습니다. 집중이 너무 안되더군요. 그 날 이후로 매일 악몽을 꿔서 여기에 올려서 죄책감을 덜려고 글을 써봅니다.

4. 기술 스택

  • 라이브러리 : React, React Router
  • 언어 : Typescript
  • 번들러 : Vite
  • 패키지 : Yarn
  • API : axios
  • 포매터 : ESLint, Prettier
  • 클라이언트 상태관리 : Zustand
  • 서버 상태관리: tanstack-query
  • CSS : tailwind + tw.marco
  • UI 라이브러리: shadcn
  • 배포 : 미정

5. 기능 명세서

기능
구분
태그
설명
로그인
AUTH
회원
회원가입한 사용자는 이메일과 비밀번호를 통해 로그인 할 수 있다. 이미 로그인한 회원은 홈 화면으로 redirect 된다.
회원가입
AUTH
비회원
비회원 사용자는 프로필 이미지와 이메일과 데브코스에서 사용하는 이름, 닉네임, 비밀번호를 받아서 회원가입 할 수 있다. 필수값은 이메일과 데브코스 슬랙 이름(정확히 작성 해달라는 문구 필요), 비밀번호이다. 프로필 이미지는 기본 이미지가 있으며 드래그를 통해 사진을 첨부할 수 있다. 닉네임을 입력 안할 시에는 프롱이로 정해진다.
알림 목록 조회
알림
회원
로그인한 사용자는 사이드바의 알림 아이콘 클릭을 통해 멘션, 게시글 댓글, 좋아요 알림을 조회할 수 있다. 처음 진입 시 스레드에는 비어있는 UI가 뜬다.
알림 상세보기 조회
알림
회원
알림 목록 중 하나를 클릭하면 스레드에 알림과 관련한 게시글 스레드가 뜬다. 스레드의 닫기 버튼을 누르면 처음 진입 시 뜨는 비어있는 UI로 바뀐다.
알림 읽음 처리
알림
회원
읽지 않는 알림에는 레드닷이 뜬다. 알림 목록에서 하나를 클릭하면 해당 알림의 레드닷이 사라진다.
내가 쓴 글 조회
내가 작성한 글
회원
내가 작성한 게시글과 댓글 목록을 조회할 수 있다. 스레드는 띄우지 않고 날짜, 시간순으로 정렬된다. 목록 중 하나 클릭 시 해당 게시판으로 바로 이동하고 게시글에 해당하는 스레드가 함께 뜬다.
사이드바
전체
사이드바는 슬랙과 동일하게 좌측에 고정된다.
프로필
사이드바
회원
프로필 사진 클릭시 프로필 편집 모달이 뜬다.
홈 버튼
사이드바
전체
홈 아이콘 클릭시 가장 최근에 있던 게시판으로 이동한다.(스크롤 위치는 기억X). 만약 가장 최근의 포스트의 스레드를 보고 있었다면 스레드도 함께 보여준다.
내 알림
사이드바
회원
내 알림 아이콘 클릭 시 내 알림 페이지로 이동한다. (이것도 마지막으로 보고 있던 위치 기억.)
내가 쓴 글
사이드바
회원
내가 쓴 글 아이콘 클릭 시 내가 쓴 글 페이지로 이동한다.
상단바
전체
우측 상단에 다크모드 토글 버튼과 도움말 아이콘이 있다.
상단바
전체
도움말 아이콘 클릭시 서비스 이용 가이드가 모달로 뜬다.
상단바
전체
다크모드 설정은 사용자의 기본 설정을 우선으로 따른다.
게시판
전체
칭찬, 응원 무능 게시판의 탭이 있다.
글 조회
게시판
전체
스레드 리스트를 볼 수 있다. (프로필, 닉네임(혹은 익명), 올린 시간, 내용, 좋아요, 댓글 수) 리스트에 hover하면 좋아요, 댓글 달기가 뜨고 본인이 쓴 글인 경우 편집, 삭제 버튼까지 뜬다. 댓글 달기 클릭 시 스레드가 뜬다. 좋아요 아이콘과 개수, 댓글 개수는 1개 이상인 경우에 노출된다.
게시판
전체
스레드 리스트들은 날짜별로 구분된다. 날짜별 seperator로 구분.
댓글 조회
게시판
전체
모든 사용자는 게시글 댓글을 조회할 수 있다.
글 작성
게시판
회원
로그인한 사용자는 게시글을 작성할 수 있다. 칭찬과 응원 게시판은 멘션이 가능하며, 무능 게시판은 멘션할 수 없다.
글 작성
게시판
회원
글을 작성할땐 defualt로 익명이며, 익명을 선택하지 않는다면 닉네임 설정이 반드시 되어 있어야 한다. (익명 선택 X이면 닉네임으로 스레드가 올라감)
글 편집
게시판
회원
해당 글을 작성한 사용자는 게시글을 편집할 수 있다.
글 삭제
게시판
회원
해당 글을 작성한 사용자는 게시글을 삭제할 수 있다.
좋아요
게시판
회원
로그인한 사용자는 게시글에 좋아요를 할 수 있다.
댓글 작성
게시판
회원
로그인한 사용자는 게시글에 댓글을 작성할 수 있다.
댓글 삭제
게시판
회원
로그인한 사용자는 본인이 작성한 댓글을 삭제할 수 있다.

6. 와이어프레임

7. 역할 분담

겹치는 기능은 담당자가 담당하고 담당 페이지 작업자는 대기 후 가져다 사용합니다.
역할 (겹치는 기능)
유형
담당자
비고
스레드 목록 아이템 (메인 페이지)
기능구현
퍼블리싱
댓글 목록 아이템 (스레드 자세히보기)
기능구현
퍼블리싱
빨리 하는 사람이 하기
스레드+댓글 신규작성+편집 (+ 삭제)
기능구현
퍼블리싱
로그인, 회원 가입, 회원 변경 공통 기능
기능구현
퍼블리싱 기타 (모달: 로그인, 회원 가입, 회원 변경, Yes/No, 확인), 사이드바
퍼블리싱
(내 알림 + 내 작성 글 페이지)
기능구현
퍼블리싱

8. 도메인