ONAANDALL/frontend
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

화면 수정사항 반영

Browse Source
This commit is contained in:
JIeunhuh
2025-04-24 10:16:23 +09:00
parent f5c33e80ae
commit a88a68c212
3 changed files with 72 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/sn/app/components/ui/fileUploadForm.tsx
+32 -26
View File
@@ -1,10 +1,10 @@
"use client"
import { FileUpload, SelectBox } from '@common/business_components/ui';
import { Button } from '@common/components/ui';
import { Button, Input } from '@common/components/ui';
import React, { useState } from 'react'
const FileUploadForm = ({title}:{title:string}) => {
const FileUploadForm = ({ title }: { title: string }) => {
const [files, setFiles] = useState<File[] | null>(null);
const [selectedYear, setSelectedYear] = useState<string>('');
@@ -20,35 +20,41 @@ const FileUploadForm = ({title}:{title:string}) => {
<h3 className="text-2xl font-medium">{title}</h3>
</div>
<div className="card p-6">
<div className="flex items-center space-x-4">
<div className="w-[400px]">
<FileUpload
files={files}
setFiles={setFiles}
fileTypes=".xlsx,.xls"
/>
</div>
<div className="grid grid-col-2 items-center space-x-4">
<div className='flex'>
<SelectBox
className="w-50 mr-3 ml-4"
selectClass="rounded-lg bg-white"
label="년도"
selectArray={yearOptions}
onSelectValue={(value: string | number) => setSelectedYear(String(value))}
/><SelectBox
className="w-50"
selectClass="w-50 rounded-lg bg-white"
label="관리년도"
selectClass="rounded-lg bg-white"
label="분기"
selectArray={yearOptions}
onSelectValue={(value: string | number) => setSelectedYear(String(value))}
/>
<Button
className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
size="sm"
onClick={() => {
if (!files?.[0] || !selectedYear) {
alert('파일과 등록년도를 선택해주세요.');
return;
}
// TODO: 파일 업로드 처리
console.log('Upload file:', files[0], 'Year:', selectedYear);
}}
>
등록
</Button>
</div>
<div className='flex mt-5 items-center'>
<div className="w-[200px] mr-4">
<Input id="file" type="file" />
</div>
<Button
className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700"
size="sm"
onClick={() => {
if (!files?.[0] || !selectedYear) {
alert('파일과 등록년도를 선택해주세요.');
return;
}
// TODO: 파일 업로드 처리
console.log('Upload file:', files[0], 'Year:', selectedYear);
}}
>
등록
</Button>
</div>
</div>
</div>
</div>
apps/sn/app/oper/floodPre/page.tsx
+5 -16
View File
@@ -5,19 +5,8 @@ import React, { useRef, useState } from 'react'
import FileUploadForm from '../../components/ui/fileUploadForm'
import ListDiv from '@common/business_components/ui/list_div'
import ContentLayout from '@/components/ui/contentLayout'
const tableHeadlist = [
{ id: 'no', title: 'NO' },
{ id: 'fileNm', title: '파일명' },
{ id: 'manageYear', title: '기준년도' },
{ id: 'registDt', title: '등록 일자' },
{ id: 'registUsr', title: '등록자' }
import { tableData, tableHeadlist } from '../oldPp/page'
]
const tableData = [
{ 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me' },
{ 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2' },
{ 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3' }
]
const Page = () => {
const [selectedDate, setSelectedDate] = useState(new Date())
const [company, setCompany] = useState('')
@@ -28,7 +17,7 @@ const Page = () => {
<SearchFormLeft>
<div className='flex items-center gap-4'>
<div className='flex items-center gap-2'>
<Label className="w-20 text-xl text-gray-600">수행기간</Label>
<Label className="w-20 text-xl text-gray-600">등록기간</Label>
<DatePicker mode={'single'}
selected={selectedDate}
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
@@ -38,7 +27,7 @@ const Page = () => {
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
</div>
<div className='flex items-center'>
<Label className="w-20 text-xl text-gray-600">수행사</Label>
<Label className="w-20 text-xl text-gray-600">등록자</Label>
<Input
className='w-[100px]'
value={company}
@@ -46,7 +35,7 @@ const Page = () => {
/>
</div>
<div className='flex items-center'>
<Label className="w-20 text-xl text-gray-600">사업명</Label>
<Label className="w-20 text-xl text-gray-600">파일명</Label>
<Input
className='w-[100px]'
value={pjNm}
@@ -67,7 +56,7 @@ const Page = () => {
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button>
</div>
</div>
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
throw new Error('Function not implemented.')
}}></UiTable>
</ListDiv>
apps/sn/app/oper/oldPp/page.tsx
+35 -9
View File
@@ -1,26 +1,36 @@
'use client'
import { ContentsDiv, MainDiv, SearchDiv, SearchFormLeft, SearchFormRight, SelectBox, Title, UiTable } from '@common/business_components/ui'
import { Button, DatePicker, Label } from '@common/components/ui'
import { Button, DatePicker, Input, Label } from '@common/components/ui'
import React, { useState } from 'react'
import FileUploadForm from '../../components/ui/fileUploadForm'
import ListDiv from '@common/business_components/ui/list_div'
import ContentLayout from '@/components/ui/contentLayout'
// TODO: 임시 id
const tableHeadlist = [
export const tableHeadlist = [
{ id: 'no', title: 'NO' },
{ id: 'fileNm', title: '파일명' },
{ id: 'manageYear', title: '관리년도' },
{ id: 'manageYear', title: '년도' },
{ id: 'bungi', title: '분기' },
{ id: 'registDt', title: '등록 일자' },
{ id: 'registUsr', title: '등록자' }
]
const tableData = [
{ 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me' },
{ 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2' },
{ 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3' }
export const tableData = [
{ 'no': '1', 'fileNm': '파일명', 'manageYear': '2023', 'registDt': '2025-04-16', 'registUsr': 'me', 'bungi': '1분기' },
{ 'no': '2', 'fileNm': '파일명', 'manageYear': '2024', 'registDt': '2025-04-16', 'registUsr': 'me2', 'bungi': '1분기' },
{ 'no': '3', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '4', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '5', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '6', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '7', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '8', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '9', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' },
{ 'no': '10', 'fileNm': '파일명', 'manageYear': '2025', 'registDt': '2025-04-16', 'registUsr': 'me3', 'bungi': '1분기' }
]
const Page = () => {
const [selectedDate, setSelectedDate] = useState<Date>(new Date());
const [company, setCompany] = useState('')
const [pjNm, setpjNm] = useState('')
return (
<ContentLayout title='노후 하수관로 정비사업'>
<SearchDiv>
@@ -35,6 +45,22 @@ const Page = () => {
<DatePicker mode={'single'}
selected={selectedDate}
onSelect={(date: Date | undefined) => { if (date) setSelectedDate(date) }} />
<div className='flex items-center'>
<Label className="w-20 text-xl text-gray-600">등록자</Label>
<Input
className='w-[100px]'
value={company}
onChange={(e) => setCompany(e.target.value)}
/>
</div>
<div className='flex items-center'>
<Label className="w-20 text-xl text-gray-600">파일명</Label>
<Input
className='w-[100px]'
value={pjNm}
onChange={(e) => setpjNm(e.target.value)}
/>
</div>
</div>
</div>
</SearchFormLeft>
@@ -43,14 +69,14 @@ const Page = () => {
</SearchFormRight>
</SearchDiv>
<ListDiv className="mt-4">
<div className="card-header flex items-center justify-between">
<div className="card-header flex items-center justify-between">
<h3 className="text-2xl font-medium">사업정보 등록현황</h3>
<div>
<Button className="px-4 py-2 !mr-[1.2rem] bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700" size="sm" >파일 다운로드</Button>
<Button className="px-4 py-2 bg-blue-600 text-white rounded-sm text-sm font-medium hover:bg-blue-700 !mr-[1.2rem]" size="sm" >삭제</Button>
</div>
</div>
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={20} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
<UiTable headName='' tableData={tableData} headlist={tableHeadlist} pageSize={10} total={20} children={undefined} cellClick={() => { }} onPageChange={function (page: number): void {
throw new Error('Function not implemented.')
}}></UiTable>
</ListDiv>