HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생/
🍎
윤지석팀/
🏗️
팀 프로젝트/
📑
기획서
📑

기획서

프로젝트 주제 A.K.A. FTA(Feeling Thinking Answer)

MBTI의 판단기능 중 사고형(Thinking)과 감정형(Feeling)의 선호도 관점에 따른 고민상담 커뮤니티 서비스
🔭
부제 : 화성에서 온 F, 금성에서 온 T
 

개발 배경 및 중요성

notion image
 
전문 조사기관 ‘틸리언 프로’에 따르면, 대한민국 20~59세 연령대의 대부분이 고민을 갖고 있다.
 
하지만 대부분 고민을 쉽게 털어놓지 못한다. 고민을 지인에게 이야기 했을 때, 나의 고민을 이해하지 못하고 싫어해서 그런 것일 수도 있고, 그 고민을 다른 누군가에게 말하는 것일 수도 발설할까봐 혹은 그것이 쪽팔릴까봐 걱정하는 것일 수도 있다. 이처럼 아는 사람에게 고민을 얘기하는 것은 리스크가 큰 것에 비해, 그에 대한 결과는 불확실하다. 그렇다고 이 고민을 계속 혼자 끙끙 앓고 있을 수는 없다.
우리가 개발하고자 하는 목표는 이러한 고민을 말하지 못해 혼자 끙끙 앓지 않고 지인에게 말하는 것에 대한 리스크를 줄이면서, 고민을 해결할 수 있는 커뮤니티를 만드는 것이다. 보통 우리가 고민하고 있는 것은 다른 누군가도 고민하고 있을 확률이 크다.
 
notion image
 
위의 문제를 커뮤니티형 소셜 서비스와 현재 MZ세대가 주목하는 마이어-브릭스 유형지표(MBTI)를 결합하여 풀어내고자 한다.
 
같은 고민을 하는 사람들을 모으거나 혹은 이미 그 고민을 해결한 사람들에게 조언을 받을 수 있도록 고민의 주제를 분류하고 그 주제를 채널로 만들어 사람들이 고민이 있을 때 혼자 끙끙 앓지 않고 서로가 서로에게 도움을 주고 받을 수 있도록 할 것이다.
 

주요 기능

게시판 검색

게시판을 둘러보면서 각각의 사람들이 어떤 고민을 가지고 있는지, 주로 어떤 생각을 하는지 둘러볼 수 있다.
게시판을 각각의 관심사에 맞는 태그로 분류해서 자신이 관심있어하는 주제에 대한 이야기도 볼 수 있다.

게시글 보기

게시판에서 어떤 흥미로운 주제를 발견했을 경우, 게시글을 보고 글의 내용을 확인할 수 있다.
또한 단순하게 게시글을 보는 것에 그치지 않고, 등록한 사람의 MBTI를 확인할 수 있기 때문에 특정 MBTI를 가진 사람의 생각을 들여다보는 것과 같은 효과를 줄 수 있다.

댓글 보기 및 작성

게시글 아래에 달린 댓글들을 볼 수 있습니다. 이를 통해 게시글에 해당하는 주제에 대해 다른 MBTI들은 어떻게 생각을 하는지 알 수 있다. 또한 댓글을 작성함으로써 다른 사람들의 고민에 공감을 해주거나 해결을 해줄 수도 있다.

게시글 등록

단순히 게시글을 보는것에 그치지 않고 본인의 고민이나 공유하고 싶은 생각등 어떤 주제에 대해서도 게시글을 쓰는것이 가능하다. “내 남자친구 혹은 여자친구의 MBTI가 이러이러한데 화가났을때 어떻게 풀어줘야 할까?” 하는 고민글부터 “F들은 절대 끝까지 읽을 수 없는 글” 처럼 사람들의 흥미를 유발하는 글들까지 작성을 할 수가 있다.

개발 목표

기본 요구 사항은 다음과 같다.
No.
요구사항
반영 사항
1
• 사용자는 회원가입과 로그인을 할 수 있다.
-
2
• 사용자는 채널에 올라온 글을 볼 수 있다.
• 사용자는 태그별로 올라온 글을 확인할 수 있다.
3
• 사용자는 가입자 목록을 볼 수 있다.
• 사용자는 검색을 통해 사용자 목록을 확인할 수 있다.
4
• 사용자는 가입자를 이름으로 검색을 할 수 있다.
• 사용자는 가입자를 닉네임으로 검색할 수 있다.
5
• 사용자는 가입자의 정보를 볼 수 있다.
• 사용자는 프로필 페이지를 통해 정보를 확인할 수 있다.
6
• 사용자는 포스트 혹은 가입자를 검색할 수 있다.
• 사용자는 게시글 혹은 유저 닉네임을 검색할 수 있다.
7
• 인증된 사용자는 자신의 정보를 변경할 수 있다.
-
8
• 인증된 사용자는 채널에 올라온 글을 볼 수 있다.
• 인증된 사용자는 태그에 맞는 글을 확인할 수 있다.
9
• 인증된 사용자는 채널에 포스트를 남길 수 있다.
• 인증된 사용자는 태그에 맞는 글을 작성할 수 있다.
10
• 인증된 사용자는 포스트를 좋아요 할 수 있다.
• 인증된 사용자는 게시글에 ‘공감’을 할 수 있다.
11
• 인증된 사용자는 포스트에 댓글을 남길 수 있다.
• 인증된 사용자는 게시글에 댓글을 남길 수 있다.
12
• 인증된 사용자는 자신의 알림 목록을 확인 할 수 있다.
-
13
• SPA 형태로 만든다.
-
14
• 엉뚱한 페이지에 접속하면 404 페이지를 보여준다.
-
 

협업방식

EoA(Essence of Agility) 기반 협업 🙆‍♂️

  • Redundancy : 중복을 허용하기
    • 서로가 맡은일이 완전히 분리되지 않고 어느 정도 공유되는 부분이 있으므로, 특정 인원의 부재가 프로젝트 진행에 주는 영향을 최소화한다.
  • Detect early : 문제를 빠르게 감지하기
    • 모르는 부분이나 해결하기 힘든 문제가 발생할 경우 적극적인 비동기적 ,동기적 소통을 통해 이를 해결한다.
  • Feedback & adapt : 피드백을 받고 재조정하면서 나아가기
    • 과업을 완수한 후 전체적으로 모여서 피드백을 얻고 수정해야할 부분들에 대해 논의한다. 이를 통해 치명적인 버그가 발생할 확률이 줄고, 팀원의 전체적인 성장이 가능하다.
  • Receiving new info : 새로운 정보 얻기
    • 적극적으로 문제를 해결하는 방식들이 무엇이 있는지 알아보고 이를 전체에게 공유한다. 이를 통해 생산성의 증대를 도모한다.
  • Piecemeal & center first : 가장 중요한 것을 먼저 하되, 작은 단위로 쪼개서 진행하기
    • 프로젝트에 가장 핵심적인 기능들을 우선적으로 개발하는 것을 목표로 움직인다. 그리고 그 기능들을 잘개 쪼개어 각각 분담힌다.

Workflow 🔄

기본적인 일과시간은 코어타임(오후 2시~7시). 필요시, 협의하에 시간을 따로 낸다.
  • 체크인 : 맡은 과제에 대한 진행 상황 발표 및 피드백, 당일 과업 토의
  • 일과중 : 당일 과업 진행, 모르거나 막히는 부분, 공유해야하는 부분 적극적으로 공유
  • 체크아웃 : 당일 과업 진행 상황 공유 및 다음날 체크인까지 해야할 과제 토의 및 분배

유저 스토리

page icon
로그인 및 회원가입
로그인 및 회원가입
  1. 로그인하지 않은 경우, "로그인" 버튼을 볼 수 있다.
  1. 사용자가 "로그인" 버튼을 클릭하면 로그인 페이지로 이동한다.
  1. 로그인 페이지에서는 ID와 비밀번호를 입력하고 로그인할 수 있다.
  1. 회원가입을 원하는 경우, "회원가입" 버튼을 클릭하여 회원가입 페이지로 이동한다.
  1. 회원가입 페이지에서는 ID, 비밀번호, 닉네임, 그리고 MBTI 정보를 입력한다.
로그인 후 게시판 페이지
로그인 후 게시판 페이지
  1. 로그인에 성공하면, 사용자는 게시판 페이지로 이동한다.
  1. 게시판 페이지에는 게시글 목록이 표시된다.
  1. 사용자는 태그를 클릭하여 게시글을 필터링하고 볼 수 있다.
  1. 사용자는 게시판 페이지에서 “글 쓰기” 버튼을 볼 수 있다.
게시글 및 사용자 검색
게시글 및 사용자 검색
  1. 게시판 페이지에서 검색 기능을 사용하여 게시글 또는 유저를 검색할 수 있다.
  1. 검색 결과에서 게시글을 클릭하면 해당 게시글 페이지로 이동한다.
  1. 검색 결과에서 유저를 클릭하면 해당 유저 정보 페이지로 이동한다.
게시글 페이지
게시글 페이지
  1. 게시판 페이지에서 게시글을 클릭하면 게시글 페이지로 이동한다.
  1. 게시글 페이지에서는 게시글 본문을 볼 수 있고, 댓글을 작성하거나 공감을 표시할 수 있다.
  1. 게시글에 달린 댓글을 클릭하면 해당 댓글을 작성한 유저정보 페이지로 이동한다.
  1. 해당 사용자에게 메시지를 작성할 수 있다.
게시글 작성
게시글 작성
  1. 사용자는 게시판 페이지에서 "글 쓰기" 버튼을 클릭하여 게시글을 작성할 수 있다.
  1. 게시글 작성 페이지에서는 태그를 선택하고 게시글 본문을 작성한다.
  1. 사용자는 게시글을 공감할 수 있다.
유저 정보 페이지
유저 정보 페이지
  1. 검색 기능을 사용하여 나온 유저 목록에서 특정 유저를 클릭하여 유저 정보 페이지로 이동한다.
  1. 해당 유저의 프로필 이미지와 mbti를 확인할 수 있다.
  1. 해당 유저의 소개를 확인할 수 있다.
알림 페이지
알림 페이지
  1. 사용자는 게시판 페이지에서 "알림" 버튼을 클릭하여 알림 페이지로 이동할 수 있다.
  1. 알림 페이지에서는 알림 목록을 확인하고 알림을 클릭하여 해당 게시글로 이동할 수 있다.
마이페이지
마이페이지
  1. 사용자는 게시판 페이지에서 "마이페이지" 버튼을 클릭하여 개인 정보 및 활동을 관리할 수 있는 페이지로 이동한다.
  1. 마이페이지에서는 개인 정보 수정, 작성한 게시글 목록 확인, 작성한 댓글 목록 확인, 그리고 로그아웃 기능을 제공한다.
  1. 개인 정보 수정 페이지에서는 자기소개, 닉네임, MBTI 정보를 수정하고 비밀번호를 변경할 수 있다.
로그아웃
로그아웃
  1. 로그인 한 사용자는 마이페이지에서 "로그아웃" 버튼을 클릭하여 로그아웃할 수 있다.
404 페이지
404 페이지
  1. 사용자가 잘못된 주소로 접근하면 404에러를 보여 준다.
 

와이어프레임

notion image
 

플로우 차트

notion image
 

기술 스택 & 협업 툴

Front-End
TypeScript
JavaScript에 정적 타입 검사 기능을 추가하여 개발자가 런타임 오류를 사전에 방지하고 코드의 가독성과 유지 보수성을 향상시킨다.
React
사용자 인터페이스를 구축하기 위한 컴포넌트 기반의 라이브러리로, 화면 갱신이 효율적이고 유연한 UI를 구현할 수 있다.
Vite
빠른 개발환경을 제공하며, 모듈 번들링 대신 빠른 빌드 시간과 HMR을 통해 신속한 개발을 지원한다.
Axios
HTTP 요청을 쉽게 처리하여 서버와의 통신을 단순화하며, 비동기 작업을 효율적으로 다룬다.
React-Router-Dom
React 애플리케이션에서 페이지 라우팅을 설정하여 다양한 URL 경로에 대한 뷰를 관리한다.
Recoil
React 상태 관리 라이브러리로, 컴포넌트 간 데이터 공유와 관리를 편리하게 해주며 상태를 원활하게 관리한다.
Storybook
UI 컴포넌트를 개발하고 문서화하여 개발자와 디자이너 간 협업을 강화하며 컴포넌트 렌더링 테스트를 용이하게 한다.
Emotion/styled
CSS-in-JS 라이브러리로, 컴포넌트 스타일링을 자바스크립트 코드에 통합하여 관리와 재사용성을 높인다.
 
Communication
Slack
팀 커뮤니케이션을 향상시키고 업무 관련 정보를 효과적으로 공유하여 협업을 원활하게 한다.
Github
버전 관리와 협업 도구로, 코드 리뷰, 이슈 트래킹, 프로젝트 관리 등을 통합하여 개발 프로세스를 개선한다.
Notion
문서 작성, 작업 일정 관리, 프로젝트 협업 등 다양한 작업을 통합적으로 수행하여 생산성을 높인다.
Discord
음성 및 텍스트 채팅을 통한 팀 소통과 개발자 커뮤니티 구축을 지원하여 프로젝트 협업을 강화한다.
Figgem
디자인 협업과 웹 디자인 시각화를 위한 플랫폼이다.
 
Deployment
Vercel
클라우드 배포 플랫폼으로, 손쉬운 배포 및 호스팅을 제공하여 프로젝트를 빠르게 공개할 수 있다.
 

코드 컨벤션

작성 규칙

  • 파일명 : camelCase
  • 컴포넌트 파일명 : PascalCase
  • 함수명 - 동사 + 명사 : camelCase
  • 변수명 : camelCase
  • 타입 : 객체의 경우 가능하다면 인터페이스로 사용
  • 함수 : 인터페이스로 타입 분리, 화살표 함수 사용
  • 상수 : 대문자 snake_case(SNAKE_CASE)
  • 스타일드 컴포넌트 : 폴더안에 style.ts로 따로 분리
 

ESLint 

'eslint:recommended',
'plugin:@typescript-eslint/recommended',
'plugin:react-hooks/recommended',
'plugin:prettier/recommended',
'plugin:storybook/recommended',
 

Prettier

{
  "trailingComma": "es5",
  "tabWidth": 2,
  "semi": true,
  "singleQuote": true,
  "arrowParens": "always",
  "plugins": ["@trivago/prettier-plugin-sort-imports"],
	"importOrder": [
		"^react(.*)",
		"<THIRD_PARTY_MODULES>",
		"^[./]"
	],
	"importOrderSortSpecifiers": true
}
 

Commit Message

feat
새로운 기능 추가 사용자 입장에서 변화가 있는 경우
fix
버그 수정
docs
문서 수정 (ex. README.md 수정)
style
코드 포맷팅, 세미콜론 누락, 코드 변경이 없는 경우
refactor
사용자 입장에서 변화가 없는 코드 파일명, 폴더명 변경 및 이동
chore
빌드 업무 수정, 패키지 매니저 수정, 주석
design
사용자 UI 디자인 변경 (CSS 등)
 

예시

feat: #1 xxx 기능 추가
fix: #2 xxx 기능 수정
docs: #3 xxx 문서 수정
style: #4 xxx 코드 수정
refactor: #5 xxx 기능 수정
chore: #6 xxx 버전 수정
design: #7 xxx 페이지 수정
 

브랜치 전략

main: 운영환경 브랜치
dev: 개발환경 브랜치
feature: 파트별 기능 브랜치

브랜치 명명

feat/#이슈번호_길어진_기능명
ex) feat/#11_button_test
 
브랜치는 머지하면 삭제
 

Github 템플릿

  • Issue 템플릿
      • ## 내용 설명

## 작업 내용
	- 작업 1
	- 작업 2
  • PR 템플릿
      • ## 내용 설명

## 구현 내용

## 스크린샷?

## 장애물?

## PR 포인트

## 참고 사항

## 궁금한 점

close #이슈번호
 

Router 주소

path
종류
/, /post
Root(메인) 페이지 (게시판)
/?tag=태그, /post?tag=태그
Root(메인) 페이지 (게시판 태그)
/search?post=키워드
Root(메인) 페이지에서 키워드로 검색 (게시글)
/search?user=키워드
Root(메인) 페이지에서 키워드로 검색 (유저)
/post/:postId
게시글 상세 페이지
/post/create/edit
게시글 작성 페이지
/post/:postId/edit
게시글 수정 페이지
/login
로그인 페이지
/signup
회원가입 페이지
/user/:userId
유저 정보 페이지
/user/posts
마이페이지 (게시글)
/user/comments
마이페이지 (댓글)
/user/edit
내 정보 수정 페이지
/user/edit/password
비밀번호 변경 페이지
/notification
알림 페이지

폴더 구조

├── public
│   ├── favicon.ico
├── src
│   ├── components
│   │   ├── common
│   │   │   ├── index.ts
│   │   │   ├── button
│   │   │   │   ├── index.tsx
│   │   │   │   └── style.tsx
│   │   │   ├── input
│   │   │   └── ...
│   │   ├── 페이지명(페이지에서만 사용할 컴포넌트)
│   │   └── ...
│   ├── routes
│   │   ├── index.tsx
│   │   └── ...
│   ├── types
│   │   ├── index.ts
│   │   └── ...
│   ├── constants
│   │   ├── index.ts
│   │   ├── common.ts
│   │   └── 페이지별 상수.ts
│   ├── pages
│   │   ├── 로그인.tsx
│   │   ├── 게시판.tsx
│   │   ├── 마이페이지.tsx
│   │   └── ...
│   ├── hooks
│   │   ├── index.ts
│   │   ├── useXXX.ts
│   │   └── ...
│   ├── api
│   │   ├── index.ts
│   │   ├── 페이지명
│   │   └── ...
│   ├── assets
│   │   ├── 이미지
│   │   └── 폰트
│   └──
└──
 

개발진행상황 및 역할분담

러프 와이어프레임 → 상세기획 → 기획서제출 → api 구현 → 공통컴포넌트 구현 → 상세 페이지 구현 → 페이지 라우팅 연동 → 디자인 → QA
팀원
api
공통 컴포넌트
상세페이지 구현
김희석
Base, Like, Comment, Notification
Header, Input
Register, PostDetail, Login
송인재
Post
UserCard, Icon
Error404, Search
이종현
Post, Search
Logo, Footer
UserEdit, UserPage
이찬
Authorization
Textarea, Tag
PostEdit, UserPassword, Notification
정찬욱
User, Setting
PostCard, CommentCard, Button
Post, Root

일정

 
 
page icon
로그인 전 게시판 페이지
  1. 사용자가 웹 애플리케이션에 접속한다.
  1. 게시판 페이지로 이동한다.
  1. 게시판 페이지에는 게시글 목록이 표시된다.
  1. 사용자는 태그를 클릭하여 게시글을 필터링하고 볼 수 있다.