🖐️ 프로젝트 소개

매일매일 짧은 격언, 재치 있는 문구(에피그램)를 공유하고 기록하는 프로젝트

지원하는 브라우저는 Chrome, Edge, Firefox, Safari입니다.

날마다 에피그램 하루 한 번씩 새로운 에피그램(Epigram)을 작성하고, 다른 사람들과 함께 공유함으로써 일상 속 작은 영감을 주고받는 것을 목표로 합니다.

📅 서비스 소개
🔥 Epigram 팀의 경험
🔧 프로젝트 구조
🧑 팀원소개

📅 서비스 소개

🍽️ 다른 사람과 다양한 격언 공유

📢 감명깊게 본 글귀를 공유할 수 있습니다.
📢 창작한 글귀를 다른 사람과 공유할 수 있습니다.
📢 댓글을 달아서 다른 사람과 글귀에 대해 이야기할 수 있습니다.

😊 감정 선택 기반 차트

📢 매일매일 선택한 감정을 기반으로 월간 차트를 제공합니다.
📢 감정 차트를 보고 과거의 감정을 회고할 수 있습니다.

🚗 간편한 소셜 로그인

📢 구글 로그인과 카카오 로그인을 지원합니다.
📢 간편하게 로그인하여 센스있는 글귀를 공유해보세요!

⏬아래 링크를 클릭하시면 더 다양한 기능들을 만날 수 있습니다!⏬

⏩지금 Epigram 사용하러 가보기!⏪

🔥 Epigram 팀의 경험

📜 Epigram 팀의 이슈 관리

• Epigram 팀은 이슈 관리 도구로 Jira를 채택하여 개발했습니다.
• Github action과 연동하여 Github에서 이슈를 생성하면 Jira에도 이슈가 생성되며, PR을 통해 ISSUE를 Close하면 Jira와 Github의 이슈도 Close됩니다.

✏️ Epigram 팀의 기록

⏬아래 링크를 클릭하시면 Epigram을 어떻게 만들었는지 알 수 있습니다.⏬

⏩Epigram 팀의 Notion 구경하기⏪

🔧 프로젝트 구조

🏢 시스템 아키텍처

⚙️ API 흐름 도식화

📚 스토리북 정적 배포

⏬아래 링크를 클릭하시면 Epigram의 디자인 시스템을 확인할 수 있습니다.⏬

⏩Epigram 팀의 스토리북 구경하기⏪

💎 주요 기술 스택

기술 이름	선정 이유
	컴포넌트 기반 설계 방식인 리액트 라이브러리를 활용하여 SSR과 CSR를 혼합해서 사용하기 위해 선정한 프레임워크입니다.
	Props 타입 지정으로 인한 런타임 오류 감소, vscode 자동 완성 기능 등 타입 안정성을 통한 코드 품질 개선을 위해 선정했습니다.
	UI 상태와 서버 상태를 분리하고, api 데이터에 대한 Promise를 집약적으로 관리하기 위해 선정했습니다.
	전역 UI 상태를 관리하기 위해 선정했습니다. 현재 프로젝트에서는 모달의 상태를 zustand로 관리합니다.
	axios instance의 interceptor 기능을 통한 중복 코드 최소화 등을 위해 선정했습니다.
	폼의 상태를 집약적으로 관리하기 위해 선정했습니다.
	폼의 유효성 정의 및 타입 추출이 용이하고, API request 타입정의 및 safeParse()메소드를 통한 API 응답 데이터 타입 검증을 하기 위해 선정했습니다.
	유틸리티 기능을 선언형으로 작성함으로써 코드 가독성을 향상시키기 위해 선정했습니다.
	유틸리티 클래스 사용으로 클래스 네이밍 고민 감소, 디자인 시스템이 미흡 시 유연한 대응이 가능하기에 선정했습니다.
	Next.js와의 완벽한 통합 및 소규모 웹 애플리케이션에서 무료 플랜을 제공해주기 때문에 선정했습니다.
	FRAMER MOTION 기반 애니메이션 라이브러리를 사용함으로써 손 쉽게 애니메이션을 적용하고, 보다 풍부한 UX를 제공하기 위해 사용했습니다.
	단위 및 통합 테스트를 시행하기 위해 선정한 라이브러리입니다.
	UI 컴포넌트들을 시각화 문서로 관리하기 위해 선정한 라이브러리입니다.
	E2E 테스트를 빠르게 수행하고, 크로스 브라우징 및 디바이스 기기의 테스트를 자동화하기 위해 선정한 라이브러리입니다.

🧑 팀원 소개

김도균	박상석	송형진
정재형	최성락	최제원