File name
Commit message
Commit date
File name
Commit message
Commit date
File name
Commit message
Commit date
const rows = Array.from({ length: 5 }).map((_, index) => ({
no: index + 1,
title: `게시글 제목 샘플 ${index + 1}`,
period: '2026-05-04 ~ 2026-05-31',
createdAt: '2026-05-04',
status: index === 0 ? '접수중' : '마감',
}));
export function UserListPage() {
return (
<>
<ul className="tabs fill tab03">
<li>
<button type="button" className="tab active">
tab1
</button>
</li>
<li>
<button type="button" className="tab">
tab2
</button>
</li>
<li>
<button type="button" className="tab">
tab3
</button>
</li>
</ul>
<div className="search_area">
<div className="search_left">
<p className="total_number">
총 게시물 <b>111</b>건
</p>
</div>
<div className="search_right">
<select title="검색조건" className="search_select">
<option>전체</option>
<option>제목</option>
<option>내용</option>
</select>
<div className="search_type input_type">
<input type="text" title="검색어 입력" className="input search_input" />
</div>
<button type="button" className="btn btn_search">
검색
</button>
<button type="button" className="btn btn_reset">
초기화
</button>
</div>
</div>
<div className="table table_type_cols">
<table>
<colgroup>
<col style={{ width: '80px' }} />
<col style={{ width: 'auto' }} />
<col style={{ width: '26%' }} />
<col style={{ width: '11%' }} />
<col style={{ width: '12%' }} />
</colgroup>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>기간</th>
<th>등록일</th>
<th>상태</th>
</tr>
</thead>
<tbody>
{rows.map((row) => (
<tr key={row.no}>
<td>
<span className="mobile_show">번호</span>
{row.no}
</td>
<td className="text_left">
<span className="mobile_hide">제목</span>
<a href="#">{row.title}</a>
</td>
<td>
<span className="mobile_show">기간</span>
{row.period}
</td>
<td>
<span className="mobile_show">등록일</span>
{row.createdAt}
</td>
<td>
<span className="mobile_show">상태</span>
<strong className={`status line ${row.status === '접수중' ? 'blue' : 'gray'}`}>{row.status}</strong>
</td>
</tr>
))}
</tbody>
</table>
</div>
<ul className="page">
<li>
<a href="#" className="btn_page btn_first" title="첫 페이지로 이동">
<i />
</a>
</li>
<li>
<a href="#" className="btn_page btn_prev" title="이전 페이지로 이동">
<i />
</a>
</li>
<li>
<a href="#" className="active">
1
</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
<li>
<a href="#" className="btn_page btn_next" title="다음 페이지로 이동">
<i />
</a>
</li>
<li>
<a href="#" className="btn_page btn_last" title="마지막 페이지로 이동">
<i />
</a>
</li>
</ul>
</>
);
}