Portfolio

🔥 중요 📖 규칙 🙋‍♂️ 역할분담 🚀 바로가기 ✏️ 기획 프로젝트 주제 A.K.A. FTA(Feeling Thinking Answer)개발 배경 및 중요성 개발 목표 유저 스토리 와이어프레임 플로우 차트 ⛑️ 개발 기술 스택 & 협업 툴 코드 컨벤션 작성 규칙 ESLint Prettier 진행 순서 Commit Message 예시 브랜치 전략 브랜치 명명 Github 템플릿 Router 주소 폴더 구조 📅 일정

🔥 중요

매일 스크럼

서로 싱크

장애물 제거(도와주기)

일정 관리

짧은 PR 단위로 빨리 병합

📖 규칙

스크럼 시간은 월~금 14:00

싱크를 맞추는 시간 → 프로젝트 기간중 코어타임

장애물 발생시 사소한 것도 슬랙에 공유

체크아웃시 상호 합의하에 코어타임 연장

🙋‍♂️ 역할분담

팀원	api	공통 컴포넌트	상세페이지 구현
김희석	Base, Like, Comment, Notification	Header, Input	Signup, 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

🚀 바로가기

🧠 브레인스토밍

🕋 깃허브

📋 칸반

🎨 디자인

✏️ 기획

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

MBTI의 판단기능 중 사고형(Thinking)과 감정형(Feeling)의 선호도 관점에 따른 고민상담 커뮤니티 서비스

🔭

부제 : 화성에서 온 F, 금성에서 온 T

개발 배경 및 중요성

전문 조사기관 ‘틸리언 프로’에 따르면, 대한민국 20~59세 연령대의 대부분이 고민을 갖고 있다고 한다.

하지만 대부분 이 고민을 쉽게 털어놓지 못한다. 고민을 아는 사람에게 이야기 했을 때, 나의 고민을 이해하지 못하고 싫어해서 그런 것일 수도 있고, 그 고민을 다른 누군가에게 말하는 것일 수도 발설할까봐 혹은 그것이 쪽팔릴까봐 걱정하는 것일 수도 있다. 이처럼 아는 사람에게 말하는 것이 리스크가 큰 것에 비해, 그에 대한 결과는 불확실하다. 그렇다고 이 고민을 계속 끙끙 앓고 있을 수는 없다.

우리가 개발하고자 하는 목표는 이러한 고민을 말하지 못해 혼자 끙끙 앓지 않고 아는 이에게 말하는 리스크를 줄이면서 고민을 해결할 수 있는 커뮤니티를 만드는 것이다. 보통 우리가 고민하고 있는 것은 다른 누군가도 고민하고 있을 확률이 크다.

위의 문제를 커뮤니티형 소셜 서비스와 현재 MZ세대가 주목하는 마이어-브릭스 유형지표(MBTI)를 결합하여 풀어내고자 한다.

같은 고민을 하는 사람들을 모으거나 혹은 이미 그 고민을 해결한 사람들에게 조언을 받을 수 있도록 고민의 주제를 분류하고 그 주제를 채널로 만들어 사람들이 고민이 있을 때 혼자 끙끙 앓지 않고 서로가 서로에게 도움을 주고 받을 수 있도록 할 것이다.

개발 목표

기본 요구 사항은 다음과 같다.

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

유저 스토리

로그인 전 게시판 페이지

사용자가 웹 애플리케이션에 접속한다.

게시판 페이지로 이동한다.

게시판 페이지에는 게시글 목록이 표시된다.

사용자는 태그를 클릭하여 게시글을 필터링하고 볼 수 있다.

로그인 및 회원가입

로그인하지 않은 경우, "로그인" 버튼을 볼 수 있다.

사용자가 "로그인" 버튼을 클릭하면 로그인 페이지로 이동한다.

로그인 페이지에서는 ID와 비밀번호를 입력하고 로그인할 수 있다.

회원가입을 원하는 경우, "회원가입" 버튼을 클릭하여 회원가입 페이지로 이동한다.

회원가입 페이지에서는 ID, 비밀번호, 닉네임, 그리고 MBTI 정보를 입력한다.

로그인 후 게시판 페이지

로그인에 성공하면, 사용자는 게시판 페이지로 이동한다.

게시판 페이지에는 게시글 목록이 표시된다.

사용자는 태그를 클릭하여 게시글을 필터링하고 볼 수 있다.

사용자는 게시판 페이지에서 “글 쓰기” 버튼을 볼 수 있다.

게시글 및 사용자 검색

게시판 페이지에서 검색 기능을 사용하여 게시글 또는 유저를 검색할 수 있다.

검색 결과에서 게시글을 클릭하면 해당 게시글 페이지로 이동한다.

검색 결과에서 유저를 클릭하면 해당 유저 정보 페이지로 이동한다.

게시글 페이지

게시판 페이지에서 게시글을 클릭하면 게시글 페이지로 이동한다.

게시글 페이지에서는 게시글 본문을 볼 수 있고, 댓글을 작성하거나 공감을 표시할 수 있다.

게시글에 달린 댓글을 클릭하면 해당 댓글을 작성한 유저정보 페이지로 이동한다.

해당 사용자에게 메시지를 작성할 수 있다.

게시글 작성

사용자는 게시판 페이지에서 "글 쓰기" 버튼을 클릭하여 게시글을 작성할 수 있다.

게시글 작성 페이지에서는 태그를 선택하고 게시글 본문을 작성한다.

사용자는 게시글을 공감할 수 있다.

유저 정보 페이지

검색 기능을 사용하여 나온 유저 목록에서 특정 유저를 클릭하여 유저 정보 페이지로 이동한다.

해당 유저의 프로필 이미지와 mbti를 확인할 수 있다.

해당 유저의 소개를 확인할 수 있다.

알림 페이지

사용자는 게시판 페이지에서 "알림" 버튼을 클릭하여 알림 페이지로 이동할 수 있다.

알림 페이지에서는 알림 목록을 확인하고 알림을 클릭하여 해당 게시글로 이동할 수 있다.

마이페이지

사용자는 게시판 페이지에서 "마이페이지" 버튼을 클릭하여 개인 정보 및 활동을 관리할 수 있는 페이지로 이동한다.

마이페이지에서는 개인 정보 수정, 작성한 게시글 목록 확인, 작성한 댓글 목록 확인, 그리고 로그아웃 기능을 제공한다.

개인 정보 수정 페이지에서는 자기소개, 닉네임, MBTI 정보를 수정하고 비밀번호를 변경할 수 있다.

로그아웃

로그인 한 사용자는 마이페이지에서 "로그아웃" 버튼을 클릭하여 로그아웃할 수 있다.

404 페이지

사용자가 잘못된 주소로 접근하면 404에러를 보여 준다.

와이어프레임

플로우 차트

⛑️ 개발

기술 스택 & 협업 툴

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

Prettier

진행 순서

처음에 https://github.com/prgrms-fe-devcourse/FEDC4_FTA_JEESEOK/issues 에 들어가셔서…

우측상단에 New Issue를 누릅니다

이슈 제목과 이슈 내용을 양식에 맞게 쓰고 우측에 Assignees에 본인을, Projects에 “지석팀 개발 일정”을 설정합니다.

그리고 본인이 작업할 작업의 성격을 Labels에서 골라줍니다.

다 끝났으면, 아래의 Submit new issue를 눌러줍니다.

그리고 우측 하단에 Development에 보시면 Create a branch가 있습니다. 눌러줍니다.

누르면 모달창이 뜨는데, 브랜치 이름을 양식에 맞게 적어주시고 그 아래의 Change branch source 를 눌러줍니다.

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 상태가됩니다.

작업하셨던 이슈 브랜치는 머지후에 삭제해주세요

Commit Message

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

예시

브랜치 전략

main: 운영환경 브랜치

dev: 개발환경 브랜치

feature: 파트별 기능 브랜치

브랜치 명명

feat/#이슈번호_기능명(길어지면 스네이크케이스)

ex) feat/#11_button_test

브랜치는 머지하면 삭제

Github 템플릿

Issue 템플릿

PR 템플릿

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`	알림 페이지

팀 프로젝트