- 프로젝트주제및선정배경(기획의도등)
- 상용화되고 있는 선물 전달 서비스의 경우 일대일 관계로 하나의 선물을 특정해야 한다는 제약사항이 존재한다. 하지만 다수와의 커뮤니케이션 또는 익명성 보장이 필요한 경우에는 기존의 서비스를 이용하기에 부담스러울 수 있다.
- 기존의 서비스보다 자유로운 사용성을 위해서는 다음 사항이 필요했다.
- 선물의 종류는 한정되어 있지 않아야 한다. 기프티콘과 같은 결제가 필요한 선물 뿐만 아니라 짤이나 편지같은 다양한 유형의 선물을 전달할 수 있어야 한다.
- 선물 수령자의 익명성이 보장되어야 한다. 따라서 당첨자는 받는 시점에 결정되어야 한다.
- 단순히 선물을 주고 받는 단계에서 나아가 사용자가 하나의 이벤트를 진행하는 느낌을 받아야 한다.
- 위의 사항을 고려하여 선물을 불특정 다수에게 이벤트성으로 전달할 수 있는 서비스를 구상하게 되었다.
- 프로젝트개요(프로젝트구현내용, 컨셉, 훈련내용과의관련성등)
- 사용자는 소셜로그인을 통해 간단하게 서비스에 가입할 수 있다.
- 이벤트 등록을 통해 선물의 종류, 개수, 이벤트 오픈 및 종료 시간 등을 자유롭게 설정할 수 있다.
- 이벤트가 생성되면 사용자에게는 링크가 주어지고, 링크를 전달받은 사람은 해당 선물을 랜덤 또는 선착순 형식으로 수령하게 된다.
- 수령한 선물은 마이페이지에서 다시 확인할 수 있으며, 선물을 저장하여 개인 소장할 수 있다.
- 모든 선물이 소진되거나 이벤트 종료시간이 경과되어 이벤트가 종료되면 사용자는 해당 이벤트의 당첨자 목록을 확인할 수 있게된다.
- 활용장비및재료(개발환경등)
- 개발환경: Node.js, Typescript, React, Next.js, Emotion, Eslint, Prettier, Storybook, Netlify
- tools: vscode, postman, figma
- 협업: git, github, jira, notion, slack
- 프로젝트구조
src ├── components │ ├── Checkbox │ │ └── index.tsx │ ├── Icon │ │ └── index.tsx │ ├── Image │ │ └── index.tsx │ ├── Input │ │ ├── InputRadio.tsx │ │ ├── InputText.tsx │ │ └── index.tsx │ ├── Logo │ │ └── index.tsx │ ├── MUIAvatar │ │ └── index.tsx │ ├── MUIButton │ │ └── index.tsx │ ├── MUISwitch │ │ └── index.tsx │ ├── MUITab │ │ ├── MUITab.tsx │ │ └── MUITabPanel.tsx │ ├── Modal │ │ └── index.tsx │ ├── Spinner │ │ └── index.tsx │ ├── Swalert │ │ ├── ErrorAlert.tsx │ │ ├── GiftGetAlert.tsx │ │ ├── LogOutAlert.tsx │ │ └── index.tsx │ ├── Text │ │ └── index.tsx │ ├── Textarea │ │ └── index.tsx │ ├── Timer │ │ └── index.tsx │ └── Upload │ └── index.tsx ├── contexts │ └── UserProvider.tsx ├── domains │ ├── CardFlip │ │ └── index.tsx │ ├── CheckboxList │ │ └── index.tsx │ ├── EventComplete │ │ └── index.tsx │ ├── EventDetail │ │ ├── Cover.tsx │ │ ├── TimeInfo.tsx │ │ ├── WinnerModal.tsx │ │ └── index.tsx │ ├── EventList │ │ └── index.tsx │ ├── EventPresent │ │ ├── GiftForm.tsx │ │ ├── PresentModal.tsx │ │ └── index.tsx │ ├── EventStateChecker │ │ └── index.tsx │ ├── EventTimer │ │ └── index.tsx │ ├── EventTitle │ │ └── index.tsx │ ├── EventType │ │ └── index.tsx │ ├── GiftItem │ │ └── index.tsx │ ├── GiftList.tsx │ │ └── index.tsx │ ├── Header │ │ └── index.tsx │ ├── TextLabel │ │ └── index.tsx │ └── TimerHeader │ └── index.tsx ├── hooks │ ├── useDebounce.ts │ ├── useInfiniteScroll.tsx │ ├── useInterval.ts │ ├── useIntervalFn.ts │ ├── useLocalStorage.tsx │ └── useTimeoutFn.ts ├── stories │ └── components │ ├── Avtar.stories.tsx │ ├── Button.stories.tsx │ ├── Checkbox.stories.tsx │ ├── ConfirmModal.stories.tsx │ ├── Icon.stories.tsx │ ├── Input.stories.tsx │ ├── Logo.stories.tsx │ ├── Modal.stories.tsx │ ├── Spinner.stories.tsx │ ├── Swalert.stories.tsx │ ├── Text.stories.tsx │ ├── Textarea.stories.tsx │ ├── Timer.stories.tsx │ ├── Upload.stories.tsx │ └── image.stories.tsx ├── types │ ├── event.d.ts │ └── gift.d.ts └── utils ├── constants │ ├── colors.ts │ ├── icons.ts │ └── sizes.ts └── formatTimeNumber.ts
- 기대효과
- 한 명의 사용자가 다수의 사용자에게 선물을 전달하는 최소투입 최대효율의 이벤트 기획 서비스가 될 것으로 기대된다.
- 해당 훈련 과정 중 관리자가 수강생을 대상으로 이벤트를 준비함에 있어서도 활용할 수 있을 것으로 기대된다.
프로젝트 수행 결과
목차
- 기획 및 요구사항 분석
- 디자인 및 UI 흐름도 구상
- 개발환경 및 라우트 설정
- NextJS 라우트 사용 → SSR 도입
- 리액트 hooks 사용 → 렌더링 시 최적화
- 소셜로그인 기능 구현
- oauth 토큰 사용
- context api를 통한 유저 데이터 상태관리
- 이벤트 등록 페이지 구현
- 동일한 라우트 내에서 페이지가 이동되는 것처럼 처리
- 최종적으로 이벤트 등록 시에만 api 호출하여 요청 최소화
- 선물 받기 페이지
- 난수 코드를 통해 링크 페이지에 접근
- 랜덤 선물 당첨 로직
- 타이머
- 마이페이지
- intersection obeserver를 활용한 무한스크롤로 한 번에 받아오는 resource size 관리
- 라우터 쿼리를 통해 필터링 가능
- 선물 디테일 페이지
- 이미지 파일 또는 div html 요소를 파일로 저장 가능
- 이벤트 디테일 페이지
- 이벤트 정보 확인 및 종료된 이벤트에 한해 당첨자 목록 조회 가능