[미니 프로젝트] 카드몽키 회고 🙈

Mudi·2023년 3월 3일
리액트미니프로젝트백엔드와의 협업와이어프레임카드몽키타입스크립트프론트엔드피그마협업
0

Toy Projects

목록 보기
4/4
post-thumbnail

🙊

프로젝트명 | Card Monkey
작업 기간 | 2023년 2월 13일 ~ 2월 24일
기술 스택 | React TypeScript Redux Axios StyledComponents Vite
배포 링크 | Card Monkey
코드 저장소 | 깃 허브
프로젝트 설명

- 패스트캠퍼스의 핀테크 미니 프로젝트로 진행된 백엔드 & 프론트엔드 협업 프로젝트입니다.
- 금융상품 중에서 카드를 상품으로 다루고, 추천해주는 서비스 입니다. (카드 고릴라 서비스 참고)
- 로그인을 하지 않으면 이용할 수 없습니다.
- 주된 기능으로는 로그인, 회원가입, 나의 카드(신청한 카드), 검색, 카드 추천, 관심상품이 있습니다.

🏁 User Flow


UserFlow는 사용자의 흐름을 유추해보며 진입부터 최종 목적 단계에 다다르기까지 어색하게 끊기는 부분은 없는지 확인하는데에 도움이 됩니다. 저희는 로그인/로그아웃 여부에 따라 라우터 처리를해주어서 그 부분도 UserFlow에 녹여냈습니다.

User Flow 관련 아티클

🎥 동작 시연

회원가입

회원가입은 총 5단계를 거쳐서 회원가입이 진행됩니다.

  1. 약관동의
  2. 이름
  3. 아이디 (중복확인)
  4. 비밀번호, 비밀번호 확인
  5. 관심혜택 3개 선택

로그인, 로그아웃

해당 서비스는 로그인 완료한 회원만 이용할 수 있는 서비스로, 로그아웃시에는 로그인 페이지와 회원가입 페이지만 이용할 수 있습니다.

메인페이지

메인페이지에서는 나의 카드 조회, 카드 랭킹 Top5, 몽키추천으로 이동, 친구에게 공유(링크 복사) 기능이 있습니다.

검색 기능

  • 검색창을 이용하여 카드 이름로 원하는 카드를 검색할 수 있습니다.
  • 태그 선택으로 보다 상세하게 원하는 카드를 찾을 수 있습니다.
  • 추천 카드사는 선택할수록 더 많은 결과를(합집합), 관심혜택은 선택할수록 적은 결과를(교집합) 반환합니다.
  • 모든 검색 결과에서 신용/체크 여부를 선택하여 필터링할 수 있습니다.

추천 기능

회원가입시에 선택한 3개의 관심 혜택을 기반으로 혜택에 해당하는 카드를 랜덤으로 하나씩 반환합니다. 따라서 새로고침시에 다른 결과가 나옵니다.

관심상품

  • 관심상품 페이지에서는 사용자가 카드 목록에서 하트 아이콘을 누르거나 카드 상세페이지에서 관심상품으로 추가한 카드를 보여줍니다.
  • 한 번 더 누르면 관심 해제가 되어 관심상품 목록에서 사라지게 됩니다.

상세페이지

  • 상세페이지에서는 카드의 혜택, 연회비, 전월실적 정보를 얻을 수 있고,
    카드 신청 버튼, 관심 상품 목록에 추가, 카드사로 이동하기 기능이 있습니다.
  • 상세페이지 아래에는 사용자에게 다른 카드를 추천해주는 기능이 있습니다.(몽키추천과 기능 동일)

마이페이지

내 신청 카드 조회

  • 마이페이지에서 내가 신청한 카드를 조회할 수 있습니다.
  • 신용/체크 여부를 선택하여 필터링할 수 있고, 카드 신청 취소도 가능합니다.

비밀번호 변경

혜택 변경

회원탈퇴

마이페이지의 회원정보 수정에서는 비밀번호 변경, 혜택변경, 회원 탈퇴 기능이 있습니다.

🔨 구현 내용

이번 프로젝트에서 저는 회원가입/탈퇴, 로그인, 혜택변경, 네비게이션바, UI디자인 역할을 맡았습니다.

아래는 프로젝트를 진행하면서 기억에 남기고 싶은 내용입니다.

🙊 회원가입, 회원탈퇴

단계별 회원가입

이번 프로젝트는 모바일 화면 사이즈로 개발하는 것이 필수 요구사항입니다.

사용자에게 많은 정보를 받아야하는 회원가입이 작은 한 페이지에서 이루어지면 그 과정이 길게 느껴질 것 같았고, 단계별로 구현하면 필요한 정보만 화면에 담아서 사용자가 집중력있게 회원가입을 진행할 것 같았습니다.

각 페이지에는 현재 어디까지 도달했는지를 알 수 있도록 프로그래스바를 추가해주었습니다.

유효성 검사

useForm Hook의 심플한 코드 구조가 마음에 들어 사용해 보려고 했지만 단계별 회원가입구조에서 사용하기가 어려워서 컴포넌트별로 유효성 검사를 진행했습니다.

다음 단계로 넘어가는 버튼은 입력 내용이 아래 조건을 만족할 경우에만 활성화 되도록했습니다.

  • 약관동의 : 모두 선택
  • 이름 : 2~6자 한글
  • 아이디 : 5~12자 영문, 숫자 조합 + 아이디 중복확인
  • 비밀번호 : 8~12자 영문, 숫자 조합 + 비밀번호 확인 일치
  • 관심혜택 : 관심혜택 3개 선택

회원정보는 Redux로 상태관리

'다음' 버튼을 누를 때 마다 입력 정보를 리덕스에 저장하고, 최종단계에서 차곡 차곡 쌓인 회원 정보가 서버로 전송되어 회원가입이 완료됩니다. 전송된 다음 리덕스 state는 초기화됩니다.

🙊 로그인

로그인에 성공하면 유저 정보와 토큰이 반환되는데 유저 정보는 로컬스토리지에, 토큰은 쿠키에 저장합니다.

토큰은 30분이 지나면 만료가 되고 만료된 토큰은 쿠키에서 삭제됩니다.
(쿠키 최대 저장시간은 1시간으로 설정하였습니다.)


🙄 : 작동 흐름이 어떻게 되나요?

  • 루트 컴포넌트에서 useEffect가 토큰이 필요한 api를 호출하여 토큰이 유효한지 확인합니다. 즉, 화면이 변경될 때 마다 auth check가 이루어집니다.
  • auth check에 실패하면 쿠키를 삭제하고, 로그인 페이지로 이동합니다.
  • 반대로 auth check에 통과된 상태일 때, 로그인 페이지나 회원가입 페이지로 이동하면 메인페이지로 이동하게됩니다.
  • 로그아웃을 하면 토큰 만료 api를 호출하고 쿠키도 삭제됩니다.

    const authCheck = (pathname: string, navigate: any) => {
const token = getCookie();
axios
  .get(VITE_URL + `토큰이 필요한 api url`, {
    headers: { Authorization: `Bearer ${token}` },
  })
  .then((result) => {
    if (pathname === "/login" || pathname === "/signup") {
      navigate(`/`);
    }
  })
  .catch((error) => {
    removeCookie();
    if (pathname === `/signup`) {
      return;
    }
    navigate(`/login`);
  });
};

이렇게 팀원들과 함께 머리를 모아 로그인을 구현해보았습니다. 이번 미니프로젝트를 기회로 인증 파트를 공부해 보고자 욕심을 내서 지원했는데 여전히 조금 더 공부해야할 것 같습니다. (토큰 처리와 로그인 여부에 따른 라우터 처리) 😓

🙊 UI 디자인

훌륭한 실력은 아니지만(강조) 우리 팀이 개발에 집중할 수 있도록 UI 디자인을 해보았습니다.

이번 프로젝트에서 은근 욕심을 가진 부분인데(ㅋㅋㅋ) 아무도 기대하지 않은 부분이어서 오히려 자발적으로 재밌게 작업했습니다.

'기능먼저 구현하고, 스타일은 나중에'

'스타일 작업이 가장 머리 아프다'

주위에 이렇게 생각하는 동기들이 많았고 위 말에 저도 동의합니다. 그러나 되도록 일관된 디자인의 프로젝트를 만들고 싶었고, 그렇다고 나중에 CSS를 따로 만지는것도 팀원들에게 실례인것 같아 본격적인 개발전에 UI디자인을 해보기로했습니다.

🤍 팀 회고 시간

프로젝트가 마무리되고 팀원들과 함께 프로젝트를 회고하는 시간을 가졌습니다.
저희 모두 BE/FE 협업이 거의 처음이었는데 서로의 파트 내용을 이해하느라 힘들었지만 BE/FE간의 소통이 잘되어서 좋았다는 의견이 있었습니다.

좋았던 점

💬 기능정의에 대한 충분한 대화

협업 시작부터 BE/FE 함께 모여 기능정의에 대해 충분한 대화를 가졌고, 백엔드분들이 mockserver 세팅을 하는동안 프론트엔드팀은 기능정의된 내용을 바탕으로 1차 와이어프레임을 그렸습니다.
1차 와이어프레임에 백엔드팀은 궁금한 점 질문을 남겼고 프엔팀이 답을 하면서 디테일한 기능정의가 이루어졌습니다. 이 과정 덕분에 개발 단계에서 큰 차질없이 잘 진행됐던것 같습니다. 😄👍

👬 화기애애한 분위기

프로젝트 전반적으로 저희 팀 분위기는 매우 화기애애했습니다. 데이터 수정 요청도, 틀린 부분에 대한 지적도, 구현되지 않은 부분에 대한 요청도 모두 부드럽게 대화가 오고갔던것 같습니다.

멘토님도 이렇게 좋은 분위기 팀을 만난건 축복이고 이번 프로젝트로 서로를 배려하는 화법을 배운 경험이 되어서 좋다고 피드백을 주셨습니다. 커뮤니케이션에 능통하고 둥글 둥글한 개발자가 되기위해서 더 노력해야겠습니다.


(ㅋㅋ 전체 프로젝트 회고시간에 활발한 소통을했다구 우리 대화 내용이 박제되어서 칭찬도 받았습니다! 야호 😋)

더 노력할 점

다음은 이번 프로젝트 하면서 느꼈던 개인적으로 노력할 점도 있었습니다. (많음)

💦 코드 재사용을 고려하자

아직 코드를 짜는 스킬이 부족해서인지 다소 하드코딩하는 부분이 많았던 것 같습니다. 팀원들과 함께 사용할 수 있는 부분이 있을지와 그리고 제 코드 안에서 재사용을 고려하면서 코드를 짜야할것 같다고 느꼈습니다.

😭 아직도 낯선 API 호출...

아직도 API 관련 초기세팅이나 Fetch API에 대한 지식이 부족한것 같습니다. 팀원들의 코드를 많이 참고하고 이해를 하려고 노력해야했습니다. 시간을 내서 혼자 세팅해보는 시간을 가져야겠습니다.

🥊 타입스크립트 에러와의 싸움

타입스크립트를 적용한 프로젝트였는데 충분한 학습이 안되어서 에러와 많이 싸워야했습니다. 타입스크립트 많이 공부해야겠습니다!!!

👿 에러 핸들링에 신경 많이 쓰기

멘토님의 피드백으로 에러핸들링에 신경을 잘 써서 좋았다는 내용이 있었습니다.
하지만.. 내 속마음

'저는 따로.. 에러핸들링에 신경을 쓴적이 없는데요..?'

저는 사실 제가 에러를 의식하며 코드를 짜지않았던것 같았습니다.(반성) 다음에는 어떤 에러가 생겨날지, 어떻게 예외처리를 해줄지에 더 고민하며 해야겠습니다.

이렇게 몇 주간의 프로젝트가 끝이 났습니다! 좋은 팀원들을 만나 배우는 것이 많았던 감사하고 값진 시간이었습니다.

저의 부족한 부분에 더 신경써서 앞으로 만날 팀원들에게 힘이 되는 개발자가 되고싶습니당. ❤️

profile
Mudi
이전 포스트

🎬 영화검색 사이트 'Cinema Box'

0개의 댓글