Luce Vita (Client)

요약

여행을 예산과 함께 기록하고 관리하는 웹 애플리케이션

상세

0. 목차

1. 소개
2. 기술 스택
3. 느낀 점
4. 기능 (페이지 구성)
5. 아쉬웠던 부분
6. 어려웠던 부분, 해결한 과정

1. 소개

루체 비타(Luce Vita)

• 과거 다녀온 여행, 현재 진행중인 여행, 예정된 여행을 작성하고 관리하는 앱
• 예전에 다녀온 여행의 기록을 보며 추억할 수 있음
• 현재 진행중인 여행의 일정과 예산을 관리
• 나중에 있을 여행을 작성해 예정일을 확인하며 수정할 수 있음
• 진행중이거나 가장 가까운 예정의 여행은 3주짜리 캘린더를 통해 날짜 표시
• 각 여행은 여행 카드로 표현되며, 클릭해 해당 여행의 상세 정보 확인 가능
• 여행의 제목, 시작·종료 날짜, 국가, 장소, 숙소, 예산과 잔액, 태그 표시
• 날짜별 할 일과 각 예산 지정
• 회원가입을 통해 서비스 이용 가능

작업 기간

• 2024/12, 4주

인력 구성

• 4인 (FE 2인, BE 2인)
• FE 1(함희주): 홈 화면, 여행 목록 화면, 일정 상세 화면
• FE 2(이재성): 사용자 인증, 로그인 및 회원가입 화면, 여행 생성/수정 화면, 여행 상세 화면

링크 목록

• Luce Vita 앱
• Luce Vita 서버
• Luce Vita DB

2. 기술 스택

• TypeScript: 정적 타입을 도입해 안정성·가독성 향상
• React: 컴포넌트 기반으로 재사용 가능한 UI 구축
• React Router: 클라이언트 라우팅 관리
• TanStack Query: 서버 상태 관리, 데이터 동기화를 효율적으로 사용
• Axios: 간결한 HTTP 요청·응답 처리
• Vite: 빠른 HMR, 빌드 속도
• Tailwind CSS: 간단하고 일관된 디자인 시스템 구현
• Font Awesome: 다양한 아이콘 사용

3. 느낀 점

함희주

  처음 PM을 맡아 진행한 팀 프로젝트였다. 약 4주의 짧은 기간, 4명이라는 많지 않은 수에 팀원들도 팀 프로젝트 경험이 많지 않아 다들 고생이 많았다.
취업 서류 작성, 여기저기 면접에 참가하고 다들 감기, 독감에 한 번씩 걸리고 아팠어서 다같이 모이는 날이 많지 않았지만 각자 자신의 몫을 충분히 다 했기 때문에 성공적으로 프로젝트를 마무리할 수 있었다.
PM으로서 더 열심히 했어야 하는데 그러지 못해 아쉬웠다. 그래도 좋은 팀원들을 만나 다행이었다.
같이 FE 작업을 맡은 재성님이 정말 열심히 하시고 능력이 뛰어나셔서 많이 배울 수 있어 든든하고 감사했다.

이재성

  두 번째 팀 프로젝트 경험이었는데, 백엔드와 프론트엔드로 나누어 서로 맞춰가면서 개발하는 과정이 새로운 경험이라 흥미로웠다. 길지 않았던 프로젝트 수행
기간이 아쉬웠고, 테스트의 중요성을 많이 느끼게 된 마무리였다.

4. 기능 (페이지 구성)

1. 로그인 (Login)
2. 회원가입 (SignUp)
3. 홈 (Home)
4. 마이페이지 (MyPage)
5. 여행 목록 (Travels)
6. 여행 상세 (TraveDetail)
7. 여행 수정 (TravelEdit)
8. 일정 상세 (Todo)
9. 여행 생성 (TravelCreate)

1 로그인 (Login)

• 로그인 필수

• 이메일, 비밀번호를 입력해 로그인
• 소셜 로그인 버튼 (향후 구현 예정)

2 회원가입 (SignUp)

• 이메일, 비밀번호를 입력해 회원가입

• 유효한 이메일인지 인증코드를 해당 이메일로 전송

• 해당 이메일로 인증코드를 받아 이메일 인증 화면에 입력

3 홈 (Home)

• 홈 화면
• 탑 내비게이션 바
• 여행 일정 캘린더
  • 현재 일을 포함한 3주 이내의 여행이 있는지 확인
  • 현재 일은 하얀 배경으로 출력
  • 여행 기간에 포함되는 날짜는 녹색 배경으로 출력
• 현재 진행중인 여행 카드들
  • 여행 제목, 날짜, 국가, 장소, 숙소
  • 잔액, 태그
  • 현재 진행중이라는 것을 녹색 테두리로 출력
• 예정된 여행 카드들
  • 다가오는 여행 순으로 여행 카드 출력
• 우측 하단 버튼을 눌러 새로운 여행 생성
• 여행 카드 클릭 시, 여행 목록 페이지로 이동

4 마이페이지 (MyPage)

• 닉네임 출력(향후 구현 예정)
• 로그아웃 버튼
• 회원탈퇴 버튼

5 여행 목록 (Travels)

• 스크롤을 내릴 수록 과거의 여행 카드를 출력
• 예정된 여행 카드
  • 블러 처리를 해 현재 진행중인 여행 카드에 집중할 수 있게 함
• 현재 진행중인 여행 카드
  • 녹색 테두리로 출력
  • 실시간 잔액 계산
• 과거 여행 카드
  • 회색 배경으로 처리
  • 과거 작성했던 여행 기록이 남아 있어 향후 다른 여행에 참고할 수 있음
• 각 여행 카드 클릭 시, 해당 여행의 상세 페이지로 이동

6 여행 상세 (TravelDetail)

• 탑 내비게이션 바
  • 뒤로 가기, 여행 삭제 버튼
• 제목, 날짜, 국가 및 장소, 숙소 정보, 메모의 내용을 표시
• 총 예산과 소비 금액, 그리고 남은 금액을 계산하는 함수를 구현
• 여행 수정 버튼
  • 클릭 시, 여행 수정 화면으로 이동

• 해당 여행의 각 날짜에 대한 일정 정보
  • 각 일정 클릭 시, 해당 날짜의 일정 상세 페이지로 이동

7 여행 상세 수정 (TravelEdit)

• 제목, 날짜, 국가 선택, 여행 장소, 숙소 정보, 총 예산, 메모의 내용을 자유롭게 변경
• 저장하기 버튼 클릭 시, 변경사항을 저장하도록 서버에 요청

8 일정 상세 (Todo)

• 저장하기 버튼
  • 클릭 시, 작성된 일정 상세 저장
• 할 일 입력창
• 예산 입력 창
  • 해당 할 일에 대한 예산

• 만들기 버튼
  • 할 일, 예산이 묶인 요소 생성
• 삭제 버튼
  • 클릭 시 해당 할 일, 예산 요소 삭제

• 해당 날짜의 방금 작성한 일정 확인 가능

9 여행 생성 (TravelCreate)

• 우측 상단의 여행 추가 버튼
  • 클릭 시, 양식에 작성된 내용을 바탕으로 새로운 여행 생성
• 제목, 날짜, 국가 선택, 여행 장소, 숙소 주소, 총 예산, 메모

• 생성 후 여행 목록에서 확인 가능

• 생성한 해당 여행 클릭 시, 여행 상세화면으로 이동

• 여행 상세화면의 우측 상단 쓰레기통 모양의 버튼 클릭 시, 여행 삭제

5. 아쉬웠던 부분

• 개발 막바지에 추가된 MainWrapper 컴포넌트와 useContext() 훅, 그리고 useLocation() 훅을 활용하면 higher-order component를 구현하지 않고도 되돌아가기 기능을 구현할 수 있을 것임.
• 애플리케이션에서 사용하는 대부분의 API 요청에서 인증 토큰의 상태를 확인하기 때문에 관련 오류에 대한 예외처리 코드가 자주 반복되었던 부분.

6. 어려웠던 부분, 해결한 과정

• 첫 웹 서비스 프로젝트이자 처음으로 리액트를 활용해본 프로젝트였기 때문에 모든 과정이 어려웠고, 요구사항을 충족시킬 수 있는 기능들을 구현하기 위해서 TypeScript, React, 그리고 React Router 등의 공식 문서와 구글링, 그리고 테스트용 샘플 코드들을 끊임없이 작성해보면서 문제들을 해결하려고 노력하였습니다.