Skip to content

πŸ’„ design: Table Container μž¬μ„€μ • #97 #110

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
BaeZzi813 merged 1 commit into from
Oct 20, 2025
Merged

πŸ’„ design: Table Container μž¬μ„€μ • #97 #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/layout/frame/frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const Frame = ({ title, content, buttonText, href }: FrameProps) => {
return (
<>
<Container as='section' className='flex flex-col gap-4 py-10 tablet:py-[60px]'>
<h1 className='text-heading-s font-bold tablet:text-heading-l'>{title}</h1>
<h1 className='text-heading-l font-bold tablet:text-heading-l'>{title}</h1>
<div className='flex flex-col items-center justify-center gap-4 rounded-xl border border-solid border-gray-200 px-6 py-[60px]'>
<h2 className='text-body-s font-normal tablet:text-body-l'>{content}</h2>
<div className='tablet:w-[346px]'>
Expand Down
24 changes: 12 additions & 12 deletions src/components/ui/table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,13 +33,11 @@ export default function Table({
noticeId,
}: TableProps) {
return (
<div className='py-[60px]'>
<div className='px-8 text-xl font-bold md:px-10 lg:mx-auto lg:max-w-[1000px] lg:px-0'>
<h2 className='text-heading-l font-semibold'>
{userRole === 'employer' ? 'μ‹ μ²­μž λͺ©λ‘' : 'μ‹ μ²­ λ‚΄μ—­'}
</h2>
</div>
<div className='m-7 overflow-hidden rounded-lg border bg-white lg:mx-auto lg:max-w-[1000px]'>
<>
<h2 className='mb-4 text-heading-l font-bold tablet:mb-8'>
{userRole === 'employer' ? 'μ‹ μ²­μž λͺ©λ‘' : 'μ‹ μ²­ λ‚΄μ—­'}
</h2>
<div className='overflow-hidden rounded-lg border bg-white'>
<div className='scroll-bar overflow-x-auto'>
<table className='w-full table-fixed border-collapse'>
<thead>
Expand All @@ -48,7 +46,7 @@ export default function Table({
<th
key={index}
className={cn(
'md:borde-r-0 bg-red-100 px-2 py-3 text-left text-xs font-normal',
'bg-red-100 px-2 py-3 text-left text-body-l font-normal md:border-0',
index < headers.length - 1 && 'border-r md:border-r-0',
index === 0 && 'sticky left-0 z-10 w-[200px]',
index > 0 && index < headers.length - 1 && 'w-[245px]',
Expand Down Expand Up @@ -76,10 +74,12 @@ export default function Table({
</table>
</div>

<div className='flex justify-center px-3 py-2'>
<Pagination total={total} limit={limit} offset={offset} onPageChange={onPageChange} />
</div>
{offset >= 2 && (
<div className='flex justify-center px-3 py-2'>
<Pagination total={total} limit={limit} offset={offset} onPageChange={onPageChange} />
</div>
)}
</div>
</div>
</>
);
}
152 changes: 75 additions & 77 deletions src/pages/employer/shops/[shopId]/notices/[noticeId]/edit.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Container, Wrapper } from '@/components/layout';
import { Container } from '@/components/layout';
import { Button, DateInput, Input, Modal, TimeInput } from '@/components/ui';
import useAuth from '@/hooks/useAuth';
import axiosInstance from '@/lib/axios';
Expand Down Expand Up @@ -98,82 +98,80 @@ const EmployerNoticeEditPage = () => {
if (!user?.shop) return null;

return (
<Wrapper>
<Container isPage>
<p className='mb-4 text-3xl font-bold'>곡고 νŽΈμ§‘</p>

<form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
<div className='grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6'>
<Input
id='wage'
label='μ‹œκΈ‰'
requiredMark
placeholder='12,500'
inputMode='numeric'
suffix='원'
value={wage}
onChange={e => setWage(e.currentTarget.value.replace(/\D+/g, ''))}
/>

<Input
id='workhour'
label='업무 μ‹œκ°„'
requiredMark
placeholder='4'
inputMode='numeric'
suffix='μ‹œκ°„'
value={workhour?.toString() ?? ''}
onChange={e => setWorkhour(Number(e.currentTarget.value))}
/>

<DateInput
label='μ‹œμž‘ λ‚ μ§œ'
requiredMark
value={date ?? undefined}
onChange={selectedDate =>
setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate))
}
/>

<TimeInput label='μ‹œμž‘ μ‹œκ°„' requiredMark value={time} onChange={setTime} />
</div>

<div className='flex flex-col gap-2'>
<label htmlFor='description' className='text-sm font-medium'>
곡고 μ„€λͺ… <span className='text-red-500'>*</span>
</label>
<textarea
id='description'
name='description'
className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
rows={4}
placeholder='곡고에 λŒ€ν•œ μ„€λͺ…을 μž…λ ₯ν•˜μ„Έμš”.'
value={description}
onChange={e => setDescription(e.target.value)}
/>
</div>

<Button
type='submit'
variant='primary'
size='lg'
className='mt-5 w-full'
disabled={!wage || !date || !time || !workhour || !description}
>
λ“±λ‘ν•˜κΈ°
</Button>
</form>

<Modal
open={modalOpen}
onClose={handleModalClose}
title='νŽΈμ§‘ μ™„λ£Œ'
variant='success'
primaryText='확인'
onPrimary={handleModalClose}
/>
</Container>
</Wrapper>
<Container isPage>
<p className='mb-4 text-3xl font-bold'>곡고 νŽΈμ§‘</p>

<form onSubmit={handleSubmit} className='flex w-full flex-col gap-4'>
<div className='grid grid-cols-1 gap-4 tablet:grid-cols-2 tablet:gap-6'>
<Input
id='wage'
label='μ‹œκΈ‰'
requiredMark
placeholder='12,500'
inputMode='numeric'
suffix='원'
value={wage}
onChange={e => setWage(e.currentTarget.value.replace(/\D+/g, ''))}
/>

<Input
id='workhour'
label='업무 μ‹œκ°„'
requiredMark
placeholder='4'
inputMode='numeric'
suffix='μ‹œκ°„'
value={workhour?.toString() ?? ''}
onChange={e => setWorkhour(Number(e.currentTarget.value))}
/>

<DateInput
label='μ‹œμž‘ λ‚ μ§œ'
requiredMark
value={date ?? undefined}
onChange={selectedDate =>
setDate(selectedDate instanceof Date ? selectedDate : new Date(selectedDate))
}
/>

<TimeInput label='μ‹œμž‘ μ‹œκ°„' requiredMark value={time} onChange={setTime} />
</div>

<div className='flex flex-col gap-2'>
<label htmlFor='description' className='text-sm font-medium'>
곡고 μ„€λͺ… <span className='text-red-500'>*</span>
</label>
<textarea
id='description'
name='description'
className='rounded-md border border-gray-300 p-2 focus:outline-none focus:ring-2 focus:ring-blue-400'
rows={4}
placeholder='곡고에 λŒ€ν•œ μ„€λͺ…을 μž…λ ₯ν•˜μ„Έμš”.'
value={description}
onChange={e => setDescription(e.target.value)}
/>
</div>

<Button
type='submit'
variant='primary'
size='lg'
className='mt-5 w-full'
disabled={!wage || !date || !time || !workhour || !description}
>
λ“±λ‘ν•˜κΈ°
</Button>
</form>

<Modal
open={modalOpen}
onClose={handleModalClose}
title='νŽΈμ§‘ μ™„λ£Œ'
variant='success'
primaryText='확인'
onPrimary={handleModalClose}
/>
</Container>
);
};

Expand Down
82 changes: 39 additions & 43 deletions src/pages/employer/shops/[shopId]/notices/[noticeId]/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Container, Wrapper } from '@/components/layout';
import { Container } from '@/components/layout';
import { Button, Modal, Notice, Table } from '@/components/ui';
import { TableRowProps } from '@/components/ui/table/TableRowProps';
import useAuth from '@/hooks/useAuth';
Expand Down Expand Up @@ -186,50 +186,46 @@ const EmployerNoticeDetailPage = ({ notice }: { notice: NoticeCard }) => {
}, [notice.shopId, notice.id, offset, limit]);

return (
<Wrapper>
<>
<Notice notice={notice} className='py-10 tablet:py-16'>
<Button
size='xs38'
full
className='font-bold'
variant={'secondary'}
onClick={handleEditClick}
disabled={!canEdit}
>
곡고 νŽΈμ§‘ν•˜κΈ°
</Button>
<Modal
open={modalOpen}
onClose={() => setModalOpen(false)}
variant='warning'
title={modal?.title ?? 'μœ μ € 정보λ₯Ό ν™•μΈν•΄μ£Όμ„Έμš”'}
primaryText={modal?.primaryText ?? '확인'}
onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
secondaryText={modal?.secondaryText}
onSecondary={modal?.onSecondary}
/>
</Notice>
<Container isPage>
<div>
<Notice notice={notice} className='py-10 tablet:py-16'>
<Button
size='xs38'
full
className='font-bold'
variant={'secondary'}
onClick={handleEditClick}
disabled={!canEdit}
>
곡고 νŽΈμ§‘ν•˜κΈ°
</Button>
<Modal
open={modalOpen}
onClose={() => setModalOpen(false)}
variant='warning'
title={modal?.title ?? 'μœ μ € 정보λ₯Ό ν™•μΈν•΄μ£Όμ„Έμš”'}
primaryText={modal?.primaryText ?? '확인'}
onPrimary={modal?.onPrimary ?? (() => setModalOpen(false))}
secondaryText={modal?.secondaryText}
onSecondary={modal?.onSecondary}
/>
</Notice>
<Table
headers={headers}
tableData={data}
userRole='employer'
total={data.length}
limit={limit}
offset={offset}
onPageChange={setOffset}
onStatusUpdate={(id, newStatus) =>
setData(prev =>
prev.map(row => (row.id === id ? { ...row, status: newStatus } : row))
)
}
shopId={notice.shopId}
noticeId={notice.id}
/>
</div>
<Table
headers={headers}
tableData={data}
userRole='employer'
total={data.length}
limit={limit}
offset={offset}
onPageChange={setOffset}
onStatusUpdate={(id, newStatus) =>
setData(prev => prev.map(row => (row.id === id ? { ...row, status: newStatus } : row)))
}
shopId={notice.shopId}
noticeId={notice.id}
/>
</Container>
</Wrapper>
</>
);
};

Expand Down
Loading
Loading