KB It's Your Life 온라인 가계부 프로젝트

프로젝트 기간 : 2024.06.10 ~ 2024.06.14

---

프로젝트 개요

---

포르젝트 개요 추가

프로젝트 요구사항

---

분류	요구사항 명	구분	요구사항 설명	중요도	구현
기능 요구사항	수입 / 지출 기록	기능	수입/지출을 기록 (날짜,금액,카테고리 정보 포함)	상	o
	거래 내역 조회	기능	거래된 내역 조회 및 검색/필터링	상	o
	월별 재정 요약	기능	월별 수입,지출,총합을 시각적으로 표현	중	o
	데이터 저장	기능	입력한 데이터 저장	상	o
디자인 요구사항	반응형 디자인	기능	화면 크기에 따라 레이아웃 자동으로 조정	상	o
	사용자 인터페이스	비기능	UX를 고려한 디자인 제공	중	o
기술적 요구사항	프론트 엔드 구현	비기능	사용자와의 빠른 상호작용	상	o
	상태 관리	기능	데이터 동기화 문제 해결 및 일관성 유지	상	o

프로젝트 사용 기술 스택 (Vue)

---

• vite project
• Option API
• vue-router
• vue axios
• components
• figma
• json-server (서버 역할)

협업 규칙

---

1. 모듈 설치

   1. npm init
   2. npm i vue-router
   3. npm i axios
   4. npm i json-server
   5. npm i sweetalert2 - 로그인 시 alert 창 관련
   6. Google Charts (CDN) - 구글 차트 생성

   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"/>

2. 코드 컨벤션

   1. 변수명 : 카멜 케이스 사용
   2. 함수명 : (동사+명사) 형태로 구성
   3. 괄호 규칙 : ( 중괄호 앞 공백 1개 )
   4. 들여쓰기 : 깊이 4로 제한
   5. 프로미스 사용 지양 : await /async 비동기 함수 사용
   6. 함수 파라미터 개수 제한 (최대 3개)
   7. 약어 : 사용 자제
   8. else if 사용 자제
   9. arrow function 사용 자제

3. 깃 브랜치 & 커밋 컨벤션 a. Git flow 전략 사용 (참고 https://techblog.woowahan.com/2553/)

   • master (main): 바로 product로 release(배포)할 수 있는 브랜치
   • dev (develop): product로 release할 준비가 된 가장 안정적인 브랜치로 개발이 완료된 상태라면 master 브랜치로 merge
   • feature: 새로운 기능을 추가할 때 사용하는 브랜치로 dev 브랜치에서 분기하여 진행되며, 개발이 완료된 기능은 dev 브랜치로 merge
     • 브랜치명 컨벤션 : feature-{pageName}

   b. 커밋 컨벤션 참고 (https://overcome-the-limits.tistory.com/6)

4. json-server 파일명 통일 : account_book.json

화면 설계

---

로그인 (왼쪽 하단 사진)

웹 접속 시 첫 화면이며 로그인 페이지. 성공 시 메인 페이지로 이동

사용자가 등록한 아이디와 비밀번호를 입력해 로그인 시도한다

아이디 찾기 (왼쪽 상단 사진)

사용자가 아이디를 잊어버렸을 때 사용하는 페이지

사용자의 이름과 이메일을 입력하여 아이디를 검색

검색 결과는 alert() 창으로 알려줌

비밀번호 찾기 (오른쪽 상단 사진)

사용자가 비밀번호를 잊어버렸을 때 사용하는 페이지

사용자의 아이디와 이름, 이메일을 입력하여 아이디를 검색

검색 결과는 alert() 창으로 알려줌

회원가입 (오른쪽 하단)

사용자가 회원등록을 위해 사용하는 페이지

아이디를 입력하고 중복 확인을 하며 비밀번호, 이름, 이메일을 입력하여 회원 등록을 함

등록 완료 시 로그인 페이지로 이동

메인 (왼쪽 상단)

로그인 성공 시 첫 화면이며 사용자의 전체적인 요약을 확인할 수 있는 페이지

• 헤더

메뉴 on/off 버튼, 로고, 프로필 구성

• 사이드바

현재 지갑상태와, 거래내역, 공지사항 구성

• 바디

월간 인출, 순수익, 수입, 최근 5개 거래 내역 구성

프로필 수정 (오른쪽 상단)

헤더 > 프로필 > 프로필 수정으로 이동하며 사용자의 정보를 수정할 수 있는 페이지

거래내역 (왼쪽 하단)

사용자의 거래 내역을 확인할 수 있는 페이지

기간, 카테고리, 수입/지출 필터링하여 볼 수 있음

상세페이지 (오른쪽 하단)

거래내역 페이지의 테이블을 클릭하여 이동하여 상세한 내용을 확인

공지사항

공지사항을 확인 할 수 있는 페이지

공지사항 페이지의 테이블을 클릭하여 이동하여 상세한 내용을 확인

프로젝트 구성원 및 역할

---

이영환 : 팀장 ( GIT 및 발표자료 , 스크럼 주관 )

• 프로젝트 아키텍처 설계
• 거래내역 상세 컴포넌트
• Git 병합 및 관리
• 라우터 구현

고재성 : 팀원 (컴포넌트 담당)

• 메인 화면 레이아웃
• 가계부 추가 컴포넌트 (토글)
• 요약 차트 컴포넌트

서나연 : 팀원 (컴포넌트 담당)

• 로그인 관련 컴포넌트
• 회원관리 컴포넌트 (프로필수정/회원가입)
• 공지사항 관련 컴포넌트
• 각 컴포넌트 뷰 작성

황근원 : 팀원 (UI / UX 담당)

• 거래내역 리스트 ( 날짜/카테고리/타입별 필터링)
• 페이지 이동 컴포넌트
• 전체적인 CSS 총괄

고재성

• 문제점
  • 협업을 하면서 코드의 중복에 따른 파일 통합의 어려움 문제가 있었습니다.
  • Vue를 사용하면서 초기 컴포넌트 구조와 상태 관리 패턴에 대한 이해부족이 있었습니다.
• 느낀점
  • 지속적인 소통을 통해 프로젝트의 기획부터 구현까지 진행하며, 경험이 되었습니다.
  • Git을 이용한 협업에서 충돌을 최소화하기 위한 지속적인 통합의 중요성에 대해 알게 되었습니다.