👤 역할

Frontend Developer & Project Manager

📎 배포 링크

https://smaf.site

📁 GitHub

https://github.com/sohyeonkim-0707/SMAF-client

https://github.com/code-bootcamp/SMAF-server

🗓 기획 의도

SMAF는 Schedule Management Assist Friend 의 약자로 프로젝트 일정 관리를 도와주는 플랫폼입니다.

기존에 많은 프로젝트 일정 관리 사이트가 있지만 실제로 사용해 보면서 “사용 방법이 복잡하다.”, “가입하기 전에 사용해보지 못한다.” 같은 의견이 나왔습니다. 불편했던 부분을 개선하고 협업 툴 지라의 영향을 받아 직접 사이트를 만들어보자는 결론에 도착하여 기획 되었습니다.

🛠 핵심 기능

• Drop and Drag 를 이용한 프로젝트 일정 관리
  • 이용 목적에 맞게 프로젝트 일정을 마우스로 이동
  • 비회원이 이용할 수 있는 체험판 제공
• 프로젝트 참여를 함께하는 팀원에게 일정 생성, 종료, 변경 권한 부여
• 프로젝트 생성시 email을 통한 회원 초대
• 프로젝트 메인페이지 날짜 선택시 해당 일정 조회

📍 수행 역할(본인)

• 프론트엔드 팀원 및 일정 관리 & 커뮤니케이션 담당(PM)
  • 팀 프로젝트에서 프론트엔드와 PM 역할을 동시에 수행하며 디자이너, 백엔드 그리고 프론트엔드 사이에서 많은 결정과 의견을 조율했습니다.
  • 자체 팀 노션을 직접 만들어 기능 체크리스트를 도입과, 기능 구현 진행 상황 보드를 만들어 ‘진행 중, 완료, 밀린 업무' 3단계로 나누어 팀원들이 개발 진행 상황도를 한 눈에 파악할 수 있도록 했습니다.
• 마이페이지 개발 전담
  • 유저의 프로젝트, 결제 내역, 개인정보 등을 볼 수 있는 마이페이지 구현을 담당했습니다.
  • emotion을 사용하여 UI를 구현하였습니다.
  • React slick을 사용하여 유저가 참여하고 있는 프로젝트와 종료된 프로젝트를 한 눈에 모아 볼 수 있도록 슬라이드 형식으로 구현했으며, 프로젝트에 참여중인 회원들의 사진도 볼 수 있습니다.
  • 직면했던 문제점과 해결 방법
    • 문제점: 한 슬라이드에 3개의 이미지를 노출하고자 할 때 react-slick에서 제공하는 로직인 ****infinite를 true로 설정하면 이미지가 세로로 겹쳐 나오는 버그를 직면했습니다.
    • 해결 방법: infinite : false를 주면 세로로 겹쳐서 나오는 현상은 해결할 수 있었지만 슬라이드를 계속 동작할 수 없기 때문에 슬라이드 이미지 갯수가 한 화면에 표시되는 갯수 이하일 경우 false를 주는 조건을 주었더니 작동이 되었습니다.
• 공통 모달 제작
  • Ant-Design 에서 제공하는 모달을 직접 커스텀하여 프로젝트 내에서 사용할 공통 모달을 제작했습니다.
  • 직면했던 문제점과 해결 방법
    • 문제점: 회원가입 완료 후 뜨는 ‘회원가입이 완료되었습니다.’ 모달에서 확인 버튼을 눌러야 login 페이지로 넘어갈 수 있게 구현하고자 했으나, 회원가입 완료 후 모달창이 떴다가 바로 사라지고 라우팅되는 현상이 발생했습니다.
    • 해결 방법: 라우팅 로직이 들어 있는 ‘이동 모달 함수’와 ‘확인 모달 함수’ 그리고 ‘이동 전용’ state 로직을 만들었고, 회원가입 정보를 요청하는 로직에서 이동 전용 state를 true로 지정하여. state가 true일 때 ‘이동 모달 함수’가 실행되도록 했습니다.
• 아임포트 결제 모달 제작
  • 프로젝트 구매 버튼을 클릭하면 직접 커스텀한 모달창에 아임포트 제공 API를 사용하여 결제가 가능하도록 제작했습니다.
• 미디어 쿼리 반응형 작업
  • 360 x 640 안드로이드 모바일에서 사용 가능하도록 반응형 작업을 진행했습니다.

📁 서비스 시연