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

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

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

  4. 프로젝트구조

    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
    
  5. 기대효과

프로젝트 수행 결과

목차

  1. 기획 및 요구사항 분석
  2. 디자인 및 UI 흐름도 구상
  3. 개발환경 및 라우트 설정
    1. NextJS 라우트 사용 → SSR 도입
    2. 리액트 hooks 사용 → 렌더링 시 최적화
  4. 소셜로그인 기능 구현
    1. oauth 토큰 사용
    2. context api를 통한 유저 데이터 상태관리
  5. 이벤트 등록 페이지 구현
    1. 동일한 라우트 내에서 페이지가 이동되는 것처럼 처리
    2. 최종적으로 이벤트 등록 시에만 api 호출하여 요청 최소화
  6. 선물 받기 페이지
    1. 난수 코드를 통해 링크 페이지에 접근
    2. 랜덤 선물 당첨 로직
    3. 타이머
  7. 마이페이지
    1. intersection obeserver를 활용한 무한스크롤로 한 번에 받아오는 resource size 관리
    2. 라우터 쿼리를 통해 필터링 가능
  8. 선물 디테일 페이지
    1. 이미지 파일 또는 div html 요소를 파일로 저장 가능
  9. 이벤트 디테일 페이지
    1. 이벤트 정보 확인 및 종료된 이벤트에 한해 당첨자 목록 조회 가능