- 배포 URL : https://mungnote.vercel.app/
- test ID : [email protected]
- test PW : 123qwe!@#
멍멍일지는 반려견 보호자들이 사랑스러운 반려견에게 개인 맞춤형 최적의 일상 루틴을 제공하고, 다른 보호자들과 유용한 정보와 경험을 공유하며 궁금증을 해소할 수 있는 반려동물 관리 플랫폼입니다.
멍멍일지는 반려견의 개별적인 특성을 고려한 루틴 추천과 보호자 간의 활발한 소통을 통해 더욱 건강하고 행복한 반려 생활을 돕고자 합니다.
2025.06.26(목) ~ 07.31(목)
- Next.js v15 (App Router)
- TailwindCSS
- TanStack Query
- Zustand
| 박정수 | 권유정 | 김태연 | 이민지 |
|---|---|---|---|
 |
 |
 |
 |
| @run3go | @best106yj | @COMPOSEDKIM | @mjlee38 |
📦src
┣ 📂api # API 함수
┣ 📂app # Next.js의 라우트 구조를 담당하는 디렉토리 (pages 역할)
┣ 📂assets # 정적 리소스 모음
┃ ┣ 📂data # JSON 등 데이터 파일
┃ ┣ 📂images # 이미지 리소스
┃ ┗ 📂styles # 스타일 파일
┣ 📂components # UI 컴포넌트 모음
┃ ┣ 📂common # 재사용 가능한 공통 UI 컴포넌트 (Button, Modal 등)
┃ ┣ 📂... # 기능별 컴포넌트
┣ 📂lib # 라이브러리성 코드
┃ ┣ 📂hooks # 커스텀 훅
┃ ┗ 📂utils # 유틸 함수
┣ 📂providers # 여러 provider를 모아 루트에 주입
┣ 📂stores # 전역 상태관리
┗ 📂types # 타입 정의
| 브랜치명 | 설명 | 예시1 | 예시2 |
|---|---|---|---|
| main | 최종 배포 | ||
| dev | 개발 과정 통합 | ||
| feature | 기능 구현 | feature/login | feature/dashboard |
| style | 퍼블리싱/스타일 | style/header | style/profile |
| 😃 | 제목 | 내용 |
|---|---|---|
| ✨ | Feat: | New Feature (새로운 기능 추가) |
| 🗑 | Remove: | Remove Feature (기능 삭제) |
| 🔄 | Change: | Change Logic (로직 변경) |
| 🐛 | Fix: | Bug Fix (버그 수정) |
| ♻️ | Refactor: | Refactor (리팩토링) |
| 📝 | Docs: | Documentation (문서 수정, README.md) |
| 🚀 | Perform: | Performance (성능 개선) |
| ✅ | Test: | Test (테스트 코드 추가/수정) |
| 💄 | Style: | Style (스타일링) |
| 🔧 | Chore: | Chore (잡무나 유지보수 작업) |
| 📦️ | Package: | Package(패키지 추가/수정) |
- 반려견 정보 조회
- 선택한 반려견의 생활 기록 데이터를
d3.js라이브러리로 시각화 Tanstack Query를 통한 데이터 캐싱 및prefetch로 사용자 경험 향상- 몸무게/수면 시간 카드를 뒤집어(
framerMotion) 상세 수치 리스트를 조회 - 산책 기록 막대 그래프에 hover할 경우, 툴팁으로 수치 조회 가능
- 데스크탑~모바일까지 완전한 반응형 UI 구현
- 오늘의 할 일 카드를 통해 todo 로직 구현
- 유저 프로필
- api를 통해 닉네임 중복 확인 후, 중복되는 닉네임이 없을 경우 수정 가능
- 현재 비밀번호 확인 후, 새로운 비밀번호로 변경
- 프로필 이미지 변경
- 반려견 프로필
react-hook-form을 활용한 반려견 등록/수정/삭제- 반려견 등록/수정 시
zod를 통한 검증
- 백신
- 반려견의 백신 접종 일자를 등록
- 백신 종류의 따른 입력값 제한 및 검증
Tanstack Query의 isPending을 통한 api 중복 호출 방지
- 게시글
- 해당 유저가 작성한 게시글 조회
- 마이 페이지일 경우, "댓글을 작선한 글/좋아요한 글"까지 표시
Tanstack Query를 통한 무한 스크롤 구현- 조회수/인기/최신순 필터링
- 게시글 로딩 시, 스켈레톤 UI 구현
open-router API를 활용해 다중 LLM 모델 활용
- 사용자의 입력을 받아 자연어를 JSON 객체 형태로 Parsing
- 파싱된 데이터를 통해 관련된 API를 호출
- API에서 반환된 데이터를 LLM을 통해 재가공 후 사용자에게 반환
- 강아지 프로필이 등록되어 있지 않을 경우, 강아지 프로필 등록 화면 표시
- 상단 화살표 버튼을 통한 월 단위 이동
- 캘린더에서 날짜별 일정 확인 가능, 일정이 3개 이상일 경우 +more 버튼 표시
- 날짜 클릭 시
- 일정이 없으면 일정 등록 모달 표시
- 일정이 있으면 일정 목록 모달 표시
- 일정 목록 모달에서 일정 수정/삭제 및 해당 날짜 일정 추가 가능
- 반복 일정 수정/삭제 시 적용 범위(해당 일정만 / 반복 일정 전체) 선택
- 일정 등록 시 강아지 선택 및 반복 주기/종료 기간 설정 가능
- 일정 등록/수정/삭제 시 Toast 알림 표시
- 별도의 관리자 로그인 페이지를 통해 접근
- 대시보드
- 전체 회원 수 확인
- 최근 5개월/5년간 신규 가입/탈퇴 회원 추이 및 게시글 작성 추이 막대 그래프 시각화 (d3.js)
- 막대 그래프 hover 시 해당 시점의 회원 수/게시글 수 툴팁 표시
- 회원관리 / 신고내역 탭 공통 기능
- 검색 기능 지원
- 컬럼 헤더 클릭 시 오름차순/내림차순 정렬
- 페이지당 10개 데이터 표시, 5페이지 단위 그룹 이동 가능
- 회원관리 탭
- 회원 상태별 필터링 지원
- 회원 정보 확인 가능
- 정지된 회원의 경우 상태 활성화 버튼을 통해 활성 상태로 변경 가능
- 신고내역 탭
- 처리 여부별 필터링 지원
- 신고 내역 확인 및 신고된 게시물로 이동 가능
- 신고 처리(제재/철회) 시 사유 입력 필수
- 제재 시: 제재 기간 및 사유 입력
- 철회 시: 철회 사유 입력
- 처리 완료된 내역 클릭 시 관리자가 작성한 처리 사유 확인 가능
- 로컬 로그인
- 로그인 성공 시 메인 페이지로 이동
- 비밀번호 입력창 우측 버튼을 통해 비밀번호 보이기/숨기기 전환 가능
- 소셜 로그인
- 카카오 및 구글 로그인 지원
- 소셜 로그인 성공 시, callback 페이지로 이동하며 유저 정보를 받아온 후 메인 페이지로 이동
- 소셜 로그인 실패 시, 로그인 페이지로 이동되며 Query String의 에러 메시지를 Toast로 표시
- 각 입력 필드는 blur 이후부터 onChange 이벤트로 유효성 검사 수행
- 다음 조건이 모두 충족되면 회원가입 버튼 활성화
- 유효성 검사 통과
- 이메일 인증 완료: 이메일 발송 후, 3분 이내 인증번호 입력 → 일치 시 인증 완료
- 닉네임 중복 확인 완료: 입력한 닉네임이 기존에 존재하지 않을 경우 통과
- 작성 글에 대한 좋아요 및 댓글, 신고 결과, 신고 당한 내역, 다가오는 일정에 대한 알림 제공
- 게시글 관련 알림 클릭 시 해당 글로 이동, 일정 알림 클릭 시 일정 페이지로 이동
- 알림 삭제 및 읽기 처리 시, 낙관적 업데이트 적용으로 UX 향상
- 일정 알림/서비스 알림을 선택적으로 수신 설정 가능
- 비로그인 유저는 게시글 및 댓글 열람만 가능
useInfiniteQuery를 활용한 무한 스크롤 구현- 프로필 클릭 시 해당 유저 프로필로 이동, 신고 기능 제공
- 정렬 및 검색 기능 제공
- 정렬: 최신순/좋아요순/조회수순
- 검색: 제목+내용/제목/내용/작성자
- 게시글 작성/수정/삭제
- 이미지 최대 5장까지 업로드 가능
- 여러 장 업로드 시 Swiper를 이용한 UX 개선
- 댓글 작성/수정/삭제
- 낙관적 업데이트 적용으로 UX 개선
- 다른 유저의 게시글 및 댓글에 대해 신고 가능
- 디자인
- 퍼블리싱
- 랜딩 페이지
- 기능구현
- 생활 기록
| 로그인 | 대시보드 | 일정 관리 |
|---|---|---|
 |
 |
 |
| 멍멍일지 | 커뮤니티 | 멍초보 가이드 |
|---|---|---|
 |
 |
 |
| 프로필 | 관리자 페이지 |
|---|---|
 |
 |