refactor: TestApiPage를 개발 모드에서만 접근할 수 있도록 수정

Author: cskime

src/app.jsx

@@ -2,20 +2,24 @@ import { BrowserRouter, Route, Routes } from "react-router-dom";
 import PortalProvider from "./components/portal/portal-provider";
 import ContentLayout from "./layouts/content-layout";
 import OnboardingLayout from "./layouts/onboarding-layout";
+import Error404Page from "./pages/404-page";
 import CreatePostPage from "./pages/create-post-page";
 import MainPage from "./pages/main-page";
-import RollingPaperListPage from "./pages/rolling-paper-list-page";
 import MessagesPage from "./pages/messages-page";
+import RollingPaperListPage from "./pages/rolling-paper-list-page";
 import SendMessagePage from "./pages/send-message-page";
+import GlobalStyle from "./styles/global-style";
 import TestApiPage from "./tests/test-api-page";
 import TestComponentsPage from "./tests/test-components-page";
-import Error404Page from "./pages/404-page";
-import GlobalStyle from "./styles/global-style";
 
 function Provider({ children }) {
   return <PortalProvider>{children}</PortalProvider>;
 }
 
+function Development({ children }) {
+  return import.meta.env.PROD ? <h1>개발 전용 페이지입니다.</h1> : children;
+}
+
 function App() {
   return (
     <>
@@ -62,13 +66,19 @@ function App() {
               </Route>
             </Route>
             <Route path="/test-components" element={<TestComponentsPage />} />
-            <Route path="/test-api" element={<TestApiPage />} />
+            <Route
+              path="/test-api"
+              element={
+                <Development>
+                  <TestApiPage />
+                </Development>
+              }
+            />
             <Route path="*" element={<Error404Page />} />
           </Routes>
         </BrowserRouter>
       </Provider>
     </>
-
   );
 }
 

src/tests/test-components-page.jsx

@@ -1,5 +1,4 @@
 import { useState } from "react";
-import styled from "styled-components";
 import smileAddImage from "../assets/ic-face-smile-add.svg";
 import Avatar from "../components/avatar/avatar";
 import AVATAR_SIZE from "../components/avatar/avatar-size";
@@ -16,7 +15,6 @@ import {
 } from "../components/button/button";
 import BUTTON_SIZE from "../components/button/button-size";
 import ToggleButton from "../components/button/toggle-button";
-import Header from "../components/header/header";
 import Modal from "../components/modal/modal";
 import Popover from "../components/popover/popover";
 import POPOVER_ALIGNMENT from "../components/popover/popover-alignment";
@@ -26,10 +24,6 @@ import Toast from "../components/toast/toast";
 import { useModal } from "../hooks/use-modal";
 import { useToast } from "../hooks/use-toast";
 
-const OutlinedHeader = styled(Header)`
-  border: 1px solid black;
-`;
-
 function TestComponentsPage() {
   /* Toggle Button */
   const handleToggleChange = (option, index) => {