Skip to content
Snippets Groups Projects
Commit c92c5bd1 authored by 한동현's avatar 한동현
Browse files

feat: 조회 페이지 키워드 검색 API 연동

parent c548c6ce
Branches
No related tags found
No related merge requests found
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link } from 'react-router'; import { Link, useSearchParams } from 'react-router';
import { Filter, Plus, Pencil, Trash } from 'lucide-react'; import { Filter, Plus, Pencil, Trash } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { useAuthStore } from '@/stores/authStore'; import { useAuthStore } from '@/stores/authStore';
...@@ -23,11 +23,15 @@ import { ...@@ -23,11 +23,15 @@ import {
export default function ForwardingList() { export default function ForwardingList() {
const { authFetch, selectedProject } = useAuthStore(); const { authFetch, selectedProject } = useAuthStore();
const [searchParams, setSearchParams] = useSearchParams();
const [forwardings, setForwardings] = useState<Forwarding[] | null>(null); const [forwardings, setForwardings] = useState<Forwarding[] | null>(null);
const [selectedForwarding, setSelectedForwarding] = useState<Forwarding | null>(null); const [selectedForwarding, setSelectedForwarding] = useState<Forwarding | null>(null);
useEffect(() => { useEffect(() => {
authFetch(`/api/forwardings?projectId=${selectedProject?.id}`) const apiSearchParams = new URLSearchParams(searchParams);
apiSearchParams.set('projectId', selectedProject?.id || '');
authFetch(`/api/forwardings?${apiSearchParams.toString()}`)
.then((response) => { .then((response) => {
if (!response.ok) throw Error(`포트포워딩 목록 조회 실패: ${response.status}`); if (!response.ok) throw Error(`포트포워딩 목록 조회 실패: ${response.status}`);
...@@ -40,7 +44,7 @@ export default function ForwardingList() { ...@@ -40,7 +44,7 @@ export default function ForwardingList() {
console.error(error); console.error(error);
toast.error('포트포워딩 정보를 조회할 수 없습니다.'); toast.error('포트포워딩 정보를 조회할 수 없습니다.');
}); });
}, [authFetch, selectedProject]); }, [authFetch, selectedProject, searchParams]);
const handleDelete = () => { const handleDelete = () => {
if (selectedForwarding === null) throw Error('selectedForwarding is null'); if (selectedForwarding === null) throw Error('selectedForwarding is null');
...@@ -81,11 +85,30 @@ export default function ForwardingList() { ...@@ -81,11 +85,30 @@ export default function ForwardingList() {
</div> </div>
<Card> <Card>
<CardContent> <CardContent>
<form
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const query = formData.get('query')?.toString();
if (query) {
setSearchParams({ query });
} else {
setSearchParams({});
}
}}
>
<div className="flex w-full items-center space-x-2 mb-4"> <div className="flex w-full items-center space-x-2 mb-4">
<Filter className="mr-3" /> <Filter className="mr-3" />
<Input placeholder="이름, 포트, 인스턴스 IP로 검색..." /> <Input
<Button variant="secondary">검색</Button> name="query"
placeholder="이름, 포트, 인스턴스 IP로 검색..."
defaultValue={searchParams.get('query') || ''}
/>
<Button type="submit" variant="secondary">
검색
</Button>
</div> </div>
</form>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
......
import { useEffect, useState } from 'react'; import { useEffect, useState } from 'react';
import { Link } from 'react-router'; import { Link, useSearchParams } from 'react-router';
import { Filter, Plus, Check, X, Pencil, Trash } from 'lucide-react'; import { Filter, Plus, Check, X, Pencil, Trash } from 'lucide-react';
import { toast } from 'sonner'; import { toast } from 'sonner';
import { Button } from '@/components/ui/button'; import { Button } from '@/components/ui/button';
...@@ -24,11 +24,15 @@ import { Routing } from '@/types/routing'; ...@@ -24,11 +24,15 @@ import { Routing } from '@/types/routing';
export default function RoutingList() { export default function RoutingList() {
const { authFetch, selectedProject } = useAuthStore(); const { authFetch, selectedProject } = useAuthStore();
const [searchParams, setSearchParams] = useSearchParams();
const [routings, setRoutings] = useState<Routing[] | null>(null); const [routings, setRoutings] = useState<Routing[] | null>(null);
const [selectedRouting, setSelectedRouting] = useState<Routing | null>(null); const [selectedRouting, setSelectedRouting] = useState<Routing | null>(null);
useEffect(() => { useEffect(() => {
authFetch(`/api/routings?projectId=${selectedProject?.id}`) const apiSearchParams = new URLSearchParams(searchParams);
apiSearchParams.set('projectId', selectedProject?.id || '');
authFetch(`/api/routings?${apiSearchParams.toString()}`)
.then((response) => { .then((response) => {
if (!response.ok) throw Error(`라우팅 목록 조회 실패: ${response.status}`); if (!response.ok) throw Error(`라우팅 목록 조회 실패: ${response.status}`);
...@@ -41,7 +45,7 @@ export default function RoutingList() { ...@@ -41,7 +45,7 @@ export default function RoutingList() {
console.error(error); console.error(error);
toast.error('라우팅 정보를 조회할 수 없습니다.'); toast.error('라우팅 정보를 조회할 수 없습니다.');
}); });
}, [authFetch, selectedProject]); }, [authFetch, selectedProject, searchParams]);
const handleDelete = () => { const handleDelete = () => {
if (selectedRouting === null) throw Error('selectedRouting is null'); if (selectedRouting === null) throw Error('selectedRouting is null');
...@@ -82,11 +86,30 @@ export default function RoutingList() { ...@@ -82,11 +86,30 @@ export default function RoutingList() {
</div> </div>
<Card> <Card>
<CardContent> <CardContent>
<form
onSubmit={(e) => {
e.preventDefault();
const formData = new FormData(e.currentTarget);
const query = formData.get('query')?.toString();
if (query) {
setSearchParams({ query });
} else {
setSearchParams({});
}
}}
>
<div className="flex w-full items-center space-x-2 mb-4"> <div className="flex w-full items-center space-x-2 mb-4">
<Filter className="mr-3" /> <Filter className="mr-3" />
<Input placeholder="이름, 도메인, 인스턴스 IP로 검색..." /> <Input
<Button variant="secondary">검색</Button> name="query"
placeholder="이름, 도메인, 인스턴스 IP로 검색..."
defaultValue={searchParams.get('query') || ''}
/>
<Button type="submit" variant="secondary">
검색
</Button>
</div> </div>
</form>
<Table> <Table>
<TableHeader> <TableHeader>
<TableRow> <TableRow>
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment