From da40aead45fce69d89a2405eca67688ee675e40b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=ED=95=9C=EB=8F=99=ED=98=84?= <hando1220@ajou.ac.kr>
Date: Sun, 2 Mar 2025 00:52:21 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20SSH=20=ED=8F=AC=ED=8A=B8=ED=8F=AC?=
=?UTF-8?q?=EC=9B=8C=EB=94=A9=20=EB=93=B1=EB=A1=9D=20=ED=8E=98=EC=9D=B4?=
=?UTF-8?q?=EC=A7=80=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/pages/forwarding/Create.tsx | 119 ++++++++++++++++++++++++++++++++
src/routes.tsx | 2 +
2 files changed, 121 insertions(+)
create mode 100644 src/pages/forwarding/Create.tsx
diff --git a/src/pages/forwarding/Create.tsx b/src/pages/forwarding/Create.tsx
new file mode 100644
index 0000000..8b96da4
--- /dev/null
+++ b/src/pages/forwarding/Create.tsx
@@ -0,0 +1,119 @@
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Link } from 'react-router';
+import { useForm } from 'react-hook-form';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Input } from '@/components/ui/input';
+import { toast } from 'sonner';
+import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
+
+const formSchema = z.object({
+ name: z.string({ required_error: '서버 이름을 입력해주세요' }).min(1, { message: '서버 이름을 입력해주세요' }),
+ port: z
+ .number({ required_error: '도메인 주소를 입력해주세요' })
+ .min(20000, { message: '포트 번호는 20000 이상이어야 합니다' })
+ .max(29999, { message: '포트 번호는 29999 이하여야 합니다' }),
+ instance_ip: z
+ .string({ required_error: '인스턴스 IP를 입력해주세요' })
+ .regex(/^((25[0-5]|(2[0-4]|1\d|[1-9]|)\d)\.?\b){4}$/, {
+ message: '올바른 IP 주소를 입력해주세요',
+ })
+ .startsWith('10.16.', { message: '인스턴스 IP는 10.16.0.0/16 대역을 사용해야 합니다' }),
+});
+
+export default function ForwardingCreate() {
+ const form = useForm<z.infer<typeof formSchema>>({
+ resolver: zodResolver(formSchema),
+ defaultValues: {
+ name: '',
+ port: undefined,
+ instance_ip: '',
+ },
+ });
+
+ function onSubmit(values: z.infer<typeof formSchema>) {
+ console.log('제출된 데이터:', values);
+ toast.warning('포트포워딩 설정을 등록합니다');
+ }
+
+ return (
+ <div className="flex flex-1 flex-col gap-4 p-6">
+ <div className="mb-2">
+ <h1 className="scroll-m-20 text-3xl font-semibold first:mt-0">신규 포트포워딩 등록</h1>
+ <p className="mt-1 text-base text-gray-500">새로운 SSH 포트포워딩 설정을 등록합니다.</p>
+ </div>
+
+ <Form {...form}>
+ <form onSubmit={form.handleSubmit(onSubmit)}>
+ <Card className="mb-4">
+ <CardHeader>
+ <CardTitle className="text-xl">SSH 포트포워딩 설정</CardTitle>
+ </CardHeader>
+ <CardContent className="space-y-4">
+ <div className="grid grid-cols-1 gap-4">
+ <FormField
+ control={form.control}
+ name="name"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel required>서버 이름</FormLabel>
+ <FormControl>
+ <Input placeholder="웹 서버 이름" {...field} />
+ </FormControl>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="port"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel required>포트 번호</FormLabel>
+ <FormControl>
+ <Input
+ type="number"
+ min={20000}
+ max={29999}
+ placeholder="20000 ~ 29999"
+ {...field}
+ onChange={(e) => field.onChange(+e.target.value)}
+ />
+ </FormControl>
+ <FormDescription>ssh.aoldacloud.com:<포트번호>로 접속 가능합니다</FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+
+ <FormField
+ control={form.control}
+ name="instance_ip"
+ render={({ field }) => (
+ <FormItem>
+ <FormLabel required>인스턴스 IP</FormLabel>
+ <FormControl>
+ <Input placeholder="10.16.x.x" {...field} />
+ </FormControl>
+ <FormDescription>인스턴스 IP는 10.16.0.0/16 대역을 사용합니다</FormDescription>
+ <FormMessage />
+ </FormItem>
+ )}
+ />
+ </div>
+ </CardContent>
+ </Card>
+
+ <div className="flex justify-end gap-2">
+ <Button variant="outline" asChild>
+ <Link to="..">취소</Link>
+ </Button>
+ <Button type="submit">저장</Button>
+ </div>
+ </form>
+ </Form>
+ </div>
+ );
+}
diff --git a/src/routes.tsx b/src/routes.tsx
index 0ffff99..0d17aee 100644
--- a/src/routes.tsx
+++ b/src/routes.tsx
@@ -6,6 +6,7 @@ import Login from '@/pages/Login';
import RoutingList from '@/pages/routing/List';
import RoutingCreate from '@/pages/routing/Create';
import ForwardingList from '@/pages/forwarding/List';
+import ForwardingCreate from './pages/forwarding/Create';
export default function AppRoutes() {
return (
@@ -19,6 +20,7 @@ export default function AppRoutes() {
</Route>
<Route path="forwarding">
<Route index element={<ForwardingList />} />
+ <Route path="create" element={<ForwardingCreate />} />
</Route>
<Route path="*" element={<NotFound />} />
</Route>
--
GitLab