🦋 Calmiary - 나를 기록하는 시간

Calmiary 서비스 바로가기



"💭 오늘 하루 나를 힘들게 한 것은 무엇인가요?"
Calmiary는 Calm과 Diary를 합친 말로 고민을 기록하며 마음의 평화를 찾는 다이어리를 의미해요.
몰아치는 고민에 지친 현대인들을 위한 서비스로, 실제 고민의 대부분이 현실에서 벌어지는 않는다는 연구 결과를 바탕으로 기획했어요.
고민을 기록하고 인공지능 혹은 사람의 의견을 받고 지금 하고 있는 고민이 별 것 아니라는 것을 깨달으면 고민을 한시름 덜 수 있다는 아이디어에서 착안하여 여러분의 마음의 짐을 덜어드리고 싶어요.

📅 프로젝트 진행 과정

• 기획 기간 : 2024.10.22 ~ 2024.10.25
• 디자인 기간 : 2024.10.23 ~ 2024.10.27
• 개발 기간 : 2024.10.23 ~ 2024.11.06

✨ 멤버 소개

김민정	박덕인	정혜인	한규
FrontEnd	FrontEnd	FrontEnd	FrontEnd, BackEnd
고민 남기기	프로필	커뮤니티	메인, 다이어리

🛠 기술 스택

Config

Development

Front-End

Back-End

Architecture

🚀 기능 소개

랜딩 페이지 / 회원가입 및 로그인

랜딩 페이지	회원가입 및 로그인
	중복 유저 확인, 유효성 검사

메인 및 프로필 / 고민 남기기

메인 및 프로필	고민 남기기
유저 정보 수정, 무한 스크롤	고민 남기기 및 맞춤형 조언

다이어리 / 커뮤니티

다이어리	커뮤니티
게시물 공개 여부, 고민 덜어내기	무한스크롤, 좋아요, 댓글

---

📠 Convention

🤝 Branch Naming Convention

머릿말	설명
main	서비스 브랜치
develop	배포 전 작업 기준
feature	기능 단위 구현
hotfix	서비스 중 긴급 수정 건에 대한 처리
refactor	리팩토링

🤝 Commit Convention

머릿말	설명
feat	새로운 기능 추가
fix	버그 수정
design	CSS 등 사용자 UI 디자인 변경
!BREAKING CHANGE	커다란 API 변경의 경우
!HOTFIX	코드 포맷 변경, 세미 콜론 누락, 코드 수정이 없는 경우
refactor	프로덕션 코드 리팩토링업
comment	필요한 주석 추가 및 변경
docs	문서 수정
test	테스트 추가, 테스트 리팩토링(프로덕션 코드 변경 X)
setting	패키지 설치, 개발 설정
chore	빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우(프로덕션 코드 변경 X)
rename	파일 혹은 폴더명을 수정하거나 옮기는 작업만인 경우
remove	파일을 삭제하는 작업만 수행한 경우

Commit Convention Detail

• <타입>: <제목> - <이슈번호> 의 형식으로 제목을 아래 공백줄에 작성
• 제목은 50자 이내 / 변경사항이 "무엇"인지 명확히 작성 / 끝에 마침표 금지
• 예) feat: 로그인 기능 추가 - #2
• 본문(구체적인 내용)을 아랫줄에 작성
• 여러 줄의 메시지를 작성할 땐 "-"로 구분 (한 줄은 72자 이내)
• 제목과 본문은 한 줄 띄워 분리

🤝 Naming Convention

기본 네이밍 컨벤션

1. 컴포넌트는 PascalCase 사용
2. 폴더명은 camelCase 사용
3. 파일 명(컴포넌트 제외)은 camelCase 사용
4. 변수 및 함수는 camelCase 사용
5. 파라미터는 camelCase 사용
6. 상수는 BIG_SNAKE_CASE 사용
   

타입(Type) 컨벤션

1. prop 타입 interface 선언 시 → 컴포넌트명+PropTypes

// 예시
interface PostPagePropTypes {
		title: string | undefined;
		setContentWithoutTag: (content: string) => void;
}

const PostPage = (props: PostPagePropTypes) => {
		const {title,
		setContentWithoutTag
		...
}

스타일(style) 컨벤션

1. style 파일 분리하지 않음. 해당 컴포넌트 하단에 만들어서 사용 (styled-components)
2. 컴포넌트 네이밍 규칙 : Wrapper → Layout → Container → Box
3. 시멘틱 태그 생각하면서 개발
4. SVG 파일 사용시

이외의 추가적인 컨벤션

• 기본적으로 리액트 컴포넌트만 PascalCase를 사용
  • ex) PostPage.tsx
• 그 외에는 camelCase를 사용
  • ex) type, d.ts파일, ts파일: useClickOutside.ts