프로젝트주제 및 선정배경(기획의도등)
- 프로젝트 주제
- 금나와라 뚝딱! 주는 사람도 좋고 받는사람도 좋은 랜덤 선물 박스 이벤트 서비스
- 주제 선정 배경
- KDT 과정을 진행하면서 특정 이벤트에 당첨된 당첨자에게 커피 쿠폰을 전달하는 상황에서 항상 상대방의 핸드폰 번호를 알아야만 전달을 할 수 있는 불편한 문제가 있었음
- 선물을 전달하는 과정에 선착순과 랜덤 방식을 도입하여 조금 더 재미있게 선물을 주고 받을 수 있는 랜덤 박스 형식의 금나와라 뚝딱 프로젝트를 선정함.
프로젝트개요(프로젝트구현내용, 컨셉, 훈련내용과의관련성등)
- 프로젝트 구현 내용
- 카카오 소셜 로그인 / 회원가입 기능
- 사용자 정보 조회 기능
- 이벤트 생성 기능
- 내가 받은 선물함 조회 기능
- 내가 받은 선물함 필터 기능
- 내가 받은 선물 조회 기능
- 내가 받은 선물 다운로드 기능
- 나의 이벤트 조회 기능
- 나의 이벤트 필터 기능
- 이벤트 당첨자 조회 기능
- 선착순 선물 수령 기능
- 랜덤 선물 수령 기능
프로젝트 컨셉
- 크리스마스 선물 박스 컨셉
훈련 내용과의 관련성
- JavaScript
- React
- Context-API
- SPA
- Git
- 협업
- Next.JS
- Emotion
등등 다 열거할 수 없을 정도로 해당 프로젝트는 훈련과정에서의 습득한 지식으로 100% 활용하였음
활용장비및재료(개발환경등)
- 개발환경
- JavaScript, React, Next.JS, Context-API
- Netlify
프로젝트구조
. ├── README.md ├── craco.config.js ├── next-dev.d.ts ├── next-env.d.ts ├── next.config.js ├── package.json ├── pages │ ├── 404.tsx │ ├── _app.tsx │ ├── api │ │ ├── event.ts │ │ ├── gift.ts │ │ ├── hello.ts │ │ ├── post.ts │ │ ├── services │ │ ├── user.ts │ │ └── utils │ ├── event │ ├── fifo │ ├── gift │ ├── index.tsx │ ├── login.tsx │ ├── mypage.tsx │ ├── oauth │ ├── post.tsx │ └── random ├── public │ ├── templates │ └── video ├── src │ ├── assets │ ├── components │ │ ├── Checkbox │ │ ├── Icon │ │ ├── Image │ │ ├── Input │ │ ├── Logo │ │ ├── MUIAvatar │ │ ├── MUIButton │ │ ├── MUISwitch │ │ ├── MUITab │ │ ├── Modal │ │ ├── Spinner │ │ ├── Swalert │ │ ├── Text │ │ ├── Textarea │ │ ├── Timer │ │ └── Upload │ ├── contexts │ ├── domains │ │ ├── CardFlip │ │ ├── CheckboxList │ │ ├── EventComplete │ │ ├── EventDetail │ │ ├── EventList │ │ ├── EventPresent │ │ ├── EventStateChecker │ │ ├── EventTimer │ │ ├── EventTitle │ │ ├── EventType │ │ ├── GiftItem │ │ ├── GiftList.tsx │ │ ├── Header │ │ ├── TextLabel │ │ └── TimerHeader │ ├── hooks │ │ ├── useDebounce.ts │ │ ├── useInfiniteScroll.tsx │ │ ├── useInterval.ts │ │ ├── useIntervalFn.ts │ │ ├── useLocalStorage.tsx │ │ └── useTimeoutFn.ts │ ├── stories │ │ ├── components │ │ └── domain │ ├── types │ │ ├── event.d.ts │ │ └── gift.d.ts │ └── utils │ ├── constants │ └── formatTimeNumber.ts ├── styles ├── tsconfig.extend.json ├── tsconfig.json └── yarn.lock
기대효과
- 프로그래머스 KDT 2기 ~ 중간 중간 이벤트에서 실제로 활용하여 보다 더 간편하고 보다 더 재미있게 선물을 주고 받을 수 있을 것으로 기대함