BLOOMING

• 모바일 웨딩 플래너

목차

1. 결과물
2. 서비스 화면
3. 주요 기능
4. 개발 환경
5. 기술 소개
6. 설계 문서
7. 팀원 소개

결과물

• 📽 UCC

• 🎤 중간 발표 자료

• 🎤 최종발표 자료

서비스 화면

랜딩페이지	카카오로그인&추가정보입력
어플이 로딩되는 동안 랜딩 페이지가 보여집니다.	카카오 로그인 성공 시, 서비스에 등록된 회원이 아니라면 회원가입을 진행합니다. 커플 코드가 있으면 커플 코드를 등록하고 진행합니다. 추가 정보 입력란에는 카카오 로그인 시 성별과 이름을 가져와서 기본값으로 설정해주며, 전화번호, 닉네임, 결혼식 날짜를 입력합니다.

🕒메인 페이지

메인 페이지와 웨딩 정보	웨딩팁 정보 상세보기
메인페이지에서 Dday에 따른 Tip, 웨딩 박람회, 결혼 준비에 대한 TIP 등 다양한 정보를 얻을 수 있습니다.	결혼 준비에 대한 TIP에서는 결혼 용어에 대한 특징 등 여러가지에 대한 정보를 얻을 수 있습니다.

웨딩 박랑회 정보	최근 본 상품
웨딩 박람회에 대한 정보를 얻을 수 있습니다.	사용자가 최근 본 상품에 대한 정보를 얻을 수 있습니다.

🏃‍♂️정보 페이지

웨딩홀 찜담기 예약	상품 후기 작성
정보페이지에는 웨딩홀, 스튜디오, 드레스, 메이크업, 모바일 청첩장 페이지가 있으며, 모바일 청첩장을 제외한 4개의 페이지는 각각 상품에 대한 찜과 예약하기 기능이 있습니다. 예약을 하면 자동으로 해당 날짜와 시간에 일정이 생성이 되며 일정 디테일로 이동합니다. 세부적인 내용을 수정을 통해 자세히 적을 수 있습니다.	각각의 상품에는 별점과 함께 후기를 쓸 수 있습니다.

상품 후기에 대해 도움돼요 버튼	모바일 청첩장
적혀진 리뷰에 대해 도움이 돼요 버튼이 존재하며, 도움이 된 리뷰에 표시할 수 있습니다.	청첩장 만들기를 통해 본인만의 메시지를 담은 모바일 청첩장을 만들 수 있고, 카카오톡 공유하기 버튼을 통해 카카오톡으로 해당 페이지에 대한 공유가 가능합니다.

💭스케쥴 페이지

개인일정 등록 후 알림	일정 등록 알림	일정 리마인드 알림
개인일정을 스케쥴 페이지에서 등록이 가능하며, 등록된 약혼자의 일정과 공유하는 일정을 확인할 수 있습니다.	스케쥴을 등록하면 약혼자에게도 알림을 전달하여 어떤 일정이 등록되었는지 알려줍니다.	등록된 일정에 대해 30일 7일 1일 당일에 리마인드 알림을 줍니다.

📑 다이어리 페이지

다이어리 설명 페이지	다이어리 메인 페이지
다이어리페이지는 작성에 대한 설명과 함께 작성페이지로 이동할 수 있습니다.	다이어리 메인 페이지에서는 자신이 작성한 다이어리와 약혼자가 작성한 다이어리를 보여주며 약혼자의 다이어리는 개수를 알 수 있으나 내용을 확인할 수는 없습니다.

다이어리 작성 페이지	결혼식 당일 커플 다이어라 제공
다이어리 작성 시 사진과 제목, 내용이 입력 가능합니다.	결혼식 당일이 되면 약혼자와의 커플 다이어리가 공개되며, 숨겨져 있었던 모든 페이지를 확인할 수 있습니다.

👨🏼‍🤝‍👨🏼마이 페이지

커플코드 연결	커플 연결 성공 후 프로필 변화	푸시 알림 설정
커플코드는 가입할 때 입력을 할 수 있으나, 입력하지 않고 건너뛰었을 경우에 마이페이지에 있는 "상대방과 연결하기"를 통해서 이름과 커플코드를 입력하여 확인을 거친 후 연결이 가능합니다. 연결은 1명과 가능하며, 이미 연결이 된 사람과의 연결은 불가합니다.	커플 코드 연결을 성공하면 본인의 프로필에 약혼자의 프로필이 옆에 붙어 나타납니다.	PUSH 알림 설정을 통해 푸쉬 설정을 ON / OFF 설정이 가능합니다.

마이페이지 내가 쓴 후기	찜 등록과 찜 목록	커플 찜 목록 확인
마이페이지 나의 후기를 통해 내가 작성한 모든 후기를 볼 수 있으며, 후기 클릭 시 해당 상품디테일로 이동합니다.	찜에 등록이 된 상품은 마이페이지의 찜목록에 들어가 있습니다.	나의 찜과 약혼자의 찜, 그리고 동시에 찜한 상품을 확인할 수 있습니다.

주요 기능

• 1. 알림 기능

  • D-day 에 따른 알림

  • 예약 및 스케쥴에 따른 알림

  • 다이어리 작성에 따른 알림

• 2. 다이어리 기능

  • 내 다이어리

  • 약혼자 다이어리

• 3. 모바일 청첩장

  • 작성 후 카카오톡을 이용한 공유

개발 환경

⚙ Management Tool

• 형상 관리 : Gitlab
• 이슈 관리 : Jira
• 커뮤니케이션 : Mattermost, Webex, Notion, Discord
• 디자인 : Figma, PowerPoint

💻 IDE

• Visual Studio Code 1.18.1
• IntelliJ 11.0.19

📱 Frontend

• React 18.2.0
• Vite ^4.4.5
• Recoil ^0.7.7
• React-Router-Dom 6.14.2
• Library
  • antd : ^5.7.3
  • antd-mobile : ^5.32.0
  • axios : ^1.4.0
  • clipboard-copy : ^4.0.1
  • dayjs : ^1.11.9
  • framer-motion : ^10.13.0
  • gsap : ^3.12.2
  • qrcode : ^1.5.2
  • react-calendar : ^4.5.0
  • react-datepicker : ^4.16.0
  • react-dom : ^18.2.0
  • react-icons : 4.10.1
  • react-infinite-scroll-component : ^6.1.0
  • react-kakao-link : ^0.1.2
  • react-loading-skeleton : ^3.3.1
  • react-pageflip : ^2.0.3
  • react-rating : 2.0.5
  • react-responsice-carousel : ^3.2.23
  • react-slick : ^0.29.0
  • react-swipeable : ^7.0.1
  • react-swipable-list : ^1.8.1
  • slick-carousel : ^1.8.1
  • styled-components : ^6.0.7
• Flutter
  • library
    • inapp_webview
• Android Studio

💾 Backend

• Springboot 2.7.13
• Lombok
• Spring Data JPA
• Spring Data Redis(lettuce)
• Spring Web
• Springdoc-openapi-ui 1.6.11
• Oauth2
• Swagger 3.0.0
• Oauth2
• Redis
• MySql 8.0.34

Infra

• AWS S3
• AWS EC2
• Nginx 1.18.0
• Docker 20.10.12
• Ubuntu 20.04.6 LTS
• CertBot(CA Certificates)
• SSL

기술 소개

• 웹 기반 하이브리드 어플리케이션

  • Flutter를 활용하여 웹 및 앱 플랫폼 모두 사용 가능

• 사용자 알림

  • Firebase Cloud Message를 이용하여 사용자에게 필요한 알림 제공, Redis를 이용한 FCM Token 관리

• 카카오 로그인

  • OAUTH2 인증을 이용해 불필요한 개인정보 입력 최소화

• 상품 실시간 예약 랭킹, 최근 본 상품

  • in-memory DB인 Redis의 sorted set 자료구조를 이용해 실시간 예약 랭킹과 사용자별 최근 본 상품 정보 제공

설계 문서

🎨 와이어프레임

📃 기능 명세서

📝 API 명세서

📏 ERD

📐 시스템 아키텍처

협업 : Notion

노션을 활용한 협업 진행	멤버 정보
프로젝트에서 사용하는 기술 스택을 학습하고 노선을 활용하여 정보를 공유하였습니다.

기술 스택 학습 및 공유	주간 회고록 작성
프로젝트에서 사용하는 기술 스택을 학습하고 노선을 활용하여 정보를 공유하였습니다.	매 주마다 개인별, 팀별 회고록을 작성하며 주차별로 발전해나가는 기록을 남길 수 있었습니다.

JIRA를 활용한 일정관리	Git convention & 일관된 커밋 메시지
JIRA를 활용하여 매주 목표를 정하고 스프린트를 작성하여 프로젝트 전체 일정을 관리하였습니다.	Git 브랜치 전략과 commit convention을 정하고, 해당 컨벤션을 바탕으로 일관된 커밋 메시지를 작성했습니다.

😎 팀원 소개와 역할 분담

정훈석	정소정	구희영	강동윤	김성인	김승연
Frontend	Frontend	Frontend	Backend	Backend	Backend
프론트 Token 처리 / Flutter / 카카오톡 공유하기 / 리액트 베이스 코드 제작 / 에러 수정	UX/UI 설계 / PPT제작 / 영상 제작 / 발표 / 모바일 청첩장 페이지 제작	UX/UI 설계 / PPT제작 / Route 설정 /회원 정보, 상품 정보, 마이페이지 제작	Fluttter / infra 구축 / 다이어리, 찜하기, 도움돼요 API 제작	DB설계 및 구축 / 회원(Oauth, JWT) 관련 API / S3 / 커플, 회원 등 API 제작	상품 크롤링 및 기타 API / FCM 알림 / Redis를 이용한 예약 랭킹 및 최근 본 상품 리스트 API 제작