feat: type이 스키마 기반으로 참조가 걸려있는 부분 처리 추가

Author: ww8007

src/entities/swagger/types/index.ts

@@ -49,6 +49,7 @@ export interface SchemasProperties {
     type: SwaggerType;
     format?: SwaggerFormat;
   };
+  $ref?: string;
 }
 
 export interface Schemas {

src/shared/util/typeConverter.ts

@@ -1,5 +1,6 @@
 const typeConverter = (type: string) => {
   if (type === "integer") return "number";
+  if (!type) return "unknown";
   return type;
 };
 

src/widgets/request-body/ui/api-body/RequestBody.tsx

@@ -1,6 +1,9 @@
+import { useSwaggerDocStore } from "@/entities/docs/model/store/document-store";
+import { useGETDocs } from "@/entities/swagger/api/get-document";
 import { Schemas } from "@/entities/swagger/types";
 import { FormValues } from "@/features/request-api/module/hooks/useForm";
 import { vars } from "@/shared/ui/styles/theme.css";
+import { typeConverter } from "@/shared/util/typeConverter";
 import React, { ChangeEvent, useState } from "react";
 import { RequestArrayBody } from "../array-body/RequestArrayBody";
 import { RequestNormalBody } from "../normal-body/RequestNormalBody";
@@ -26,6 +29,11 @@ export const RequestBody = ({
   // 기존에 custom hook으로 관리하던 paramState와 달리 하나의 input만 담당
   const [bodyValue, setBodyValue] = useState("");
 
+  const { pathInfo } = useSwaggerDocStore();
+
+  const { data: apiDocsData } = useGETDocs(pathInfo);
+  console.log(apiDocsData);
+
   const onChangeBodyValue = (e: ChangeEvent<HTMLInputElement>) => {
     // file type일 경우 직접 addArrayItem 호출
     if (e.target.id === "file" && e.target.files) {
@@ -40,16 +48,29 @@ export const RequestBody = ({
     setBodyValue("");
   };
 
-  const isItemsTypeFile = (property: string) => {
-    let returnType = "text";
+  const isFileType = (property: string) => {
     Object.keys(body.properties).map((property) => {
       if (body.properties[property]?.format === "binary") {
-        returnType = "file";
+        return true;
       }
     });
-    // if (body.properties[property].type === "binary") return "file";
-    if (body.properties[property].items?.format === "binary") return "file";
-    return returnType;
+    if (body.properties[property].items?.format === "binary") return true;
+    return false;
+  };
+
+  const getType = (property: string) => {
+    const type = body.properties[property].type;
+    if (type) {
+      console.log("type", type);
+      return typeConverter(type);
+    }
+    const fullRef = body.properties[property].$ref;
+    console.log("fullRef", fullRef);
+    const ref = fullRef.split("/").pop();
+    console.log("ref", ref);
+    const schema = apiDocsData?.components?.schemas[ref];
+    console.log(schema);
+    return typeConverter(schema?.type);
   };
 
   return (
@@ -71,7 +92,8 @@ export const RequestBody = ({
               property={property}
               addArrayItem={onAddArrayItem}
               removeArrayItem={removeArrayItem}
-              type={isItemsTypeFile(property)}
+              type={getType(property)}
+              isFileType={isFileType(property)}
             />
           ) : (
             <RequestNormalBody
@@ -80,7 +102,8 @@ export const RequestBody = ({
               handleChange={handleChange}
               idx={idx}
               property={property}
-              type={isItemsTypeFile(property)}
+              type={getType(property)}
+              isFileType={isFileType(property)}
             />
           )}
         </>

src/widgets/request-body/ui/array-body/RequestArrayBody.tsx

@@ -10,6 +10,7 @@ interface RequestArrayBodyProps {
   formValues: FormValues;
   idx: number;
   property: string;
+  isFileType: boolean;
   type: string;
   handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
   addArrayItem: (key: string) => void;
@@ -22,6 +23,7 @@ export const RequestArrayBody = ({
   idx,
   property,
   type,
+  isFileType,
   addArrayItem,
   removeArrayItem,
   handleChange,
@@ -35,7 +37,7 @@ export const RequestArrayBody = ({
             {typeConverter(body.properties[property].type)}
           </label>
           <div className={requestArrayBodyStyles.rightWrapper}>
-            {type === "file" && (
+            {!!isFileType && (
               <label
                 htmlFor="file"
                 className={requestArrayBodyStyles.inputLabel}
@@ -59,7 +61,7 @@ export const RequestArrayBody = ({
               autoFocus={idx === 0}
               onFocus={(e) => e.target.select()}
             />
-            {type !== "file" && (
+            {!isFileType && (
               <button
                 onClick={() => addArrayItem(property)}
                 type="button"

src/widgets/request-body/ui/normal-body/RequestNormalBody.tsx

@@ -1,7 +1,6 @@
 import { Schemas } from "@/entities/swagger/types";
 import { FormValues } from "@/features/request-api/module/hooks/useForm";
 import Input from "@/shared/ui/Input";
-import { typeConverter } from "@/shared/util/typeConverter";
 import { ChangeEvent } from "react";
 import { requestNormalBodyStyles } from "./requestNormalBody.css";
 
@@ -10,6 +9,7 @@ interface RequestNormalBodyProps {
   formValues: FormValues;
   idx: number;
   property: string;
+  isFileType: boolean;
   type: string;
   handleChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
@@ -19,18 +19,18 @@ export const RequestNormalBody = ({
   formValues,
   idx,
   property,
+  isFileType,
   type,
   handleChange,
 }: RequestNormalBodyProps) => {
+  console.log(body);
   return (
     <>
       <div className={requestNormalBodyStyles.inputWrapper} key={property}>
         <div className={requestNormalBodyStyles.inputBox} key={property}>
           <label className={requestNormalBodyStyles.label}>{property}</label>
-          <label className={requestNormalBodyStyles.type}>
-            {typeConverter(body.properties[property].type)}
-          </label>
-          {type === "file" && (
+          <label className={requestNormalBodyStyles.type}>{type}</label>
+          {!!isFileType && (
             <label
               htmlFor="file"
               className={requestNormalBodyStyles.inputLabel}