💎 Fandom-K 🎤✨

🚀 배포된 사이트

https://sprint11fandom-k.netlify.app/

🎨 Notion 회의록

https://www.notion.so/9f3b2ade1a984d1db30bc9d27e860498?v=8df10edd245942cc8e1822e3cd3e10e4

🗓 개발 기간

2024.04.30 ~ 2024.05.17

👩🏻‍💻프로젝트 소개

• Fandom-K는 자신이 좋아하는 아이돌을 선택하고 후원하는 서비스 플랫폼입니다.
• 팬들은 크레딧을 통해 후원 및 투표를 하며, 자신이 좋아하는 아이돌을 차트 상위권에 올릴 수 있습니다.

팀원 구성

이승현	최건	이은빈	김어진	김승래
@codefug	@Sombian	@eunbinnie	@Bellaeoeoo	@JustDevRae

🛠️개발 환경

Tech stack

🗂️프로젝트 구조

^Fandom-K

📦src
    ├── 📂main.jsx
    ├── 📂main.scss
    ├── 📂app/
    │   ├── 📜index.js
    │   ├── 📜index.scss
    │   └── 📂pages/
    │       ├── 📂MyPage/
    │       │   ├── 📜index.jsx
    │       │   ├── 📜index.scss
    │       │   └── 📂widgets/
    │       │       ├── 📂<이름>/
    │       │       │   ├── 📜index.jsx
    │       │       │   └── 📜index.scss
    │       │       └── ...
    │       ├── 📂ListPage/
    │       │   ├── 📜index.jsx
    │       │   ├── 📜index.scss
    │       │   └── 📂widgets/
    │       │       ├── 📂<이름>/
    │       │       │   ├── 📜index.jsx
    │       │       │   └── 📜index.scss
    │       │       └── ...
    │       └── 📂LandingPage/
    │           ├── 📜index.jsx
    │           ├── 📜index.scss
    │           └── 📂widgets/
    │               ├── 📂<이름>/
    │               │   ├── 📜index.jsx
    │               │   └── 📜index.scss
    │               └── ...
    └── 📂common/
        ├── 📂api/
        │   └── 📜index.js
        ├── 📂assets/
        │   ├── 📂icons/
        │   │   ├── 📜<이름.jsx>
        │   │   └── ...
        │   └── 📂images/
        │       ├── 📜<이름.png>
        │       ├── 📜<이름.jpg>
        │       └── ...
        ├── 📂hooks/
        │   ├── 📜<이름.js>
        │   └── ...
        ├── 📂models/
        │   ├── 📜<이름.js>
        │   └── ...
        ├── 📂utilities/
        │   ├── 📜<이름.js>
        │   └── ...
        └── 📂widgets/
            ├── 📂<이름>/
            │   ├── 📜index.jsx
            │   └── 📜index.scss
            └── ...

📋작업 관리

• Notion를 사용하여 진행 상황을 공유했습니다.
• 매일 아침 9시에 회의를 통해 작업 순서와 방향성 및 계획에 대해 회의하고, 오후 5시에 개발한 것을 공유하며 GitHub를 통해 내용을 기록하며 작업했습니다.

🛠️페이지별 주요 기능

반응형

Landing

• Modal : modal를 통해 landing페이지 뿐 아니라 모든 페이지의 이벤트 기반 상태를 관리하고, 객체 기반을 제어했으며, 함수형을 호출했습니다.

ListPage

• compound Pattern : 민감도 제어, 행 설정 지정 가능 등 범용적으로 사용가능 한 컴포넌트를 작업했습니다.

• Infinite Scroll : interception observer를 이용하여 마지막 카드에 반응하여 커서에 기반한 fetch를 보내는 로직을 구현했습니다.

MyPage

• swiper : 협재 슬라이드의 nextCursor 값을 설정하여 API 호출을 통해 추가 데이터를 가져오고 상태 업데이트 하며 swiper를 구현했습니다.

👯‍♀️프로젝트 후기

🍎이승현​

• 아쉬운 점: 프로젝트가 처음이다보니 구현으로 바로 들어간 느낌이 듭니다. 초기 세팅을 조금 더 세밀하게 했다면 시행착오를 덜 겪었을 것 같습니다.​

• 잘한 점: 구현까지 정말 빠르게 끝나고 리팩토링을 오래 하게되었는데요. 리팩토링 때 서로 코딩 스타일이 다르다보니 그것에 대한 이야기도 많이 나눈 것 같습니다.​

• 느낀 점: 프로젝트 관점에서 보면 기간에 비해서 많은 일을 한 것은 아니지만 협업 관점에서 보면 많은 것들을 느낀 것 같습니다. 혼자 할때와는 다른 의견 충돌, 합의 등등 많은 것을 겪으면서 성장했습니다.​

​🫐최건​

• 아쉬운 점: 마감일을 우려한 나머지 탑다운 방식으로 작업하여 오히려 수고로움이 늘었습니다. 또한 GIT 을 다루는 과정에서 잦은 실수와 불필요한 커밋을 추가한 점을 반성하고 있습니다. 의사소통 측면에서도 다소 미흡했습니다.​

• 잘한 점: 작업 진척에 있어 막히는 부분 없이 마감일 이전에 기능을 구현했습니다. 또한 사용자 경험을 위해 도안에 없는 기타 기능을 추가했습니다. 의존성을 최소화 하여 React 및 CSS 전처리기, 그리고 빌드툴을 제외한 패키지를 사용하지 않았습니다. ​

• 느낀 점: 다음부터는 세세한 설정까지 팀원들과 합의하고자 하며, 협업 경험이 전무한 제게 소중한 추억이 되었습니다.​

🍑이은빈

• 아쉬운 점 : 프로젝트 초기 세팅과 공통 컴포넌트 분리 과정에서 미흡한 점이 있었습니다. ​

• 잘한 점 : 팀원 모두 일정보다 여유롭게 완성했습니다. 처음으로 협업 프로젝트를 진행하며 다양한 기술을 직접 적용해보고 개발 역량을 한 단계 성장시킬 수 있는 소중한 경험이었습니다.​

• 느낀 점 : 초기 세팅과 커뮤니케이션의 중요성을 깨달을 수 있었습니다. 이번 프로젝트에서 배운 점을 개선하여 더욱 효율적인 협업을 진행할 수 있을거라 생각합니다.​

​🍒김어진​

• 아쉬운 점 : 초기 설정을 더 체계적으로 한 후 진행을 했다면, 리팩토링하는데 많은 시간을 쓰지 않았을 것 이라는 아쉬움이 남습니다. ​

• 잘한 점 : 협업을 진행하면서 팀원간에 서로의 의견을 존중하고 조율하려고 노력했고, 이번 기회를 통해 더 배우려는 자세로 협업에 임했습니다. ​

• 느낀 점 : 혼자 개발할 때와는 다르게 협업을 통한 개발 경험은 제 자신을 보다 더 빠르게 성장시켰음을 느낄 수 있었습니다. 팀원들과 함께 소통하고 이슈를 다루면서 해결방안을 찾아가는 과정들에 많은 것을 배웠습니다. ​

​

🍊김승래​

• 아쉬운 점: 프로젝트를 시작할 때 구현에 집중해서 진행하다보니, 초기에 폴더구조나 컨벤션 같은 규칙들을 정하는 것이 미흡했던 것 같습니다. ​

• 잘한 점: 오전, 오후로 나눠 팀 미팅을 진행하면서 오늘 진행할 상황과 진행했던 상황을 공유하여 서로간의 피드백을 자주 주고 받을 수 있어 프로젝트의 진행 속도가 마감 일정보다 빠르게 마무리 될 수 있었습니다.​

• 느낀 점: 2주라는 짧은 기간 동안 프로젝트를 진행하면서 혼자할 때와는 비교할 수 없을 만큼 많이 배웠습니다. 앞으로의 협업에 이 기초 프로젝트의 경험이 많은 도움이 될 것 같습니다.​