📖 프로젝트 설명

KakaoTalk_20240403_010340235.mp4

<aside> 📢 FIGGLE은 FIG의 사내 커뮤니티 앱으로, 직원들이 일상적인 회사 생활을 더 즐겁고 의미 있는 경험으로 만들기 위해 기획되었습니다. 직원들의 소통의 공간이자 회사의 복지를 더 편하고 쉽게 다가갈 수 있도록 현재도 계속 발전시켜나가고 있습니다.

주요 기능:

1. 사내 동호회 관리: FIGGLE을 통해 직원들은 사내 동호회를 만들고 회사의 지원을 받을 수 있습니다. 동호회 활동은 직원들의 관계를 더욱 강화시키고 창의적인 활동을 통해 다양한 관심사를 공유할 수 있습니다.
2. 번개 모임: FIGGLE은 퇴근 후 시원한 맥주 한잔을 즐기는 등의 모임을 조직하는 데에도 유용합니다. 이를 통해 직원들은 업무 이외의 시간에도 함께 소통하고 연락을 유지할 수 있습니다.
3. 회사 이벤트 안내: FIGGLE은 회사에서 주관하는 다양한 이벤트를 알리는데 사용됩니다. 직원들은 이를 통해 회사 생활에 쉽게 적응하고, 다양한 경험을 할 수 있습니다. </aside>

🔧 담당한 기능

• Event Page

  

  

  

  <aside> ➡️ Backend

  사내 Event를 위한 모든 DB설계를 주도했습니다.

  Event의 CRUD와 Log 관리에 필요한 모든 API를 개발했습니다.

  Sharp 라이브러리를 이용해 원본 Image와 Resize된 Image를 S3 Bucket에 저장하는 로직을 개발했습니다.

  </aside>

  <aside> ➡️ Frontend

  Swiper 라이브러리와 Clip path를 활용해 Slide 배너 Component를 만들었습니다.

  Event의 관련된 모든 페이지의 Component를 개발했습니다.

  React Router Loader로 페이지 진입 전 조회수를 증가시키고 있습니다.

  </aside>

• MyPage

  

  

  

  

  <aside> ➡️ Backend

  이미지의 빠른 로딩을 위해 프로필 사진 등록 시 이미지 Resize 후 S3 Bucket에 저장시키는 로직 구현했습니다.

  </aside>

  <aside> ➡️ Frontend

  Markup을 포함한 Mypage의 모든 부분을 구현했습니다.

  많은 페이지에서 사용되는 Avatar, ImageAppend, Chip 등의 공통 컴포넌트를 구현해 작업기간을 단축시켰습니다.

  React-Query로 서버와 데이터를 주고 받았으며, QueryClient를 통해 변경된 부분을 실시간으로 반영해주었습니다.

  </aside>

• Admin Page

  화면 기록 2024-04-05 오후 4.55.38.mov

  화면 기록 2024-04-05 오후 5.02.53.mov

  <aside> ➡️ Backend

  사내 이벤트에 관련된 모든 DB설계를 주도했습니다.

  관리자와 사용자단에서 사용되는 이벤트 관련 API를 구현했습니다.

  Cron을 통해 매일 날짜가 지난 이벤트의 카드 사용 내역을 남기는 로직을 구현했습니다.

  </aside>

  <aside> ➡️ Frontend 관리자 페이지를 혼자 구현했습니다. (3주 소요) Google OAuth를 통한 로그인을 구현했습니다. Url Parameter를 활용해 Modal이 열린 페이지로의 이동 및 로그 남기는 기능을 구현했습니다. framer-motion을 이용해 이미지 Hover 시에 확대 기능 및 다운로드 기능을 추가했습니다. dnd-kit을 이용해 이미지 순서를 변경해 관리자의 편의성을 증가시켰습니다.

  </aside>

• Etc

  

  RPReplay_Final1712305957.MP4

  

  <aside> ➡️ Backend

  Fcm를 이용한 Push알림과 Notification 구현해 사용자의 편의성과 참여율을 증진시켰습니다.

  Jenkins Docker Image를 활용해 CI/CD를 구축, 테스트와 배포 시간 및 전체적인 개발 기간을 단축시켰습니다.

  </aside>

  <aside> ➡️ Frontend

  PWA 세팅과 Service Worker Custom 작업을 진행하였습니다. Device token 발급 및 Push 알림을 구현했습니다.

  </aside>

🔎 Trouble Shooting

FIGGLE 프로젝트는 팀의 주도 아래 시작되었지만, 초기에는 예상치 못한 기술적인 어려움에 직면했습니다. 우리는 하이브리드 앱을 개발하려고 했으나 Apple의 정책으로 인해 비공개 앱을 스토어에 올릴 수 없다는 사실을 깨달았습니다. 이러한 상황에서 우리는 대안을 모색하기 시작했고, 결국 PWA(Progressive Web Application)를 선택하게 되었습니다. 하지만 PWA에 대한 정보가 부족했기에 코딩보다는 PWA의 기술과 사용 방법을 학습하는 데 시간을 많이 할애했습니다.

또한, Push 알림의 부재는 우리가 직면한 또 다른 중대한 문제였습니다. 특히 iOS에서 PWA의 Push 알림을 지원하지 않는다는 사실을 알게되었을 때, 저희 팀은 큰 좌절감을 느꼈습니다. 그러나 우리는 포기하지 않고, 대신 다양한 솔루션을 찾기 시작했습니다. 코딩보다는 기존의 Push 알림을 대체하는 방법에 집중했고, 이러한 과정에서 새로운 기술을 습득하고 적용하는 것에 대한 기회를 가졌습니다.

FIGGLE 프로젝트를 진행하며 새로운 기술을 도입하고 문제를 해결하는 과정에서 저는 지식을 확장하고 실력을 향상시킬 수 있는 기회를 가졌습니다. 뿐만 아니라, 서비스를 Develop 시키기 위해 팀원들과 협력하고 의견을 내는 방법을 배웠습니다. 예상치 못한 상황에 직면했을 때도 팀원들과 함께 해결책을 찾아내는 과정에서 저의 리더십과 문제 해결 능력을 향상시킬 수 있었습니다. 이런 경험들이 저를 더욱 강인하고 성숙한 개발자로 성장하게 해준 것 같습니다.

FIGGLE 프로젝트는 그 어떤 것보다도 저에게 소중한 프로젝트입니다. 이 경험을 통해 제 실력과 자세에 대해 많은 것을 배우고 느낄 수 있었기 때문입니다.