HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
💟
김요한팀
/
🐾
괴발개발
/
🍑
기획서
기획서
🍑

기획서

태그
문서
날짜
목차
팀 소개팀명 - 도원결의주제기획 의도주요 타겟층핵심기능스토리보드기술 스택팀 규칙브랜치 전략커밋 컨벤션코드 컨벤션CommonTypescript기능 명세컴포넌트URL와이어 프레임플로우차트일정

팀 소개

팀명 - 도원결의

김동현
안녕하세요. 귓볼이 큰 유비입니다.
안혜수
안녕하세요. 관우입니다. 술이 식기전에 돌아오겠소.
이진욱
안녕하세요. 장비입니다. 막내입니다.

주제


기획 의도

주요 타겟층


  • 자신의 개발 지식을 공유 하고자 하는 사람
  • 다른 사람의 개발 지식을 공유 받고자 하는 사람
  • 개발 도중 생긴 이슈를 해결하고자 하는 사람
  • 취업이나 이직 관련 정보를 얻고자 하는 사람
  • 다른 개발자들과 교류가 필요한 사람

핵심기능


  • 개발 지식을 개발자에게 익숙한 마크 다운 편집기로 가공, 생산 공유할 수 있다.
  • 개발 중 발생한 이슈에 대한 질문과 답변을 주고 받을 수 있다.
  • 안구 건강을 위해 라이트모드, 다크모드를 적용할 수 있다.
  • 다른 사용자의 좋아요, 댓글 알림을 받을 수 있다.

스토리보드

기술 스택

  • 라이브러리 : React, React Query, React Router, Storybook
  • 언어 : Typescript
  • 번들러 : Vite
  • 패키지 : npm
  • API : axios
  • 포매터 : ESLint, Prettier
  • 상태관리 : Zustand
  • 디자인 : Emotion (css prop)
  • 배포 : Vercel or Netlify

팀 규칙

브랜치 전략

main : 배포
dev : feature의 분기점이 되는 브랜치, feature가 머지되는 브랜치
feature : 기능 단위 개발을 위한 브랜치

커밋 컨벤션

feat
새로운 기능 추가
fix
버그 수정
refactor
리팩토링
design
CSS 등 UI 디자인 변경
comment
주석 추가 및 변경
style
코드 포맷팅, 세미콜론 누락 등
chore
위에 걸리지 않는 기타 변경사항(빌드 스크립트 수정, assets image, 패키지 매니저 등)
init
프로젝트 초기 생성
rename
파일 혹은 폴더명 수정하거나 옮기는 경우
remove
파일을 삭제하는 작업만 수행하는 경우

코드 컨벤션

Common

  • 한 줄 짜리 if 문도 블럭처리
  • 컴포넌트 파일명 PascalCase
    • 컴포넌트가 비대해지면 PascalCase 폴더명에 index.ts 로 export
  • 컴포넌트 화살표 함수로 작성
  • export 할 때
    • 컴포넌트만 default export
    • 그 이외는 named export
  • JSDoc(TSDoc)으로 주석적기
  • 중첩된 객체에만 structuredClone 사용, 이외에는 스프레드 연산자 사용
  • 변수명 길어지더라도 아예 생략없이(단, 자주쓰는 줄임말은 가능)
  • 이벤트 핸들러명은 handle prefix
  • props로 넘길 때는 on prefix를 사용한다.
  • Emotion styled 사용하지 않는다.
    • css prop을 사용. 스타일을 별도의 파일로 분리해 사용하고 컴포넌트 파일과 같은 폴더에 위치시킨다.

Typescript

  • 인터페이스 or 타입
    • api 응답과 관련된 것만 인터페이스, 나머지는 다 타입으로 작성
  • 변경되지 않는 객체 as const 붙이기
  • 타입스크립트 prefix 적지않기
  • Props suffix 붙이기, 컴포넌트 Props 타입은 분리하지 않기(재사용되는 경우 제외)
  • 타입스크립트 타입 선언에서도 코드 반복을 줄이기
    • 유틸리티 타입 활용
    • 유니온, 인터섹션 활용
 

기능 명세

페이지
유저 스토리
세부 내용
담당자
상태
우선순위
홈
사용자는 최신글 목록을 볼 수 있다
사용자는 게시글의 최신글과 질문글의 최신글 전체를 볼 수 있다. (무한 스크롤)
Done
1
회원가입
사용자는 이메일과 비밀번호로 회원가입을 할 수 있다
사용자가 회원이 아니라면 회원가입 링크를 눌러 회원가입 페이지로 이동해 회원가입 할 수 있다.
Done
1
로그인
사용자는 이메일과 비밀번호로 로그인을 할 수 있다
사용자는 로그인 버튼을 눌러 로그인 페이지로 이동해 로그인할 수 있다.
Done
1
질문
조회
사용자는 질문을 볼 수 있다
Done
1
질문
조회
사용자는 해당 질문에 포함된 답변을 볼 수 있다
Done
2
질문
조회
인증된 사용자는 현재 질문에 좋아요을 누를 수 있다
Done
2
질문
조회
인증된 사용자는 현재 질문에 답변을 작성할 수 있다
답변을 작성하는 중이라면 제출 버튼이 활성화되어있고 작성하는 중이 아니라면 제출 버튼이 비활성화 되어 있음
Done
2
질문
조회
인증된 사용자는 자신이 작성한 질문을 삭제할 수 있다
글 삭제 전 모달로 확인 메시지를 볼 수 있다. 이때 취소 버튼을 누르면 모달만 사라지고 삭제 버튼을 누르면 답변 삭제되며 해당 글을 볼 수 있다.
Done
1
질문
조회
인증된 사용자는 자신이 작성한 질문을 수정할 수 있다
Done
1
질문
작성
인증된 사용자는 새로운 질문을 작성할 수 있다.
작성이 완료되면 작성한 질문 페이지로 이동
Done
1
질문
작성
인증된 사용자는 새로운 질문에 태그를 추가할 수 있다.
태그 작성 input에서 엔터로 태그 작성 완료 가능
Done
2
질문
조회
인증된 사용자는 질문, 삭제 버튼을 볼 수 있다.
답변이 하나 이상 달리면, 질문, 삭제 버튼이 사라진다.
Done
1
비밀번호
변경
인증된 사용자는 자신 계정의 비밀번호를 변경할 수 있다.
사용자는 자신의 정보 페이지에서 비밀번호 변경 버튼을 눌러 비밀번호를 변경할 수 있다. → 현재 비밀번호를 입력하고 새로운 비밀번호를 두번 입력한 뒤 비밀번호 변경하기 버튼을 누르면 변경 완료
Done
2
채널
사용자는 특정 채널의 글 목록을 볼 수 있다
Done
1
채널
사용자는 특정 게시글의 페이지로 이동 할 수 있다.
Done
1
검색
사용자는 다른 사용자를 검색할 수 있다.
사용자 검색을 통해 다른 모든 사용자를 검색할 수 있다.
Done
3
검색
사용자는 게시글을 검색할 수 있다.
게시글 검색을 통해 모든 게시글을 검색할 수 있다.
Done
3
검색
사용자는 질문글을 검색할 수 있다.
질문 검색을 통해 모든 질문을 검색할 수 있다.
Done
3
게시글
조회
사용자는 현재 글의 내용을 조회 할 수 있다.
Done
1
게시글
조회
인증된 사용자는 현재 글에 좋아요를 누를 수 있다.
Done
2
게시글
조회
인증된 사용자는 현재 글에 댓글을 작성 할 수 있다.
댓글을 작성하는 중이라면 제출 버튼이 활성화되어있고 작성하는 중이 아니라면 제출 버튼이 비활성화 되어 있음
Done
2
게시글
조회
사용자는 해당 글에 포함된 댓글을 조회 할 수 있다.
Done
2
게시글
조회
인증된 사용자는 삭제, 수정 버튼을 볼 수 있다.
Done
1
게시글
조회
인증된 사용자는 자신이 작성한 글을 삭제 할 수 있다.
글 삭제 전 모달로 확인 메시지를 볼 수 있다. 이때 취소 버튼을 누르면 모달만 사라지고 삭제 버튼을 누르면 게시글이 삭제되며 해당 글이 있던 채널로 이동
Done
1
게시글
조회
인증된 사용자는 현재 글을 수정하고 저장할 수 있다.
- 작성이 완료되면 채널 목록 페이지로 이동 - 수정 버튼을 누르면 바꿀 수 있는 텍스트를, 에디터로 변경
Done
1
게시글
조회
인증된 사용자는 현재 글에 관련된 태그를 추가 할 수 있다.
태그 작성 input에서 엔터로 태그 작성 완료 가능
Done
2
게시글
조회
인증된 사용자는 현재 글이 작성된 채널을 변경 할 수 있다.
게시글 작성 화면에서 드롭 다운에서 교체 할 수 있다.
Done
1
게시글
작성
인증된 사용자는 새로운 게시글을 작성할 수 있다.(작성이 완료되면 작성한 게시글 페이지로 이동)
- 작성이 완료되면 작성한 게시글 페이지로 이동 - 마크다운 기능을 사용 할 수 있다. - 이미지를 추가 할 수 있다.
Done
1
게시글
작성
인증된 사용자는 새로운 게시글에 태그를 추가 할 수 있다.
태그 작성 input에서 엔터로 태그 작성 완료 가능
Done
2
게시글
작성
인증된 사용자는 새로운 게시글에 채널을 설정 할 수 있다.
게시글 작성 화면에서 드롭 다운에서 설정 할 수 있다.
Done
1
사용자
조회
사용자는 특정 사용자의 정보를 볼 수 있다
특정 사용자가 작성한 게시글을 볼 수 있다
Done
1
사용자
조회
인증된 사용자는 자신의 정보를 변경할 수 있다
사용자는 자신의 정보 페이지에서 이름 옆의 연필 모양 버튼을 눌러 편집 모드로 변경할 수 있다.
Done
2
ALL
사용자는 홈으로 돌아갈 수 있다.
사이드바
Done
1
ALL
사용자는 특정 채널로 이동할 수 있다.
사이드바
Done
1
ALL
인증된 사용자는 내 정보 페이지로 이동할 수 있다.
사이드바
Done
1
ALL
인증된 사용자는 알림을 확인할 수 있다
사이드바 알림 드롭다운이 열려 알림을 확인하고 클릭 시 연결된 페이지로 이동한다
Done
3
ALL
사용자는 스크롤의 가장 상단으로 이동할 수 있다.
- 스크롤이 생기면 버튼이 보일 수 있도록 한다.
Done
3
ALL
인증된 사용자는 글 작성 버튼을 볼 수 있다.
Done
1
ALL
인증된 사용자는 글 작성 페이지로 이동할 수 있다.
Done
1
ALL
사용자는 다크모드, 라이트모드를 선택할 수 있다
사이드바
Done
2

컴포넌트

분류
컴포넌트
담당자
Atom
텍스트
Atom
아이콘
Atom
이미지
Atom
버튼
Atom
인풋
Atom
Flex
Molecule
유저 정보(프로필 사진, 닉네임)
Molecule
댓글 폼
Molecule
글 작성 버튼
Molecule
맨 위로 이동 버튼
Molecule
로그인/로그아웃/비밀번호 변경 폼
Molecule
아이콘 + 텍스트
Molecule
태그
Molecule
드롭다운
Molecule
모달
Organism
사이드바
Organism
검색 모달
Organism
Article
Organism
Article 생성
Organism
댓글
Organism
질문 / 답변 말풍선
Organism
카드
Organism
카드리스트
Organism
FloatingButtons
Template
PageTemplate(SideBar, Content)

URL

페이지
URL
Query Params
홈페이지
/
채널 페이지
/channels/{channelId}
게시글 페이지
/articles/{articleId}
게시글 생성
/create
게시글 수정
/articles/{articleId}/edit
질문 페이지
/questions/{questionId}
질문 수정
/questions/{questionId}/edit
검색 페이지
/search
tag: String article: String question: String
유저 페이지
/users/{userId}
회원가입 페이지
/signup
로그인 페이지
/login
비밀번호 변경 페이지
/password
404 페이지
/error

와이어 프레임

플로우차트

 

일정

 
 
괴발개발 - 개발자 커뮤니티 서비스 "내 코드는 괴발개발, 네 코드는 클린코드" "지식을 괴발개발에서 공유하세요"
저희 서비스 괴발개발은... 한 사이트에서 질문도 하고싶고 개발 블로그도 작성하고 싶은 개발자들의 커뮤니티입니다. 기존의 개발 커뮤니티는 질문과 답변에만, 블로그는 컨텐츠를 작성하고 게시하는 것에 초점이 맞춰져있습니다. 각 사이트에서 사용자는 방문 목적을 달성할 수 있지만 달성한 뒤 필요할때 번갈아가며 방문해야 합니다. 하지만 괴발개발을 이용한다면 질문과 컨텐츠 작성을 한 공간에서 편리하게 할 수 있습니다. 저희 사이트의 특징은 첫 번째, 개발자에게 친숙한 마크다운 문법으로 컨텐츠를 작성할 수 있습니다. 두 번째, 다른 개발자가 작성한 글(학습, 취업, 트렌드 등)을 쉽게 검색 할 수 있습니다. 세 번째, 질문 게시판의 경우, 대화 형식으로 UI가 구성되어 좀 더 편하고 자유로운 분위기로 질문과 답변을 주고 받을 수 있습니다. 네 번째, 자유 게시판에서 일반 커뮤티니처럼 다양한 주제의 글을 보거나 작성할 수 있습니다. 사용자는 괴발개발 사이트 단 한 곳에서 목적을 달성할 수 있어 사용자는 다른 사이트를 이용할 때보다 편리함을 느낄 수 있습니다.
취준생 A씨는 개발자로 취직하기 위해 리액트를 공부를 하고 있었다. 그러다가 어떤 이슈와 맞닥 드리게 되었고 평소에 자주 눈팅하던 괴발개발 커뮤니티에 질문을 올려보기로 했다. A씨는 질문 글을 쓰기 위해 괴발개발 사이트에 가입을 하고 로그인을 한다. A씨는 자신이 처한 상황과 그에 따른 에러 메세지를 질문 게시판에 올려두고, 기존에 다른 개발자들이 기술해 놓은 포스팅을 태그 기능을 이용하여 찾고 있었다. 한참을 이글 저글 찾아보던 A씨는 자신이 올려둔 질문 글에 답변이 달렸다는 알림을 보고, 어떤 답변이 달렸을지, 궁금해하며 질문 글로 이동을 한다. 자신의 문제에 친절하게 답변을 해준 것에 감사함을 느낀 A씨는 답변에 좋아요를 누른다. 그리고 답변을 달아준 모든 개발자들이 올린 다른 글도 살펴본다.
개발자 B씨는 요즘 채용시즌에 맞춰 신입 개발자를 뽑기위해 이력서를 보고 있는 중이었다. 그러나 대부분의 지원자들의 기술 스택과 포트폴리오가 현재 자신이 개발하고 있는 프로젝트가 요구하는 부분과 너무 상이함을 느꼈다. 답답한 마음에 B씨는 취업을 준비하는 개발자들이 보고 자신의 역량에 반영하기를 바라는 마음에 개발괴발 사이트에 블로그를 올리기로 결심했다. 그러다 어떤 주니어 개발자가 쓴 것 같은 질문을 읽고 이에 답변을 달아주기로 마음 먹는다. 보아하니, 작성자가 작성한 코드에 문제가 있음을 발견하고 문제가 되는 부분을 코드블록으로 만들어 인지시켜주었다. 최신글을 살펴보던 B씨는 댓글 알림을 받게 되고 드롭다운 메뉴를 통해 답변을 달았던 글로 이동하고, 글 작성자의 감사 인사를 보게된다. 기분이 좋아진 B씨는 글에 좋아요를 누르고 다른글을 보러 떠난다.
main <—————— dev <—————— feature/#{이슈번호} [hotfix]
const handleModalOpen = () => { ... }
<Modal onModalOpen={handleModalOpen} />
┣ 📂components ┃ ┣ 📂common ┃ ┃ ┣ 📂Card ┃ ┃ ┃ ┣ 📜index.ts ┃ ┃ ┃ ┣ 📜Card.tsx ┃ ┃ ┃ ┣ 📜Card.style.ts ┃ ┃ ┃ ┣ 📜Button.tsx ┃ ┃ ┃ ┗ 📜Button.style.ts