feat: build main

.eslintrc.cjs

@@ -7,7 +7,6 @@ module.exports = {
     "plugin:react-hooks/recommended",
   ],
   ignorePatterns: ["dist", ".eslintrc.cjs"],
-  parser: "@typescript-eslint/parser",
   plugins: ["react-refresh"],
   rules: {
     "react-refresh/only-export-components": "off",

package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview",
     "prepare": "husky"
   },
+  "proxy": "http://172.190.90.75:5000/",
   "dependencies": {
     "@hookform/resolvers": "3.4.2",
     "@radix-ui/react-accordion": "1.1.2",
@@ -40,12 +41,16 @@
     "@radix-ui/react-toggle": "1.0.3",
     "@radix-ui/react-toggle-group": "1.0.4",
     "@radix-ui/react-tooltip": "1.0.7",
+    "@tanstack/react-query": "5.40.0",
+    "@tanstack/react-query-devtools": "5.40.0",
     "autoprefixer": "10.4.19",
+    "axios": "1.7.2",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "cmdk": "1.0.0",
     "date-fns": "3.6.0",
     "embla-carousel-react": "8.1.3",
+    "http-proxy-middleware": "3.0.0",
     "husky": "9.0.11",
     "input-otp": "1.2.4",
     "lucide-react": "0.381.0",

src/App.tsx

@@ -1,12 +1,16 @@
 import { Home } from "@/pages/Home";
+import { queryClient } from "@/api/queryClient";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "./App.css";
 
 function App() {
   return (
     <>
-      <div>
+      <QueryClientProvider client={queryClient}>
+        <ReactQueryDevtools initialIsOpen={false} />
         <Home />
-      </div>
+      </QueryClientProvider>
     </>
   );
 }

src/api/client.ts

@@ -0,0 +1,36 @@
+import axios, { AxiosResponse } from "axios";
+
+export const instance = axios.create({
+  baseURL: "http://172.190.90.75:5000/",
+  withCredentials: false,
+});
+
+function interceptorResponseFulfilled(res: AxiosResponse) {
+  return res.status >= 200 && res.status < 300
+    ? res.data
+    : Promise.reject(res.data);
+}
+
+instance.interceptors.response.use(interceptorResponseFulfilled);
+
+export function get<T>(...args: Parameters<typeof instance.get>) {
+  return instance.get<T, T>(...args);
+}
+
+export function post<T>(url: string, data: unknown): Promise<T> {
+  return instance
+    .post<unknown, AxiosResponse<T>>(url, data)
+    .then((response) => response.data);
+}
+
+export function put<T>(...args: Parameters<typeof instance.put>) {
+  return instance.put<T, T>(...args);
+}
+
+export function patch<T>(...args: Parameters<typeof instance.patch>) {
+  return instance.patch<T, T>(...args);
+}
+
+export function del<T>(...args: Parameters<typeof instance.delete>) {
+  return instance.delete<T, T>(...args);
+}

src/api/queryClient.ts

@@ -0,0 +1,14 @@
+import { QueryClient } from "@tanstack/react-query";
+
+/**
+ * @name global queryClient
+ */
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      retry: 1,
+      refetchOnWindowFocus: false,
+      refetchOnMount: false,
+    },
+  },
+});

src/components/atoms/InputWithButton.tsx

@@ -1,20 +1,101 @@
+import { postGetResult } from "@/hooks/query/useFactCheck";
+import { responseType } from "@/hooks/query/useFactCheck";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-
+import { Slider } from "@/components/ui/slider";
 import { TEXT } from "@/constants";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { useState, useEffect, useRef } from "react";
 import "./index.css";
 
 export function InputWithButton() {
+  const contextRef = useRef(null);
+  const [result, setResult] = useState<responseType | null>(null);
+
+  const handleGetResult = async () => {
+    try {
+      const data = await postGetResult(contextRef.current.value);
+      setResult(data);
+    } catch (error) {
+      console.error("Error fetching result:", error);
+    }
+  };
+
   return (
-    <div className="flex w-full max-w-sm items-center space-x-2">
-      <Input
-        type="text"
-        placeholder={TEXT.INPUT_PLACEHOLDER}
-        className="fact-input"
-      />
-      <Button type="submit" className="fact-button">
-        검사
-      </Button>
+    <div>
+      <h1 className="text-4xl font-bold mt-10 mb-10">
+        가짜뉴스 탐지 AI 서비스
+      </h1>
+
+      <div className="flex w-full max-w-sm items-center space-x-2 mt-10 mb-10">
+        <Input
+          type="text"
+          placeholder={TEXT.INPUT_PLACEHOLDER}
+          className="fact-input"
+          ref={contextRef}
+        />
+        <Button
+          type="submit"
+          className="fact-button"
+          onClick={() => handleGetResult()}
+        >
+          검사
+        </Button>
+      </div>
+
+      {result ? (
+        <Card>
+          <CardHeader>
+            <CardTitle className="mb-4">검색 결과</CardTitle>
+            <CardDescription className="max-w-lg">
+              <p className="py-1 text-lg">
+                {" "}
+                <span style={{ fontWeight: "bold", color: "blue" }}>
+                  {result.subject}
+                </span>
+                의 사실 정확도는{" "}
+                <span style={{ fontWeight: "bold", color: "red" }}>
+                  {result.percentage}%
+                </span>
+                입니다.
+              </p>
+              <p className="py-1 text-sm text-left">{result.summary}</p>
+            </CardDescription>
+          </CardHeader>
+
+          <CardContent>
+            <CardTitle className="mb-4">뉴스 출처</CardTitle>
+            <ul className="text-left">
+              {result.news.map((source, index) => (
+                <li key={index} className="py-1">
+                  <a
+                    href={source.link}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {source.title}
+                  </a>
+                </li>
+              ))}
+            </ul>
+          </CardContent>
+        </Card>
+      ) : null}
     </div>
   );
 }

src/hooks/query/useFactCheck.ts

@@ -0,0 +1,17 @@
+import { post } from "@/api/client.ts";
+
+export type responseType = {
+  code: string;
+  percentage: number;
+  subject: string;
+  summary: string;
+  news: newsListType[];
+};
+export type newsListType = {
+  title: string;
+  link: string;
+};
+
+export const postGetResult = (youtubeUrl: string): Promise<responseType> => {
+  return post("/get-result", { url: youtubeUrl });
+};

src/setUpProxy.js

@@ -0,0 +1,11 @@
+// src/setupProxy.js
+const { createProxyMiddleware } = require("http-proxy-middleware");
+
+module.exports = function (app) {
+  app.use(
+    createProxyMiddleware("/get-result", {
+      target: "http://172.190.90.75:5000",
+      changeOrigin: true,
+    }),
+  );
+};

tsconfig.json

@@ -19,7 +19,7 @@
     },
     /* Linting */
     "strict": false,
-    "noUnusedLocals": true,
+    "noUnusedLocals": false,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },