| 다함께 참여하는 결혼 문화를 이끌어가는 모바일 청첩장 서비스
- 기간: 2024/5/20 ~ 2024/5/31(2주)
- 인원: 4인(Fullstack)
- 독특한 청첩장을 만들고 싶고, 하객들이 찍어준 사진도 받고 싶은 신랑신부 👰♀️🤵♂️
- 잘 찍은 사진이 있지만 신랑신부랑 아는 사이가 아니라서 못보내서 아쉽고, 다른 사람들 사이에서 어색한 하객 👪
공유 앨범과 실시간 채팅 기능이 있는 새로운 모바일 청첩장
- 공유 앨범을 통해 하객들은 사진 공유를, 신랑신부는 사진 저장을 서로의 연락처 교환없이 간편하게 할 수 있습니다.
- 실시간 채팅을 통해 하객들은 익명으로 부담없이 다른 사람들과 얘기할 수 있고, 신랑신부는 하객들이 궁금하거나 필요한 부분을 빠르게 확인할 수 있습니다.
| 메인 | 하객 명단 관리 | 앨범 |
|---|---|---|
 |
 |
 |
| 일정 | 채팅 | 내 정보 |
|---|---|---|
 |
 |
 |
- 사용자가 등록한 부부 및 결혼식 정보와 소개글을 보여준다.
- 사용자가 등록한 사진을 갤러리 탭을 통해 제공한다.
- 참석 의사 전달 폼으로 하객 등록을 통해 하객 유저가 DB에 생성된다.
- 토큰으로 인증된 사용자는 폼을 통해 수정이 가능하다.
- 인증 상태에 따라 폼의 형태가 바뀐다.
- S3와 연결하여 사진을 저장 하고 조회 할 수 있다.
- 토큰으로 인증된 사용자는 사진 업로드가 가능하다.
- 사진을 다운로드 받을 수 있다.
- 토큰으로 인증된 하객들과 신랑 신부가 채팅을 통해 소통할 수 있다.
- 하객들은 채팅을 통해 결혼식 관련된 질문사항들을 해결할 수 있다.
- 신랑, 신부의 메시지는 하이라이트 처리된다.
- 사용자가 입력한 결혼식 일정을 시간대별로 리스트업하여 보여준다.
- 해당 시간대의 일정 진행시 하이라이트 효과를 준다.
- 토큰으로 인증된 사용자의 정보를 알 수 있다.
- 하객과 신랑 신부의 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 |