💡 URECA/📽️ 프로젝트

[URECA] 요플랜: 통신사 요금제 추천 AI 챗봇 서비스 제공 플랫폼 - 반응형 만들기 98%

코딩하세현 2025. 6. 23. 23:53
728x90

주말동안 토글 기능 작업을 수정했다.

어떤 오류가 있었냐면 인기순과 데이터 많은 순으로 토글이 되야하는데 갑자기 안되는 문제가 발생하는 것이다. 

React 인기순 정렬 API 오류 해결

1. 문제 상황 설명

  • 기능 목표: 요금제 목록 정렬 기능 (인기순 / 가격순 / 데이터 많은 순 등)
  • 문제 발생: 서버에서 허용하는 sortBy 값은 제한적 → popular, data 값 전달 시 오류 발생
Error: 유효하지 않은 정렬 기준입니다. 가능한 값: price_value, name, createdAt, category

2.  원인 분석

  • 서버에서는 유효성 검증이 강하게 걸려 있음
  • popular, data 는 서버에서 모르는 값 → 에러 발생
  • 그러나 인기순/데이터순은 UI 상 중요한 UX 요소 → 요금제 첫페이지로 들어가면 인기순이 나와야하는 매.우 중요한 페이지란 말씀!

3. 해결 방법

  • 아이디어: 서버에는 안전한 sortBy 값만 전달, 나머지 정렬은 클라이언트에서 처리
  • 적용 방법:
params.append('sortBy', 'price_value');  // 서버용
params.append('customSort', sortBy);     // 클라이언트용

 

정렬 처리

if (sortBy === 'popular') {
  loadedPlans.sort( ... );
} else if (sortBy === 'data') {
  loadedPlans.sort( ... );
}

 

결과

  • 서버 API 오류 발생 X
  • 클라이언트에서 다양한 정렬 UX 제공
  • 서버와 프론트 간 책임 분리 → 유지보수 용이
 

🎠 회고 라고 적지만 하지만 느낀점

이번 문제를 해결하면서 서버에서 유효성 검증을 철저하게 해주는 이유를 조금 더 이해할 수 있었다. 서버에서 클라이언트가 넘겨주는 sortBy 값들을 엄격하게 체크해줘서, 잘못된 값이 들어가더라도 에러로 방지할 수 있다는 점이 인상적이었다.

그런데 프론트 쪽에서도 사용자 경험을 생각하면, '인기순', '데이터 많은 순' 같은 정렬은 꼭 필요한 기능이라서 서버 쪽에서 허용해주지 않으면 구현이 막힐 수도 있다는 점도 느꼈다. 이번에는 클라이언트에서 직접 정렬을 해주는 쪽으로 처리했는데, 이런 방법도 꽤 괜찮은 방법 같았다.

결국 서버와 프론트가 각자 어떤 역할을 가져가야 할지 고민하게 됐고, 꼭 서버에서 다 처리하지 않아도 프론트에서 가볍게 해결할 수 있는 부분도 많다는 걸 알게 됐다.

앞으로는 정렬 같은 기능을 만들 때 "이건 서버에서 처리해야 하는가? 프론트에서 해도 괜찮은가?" 를 먼저 생각해보는 습관을 가져야겠다고 느꼈다. 이번 경험 덕분에 API 설계랑 프론트 구현 사이에서 어떻게 균형을 잡을지 조금 감이 생긴 것 같다.

쨍하고 해가뜬 월요일 ☀️

오늘은~ 반응형 페이지를 만들어볼 예정이다. 반응형도 삼만년 걸린다. 

 

위의 사진이 반응형 디자인 시안이다. 

 

아직은 디자인 시안과 다르다.

여기 부분을 하는데 시간이 좀 걸렸다. 

반응형을 구현중입니다만

1. 문제 상황

PlanListPage 화면을 PC/모바일에서 반응형으로 구성하려고 했다.
PC 화면에서는 기존 PlanCard 컴포넌트를 사용하고, 모바일에서는 별도로 설계한 MobilePlanCard 컴포넌트를 보여주는 구조로 만들었다.

그러나 개발 중 다음과 같은 문제가 발생했다:

  1. PC → 모바일 사이즈로 줄였을 때 탭 메뉴가 깨짐
  2. 검색창과 필터 버튼이 정렬이 어긋남
  3. MobilePlanCard가 정상적으로 렌더링되지 않음 (요금제 진단 결과에는 분명 모바일 플랜카드가 있는데 왜 안보이지 하고 파일명을 자세히 보던 찰나 MobiltPlanCard.jsx 발견 o(*￣▽￣*)ブ )

2. 문제 해결

1. 다시 index.css를 들어가 관련 스타일명을 확인해 오류 해결

2.  원래는 

카테고리                          필터

토글 

이렇게 되어있었으나 모바일 버전으로 볼때는

카테고리

토글              필터 

순서여서 토글과 필터를 함께 div로 묶었다. 

그랬더니 토글이 plancard 뒤로 펼치지는 현상이 발생한것이다. 새로운 오류 발견하기 (룰루)

ㄴ 문제 해결 : z-50을 줬다.

 

🎠 회고겸 느낀점

특히 컴포넌트 레벨에서 PC/Mobile 렌더링 전략을 명확하게 나누는 것이 더 안정적임을 배웠다. 앞으로 반응형 작업 시 구조적인 설계와 CSS 레이아웃 모두를 함께 고려하는 습관을 가져야겠다고 느꼈다.

728x90