We'thing

| 다함께 참여하는 결혼 문화를 이끌어가는 모바일 청첩장 서비스

• 기간: 2024/5/20 ~ 2024/5/31(2주)
• 인원: 4인(Fullstack)

기획

고객 니즈

1. 독특한 청첩장을 만들고 싶고, 하객들이 찍어준 사진도 받고 싶은 신랑신부 👰‍♀️🤵‍♂️
2. 잘 찍은 사진이 있지만 신랑신부랑 아는 사이가 아니라서 못보내서 아쉽고, 다른 사람들 사이에서 어색한 하객 👪

솔루션

공유 앨범과 실시간 채팅 기능이 있는 새로운 모바일 청첩장

• 공유 앨범을 통해 하객들은 사진 공유를, 신랑신부는 사진 저장을 서로의 연락처 교환없이 간편하게 할 수 있습니다.
• 실시간 채팅을 통해 하객들은 익명으로 부담없이 다른 사람들과 얘기할 수 있고, 신랑신부는 하객들이 궁금하거나 필요한 부분을 빠르게 확인할 수 있습니다.

기능 소개

메인	하객 명단 관리	앨범

일정	채팅	내 정보

메인 기능 4가지

⭐️ 메인 청첩장

• 사용자가 등록한 부부 및 결혼식 정보와 소개글을 보여준다.
• 사용자가 등록한 사진을 갤러리 탭을 통해 제공한다.

⭐️ 하객 명단 관리

• 참석 의사 전달 폼으로 하객 등록을 통해 하객 유저가 DB에 생성된다.
• 토큰으로 인증된 사용자는 폼을 통해 수정이 가능하다.
• 인증 상태에 따라 폼의 형태가 바뀐다.

⭐️ 공유 앨범

• S3와 연결하여 사진을 저장 하고 조회 할 수 있다.
• 토큰으로 인증된 사용자는 사진 업로드가 가능하다.
• 사진을 다운로드 받을 수 있다.

⭐️ 실시간 채팅

• 토큰으로 인증된 하객들과 신랑 신부가 채팅을 통해 소통할 수 있다.
• 하객들은 채팅을 통해 결혼식 관련된 질문사항들을 해결할 수 있다.
• 신랑, 신부의 메시지는 하이라이트 처리된다.

서브 기능 2가지

⭐️ 일정

• 사용자가 입력한 결혼식 일정을 시간대별로 리스트업하여 보여준다.
• 해당 시간대의 일정 진행시 하이라이트 효과를 준다.

⭐️ 내 정보

• 토큰으로 인증된 사용자의 정보를 알 수 있다.
• 하객과 신랑 신부의 UI를 다르게 구성한다. -> 하객 관리 기능 사용 가능.

사용 기술

아키텍처

WE-THING\SRC
│   App.css
│   App.jsx
│   index.css
│   main-router.jsx
│   main.jsx
│   StyleTest.jsx
│
├───components
│   ├───chat
│   │       Chat.jsx
│   │       ChatMessage.jsx
│   │
│   ├───contact
│   │       Contact.jsx
│   │
│   ├───gallery
│   │       Gallery.jsx
│   │
│   ├───gusetbook
│   │       GuestBook.jsx
│   │       GuestBookAfter.jsx
│   │       GuestBookBefore.jsx
│   │
│   ├───home
│   │       Home.jsx
│   │
│   ├───info
│   │       Info.jsx
│   │
│   ├───invitation
│   │       Invitation.jsx
│   │
│   ├───location
│   │       Location.jsx
│   │
│   ├───schedule
│   │       Schedule.jsx
│   │
│   ├───sharedAlbum
│   │       SharedAlbum.jsx
│   │
│   ├───tabList
│   │       TabList.jsx
│   │
│   └───weddinggift
│           WeddingGift.jsx
│
├───hook
│       useAuth.jsx
│
├───lib
│   ├───apis
│   │       album.js
│   │       chat.js
│   │       info.js
│   │       user.js
│   │
│   └───modules
│           AlbumPhotos.jsx
│           Photos.jsx
│
├───routes
│       InvitationCreatePage.jsx
│       InvitationPage.jsx
│       MainPage.jsx
│
└───store
    │   index.js
    │
    └───reducers
            test.js

server
│   .env
│   .gitignore
│   app.js
│   package-lock.json
│   package.json
│   README.md
│
├───.github
│   └───workflows
│           main.yml
│
├───bin
│       www
│
├───lib
│       updateExpiredInvitations.js
│
├───middleware
│       image.uploader.js
│       uuid.js
│
├───models
│       Album.js
│       Couple.js
│       example.js
│       Invitation.js
│       Message.js
│       Role.js
│       User.js
│
├───public
│   └───stylesheets
│           style.css
│
├───routes
│   └───api
│           album.js
│           couple.js
│           index.js
│           info.js
│           invitations.js
│           message.js
│           user.js
│
└───utils
        auth.js

팀원 소개

김경륜	이동인	이원규	임세현
Full-stack	Full-stack	Full-stack	Full-stack
실시간 채팅 Chat TabList useAuth CI/CD UI/UX	메인 청첩장 Main Invitation Location Gallery UI/UX	하객 명단 관리 일정 Contact GuestBook WeddingGift Schedule	공유앨범 내 정보 SharedAlbum Info DB Management