Suumgo

프로젝트 소개

개발 인원 및 기간

개발기간: 2021/12/13~2021/12/24

개발 인원: 프론트 3명 백 3명

오동녘어진이	구유진	김재호	김은찬	길동화	유현이
프론트	프론트	프론트	백	백	백
Github	Github	Github	Github	Github	Github

프론트엔드	백엔드
Github	Github

역할

• 구유진   PM • Frontend
• 오동녘어진이   Frontend • 프론트 엔드 테크 리더
• 김재호   Frontend • 퍼포먼스 관리
• 김은찬   Backend • 백엔드 테크 리더
• 길동화   Backend • aws배포
• 유현이   Backend • github관리

데모영상(이미지클릭)

적용 기술 및 구현 기능

적용 기술

• Front-End: React.js, styled-componets, React Router
• Back-End: Python, Django web framework, MySQL
• Common: AWS

소통 툴

• Git, Github, Slack, Notion

구현기능

• 네브바
  • 카카오 소셜 로그인
• 메인페이지
• 설문조사 페이지
• 회원 리스트 페이지
• 회원 상세 페이지
  • 약속잡기
  • 일치 태그 표시
• 마이 페이지

내가 맡은 기능

• 네브바
  • sticky한 네브바 구현
  • 카카오 API를 통한 소셜 로그인 / 로그아웃 구현
  • 로그인 시, 카카오에서 받아온 이미지와, 아이디를 localstorage에 저장하여 로그인시만 네브바에 노출되게 구현
  • 로그인시, fetch의 result 에 서베이정보의 유무를 navagation을 이용해 분기처리
• 설문조사 페이지
  • 상수데이터를 이용한 설문조사 구현
  • 설문조사 데이터를 map함수와 컴포넌트를 이용하여, 유지보수의 효율성을 높임
  • 질문 진척도를 인디케이터에 transition효과를 주어 스무스하게 표현
  • 질문사항은 객체를 변수로 담아 작동시간을 최소화함
  • 각 e.target.value를 이용하여, 이전, 다음으로 가도 답변이 유지될 수 있게 구현
  • 문제당 유효성검사를 진행하여, 각 state에 값이 없으면 버튼이 눌러지지 않게 구현
  • 문제 입력유무에 따라 '워닝메시지'가 나오게 구현

Reference

• 이 프로젝트는 숨고 사이트를 참조하여 학습목적으로 만들었습니다.
• 실무수준의 프로젝트이지만 학습용으로 만들었기 때문에 이 코드를 활용하여 이득을 취하거나 무단 배포할 경우 법적으로 문제될 수 있습니다.
• 이 프로젝트에서 사용하고 있는 사진 대부분은 위코드에서 구매한 것이므로 해당 프로젝트 외부인이 사용할 수 없습니다.