가가

프로젝트주제및선정배경(기획의도등)

상용화되고 있는 선물 전달 서비스의 경우 일대일 관계로 하나의 선물을 특정해야 한다는 제약사항이 존재한다. 하지만 다수와의 커뮤니케이션 또는 익명성 보장이 필요한 경우에는 기존의 서비스를 이용하기에 부담스러울 수 있다.

기존의 서비스보다 자유로운 사용성을 위해서는 다음 사항이 필요했다.

선물의 종류는 한정되어 있지 않아야 한다. 기프티콘과 같은 결제가 필요한 선물 뿐만 아니라 짤이나 편지같은 다양한 유형의 선물을 전달할 수 있어야 한다.
선물 수령자의 익명성이 보장되어야 한다. 따라서 당첨자는 받는 시점에 결정되어야 한다.
단순히 선물을 주고 받는 단계에서 나아가 사용자가 하나의 이벤트를 진행하는 느낌을 받아야 한다.

위의 사항을 고려하여 선물을 불특정 다수에게 이벤트성으로 전달할 수 있는 서비스를 구상하게 되었다.

프로젝트개요(프로젝트구현내용, 컨셉, 훈련내용과의관련성등)

사용자는 소셜로그인을 통해 간단하게 서비스에 가입할 수 있다.

이벤트 등록을 통해 선물의 종류, 개수, 이벤트 오픈 및 종료 시간 등을 자유롭게 설정할 수 있다.

이벤트가 생성되면 사용자에게는 링크가 주어지고, 링크를 전달받은 사람은 해당 선물을 랜덤 또는 선착순 형식으로 수령하게 된다.

수령한 선물은 마이페이지에서 다시 확인할 수 있으며, 선물을 저장하여 개인 소장할 수 있다.

모든 선물이 소진되거나 이벤트 종료시간이 경과되어 이벤트가 종료되면 사용자는 해당 이벤트의 당첨자 목록을 확인할 수 있게된다.

활용장비및재료(개발환경등)

개발환경: Node.js, Typescript, React, Next.js, Emotion, Eslint, Prettier, Storybook, Netlify

tools: vscode, postman, figma

협업: git, github, jira, notion, slack

프로젝트구조

기대효과

한 명의 사용자가 다수의 사용자에게 선물을 전달하는 최소투입 최대효율의 이벤트 기획 서비스가 될 것으로 기대된다.

해당 훈련 과정 중 관리자가 수강생을 대상으로 이벤트를 준비함에 있어서도 활용할 수 있을 것으로 기대된다.

프로젝트 수행 결과

목차

기획 및 요구사항 분석

디자인 및 UI 흐름도 구상

개발환경 및 라우트 설정

NextJS 라우트 사용 → SSR 도입
리액트 hooks 사용 → 렌더링 시 최적화

소셜로그인 기능 구현

oauth 토큰 사용
context api를 통한 유저 데이터 상태관리

이벤트 등록 페이지 구현

동일한 라우트 내에서 페이지가 이동되는 것처럼 처리
최종적으로 이벤트 등록 시에만 api 호출하여 요청 최소화

선물 받기 페이지

난수 코드를 통해 링크 페이지에 접근
랜덤 선물 당첨 로직
타이머

마이페이지

intersection obeserver를 활용한 무한스크롤로 한 번에 받아오는 resource size 관리
라우터 쿼리를 통해 필터링 가능

선물 디테일 페이지

이미지 파일 또는 div html 요소를 파일로 저장 가능

이벤트 디테일 페이지

이벤트 정보 확인 및 종료된 이벤트에 한해 당첨자 목록 조회 가능


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