diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 878b712..810d561 100644 --- a/.eslintrc.cjs +++ b/.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", diff --git a/package.json b/package.json index ab4b43c..5adaf40 100644 --- a/package.json +++ b/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", diff --git a/src/App.tsx b/src/App.tsx index 0169207..7242ba7 100644 --- a/src/App.tsx +++ b/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 ( <> -
+ + -
+ ); } diff --git a/src/api/client.ts b/src/api/client.ts new file mode 100644 index 0000000..f699520 --- /dev/null +++ b/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(...args: Parameters) { + return instance.get(...args); +} + +export function post(url: string, data: unknown): Promise { + return instance + .post>(url, data) + .then((response) => response.data); +} + +export function put(...args: Parameters) { + return instance.put(...args); +} + +export function patch(...args: Parameters) { + return instance.patch(...args); +} + +export function del(...args: Parameters) { + return instance.delete(...args); +} diff --git a/src/api/queryClient.ts b/src/api/queryClient.ts new file mode 100644 index 0000000..5005e70 --- /dev/null +++ b/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, + }, + }, +}); diff --git a/src/components/atoms/InputWithButton.tsx b/src/components/atoms/InputWithButton.tsx index f436d0e..30022a3 100644 --- a/src/components/atoms/InputWithButton.tsx +++ b/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(null); + + const handleGetResult = async () => { + try { + const data = await postGetResult(contextRef.current.value); + setResult(data); + } catch (error) { + console.error("Error fetching result:", error); + } + }; + return ( -
- - +
+

+ 가짜뉴스 탐지 AI 서비스 +

+ +
+ + +
+ + {result ? ( + + + 검색 결과 + +

+ {" "} + + {result.subject} + + 의 사실 정확도는{" "} + + {result.percentage}% + + 입니다. +

+

{result.summary}

+ + + + + 뉴스 출처 + + + + ) : null}
); } diff --git a/src/hooks/query/useFactCheck.ts b/src/hooks/query/useFactCheck.ts new file mode 100644 index 0000000..fc06e04 --- /dev/null +++ b/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 => { + return post("/get-result", { url: youtubeUrl }); +}; diff --git a/src/setUpProxy.js b/src/setUpProxy.js new file mode 100644 index 0000000..0812d89 --- /dev/null +++ b/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, + }), + ); +}; diff --git a/tsconfig.json b/tsconfig.json index 4f02cfe..6246622 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -19,7 +19,7 @@ }, /* Linting */ "strict": false, - "noUnusedLocals": true, + "noUnusedLocals": false, "noUnusedParameters": true, "noFallthroughCasesInSwitch": true }, diff --git a/yarn.lock b/yarn.lock index c702cb7..979fb70 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1269,6 +1269,30 @@ dependencies: "@swc/counter" "^0.1.3" +"@tanstack/query-core@5.40.0": + version "5.40.0" + resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-5.40.0.tgz#c74ae8303752ed4b5a0ab848ec71a0e6e8179f83" + integrity sha512-eD8K8jsOIq0Z5u/QbvOmfvKKE/XC39jA7yv4hgpl/1SRiU+J8QCIwgM/mEHuunQsL87dcvnHqSVLmf9pD4CiaA== + +"@tanstack/query-devtools@5.37.1": + version "5.37.1" + resolved "https://registry.yarnpkg.com/@tanstack/query-devtools/-/query-devtools-5.37.1.tgz#8dcfa1488b4f2e353be7eede6691b0ad9197183b" + integrity sha512-XcG4IIHIv0YQKrexTqo2zogQWR1Sz672tX2KsfE9kzB+9zhx44vRKH5si4WDILE1PIWQpStFs/NnrDQrBAUQpg== + +"@tanstack/react-query-devtools@5.40.0": + version "5.40.0" + resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-5.40.0.tgz#76999ddd4c4ef8a9e17c35912459e9a291307409" + integrity sha512-JoQOQj/LKaHoHVMAh73R0pc4lIAHiZMV8L4DGHsTSvHcKi22LZmSC9aYBY9oMkqGpFtKmbspwrUIn55+czNSbA== + dependencies: + "@tanstack/query-devtools" "5.37.1" + +"@tanstack/react-query@5.40.0": + version "5.40.0" + resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-5.40.0.tgz#654afa2d9ab328c22be7e1f025ec9b6267c6baa9" + integrity sha512-iv/W0Axc4aXhFzkrByToE1JQqayxTPNotCoSCnarR/A1vDIHaoKpg7FTIfP3Ev2mbKn1yrxq0ZKYUdLEJxs6Tg== + dependencies: + "@tanstack/query-core" "5.40.0" + "@types/conventional-commits-parser@^5.0.0": version "5.0.0" resolved "https://registry.npmjs.org/@types/conventional-commits-parser/-/conventional-commits-parser-5.0.0.tgz" @@ -1281,6 +1305,13 @@ resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz" integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw== +"@types/http-proxy@^1.17.10": + version "1.17.14" + resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.14.tgz#57f8ccaa1c1c3780644f8a94f9c6b5000b5e2eec" + integrity sha512-SSrD0c1OQzlFX7pGu1eXxSEjemej64aaNPRhhVYUGqXh0BtldAAx37MG8btcumvpgKyZp1F5Gn3JkktdxiFv6w== + dependencies: + "@types/node" "*" + "@types/node@*", "@types/node@20.12.13": version "20.12.13" resolved "https://registry.npmjs.org/@types/node/-/node-20.12.13.tgz" @@ -1508,6 +1539,11 @@ array-union@^2.1.0: resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz" integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw== +asynckit@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/asynckit/-/asynckit-0.4.0.tgz#c79ed97f7f34cb8f2ba1bc9790bcc366474b4b79" + integrity sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q== + autoprefixer@10.4.19: version "10.4.19" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.19.tgz#ad25a856e82ee9d7898c59583c1afeb3fa65f89f" @@ -1520,6 +1556,15 @@ autoprefixer@10.4.19: picocolors "^1.0.0" postcss-value-parser "^4.2.0" +axios@1.7.2: + version "1.7.2" + resolved "https://registry.yarnpkg.com/axios/-/axios-1.7.2.tgz#b625db8a7051fbea61c35a3cbb3a1daa7b9c7621" + integrity sha512-2A8QhOMrbomlDuiLeK9XibIBzuHeRcqqNOHp0Cyp5EoJ1IFDh+XZH3A6BkXtv0K4gFGCI0Y4BM7B1wOEi0Rmgw== + dependencies: + follow-redirects "^1.15.6" + form-data "^4.0.0" + proxy-from-env "^1.1.0" + balanced-match@^1.0.0: version "1.0.2" resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz" @@ -1672,6 +1717,13 @@ color-name@~1.1.4: resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz" integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA== +combined-stream@^1.0.8: + version "1.0.8" + resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f" + integrity sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg== + dependencies: + delayed-stream "~1.0.0" + commander@^4.0.0: version "4.1.1" resolved "https://registry.yarnpkg.com/commander/-/commander-4.1.1.tgz#9fd602bd936294e9e9ef46a3f4d6964044b18068" @@ -1772,6 +1824,11 @@ deep-is@^0.1.3: resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz" integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ== +delayed-stream@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619" + integrity sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ== + detect-node-es@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.1.0.tgz#163acdf643330caa0b4cd7c21e7ee7755d6fa493" @@ -2002,6 +2059,11 @@ esutils@^2.0.2: resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz" integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g== +eventemitter3@^4.0.0: + version "4.0.7" + resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f" + integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw== + execa@^8.0.1: version "8.0.1" resolved "https://registry.npmjs.org/execa/-/execa-8.0.1.tgz" @@ -2095,6 +2157,11 @@ flatted@^3.2.9: resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz" integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw== +follow-redirects@^1.0.0, follow-redirects@^1.15.6: + version "1.15.6" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.6.tgz#7f815c0cda4249c74ff09e95ef97c23b5fd0399b" + integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA== + foreground-child@^3.1.0: version "3.1.1" resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-3.1.1.tgz#1d173e776d75d2772fed08efe4a0de1ea1b12d0d" @@ -2103,6 +2170,15 @@ foreground-child@^3.1.0: cross-spawn "^7.0.0" signal-exit "^4.0.1" +form-data@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/form-data/-/form-data-4.0.0.tgz#93919daeaf361ee529584b9b31664dc12c9fa452" + integrity sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww== + dependencies: + asynckit "^0.4.0" + combined-stream "^1.0.8" + mime-types "^2.1.12" + fraction.js@^4.3.7: version "4.3.7" resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7" @@ -2232,6 +2308,27 @@ hasown@^2.0.0: dependencies: function-bind "^1.1.2" +http-proxy-middleware@3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-3.0.0.tgz#550790357d6f92a9b82ab2d63e07343a791cf26b" + integrity sha512-36AV1fIaI2cWRzHo+rbcxhe3M3jUDCNzc4D5zRl57sEWRAxdXYtw7FSQKYY6PDKssiAKjLYypbssHk+xs/kMXw== + dependencies: + "@types/http-proxy" "^1.17.10" + debug "^4.3.4" + http-proxy "^1.18.1" + is-glob "^4.0.1" + is-plain-obj "^3.0.0" + micromatch "^4.0.5" + +http-proxy@^1.18.1: + version "1.18.1" + resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549" + integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ== + dependencies: + eventemitter3 "^4.0.0" + follow-redirects "^1.0.0" + requires-port "^1.0.0" + human-signals@^5.0.0: version "5.0.0" resolved "https://registry.npmjs.org/human-signals/-/human-signals-5.0.0.tgz" @@ -2346,6 +2443,11 @@ is-path-inside@^3.0.3: resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz" integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ== +is-plain-obj@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-3.0.0.tgz#af6f2ea14ac5a646183a5bbdb5baabbc156ad9d7" + integrity sha512-gwsOE28k+23GP1B6vFl1oVh/WOzmawBrKwo5Ev6wMKzPkaXaCDIQKzLnvsA42DRlbVTWorkgTKIviAKCWkfUwA== + is-stream@^3.0.0: version "3.0.0" resolved "https://registry.npmjs.org/is-stream/-/is-stream-3.0.0.tgz" @@ -2548,6 +2650,18 @@ micromatch@^4.0.4, micromatch@^4.0.5: braces "^3.0.3" picomatch "^2.3.1" +mime-db@1.52.0: + version "1.52.0" + resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70" + integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg== + +mime-types@^2.1.12: + version "2.1.35" + resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a" + integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw== + dependencies: + mime-db "1.52.0" + mimic-fn@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz" @@ -2835,6 +2949,11 @@ prettier@3.2.5: resolved "https://registry.npmjs.org/prettier/-/prettier-3.2.5.tgz" integrity sha512-3/GWa9aOC0YeD7LUfvOG2NiDyhOWRvt1k+rcKhOuYnMY24iiCphgneUfJDyFXd6rZCAnuLBv6UeAULtrhT/F4A== +proxy-from-env@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/proxy-from-env/-/proxy-from-env-1.1.0.tgz#e102f16ca355424865755d2c9e8ea4f24d58c3e2" + integrity sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg== + punycode@^2.1.0: version "2.3.1" resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz" @@ -2932,6 +3051,11 @@ require-from-string@^2.0.2: resolved "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz" integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw== +requires-port@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff" + integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ== + resolve-from@^4.0.0: version "4.0.0" resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"