🥉 Marrymo (모바일 청첩장 제작 및 축의금 내역 문서화 서비스)

SSAFY 10기 특화 프로젝트(핀테크) 4반 3위 ✌️ 팀 했다치고 ✌️
(2024.02.26 ~ 2024.04.04)

📔 목차 📔

1️⃣ 프로젝트 소개
2️⃣ 개발 환경
3️⃣ 기술을 채택한 이유
4️⃣ 브랜치 전략
5️⃣ 기능별 페이지
6️⃣ 핀테크 프로젝트 특징 기술 소개
7️⃣ 트러블 슈팅
8️⃣ 설계 문서
9️⃣ 팀원 소개 및 역할

1. 프로젝트 소개

💍 Overview 💍

"결혼 준비 생각하면 머리 아프신가요? 걱정마세요. 저희 Marrymo가 도와드립니다!"

안녕하세요. 결혼 준비를 간편하고 편리하게 만들어줄 모바일 청첩장 제작 및 축의금 송금 서비스를 제공하는 marrymo입니다.

예비 부부들은 marrymo를 통하여 모바일 청첩장을 제작해볼 수 있고 정산된 축의금은 marrymo에서 등록한 계좌로 받아볼 수 있습니다. 또한 정산된 축의금 내역 정보를 메일을 통해 엑셀로 받아 보실 수 있습니다.

2. 개발 환경

📚 Tech Stack 📚

Backend

• common
  
• marrymo
  
• bank
  

Frontend

Infra(CI/CD)

DB

• RDBMS
  
• NO SQL
  

Management Tool

UI/UX

IDE

3. 기술을 채택한 이유

Backend

• Spring boot
  

  1. 스프링 부트는 내장된 서버를 제공하여 별도의 서버 설정 없이 애플리케이션 실행 가능
  2. 3rd party 라이브러리를 사용하여 starter라는 묶음 의존성 라이브러리 패키지를 이용 따라서 maven/gradle에서 버전 관리를 하여 별도의 버전 관리가 필요 없고 간편하게 의존성 지정 가능
  3. 애플리케이션의 상태 모니터링, 로깅, 보안 설정 등 운영에 필요한 기능들을 제공 이를 통해 애플리케이션 운영과 관리가 편리해지고 안정성이 향상

• Spring Data JPA(JPA)
  

  1. SQL 중심적인 개발에서 객체 중심적인 개발이 가능
  2. 상속 / 연관 관계 / 객체-RDB 패러다임 불일치를 해결

Frontend

• next13 fetch
  ssr을 포함한 ssg를 사용할 수 있는 함수들이 next13 기준으로 fetch 함수 안에 내장 되었기 때문에, fetch 함수를 씀으로써 ssg를 사용하여 렌더링 시간을 줄이고, SEO도 향상되는 효과를 가짐
• zustand
  다른 상태관리 라이브러리에 비해 모듈 크기가 작고, 속도고 빨라 프론트엔드에서 가장 중요한 사용자 화면 렌더링 시간을 줄임
• Typescript
  타입을 지정함으로써 타입 추론에 의한 정확한 데이터 전달이 가능하며 객체 접근에 대한 정확성을 가짐

4. 브랜치 전략

📌 Deploy 브랜치에서 E2E 테스트 수행
📌 Deploy의 하위 브랜치 dep/FE와 dep/BE에서 CI/CD 수행

marrymo

bank

5. 기능별 페이지

부부

카카오 로그인 완료

예비 부부가 카카오 로그인을 통해 로그인에 성공 했을 경우 모바일 청첩장 정보를 등록 했을 때는 모바일 청첩장을 보여주고
모바일 청첩장 정보를 등록 하지 않았을 때는 모바일 청첩장 정보를 등록할 수 있도록 해당 페이지로 이동 시킴
청첩장 정보 등록 시 축의금 정산 내역을 메일로 수신 받기 위해 메일 인증을 해야 함

청첩장 정보를 등록하지 않았을 경우
자세히 보기

청첩장 정보를 등록 했을 경우

위시리스트 검색 및 등록

예비 부부는 네이버 검색 API를 통해서 위시 리스트를 검색 할 수 있고 펀딩 받고 싶은 위시 리스트 등록 가능

위시리스트 검색 및 등록 화면

위시리스트 상세 조회

예비 부부는 등록한 위시리스트 상세 정보를 조회 가능(위시 아이템 제품명, 현재까지 모인 펀딩 금액, 모금 마감일, 펀딩 인원수)

위시리스트 상세 조회 화면

축의금 내역 조회

예비 부부는 하객들로부터 받은 축의금 내역을 조회 가능

축의금 내역 조회 화면

축의금 정산 내역 메일로 수신

예비 부부는 모바일 청첩장을 최종 발급한 바로 다음 날 새벽 3시에 인증한 메일로 축의금 정산 내역을 엑셀 파일로 수신 받음

축의금 정산 내역 메일로 수신

하객

모바일 청첩장 조회

하객은 예비 부부가 보낸 링크를 통해 로그인 없이 모바일 청첩장을 조회할 수 있음

모바일 청첩장 조회 화면

위시 리스트 펀딩

하객은 예비 부부가 등록 해놓은 위시 리스트 펀딩 가능

위시리스트 펀딩 화면

축의금 송금

하객은 신랑, 신부 중 누구에게 축의금을 송금할지 고른 후 카카오 페이를 통하여 송금 가능

축의금 송금 화면

6. 핀테크 프로젝트 특징 기술 소개

계좌 등록

오픈 뱅킹 API : 사용자 인증 API -> 토큰 발급 API -> 등록 계좌 조회 API

송금

카카오 페이 단건 결제 API

7. 트러블 슈팅

Backend

Open Banking API(토큰 발급 API) Web Client를 통해 호출

• 문제 원인
  request body에 Map이 아닌 객체의 형태로 보내려고 해서 발생한 문제

• 해결 방법
  토큰 발급 API 요청 Content-Type이 application/x-www-form-urlencoded; 이기 때문에 텍스트 데이터를 key-value 쌍으로 인코딩 함.
  특수한 상황의 경우 키가 중복될 수 있고 그에 따라 여러 값이 하나의 키에 매핑될 수 있음
  따라서 하나의 키에 여러 개의 값을 가질 수 있는 MultiValueMap Collection을 채택하여 보내야 했음

public MultiValueMap<String, String> toMultiValueMap() {
        MultiValueMap<String, String> parameters = new LinkedMultiValueMap<>();

        parameters.add("code", this.code);
        parameters.add("client_id", this.client_id);
        parameters.add("client_secret", this.client_secret);
        parameters.add("redirect_uri", this.redirect_uri);
        parameters.add("grant_type", this.grant_type);

        return parameters;
    }

return openBankingWebClient
                .post()
                .uri("/oauth/2.0/token")
                .headers(httpHeaders -> httpHeaders.putAll(headers))
                .body(BodyInserters.fromFormData(openBankingTokenApiRequest.toMultiValueMap()))
                .retrieve()
                .bodyToMono(OpenBankingTokenApiResponse.class)
                .block();

Frontend

next.js CSR에서 CORS 에러 처리

• 문제 원인
  next의 app router는 기본적으로 서버 컴포넌트로 구성되어 있어 SSR 페이지에서만 api 호출하거나 SSG로 도메인이 같기 때문에 CORS 에러 날 일이 없음
  하지만 use client를 쓴 CSR 페이지에서는 localhost로 요청이 가기 때문에 CORS 에러가 날 수 있음
• 해결 방법
  proxy 우회 방법을 쓴 것처럼 next.config.js에서 rewrites()를 이용해 요청 url을 우회할 수 있음
  • source : 클라이언트에서의 요청 경로
  • destination : 해당 요청이 재작성될 목적지 URL 지정

    async rewrites() {
    return [
      {
        source: '/users',
        destination: 'https://spring.marrymo.site/users',
      },
  
  

카카오 맵이 next.js 화면에 띄워지지 않는 에러 처리(window is not defined)

• 문제 원인
  app router 내에 있는 컴포넌트는 기본 서버 컴포넌트로, SSR을 디폴트로 하기 때문에 서버에서 렌더링 하는 시점에서는 브라우저 안의 모든 요소들이 소속된 객체인 window 전역 객체에 대한 접근이 불가함
• 해결 방법
  dynamic 사용 -> import() 안에 원하는 컴포넌트를 넣고 ssr:false를 처리하면 클라이언트에서 렌더링 되기 때문에 window 객체에도 접근 가능

8. 설계 문서

API

ERD

Architecture Structure

9. 팀원 소개 및 역할

🌸 김재윤 (Team Leader)

• Infra, Backend
• 인프라, CI/CD, 카카오페이 API, 축의금 내역 문서화, 인증/인가(은행)

🌷 김하연

• Infra, Backend
• 인프라, CI/CD, 송금 API, Marrymo와 송금 및 계좌 등록 은행 API 통신(WebClient)

🍀 류승광

• Frontend
• 유저 정보 관리 로직 구성

🌹 박도연

• Backend
• 카카오 소셜 로그인(JWT), 금융결제원 API 연동, 인증/인가(Marrymo), SMTP

🌻 정일규

• Frontend
• 청첩장, 위시아이템 데이터 관리

🌺 정지원

• Frontend, Backend
• Frontend : 송금, 오픈뱅킹 계좌 연결, 축의금 내역 구성
• Backend : Redis, REST API 구현, SMTP