기획서

팀 소개

팀명 - 도원결의

주제

괴발개발 - 개발자 커뮤니티 서비스

"내 코드는 괴발개발, 네 코드는 클린코드"
"지식을 괴발개발에서 공유하세요"

기획 의도

저희 서비스 괴발개발은... 
한 사이트에서 질문도 하고싶고 개발 블로그도 작성하고 싶은 개발자들의 커뮤니티입니다.

기존의 개발 커뮤니티는 질문과 답변에만, 블로그는 컨텐츠를 작성하고 게시하는 것에 초점이 맞춰져있습니다.
각 사이트에서 사용자는 방문 목적을 달성할 수 있지만 달성한 뒤 필요할때 번갈아가며 방문해야 합니다.

하지만 괴발개발을 이용한다면 질문과 컨텐츠 작성을 한 공간에서 편리하게 할 수 있습니다.  
저희 사이트의 특징은
첫 번째, 개발자에게 친숙한 마크다운 문법으로 컨텐츠를 작성할 수 있습니다.
두 번째, 다른 개발자가 작성한 글(학습, 취업, 트렌드 등)을 쉽게 검색 할 수 있습니다.
세 번째, 질문 게시판의 경우, 대화 형식으로 UI가 구성되어 좀 더 편하고 자유로운 분위기로 
        질문과 답변을 주고 받을 수 있습니다.
네 번째, 자유 게시판에서 일반 커뮤티니처럼 다양한 주제의 글을 보거나 작성할 수 있습니다.
사용자는 괴발개발 사이트 단 한 곳에서 목적을 달성할 수 있어 사용자는 다른 사이트를 이용할 때보다 
편리함을 느낄 수 있습니다.

주요 타겟층

• 자신의 개발 지식을 공유 하고자 하는 사람

• 다른 사람의 개발 지식을 공유 받고자 하는 사람

• 개발 도중 생긴 이슈를 해결하고자 하는 사람

• 취업이나 이직 관련 정보를 얻고자 하는 사람

• 다른 개발자들과 교류가 필요한 사람

핵심기능

• 개발 지식을 개발자에게 익숙한 마크 다운 편집기로 가공, 생산 공유할 수 있다.

• 개발 중 발생한 이슈에 대한 질문과 답변을 주고 받을 수 있다.

• 안구 건강을 위해 라이트모드, 다크모드를 적용할 수 있다.

• 다른 사용자의 좋아요, 댓글 알림을 받을 수 있다.

스토리보드

취준생 A씨는 개발자로 취직하기 위해
리액트를 공부를 하고 있었다. 그러다가 어떤 이슈와 맞닥 드리게 되었고
평소에 자주 눈팅하던 괴발개발 커뮤니티에 질문을 올려보기로 했다.

A씨는 질문 글을 쓰기 위해 괴발개발 사이트에 가입을 하고 로그인을 한다.

A씨는 자신이 처한 상황과 그에 따른 에러 메세지를 질문 게시판에 올려두고,
기존에 다른 개발자들이 기술해 놓은 포스팅을 태그 기능을 이용하여 찾고 있었다.

한참을 이글 저글 찾아보던 A씨는 자신이 올려둔 질문 글에 답변이 달렸다는 알림을 보고,
어떤 답변이 달렸을지, 궁금해하며 질문 글로 이동을 한다.

자신의 문제에 친절하게 답변을 해준 것에 감사함을 느낀 A씨는 답변에 좋아요를 누른다.
그리고 답변을 달아준 모든 개발자들이 올린 다른 글도 살펴본다.

개발자 B씨는 요즘 채용시즌에 맞춰 신입 개발자를 뽑기위해 이력서를 보고 있는 중이었다.
그러나 대부분의 지원자들의 기술 스택과 포트폴리오가 현재 자신이 개발하고 있는 프로젝트가 요구하는
부분과 너무 상이함을 느꼈다.

답답한 마음에 B씨는 취업을 준비하는 개발자들이 보고 자신의 역량에 반영하기를 바라는 마음에
개발괴발 사이트에 블로그를 올리기로 결심했다.

그러다 어떤 주니어 개발자가 쓴 것 같은 질문을 읽고 이에 답변을 달아주기로 마음 먹는다.
보아하니, 작성자가 작성한 코드에 문제가 있음을 발견하고 
문제가 되는 부분을 코드블록으로 만들어 인지시켜주었다.

최신글을 살펴보던 B씨는 댓글 알림을 받게 되고 드롭다운 메뉴를 통해
답변을 달았던 글로 이동하고, 글 작성자의 감사 인사를 보게된다.
기분이 좋아진 B씨는 글에 좋아요를 누르고 다른글을 보러 떠난다.

기술 스택

• 라이브러리 : React, React Query, React Router, Storybook

• 언어 : Typescript

• 번들러 : Vite

• 패키지 : npm

• API : axios

• 포매터 : ESLint, Prettier

• 상태관리 : Zustand

• 디자인 : Emotion (css prop)

• 배포 : Vercel or Netlify

팀 규칙

브랜치 전략

main <—————— dev <—————— feature/#{이슈번호}

           [hotfix]

커밋 컨벤션

코드 컨벤션

Common

• 한 줄 짜리 if 문도 블럭처리

• 컴포넌트 파일명 PascalCase
• 컴포넌트가 비대해지면 PascalCase 폴더명에 index.ts 로 export

• 컴포넌트 화살표 함수로 작성

• export 할 때
• 컴포넌트만 default export
• 그 이외는 named export

• JSDoc(TSDoc)으로 주석적기

• 중첩된 객체에만 structuredClone 사용, 이외에는 스프레드 연산자 사용

• 변수명 길어지더라도 아예 생략없이(단, 자주쓰는 줄임말은 가능)

• 이벤트 핸들러명은 handle prefix

const handleModalOpen = () => { ... }

• props로 넘길 때는 on prefix를 사용한다.

<Modal onModalOpen={handleModalOpen} />

• Emotion styled 사용하지 않는다.
• css prop을 사용. 스타일을 별도의 파일로 분리해 사용하고 컴포넌트 파일과 같은 폴더에 위치시킨다.

┣ 📂components
┃ ┣ 📂common
┃ ┃ ┣ 📂Card
┃ ┃ ┃ ┣ 📜index.ts
┃ ┃ ┃ ┣ 📜Card.tsx
┃ ┃ ┃ ┣ 📜Card.style.ts
┃ ┃ ┃ ┣ 📜Button.tsx
┃ ┃ ┃ ┗ 📜Button.style.ts

Typescript

• 인터페이스 or 타입
• api 응답과 관련된 것만 인터페이스, 나머지는 다 타입으로 작성

• 변경되지 않는 객체 as const 붙이기

• 타입스크립트 prefix 적지않기

• Props suffix 붙이기, 컴포넌트 Props 타입은 분리하지 않기(재사용되는 경우 제외)

• 타입스크립트 타입 선언에서도 코드 반복을 줄이기
• 유틸리티 타입 활용
• 유니온, 인터섹션 활용

기능 명세

컴포넌트

URL

와이어 프레임

플로우차트

일정