feat: 사이트 등록 페이지 작업
This commit is contained in:
@@ -1,11 +1,6 @@
|
||||
import type { Metadata } from "next";
|
||||
import "./styles/base.css";
|
||||
import "./styles/components.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "유역하수도 통합 정보플랫폼",
|
||||
};
|
||||
|
||||
const App = ({ children }: Readonly<{ children: React.ReactNode }>) => {
|
||||
return (
|
||||
<html lang="ko">
|
||||
|
||||
@@ -1 +1,2 @@
|
||||
export { SitePage } from "./ui";
|
||||
export { RegisterPage } from "./ui/register-page";
|
||||
export { SitePage } from "./ui/site-page";
|
||||
|
||||
@@ -1,45 +0,0 @@
|
||||
"use client";
|
||||
|
||||
import "@common/assets/styles/grid.css";
|
||||
|
||||
import {
|
||||
BaseLayout,
|
||||
Button,
|
||||
Input,
|
||||
BasicTable as Table,
|
||||
} from "@common/components";
|
||||
import { data, columns } from "../model/__mocks__";
|
||||
|
||||
const SitePage = () => {
|
||||
return (
|
||||
<BaseLayout>
|
||||
<div className="h-full bg-[#f1f6f9]">
|
||||
<h2 className="px-[1.8rem] pt-[2rem] text-[2.4rem] font-semibold text-[#4c5e6f]">
|
||||
사이트 관리
|
||||
</h2>
|
||||
<div className="card card-border">
|
||||
<div className="card card-border !border-[#dbe2e6] !bg-[#eef7ff]">
|
||||
<div className="flex items-center gap-2 p-2">
|
||||
<label htmlFor="" className="mr-2 text-[#657481]">
|
||||
사이트명
|
||||
</label>
|
||||
<Input className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]" />
|
||||
<Button className="h-[3.2rem]">조회</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card card-border">
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium text-[#666]">사이트 목록</h3>
|
||||
<Button className="">등록</Button>
|
||||
</div>
|
||||
<div className="card !m-[1.2rem] h-[44.5rem] overflow-auto !p-0">
|
||||
<Table data={data} columns={columns} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BaseLayout>
|
||||
);
|
||||
};
|
||||
|
||||
export { SitePage };
|
||||
@@ -0,0 +1,16 @@
|
||||
import { BaseLayout } from "@common/components";
|
||||
|
||||
function SitePageLayout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<BaseLayout>
|
||||
<div className="h-full bg-[#f1f6f9]">
|
||||
<h2 className="px-[1.8rem] pt-[2rem] text-[2.4rem] font-semibold text-[#4c5e6f]">
|
||||
사이트 관리
|
||||
</h2>
|
||||
{children}
|
||||
</div>
|
||||
</BaseLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { SitePageLayout };
|
||||
@@ -0,0 +1,216 @@
|
||||
import {
|
||||
Button,
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
Input,
|
||||
Label,
|
||||
RadioGroup,
|
||||
RadioGroupItem,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableRow,
|
||||
} from "@common/components";
|
||||
import { SitePageLayout } from "./layout";
|
||||
|
||||
function RegisterPage() {
|
||||
return (
|
||||
<SitePageLayout>
|
||||
<div className="card card-border !mt-6">
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium text-[#666]">사이트 등록/수정</h3>
|
||||
</div>
|
||||
<div className="card">
|
||||
<Table>
|
||||
<TableBody>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 코드
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input className="w-[12rem] !text-[1.3rem]" />
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 구분
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<div className="flex gap-2">
|
||||
<DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
color="white"
|
||||
className="group w-[12rem] justify-between px-4"
|
||||
>
|
||||
선택
|
||||
<i className="diveicon di-chevron-down translate-y-0.5 transition-transform group-data-[state=open]:translate-y-0 group-data-[state=open]:rotate-180" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-[12rem]">
|
||||
<DropdownMenuItem>내부</DropdownMenuItem>
|
||||
<DropdownMenuItem>외부</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DropdownMenu>
|
||||
<Button>IP 관리</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 디자인
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<DropdownMenu>
|
||||
<DropdownMenu>
|
||||
<DropdownMenuTrigger asChild>
|
||||
<Button
|
||||
color="white"
|
||||
className="group w-[12rem] justify-between px-4"
|
||||
>
|
||||
선택
|
||||
<i className="diveicon di-chevron-down translate-y-0.5 transition-transform group-data-[state=open]:translate-y-0 group-data-[state=open]:rotate-180" />
|
||||
</Button>
|
||||
</DropdownMenuTrigger>
|
||||
<DropdownMenuContent className="w-[12rem]">
|
||||
<DropdownMenuItem>라이트</DropdownMenuItem>
|
||||
<DropdownMenuItem>다크</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
</DropdownMenu>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트명
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="사이트명을 입력하십시오."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 설명
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="사이트 설명을 입력하십시오."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 하단 표기 주소
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="사이트 하단 주소를 입력하십시오."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 하단 표기 전화번호
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="사이트 하단 전화번호를 입력하십시오."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 하단 표기 팩스번호
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="사이트 하단 팩스번호를 입력하십시오."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사이트 하단 표기 내용
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="사이트 표기 내용을 입력하십시오. (ex. COPYRIGHT c 2013 KECO. ALL RIGHTS RESERVED.)"
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
북마크 아이콘
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<Input
|
||||
className="!text-[1.3rem]"
|
||||
placeholder="아이콘 파일 경로 및 파일명을 입력하여 주십시오."
|
||||
/>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
기본 사이트 여부
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<RadioGroup defaultValue="comfortable">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="default" id="r1" />
|
||||
<Label htmlFor="r1">예</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="comfortable" id="r2" />
|
||||
<Label htmlFor="r2">아니오</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
<TableRow>
|
||||
<TableHead className="border bg-[#eaf3fb] text-[#647784]">
|
||||
사용 여부
|
||||
</TableHead>
|
||||
<TableCell className="border">
|
||||
<RadioGroup defaultValue="comfortable">
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="default" id="r1" />
|
||||
<Label htmlFor="r1">사용</Label>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<RadioGroupItem value="comfortable" id="r2" />
|
||||
<Label htmlFor="r2">사용안함</Label>
|
||||
</div>
|
||||
</RadioGroup>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-10 flex justify-center gap-4">
|
||||
<Button size="lg">저장</Button>
|
||||
<Button size="lg" color="white">
|
||||
취소
|
||||
</Button>
|
||||
<Button size="lg" color="red">
|
||||
삭제
|
||||
</Button>
|
||||
</div>
|
||||
</SitePageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { RegisterPage };
|
||||
@@ -0,0 +1,39 @@
|
||||
"use client";
|
||||
|
||||
import "@common/assets/styles/grid.css";
|
||||
|
||||
import { useRouter } from "next/navigation";
|
||||
import { Button, Input, DataTable } from "@common/components";
|
||||
import { data, columns } from "../model/__mocks__";
|
||||
import { SitePageLayout } from "./layout";
|
||||
|
||||
function SitePage() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<SitePageLayout>
|
||||
<div className="card card-border !mt-6">
|
||||
<div className="card card-border !border-[#dbe2e6] !bg-[#eef7ff]">
|
||||
<div className="flex items-center gap-2 p-2">
|
||||
<label htmlFor="" className="mr-2 text-[#657481]">
|
||||
사이트명
|
||||
</label>
|
||||
<Input className="h-[3.2rem] w-[24rem] rounded-sm !text-[1.3rem]" />
|
||||
<Button className="h-[3.2rem]">조회</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="card card-border">
|
||||
<div className="card-header">
|
||||
<h3 className="text-2xl font-medium text-[#666]">사이트 목록</h3>
|
||||
<Button onClick={() => router.push("/site/register")}>등록</Button>
|
||||
</div>
|
||||
<div className="card !m-[1.2rem] h-[49rem] overflow-auto !p-0">
|
||||
<DataTable data={data} columns={columns} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SitePageLayout>
|
||||
);
|
||||
}
|
||||
|
||||
export { SitePage };
|
||||
Reference in New Issue
Block a user