qcast3/qcast-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'dev' of https://git.jetbrains.space/nalpari/q-cast-iii/qcast-front into dev

Browse Source
This commit is contained in:
Daseul Kim 2024-10-17 15:50:36 +09:00
commit 7179b2bdca
2 changed files with 53 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/components/Playground.jsx
View File

@ -30,7 +30,7 @@ export default function Playground() {
const fileRef = useRef(null) const fileRef = useRef(null)
const queryRef = useRef(null) const queryRef = useRef(null)
const [zoom, setZoom] = useState(20) const [zoom, setZoom] = useState(20)
const { get, promisePost } = useAxios() const { get, promiseGet, promisePost } = useAxios()
const testVar = process.env.NEXT_PUBLIC_TEST const testVar = process.env.NEXT_PUBLIC_TEST
const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL const converterUrl = process.env.NEXT_PUBLIC_CONVERTER_API_URL
const { getMessage } = useMessage() const { getMessage } = useMessage()
@ -43,6 +43,8 @@ export default function Playground() {
const [checkboxInput, setCheckboxInput] = useState([]) const [checkboxInput, setCheckboxInput] = useState([])
const [selectedValue, setSelectedValue] = useState('') const [selectedValue, setSelectedValue] = useState('')
const [users, setUsers] = useState([])
useEffect(() => { useEffect(() => {
console.log('textInput:', textInput) console.log('textInput:', textInput)
}, [textInput]) }, [textInput])
@ -142,6 +144,10 @@ export default function Playground() {
}, },
} }
useEffect(() => {
console.log('users:', users)
}, [users])
return ( return (
<> <>
<div className="container mx-auto p-4 m-4 border"> <div className="container mx-auto p-4 m-4 border">
@ -305,6 +311,32 @@ export default function Playground() {
<div className="my-2"> <div className="my-2">
<QPagination {...paginationProps} /> <QPagination {...paginationProps} />
</div> </div>
<div className="my-2">
<Button
onClick={() => {
promiseGet({ url: 'http://localhost:8080/api/user' }).then((res) => setUsers(res.data))
}}
>
axios get test
</Button>
</div>
<div className="my-2">
<Button
onClick={() => {
const result = promisePost({
url: 'http://localhost:8080/api/user',
data: {
firstName: 'Yoo',
lastName: 'Sangwook',
email: 'yoo1757@naver.com',
age: 46,
},
}).then((res) => console.log('res', res))
}}
>
axios post test
</Button>
</div>
</div> </div>
</> </>
) )

40
src/hooks/useAxios.js
View File

@ -40,59 +40,59 @@ export function useAxios(lang = '') {
// response 추가 로직 // response 추가 로직
axios.interceptors.request.use(undefined, (error) => {}) axios.interceptors.request.use(undefined, (error) => {})
const get = async ({ url }) => { const get = async ({ url, option = {} }) => {
return await getInstances(url) return await getInstances(url)
.get(url) .get(url, option)
.then((res) => res.data) .then((res) => res.data)
.catch(console.error) .catch(console.error)
} }
const promiseGet = async ({ url }) => { const promiseGet = async ({ url, option = {} }) => {
return await getInstances(url).get(url) return await getInstances(url).get(url, option)
} }
const post = async ({ url, data }) => { const post = async ({ url, data, option = {} }) => {
return await getInstances(url) return await getInstances(url)
.post(url, data) .post(url, data, option)
.then((res) => res.data) .then((res) => res.data)
.catch(console.error) .catch(console.error)
} }
const promisePost = async ({ url, data }) => { const promisePost = async ({ url, data, option = {} }) => {
return await getInstances(url).post(url, data) return await getInstances(url).post(url, data, option)
} }
const put = async ({ url, data }) => { const put = async ({ url, data, option = {} }) => {
return await getInstances(url) return await getInstances(url)
.put(url, data) .put(url, data, option)
.then((res) => res.data) .then((res) => res.data)
.catch(console.error) .catch(console.error)
} }
const promisePut = async ({ url, data }) => { const promisePut = async ({ url, data, option = {} }) => {
return await getInstances(url).put(url, data) return await getInstances(url).put(url, data, option)
} }
const patch = async ({ url, data }) => { const patch = async ({ url, data, option = {} }) => {
return await getInstances(url) return await getInstances(url)
.patch(url, data) .patch(url, data, option)
.then((res) => res.data) .then((res) => res.data)
.catch(console.error) .catch(console.error)
} }
const promisePatch = async ({ url, data }) => { const promisePatch = async ({ url, data, option = {} }) => {
return await getInstances(url).patch(url, data) return await getInstances(url).patch(url, data, option)
} }
const del = async ({ url }) => { const del = async ({ url, option = {} }) => {
return await getInstances(url) return await getInstances(url)
.delete(url) .delete(url, option)
.then((res) => res.data) .then((res) => res.data)
.catch(console.error) .catch(console.error)
} }
const promiseDel = async ({ url }) => { const promiseDel = async ({ url, option = {} }) => {
return await getInstances(url).delete(url) return await getInstances(url).delete(url, option)
} }
return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel } return { get, promiseGet, post, promisePost, put, promisePut, patch, promisePatch, del, promiseDel }