Componenet

공통 컴포넌트

common 디렉토리에 저장되어 있습니다. 현재 사용되지 않는 컴포넌트는 코드 블럭으로 표기하였습니다.

Button.js

• MainButton

Container.js

• Container
• InputContainer
• ScreenContainer
• HeaderContainer
• MainButtonContainer
• TwoButtonContainer: 두 개의 버튼을 위 아래로 정렬할 때 사용합니다.

Gap.js

• Gap - 수직
• GapH - 수평

Header.js

• Header

Input.js

• StyledInput
• Loader.js
  • TinyLoader
  • MediumLoader

Logo

Circle.js

• OnAirCircle
• StatusCircle

Text

• StyledText
• FontStyledText: 주로 StyledText를 사용하나, view 파일 내에서 직접 styled component를 사용하여 스타일링할 경우 import될 수 있습니다.

✅ customizing하는 경우가 아니라면 StyledText를 사용하시기 바랍니다.

권한 인가 컴포넌트

common/Authentication.js에서 권한 인가 컴포넌트를 관리하고 있습니다. 어드민 또는 유저 여부를 확인할 때 해당 페이지를 권한 인가 컴포넌트로 감싸 구현할 수 있습니다.

// 권한 인가 예시 코드 (App.js)
const router = createBrowserRouter([
  {
    path: "/signup",
    element: (
    // 권한 인가 컴포넌트 사용
    // 어드민만 접근 가능
      <AdminProtectedRoute>
        <SignupPage />
      </AdminProtectedRoute>
    ),
  },
...
  }
]);

function App() {
  return (
    <div>
      <RouterProvider router={router} />
    </div>
  );
}

export default App;