[URECA] 요플랜: 통신사 요금제 추천 AI 챗봇 서비스 제공 플랫폼 -

📆 2025년 6월 18일
깊은 개발을 떠나서, 시작부터 오류로 맞이하기 

 

휴.. 다행히 PostCSS 플러그인이 설치가 안되어있어 나타나는 오류 였다. 

설치해서 오류 해결 ✌🏻

---

팀원분들이 초기 세팅과 공통 컴포넌트를 개발해주셨다.

요금제 리스트 화면 페이지를 내가 맡았다.

이렇게 Plans파일을 만들고 라우터에 연결을 해줘보겠다. 

import { createBrowserRouter } from 'react-router-dom';
import DefaultLayout from '../layout/DefaultLayout';
import MainPage from '../pages/MainPage/MainPage';
import PlanListPage from '../pages/PlanListPage/PlanListPage';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <DefaultLayout />,
    children: [
      {
        index: true,
        element: <MainPage />,
      },
      { path: 'plans', element: <PlanListPage /> },
    ],
  },
]);

 

화면이 에러없이 자알! 나타났다. 

 

요금제 리스트안에 있는 카테고리를 만들어보자

const categories = [
  { label: '5G/LTE',            value: '5g-lte' },
  { label: '온라인 전용',        value: 'online' },
  { label: '태블릿/스마트워치', value: 'tablet-smartwatch' },
  { label: '듀얼넘버 플러스',    value: 'dual' },
];