fix: scrollable ui 적용

Co-authored-by: Minseok Choi <[email protected]>
minsgy · Jun 19, 2024 · 9ca2964 · 9ca2964
1 parent 249beac
commit 9ca2964
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 53 deletions.
diff --git a/src/features/MSWDevtoolsPanel.tsx b/src/features/MSWDevtoolsPanel.tsx
@@ -20,7 +20,7 @@ export const MSWDevtoolsPanel = ({
 
   return (
     <FixedLayout>
-      <Tabs defaultValue="routes" className="h-full">
+      <Tabs defaultValue="routes" className="h-full flex flex-col">
         <div className="p-4 flex justify-between">
           <TabsList>
             <TabsTrigger value="routes">Routes</TabsTrigger>
@@ -39,7 +39,7 @@ export const MSWDevtoolsPanel = ({
             <DevtoolsHandlerList />
           </div>
         </TabsContent>
-        <TabsContent value="scenario">
+        <TabsContent value="scenario" className="flex-1 min-h-0">
           <ScenarioPanel />
         </TabsContent>
       </Tabs>

diff --git a/src/features/RouteEditPanel/utils/getDefaultResponse.ts b/src/features/RouteEditPanel/utils/getDefaultResponse.ts
@@ -5,6 +5,6 @@ export const getDefaultResponse = (id: number): DevtoolsHandler => ({
   id: createdUuid(),
   response: "{}",
   status: 200,
-  description: `msw devtools handler - response ${id}`,
+  description: `response ${id}`,
   origin: "msw",
 })
diff --git a/src/features/ScenarioPanel/index.tsx b/src/features/ScenarioPanel/index.tsx
@@ -16,66 +16,64 @@ export const ScenarioPanel = () => {
   const { listScenarios } = useWorkerValue()
 
   return (
-    <div className="flex flex-col w-full">
+    <div className="flex flex-col w-full h-full">
       <header className="flex justify-between align-items px-[16px] py-[12px]">
         <H2>Scenario Case</H2>
       </header>
       <Separator />
-      <div className="overflow-y-auto scrollbar-hide h-[400px]">
+      <div className="overflow-y-auto scrollbar-hide">
         {listScenarios().map((scenario) => (
           <Fragment key={scenario.id}>
-            <div className="px-4 pt-4 pb-2">
+            <div className="px-4 py-4 bg-secondary">
               <P>
                 <InlineCode>Description</InlineCode> {scenario.description}
               </P>
             </div>
-            <div className="px-6">
-              <Table>
-                <TableBody>
-                  {generatorSerializedRouteHandlers(scenario.handlers).map(
-                    (route) => (
-                      <TableRow key={route.id} className="py-[16px]">
-                        <TableCell>
-                          <MethodTag method={route.method} />
-                        </TableCell>
-                        <TableCell>
-                          <span className="flex-1 pl-[12px] font-semibold text-left break-word inline-block">
-                            {route.url}
-                          </span>
-                        </TableCell>
-                        <TableCell>
-                          <div className="flex items-center">
-                            <HandlerSelect
-                              value={route.selectedHandlerId}
-                              onValueChange={(handlerId) => {
-                                console.log(handlerId, route.id)
-                                // onSelectHandler(route.id, handlerId)
-                              }}
-                              options={route.handlers}
-                              defaultValue={
-                                route.selectedHandlerId ?? route.handlers[0].id
-                              }
+            <Table>
+              <TableBody>
+                {generatorSerializedRouteHandlers(scenario.handlers).map(
+                  (route) => (
+                    <TableRow key={route.id} className="py-[16px]">
+                      <TableCell>
+                        <MethodTag method={route.method} />
+                      </TableCell>
+                      <TableCell>
+                        <span className="flex-1 pl-[12px] font-semibold text-left break-word inline-block">
+                          {route.url}
+                        </span>
+                      </TableCell>
+                      <TableCell>
+                        <div className="flex items-center">
+                          <HandlerSelect
+                            value={route.selectedHandlerId}
+                            onValueChange={(handlerId) => {
+                              console.log(handlerId, route.id)
+                              // onSelectHandler(route.id, handlerId)
+                            }}
+                            options={route.handlers}
+                            defaultValue={
+                              route.selectedHandlerId ?? route.handlers[0].id
+                            }
+                          />
+                          {route.origin === "custom" && (
+                            <InlineCode>{route.origin}</InlineCode>
+                          )}
+                          <div className="flex ml-auto items-center">
+                            <Switch
+                              disabled={!isEnabled}
+                              checked={route.enabled}
+                              // onCheckedChange={(checked) => {
+                              //   onToggleHandler(route.id, checked)
+                              // }}
                             />
-                            {route.origin === "custom" && (
-                              <InlineCode>{route.origin}</InlineCode>
-                            )}
-                            <div className="flex ml-auto items-center">
-                              <Switch
-                                disabled={!isEnabled}
-                                checked={route.enabled}
-                                // onCheckedChange={(checked) => {
-                                //   onToggleHandler(route.id, checked)
-                                // }}
-                              />
-                            </div>
                           </div>
-                        </TableCell>
-                      </TableRow>
-                    )
-                  )}
-                </TableBody>
-              </Table>
-            </div>
+                        </div>
+                      </TableCell>
+                    </TableRow>
+                  )
+                )}
+              </TableBody>
+            </Table>
           </Fragment>
         ))}
       </div>

diff --git a/src/shared/lib/http/index.ts b/src/shared/lib/http/index.ts
@@ -6,6 +6,7 @@ import {
   Path,
   PathParams,
   http as originHttp,
+  HttpResponse,
 } from "msw"
 
 type HttpHandler = OriginHttpHandler & {
@@ -41,7 +42,8 @@ const createProxyMethod = <
         responseHandlersWithPresets,
       ])
 
-      const response: Response = responseHandlers()
+      const response: HttpResponse = responseHandlers()
+
       function presets(presets: HttpPreset[]) {
         const defaultResponseWithPresets: HttpPreset[] = [
           ...presets,

diff --git a/src/shared/ui/table.tsx b/src/shared/ui/table.tsx
@@ -88,7 +88,7 @@ const TableCell = React.forwardRef<
   <td
     ref={ref}
     className={cn(
-      "py-[16px] align-middle [&:has([role=checkbox])]:pr-0",
+      "py-4 px-6 align-middle [&:has([role=checkbox])]:pr-0",
       className
     )}
     {...props}