HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🧚
[1기]최종 프로젝트 데브코스/
🪙
[팀1] 도깨비/
🤭
3주차 프로젝트 진행 현황/
🦾
Summary
🦾

Summary

프로젝트주제및선정배경

  • 프로젝트 명 : 금나와라 뚝딱!
  • 프로젝트 주제
    • 이 프로젝트는 번호교환 없이 다른 사람들에게 여러가지 선물을 주기 위해서 만들어졌습니다. 단순히 선물을 지목한 사람에게 주는 형식이 아니라, ‘랜덤’ 또는 ‘선착순’의 방식을 통해 게임처럼 재미있게 선물을 나눌 수 있는 서비스입니다.
  • 프로젝트 선정 배경
    • KDT 과정을 진행하면서 특정 이벤트에 당첨된 당첨자에게 커피 쿠폰을 전달하는 상황에서 항상 상대방의 핸드폰 번호를 알아야만 전달을 할 수 있는 문제를 인식함.
    • 이러한 불편함을 없애고 선물을 조금 더 편하고, 조금 더 재미있게 전달하면 어떨까? 라는 물음에서 시작하여 해당 프로젝트를 선정함.
      •  

프로젝트 개요

  • 프로젝트 구현 내용
    • 사용자는 소셜로그인을 통해 간단하게 서비스에 가입할 수 있다.
    • 이벤트 등록을 통해 선물의 종류, 개수, 이벤트 오픈 및 종료 시간 등을 자유롭게 설정할 수 있다.
    • 이벤트가 생성되면 사용자에게는 링크가 주어지고, 링크를 전달받은 사람은 해당 선물을 랜덤 또는 선착순 형식으로 수령하게 된다.
    • 수령한 선물은 마이페이지에서 다시 확인할 수 있으며, 선물을 저장하여 개인 소장할 수 있다.
    • 모든 선물이 소진되거나 이벤트 종료시간이 경과되어 이벤트가 종료되면 사용자는 해당 이벤트의 당첨자 목록을 확인할 수 있게된다.
  • 컨셉
    • 크리스마스 컨셉의 이벤트 서비스
      •  
  • 훈련내용과 관련성
    • 백엔드
      • Java/Spring을 이용하여 백엔드 API 서버를 만들고 클라우드 환경(AWS EC2)에 배포
      • 파일 업로드 및 저장을 위해 AWS S3를 사용
      • DB는 테스트 환경에서 h2를 사용하고 배포 환경에서는 MySql을 사용
      • Jira를 활용한 이슈, 스프린트 등 프로젝트 관리
      • 협업과 버전 관리를 위한 Git&Github을 사용
      • Notion을 통한 문서화 작업
      • Github Action 와 Docker를 이용한 CI/CD 구현
      • Oauth2를 이용한 카카오 로그인 구현
    • 프론트엔드
      • TypsScript/React를 활용한 서비스 개발
      • Netlify 배포
      • Next.JS 프레임워크 활용
      • Context-API 상태관리 라이브러리 활용
      • Jira를 활용한 이슈, 스프린트 등 프로젝트 관리
      • 협업과 버전 관리를 위한 Git&Github을 사용
      • Notion을 통한 문서화 작업
      • 해당 프로젝트는 훈련 과정에서 습득한 지식을 100% 활용하여 개발함.
 

활용 장비 및 재료

  • 공통
    • 협업: git, github, jira, notion, slack
  • 백엔드
    • Java
    • Gradle
    • Spring
    • MySQL
    • S3
    • OAuth2.0
    • Jira
    • Github Submodule
    • Swagger
    • Docker
    • AWS
  • 프론트엔드
    • Node.js
    • Typescript
    • React
    • Next.js
    • Emotion
    • Eslint
    • Prettier
    • Storybook
    • Netlify
    • postman
    • figma

프로젝트 구조

  • 백엔드
notion image
 
  • 프론트엔드
      • .
├── 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기~ 중간 중간 이벤트에서 실제로 활용되어 보다 더 간편하고 보다 더 재미있게 선물을 주고 받을 수 있을 것으로 기대함.
  • 해당 서비스를 사용하여 설문 참여자들에게 참여를 유도할 수 있을 것으로 기대함.
 

02 프로젝트 팀 구성 및 역할

팀 공통

  • 서비스 기획

백엔드

공통

  • 서비스 모델링
 
  • 한맹희
    • 팀장
      • Jwt 토큰및 oauth2 기반의 소셜 로그인 기능 구현
      • QueryDSL을 활용한 이벤트 & 선물 조건 검색 기능 구현
      • 선착순 & 랜덤 선물 받기 서비스 구현
  • 최영권
    • 팀원
      • S3와 http Form-data를 활용한 이미지 bulk Insert 기능 구현
      • 이벤트 생성 서비스 구현
      • Git SubModule을 활용한 설정파일 분리
  • 신언주
    • 팀원
      • 이벤트 & 선물 상세 조회 기능 구현
      • 이벤트 당첨자 목록 조회 기능 구현
      • 이벤트 Soft delete 기능 구현
 

프론트엔드

공통

  • 서비스 디자인
  • 문승희
    • 팀장
      • 로그인 페이지 구현
      • 메인 페이지 구현
      • 선착순 선물 받기 페이지 구현
      • 랜덤 선물 받기 페이지 구현
  • 박민수
    • 팀원
      • 이벤트 등록 페이지 Step 1 구현
      • 이벤트 등록 페이지 Step 2 구현
      • 이벤트 등록 페이지 Step 3 구현
      • 이벤트 등록 페이지 Step 4 구현
  • 도가영
    • 팀원
      • 마이 페이지 구현
      • 내가 받은 선물함 페이지 구현
      • 나의 이벤트 페이지 구현
      • 내가 받은 선물 디테일 페이지 구현
      • 나의 이벤트 디테일 페이지 구현
        •  
         

03. 프로젝트 수행 절차 및 방법

 

백엔드

서비스 기획및 설계

  1. 기간 : 11/26(금) ~ 11/29(월)
  1. 활동 : 프로젝트 기획 회의 및 설계 작업 착수 (ERD 설계, API 스펙정의, 서버 구조 모델링)
  1. 비고 : 팀 공통
 

핵심 기능 구현

  1. 기간 : 11/29(월) ~ 12/05(일)
  1. 활동 : 금나와라 뚝딱의 핵심 기능인 이벤트 생성 & 조회 및 선물 받기 서비스 구현
  1. 비고 : 1주차 스프린트 회고
 

세부 기능 구현 및 CI/CD

  1. 기간 : 12/06(월) ~ 12/12(일)
  1. 활동 : 세부 기능 구현 및 CI/CD 적용
  1. 비고 : 2주차 스프린트 회고
 

서버 경량화 작업 및 성능 개선

  1. 기간 : 12/13(월) ~ 12/19(일)
  1. 활동 : 기존 Code Deploy에서 Docker로 서버 경량화 & Redis 도입
 
 

프론트엔드

서비스 기획

  1. 기간 : 11/26(금) ~ 11/29(월)
  1. 활동 : 프로젝트 기획 회의 및 디자인 방향 설정
  1. 비고 : 팀 공통

서비스 디자인

  1. 기간 : 11/30(화) ~ 12/4(토)
  1. 활동 : 와이어 프레임 등 전체 서비스 디자인 개발
  1. 비고 : 1주차 스프린트 회고

페이지 레이아웃 및 컴포넌트 개발

  1. 기간 : 12/5(일) ~ 12/14(화)
  1. 활동 : 페이지 기초 레이아웃 및 서비스에 필요한 리액트 컴포넌트 개발
  1. 비고 : 2주차 스프린트 회고

페이지 API 연동

  1. 기간 : 12/15(수) ~ 12/17(금)
  1. 활동 : 백엔드 API 연동 및 QA

서비스 배포

  1. 기간 : 12월 18(토) ~ 12월 19(일)
  1. 활동 : 프론트엔드 서버 배포
 

총 프로젝트 개발 기간 : 11/26(금) ~ 12/ 19(일)(총 3주)

 

자체 평가 의견

프로젝트 기획 의도와의 부합 정도 : 100%
  • 초기 프로젝트 기획 의도에 맞춰 선착순, 랜덤 선물 받기 등 원하는 의도에 부합하는 프로젝트를 완성하였다고 판단.
 
실무 활용 가능 정도
  • 클라이언트 단에서의 컴포넌트 랜더링 최적화가 필요
  • 서버 단에서의 API 로직 에러 등이 존재하는 상황으로 현재 에러 픽스 중에 있음
  • 위 내용을 고려하였을 때 90% 정도 문제없이 서비스를 이용가능하다고 판단함.
 
달성도 및 완성도
  • 백엔드
    • API 개발 및 성능 개선도 진행하였으며 CI/CD 기능도 구현함
    • 이에 따라 95% 달성하였다 판단하며, 성능 개선 및 에러 픽스 작업을 마무리하여 100%를 달성할 예정
 
  • 프론트엔드
    • 컴포넌트 랜더링 최적화 작업을 진행할 예정
    • 목표 기능 구현 95% 달성