프로젝트 주제 A.K.A. FTA(Feeling Thinking Answer)
MBTI의 판단기능 중 사고형(Thinking)과 감정형(Feeling)의 선호도 관점에 따른 고민상담 커뮤니티 서비스
부제 : 화성에서 온 F, 금성에서 온 T
개발 배경 및 중요성
전문 조사기관 ‘틸리언 프로’에 따르면, 대한민국 20~59세 연령대의 대부분이 고민을 갖고 있다.
하지만 대부분 고민을 쉽게 털어놓지 못한다.
고민을 지인에게 이야기 했을 때, 나의 고민을 이해하지 못하고 싫어해서 그런 것일 수도 있고,
그 고민을 다른 누군가에게 말하는 것일 수도 발설할까봐 혹은 그것이 쪽팔릴까봐 걱정하는 것일 수도 있다.
이처럼 아는 사람에게 고민을 얘기하는 것은 리스크가 큰 것에 비해, 그에 대한 결과는 불확실하다.
그렇다고 이 고민을 계속 혼자 끙끙 앓고 있을 수는 없다.
우리가 개발하고자 하는 목표는 이러한 고민을 말하지 못해 혼자 끙끙 앓지 않고
지인에게 말하는 것에 대한 리스크를 줄이면서, 고민을 해결할 수 있는 커뮤니티를 만드는 것이다.
보통 우리가 고민하고 있는 것은 다른 누군가도 고민하고 있을 확률이 크다.
위의 문제를 커뮤니티형 소셜 서비스와 현재 MZ세대가 주목하는
마이어-브릭스 유형지표(MBTI)를 결합하여 풀어내고자 한다.
같은 고민을 하는 사람들을 모으거나 혹은 이미 그 고민을 해결한 사람들에게 조언을 받을 수 있도록
고민의 주제를 분류하고 그 주제를 채널로 만들어 사람들이 고민이 있을 때 혼자 끙끙 앓지 않고
서로가 서로에게 도움을 주고 받을 수 있도록 할 것이다.
주요 기능
게시판 검색
게시판을 둘러보면서 각각의 사람들이 어떤 고민을 가지고 있는지, 주로 어떤 생각을 하는지 둘러볼 수 있다.
게시판을 각각의 관심사에 맞는 태그로 분류해서 자신이 관심있어하는 주제에 대한 이야기도 볼 수 있다.
게시글 보기
게시판에서 어떤 흥미로운 주제를 발견했을 경우, 게시글을 보고 글의 내용을 확인할 수 있다.
또한 단순하게 게시글을 보는 것에 그치지 않고, 등록한 사람의 MBTI를 확인할 수 있기 때문에 특정 MBTI를 가진 사람의 생각을 들여다보는 것과 같은 효과를 줄 수 있다.
댓글 보기 및 작성
게시글 아래에 달린 댓글들을 볼 수 있습니다. 이를 통해 게시글에 해당하는 주제에 대해 다른 MBTI들은 어떻게 생각을 하는지 알 수 있다. 또한 댓글을 작성함으로써 다른 사람들의 고민에 공감을 해주거나 해결을 해줄 수도 있다.
게시글 등록
단순히 게시글을 보는것에 그치지 않고 본인의 고민이나 공유하고 싶은 생각등 어떤 주제에 대해서도 게시글을 쓰는것이 가능하다. “내 남자친구 혹은 여자친구의 MBTI가 이러이러한데 화가났을때 어떻게 풀어줘야 할까?” 하는 고민글부터 “F들은 절대 끝까지 읽을 수 없는 글” 처럼 사람들의 흥미를 유발하는 글들까지 작성을 할 수가 있다.
협업방식
EoA(Essence of Agility) 기반 협업 🙆♂️
- Redundancy : 중복을 허용하기
- 서로가 맡은일이 완전히 분리되지 않고 어느 정도 공유되는 부분이 있으므로, 특정 인원의 부재가 프로젝트 진행에 주는 영향을 최소화한다.
- Detect early : 문제를 빠르게 감지하기
- 모르는 부분이나 해결하기 힘든 문제가 발생할 경우 적극적인 비동기적 ,동기적 소통을 통해 이를 해결한다.
- Feedback & adapt : 피드백을 받고 재조정하면서 나아가기
- 과업을 완수한 후 전체적으로 모여서 피드백을 얻고 수정해야할 부분들에 대해 논의한다. 이를 통해 치명적인 버그가 발생할 확률이 줄고, 팀원의 전체적인 성장이 가능하다.
- Receiving new info : 새로운 정보 얻기
- 적극적으로 문제를 해결하는 방식들이 무엇이 있는지 알아보고 이를 전체에게 공유한다. 이를 통해 생산성의 증대를 도모한다.
- Piecemeal & center first : 가장 중요한 것을 먼저 하되, 작은 단위로 쪼개서 진행하기
- 프로젝트에 가장 핵심적인 기능들을 우선적으로 개발하는 것을 목표로 움직인다. 그리고 그 기능들을 잘개 쪼개어 각각 분담힌다.
Workflow 🔄
기본적인 일과시간은 코어타임(오후 2시~7시). 필요시, 협의하에 시간을 따로 낸다.
- 체크인 : 맡은 과제에 대한 진행 상황 발표 및 피드백, 당일 과업 토의
- 일과중 : 당일 과업 진행, 모르거나 막히는 부분, 공유해야하는 부분 적극적으로 공유
- 체크아웃 : 당일 과업 진행 상황 공유 및 다음날 체크인까지 해야할 과제 토의 및 분배
진행 순서
처음에 https://github.com/prgrms-fe-devcourse/FEDC4_FTA_JEESEOK/issues 에 들어가셔서…
우측상단에 New Issue를 누릅니다
이슈 제목과 이슈 내용을 양식에 맞게 쓰고 우측에 Assignees에 본인을, Projects에 “지석팀 개발 일정”을 설정합니다.
그리고 본인이 작업할 작업의 성격을 Labels에서 골라줍니다.
다 끝났으면, 아래의 Submit new issue를 눌러줍니다.
그리고 우측 하단에 Development에 보시면 Create a branch가 있습니다. 눌러줍니다.
Branch source를 dev 브랜치로 설정해주고 Create branch를 눌러줍니다.
이러면 이슈가 발행이 된 것입니다. 이슈 옆에 #이슈번호 이렇게 뜹니다.
지석팀 칸반보드 https://github.com/orgs/prgrms-fe-devcourse/projects/23 에 들어가시면 발행하신 이슈가 왼쪽 Todo칸에 있습니다. 드래그 하셔서 In Progress 상태에 놓아줍니다.
이제 로컬 작업영역으로 가셔서 fetch→만들어진 브랜치로 checkout 하신 후에 본인이 하고자 하시는 작업을 해주시면 됩니다.
다 하신후에 커밋을 푸쉬 해주세요
깃허브로 돌아오셔서 Compare & merge 누르시고 base 브랜치는 dev, compare 브랜치는 이슈브랜치 로 설정해주신 다음, PR을 양식에 맞게 써줍니다. close #이슈번호 를 반드시 본문(Write)에 포함시켜 주셔야 합니다.
오른쪽에 Reviewers에는 본인을 제외한 지석팀 팀원들 (멘토님 포함?) Assignees에는 본인을 설정해줍니다.
그대로 Create pull request를 해줍니다.
이제 리뷰를 받고 PR을 완료한 다음 Merge pull request를 누르면 이슈가 자동으로 Closed 되게 됩니다. 칸반에서도 자동으로 Done 상태가됩니다.
작업하셨던 이슈 브랜치는 머지후에 삭제해주세요
와이어프레임
.png?table=block&id=bf967612-d51c-41c4-a10d-7187d4863ab3&cache=v2)
플로우 차트
.png?table=block&id=cc0445a4-2a5b-46a9-926d-0c5a764e90d9&cache=v2)
기술 스택 & 협업 툴
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
개발진행상황 및 역할분담
러프 와이어프레임 → 상세기획 → 기획서제출 → 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 |