반응형
피카픽포토 개발 보고서
1. 프로젝트 개요 (Project Overview)
- 피카픽포토는 디지털 시대에 맞춰 포켓몬 사진과 일러스트를 디지털 카드 형태로 거래하고 소장할 수 있는 새로운 수집 플랫폼입니다.
전통적인 포켓몬 카드 수집의 재미를 디지털 자산으로 확장하여, 희귀하고 독특한 카드를 찾아 나만의 컬렉션을 만들 수 있습니다.
기존 수집 방식을 디지털 환경에 맞게 재구성하여, 수집의 가치를 새로운 방식으로 경험할 수 있도록 돕습니다.
2. 담당한 작업 (Task & Contribution)
|
맡은 작업
|
Front-End
|
|
공통 컴포넌트
|
|
|
마이갤러리 페이지
|
|
|
마이갤러리 상세 페이지
|
|
|
포토 카드 생성 페이지
|
|
|
나의 판매 포토 카드 페이지
|
|
|
랜딩 페이지 제작
|
|
|
웹 아이콘 제작
|
|
|
* 맡은 부분 전체적으로 미디어 쿼리 작성 완료
|
|
|
공통 컴포넌트 및 역할 분배
|
|
|
PPT 제작
|
|
3. 기술적 성과 (Technical Achievements)
- 기술 스택
- Front-End : JavaScript, Next.js, React, HTML, CSS
- Back-End : Express.js, PostgreSQL - 구현한 주요 기능
- 포토 카드 컴포넌트 : 포토 카드 UI 및 props로 필요한 카드만 사용할 수 있도록 구현
- 모달 레이아웃 : 기본적인 모달 레이아웃 구현 및 모달 열기/닫기 애니메이션 추가
- 카드 리스트 모달 : 수량이 0인 카드는 선택 시 수량이 없다는 알림이 표출되도록 구현
- Input 컴포넌트 : 기본 input, textarea 등등 props로 다양한 인풋 스타일을 사용할 수 있도록 구현
- 필터링 : 구현 되어있는 컴포넌트를 이용하여 필터는 단일 선택만 가능하고 필터 초기화 버튼을 누르면 값과 선택된 값이 초기화되도록 구현
- 등급 컴포넌트 : 사용되는 곳마다 적용되는 스타일이 달라서 props를 이용해 해당 스타일이 적용되도록 구현
- 무한 스크롤링 : 마이갤러리 / 나의 판매 포토카드 페이지에 무한 스크롤 기능 구현
- 유효성 검사 훅 : 포토 카드 생성 시 데이터 유효성 검사 커스텀 훅 구현
4. 문제점 및 해결 과정 (Challenges & Solutions)
- 문제점 : 무한 스크롤링 구현에 대한 어려움
- 해결 과정
① 여러 무한 스크롤링 구현 예시를 검색
② 기존에 많이 사용한 페이지네이션 방식을 생각하며 코드 작성
③ 구상한 흐름 방식을 생각하며 코드 작성
④ 오류 발생 시 코드의 흐름을 다시 파악해보며 코드 수정 반복
⑤ 무한 스크롤링 구현 완료
5. 협업 및 피드백 (Collaboration & Feedback)
- 의사소통 : 초급 프로젝트를 진행했을때도 의사소통은 많이 하였지만, 이번 중급 프로젝트를 진행하며 더 많은 의사소통을 한 것 같습니다. 사소한 것일지라도 먼저 팀원들에게 조언을 구했고, 모르는 부분이나 헷갈리는 부분이 생긴다면 주저하지 않고 소통하는 것이 정말 좋았습니다. 프로젝트를 하면서 나날이 의사소통에 대한 중요성을 깨닫게 되는 것 같고, 깨달음과 동시에 의사소통 능력도 늘어가는 것 같아 유익한 시간이었습니다.
- 요구사항 파악 : 초급 프로젝트 때와 비교하여, 본격적인 기능 구현 전에 요구사항을 파악하긴 했지만 프로젝트를 진행하면서 생기는 의문점과 생각치 못했던 기능들이 있었습니다. 이로인해 시간이 더 소요되었고 요구사항 파악이 미흡했다고 느꼈습니다. 그렇기 때문에 다음 프로젝트에서는 더 세세한 기능 파악이 필요할 것 같습니다.
- 역량 파악 : 프로젝트는 시간을 효율적으로 사용하는 것이 중요하다고 생각합니다. 이번 프로젝트에서는 매일 TO-DO List는 작성했지만 전체적인 계획을 세우지는 않았습니다. 그래서 정해둔 기간 내에 기능 구현이 가능한지 역량을 파악할 수 있는 기회를 놓친 것 같습니다. 앞으로는 먼저 전체적인 기능 구현 계획을 세우며 본인의 역량을 파악하는 것이 필요할 것 같습니다.
6. 코드 품질 및 최적화 (Code Quality & Optimization)
- 유지 보수성 : 팀원들의 이해를 돕기 위해 간단한 주석을 작성하여 코드에 대한 설명을 적어놓았습니다.
7. 향후 개선 사항 및 제안 (Improvements & Recommendations)
- 코드 리팩토링 : 기능 구현을 완료하고 발생하는 오류를 지속적으로 확인하고 수정하다보니 시간적인 여유가 많이 없었습니다. 그렇기 때문에 코드 리팩토링을 많이 진행하지 못한 것이 아쉽습니다.
8. 본인이 잘했다고 생각하는 PR
- https://github.com/2-FavoritePhoto-2/2-FavoritePhoto-2-FE/pull/11
- 선정 이유 : 중급 프로젝트를 진행하면서 대부분의 PR이 하나의 기능에 초점을 두고 작성되었습니다. 그 중에서도 이 PR이 하나의 기능에 맞춰 작성하면서도 기능에 대한 설명과 스크린샷을 같이 첨부하여 작성했기 때문에 리뷰어가 보기에 더 편하고 이해가 쉬웠던 것 같습니다.
반응형
'프로젝트 > 개발 보고서' 카테고리의 다른 글
| [프로젝트 개발 보고서] View My Startup (1) | 2025.03.17 |
|---|---|
| [프로젝트 개발 보고서] 핏메이트 - FitMate (0) | 2025.03.17 |