1. 프로젝트 개요

프로젝트명: 최애의 포토

목적: 사용자들이 자신이 좋아하는 사진을 생성하고, 이를 교환, 구매, 판매할 수 있는 웹 플랫폼 제공

핵심 기능:

• 사진 생성 및 관리
• 마켓플레이스에서 사진 거래 (구매/판매)
• 사용자 맞춤 페이지 제공 (구매자용/판매자용)

2. 담당한 작업

역할: 마켓플레이스 개발 담당

주요 기여:

• 마켓플레이스 공통 페이지 구현

마켓 플레이스 페이지(공통) · Issue #5 · MyBiasPhoto/7-MyBiasPhoto-team1-FE

• 구매자용 페이지와 판매자용 페이지 각각 구현

[구매자]마켓플레이스 페이지 · Issue #10 · MyBiasPhoto/7-MyBiasPhoto-team1-FE

[판매자] 마켓플레이스 판매 포토카드 상세 페이지 · Issue #14 · MyBiasPhoto/7-MyBiasPhoto-team1-FE

• 판매자 전용 기능 API 개발:

  • 판매 수정, 판매 내리기

    포토카드 수정하기 · Issue #6 · MyBiasPhoto/7-MyBiasPhoto-team1-BE

    포토카드 판매 내리기 · Issue #5 · MyBiasPhoto/7-MyBiasPhoto-team1-BE

  • 카드 리스트에서 해당 ID 접근

    해당 포토카드 만 조회하기 · Issue #23 · MyBiasPhoto/7-MyBiasPhoto-team1-BE

• 프론트엔드 CSS 작업 및 Skeleton UI 적용

  Commits · MyBiasPhoto/7-MyBiasPhoto-team1-FE

• Swagger 문서를 통한 API 명세화 및 문서화

  swagger적용 · MyBiasPhoto/7-MyBiasPhoto-team1-BE@64e45ab

3. 기술적 성과

사용 기술:

• 프론트엔드: NEXTJS, JavaScript
• 백엔드: Express, Node.js,prisma
• 문서화: Swagger

주요 기능 구현:

• 마켓플레이스 내에서 구매자 판매자에 따른 페이지 분리 로직 구현 및 ui최적화

  (로그인한 해당 이름과 판매카드리스트의 판매자의 이름이 동일한경우 판매자페이지 아닐경우는 구매자페이지로보내는 로직 )

• 판매자 입장에서의 판매상품의 수정 및 삭제 기능 api 구현 [ 유사 삭제를 함으로써 데이터가 남아있음 ]

  (delete를 쓰지않고 patch로 deletedAt스키마를 만들어 삭제를 했을경우 현재시간이 deletedAt스키마에 남아 판매카드리스트를 불러올때 deletedAt이 존재할 경우 불러오지않는 로직 )

• Skeleton UI 적용으로 로딩 시 사용자 경험 개선

• Swagger를 통해 API 명세 문서화

4. 문제점 및 해결 과정 (STAR 기법)

상황 (Situation):

• 마켓플레이스 페이지를 구현하면서 판매자와 구매자 페이지를 분리해야 했음

과제 (Task):

• 역할별 페이지 제공 및 데이터 무결성 유지

행동 (Action):

• 새로운 요청을 계속 보내면 리소스 낭비가 발생한다고 판단
• 기존 로그인 정보와 카드 리스트 내의 유저 이름 데이터를 재활용하는 방식으로 로직을 설계
• 로그인한 유저의 닉네임과 판매 카드를 등록한 유저의 닉네임을 비교
• 두 닉네임이 동일하면 판매자 페이지, 다르면 구매자 페이지로 분기되는 구조 구현

결과 (Result):

• 불필요한 API 요청을 줄여 성능 최적화 달성

5. 협업 및 피드백

• 협업 과정에서 스스로의 부족한 부분을 더 많이 느꼈음
• CSS 작업 시, 팀 내 일관된 규칙을 지키면서 작성해야 한다는 점을 깨달음
• 컴포넌트를 설계할 때 작업을 바로 시작하기보다는 규모와 재사용성을 먼저 고려해야 한다는 점을 배움
• 현재는 컴포넌트 재사용화가 충분히 이루어지지 않아 유지보수에 아쉬움이 있었고, 다음 프로젝트에서는 이를 개선하고자 함
• 프로젝트 진행 시 너무 빠르게 앞질러 가면 코드 품질이 떨어지고, 팀원들과 같은 속도를 맞추며 진행하는 것이 더 효과적이라는 점을 배움

6. 코드 품질 및 최적화

• 프론트에서 아래링크처럼 해당 area에대해 컴포넌트화 하여 프론트에서의 가독성을 높임

  7-MyBiasPhoto-team1-FE/app/marketPlace/[id]/page.js at ed426df023639c2de73157d363874f3df58c539e · MyBiasPhoto/7-MyBiasPhoto-team1-FE

• 마켓플레이스내에서의 리렌더링될 때 useCallback을 씀으로 써 불필요하게 새 함수가 생성되는 것을 막아 의존성 배열에 따라 함수를 기억해두고, 필요할 때만 새로 만들어 성능적으로 개선함

• React.memo를 씀으로써 리렌더링되더라도, props가 안 바뀌면 자식 컴포넌트를 다시 렌더링하지 않게 방지

[마켓플레이스 이슈 5번에 댓글로 성능에대한 보고서를 작성하였음]

마켓 플레이스 페이지(공통) · Issue #5 · MyBiasPhoto/7-MyBiasPhoto-team1-FE

7. 향후 개선 사항 및 제안

• CSS 디테일 개선: 세부적인 스타일링 규칙을 보완하여 UI 완성도를 높일 필요가 있음
• 로직 최적화: 현재는 핵심 기능 구현에 집중했으므로, 추후 시간 여유가 생기면 전체 페이지에 성능 최적화를 적용해 효율성을 개선할 수 있음
• 이미지 처리 개선: 화면 크기가 넓어질 때 이미지가 뭉개져 보이는 문제가 있음 (현재 height는 301px로고정, width는 100%로 설정되어 발생) → 추후 반응형 이미지 처리 방식 개선 필요
• 재사용성 강화: 컴포넌트 단위 설계를 보강하여 코드의 재사용성과 유지보수성을 향상시킬 수 있음