사용자 관리 페이지 스크롤 레이아웃 개선
- UserManageAuthList: 스크롤바 숨김 처리 및 스크롤 영역 설정 - UserManageWrap: flexbox 레이아웃 적용으로 사용자 추가 버튼 하단 고정 - 스크롤바 숨김 유틸리티 클래스 추가 - console.log 제거 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -5,9 +5,16 @@ export const UserManageAuthList = ({
|
||||
userItems,
|
||||
mid
|
||||
}: UserManageAuthListProps) => {
|
||||
console.log("UserManageAuthList", userItems, mid);
|
||||
return (
|
||||
<div className="auth-list">
|
||||
<div
|
||||
className="auth-list scrollbar-hide"
|
||||
style={{
|
||||
height: '100%',
|
||||
overflowY: 'auto',
|
||||
scrollbarWidth: 'none', // Firefox
|
||||
msOverflowStyle: 'none', // IE and Edge
|
||||
}}
|
||||
>
|
||||
{userItems.map((item) => (
|
||||
<UserManageAuthItem
|
||||
key={item.usrid}
|
||||
|
||||
@@ -40,32 +40,38 @@ export const UserManageWrap = () => {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="ing-list">
|
||||
<div className="input-wrapper top-select mt-16">
|
||||
<select
|
||||
value={mid}
|
||||
onChange={e => setMid(e.target.value)}
|
||||
>
|
||||
{
|
||||
midOptions.map((value, index) => (
|
||||
<option
|
||||
key={ value.value }
|
||||
value={ value.value }
|
||||
selected={ (userMid === value.value)? true: false }
|
||||
>{ value.name }</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
<div className="ing-list" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 200px)' }}>
|
||||
<div style={{ flexShrink: 0 }}>
|
||||
<div className="input-wrapper top-select mt-16">
|
||||
<select
|
||||
value={mid}
|
||||
onChange={e => setMid(e.target.value)}
|
||||
>
|
||||
{
|
||||
midOptions.map((value, index) => (
|
||||
<option
|
||||
key={ value.value }
|
||||
value={ value.value }
|
||||
selected={ (userMid === value.value)? true: false }
|
||||
>{ value.name }</option>
|
||||
))
|
||||
}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div className="ing-title">등록 현황</div>
|
||||
</div>
|
||||
|
||||
<div className="ing-title">등록 현황</div>
|
||||
{ (!!userItems && userItems.length > 0) &&
|
||||
<UserManageAuthList
|
||||
userItems={ userItems }
|
||||
mid={ mid }
|
||||
></UserManageAuthList>
|
||||
}
|
||||
<div className="apply-row bottom-padding">
|
||||
<div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
|
||||
{ (!!userItems && userItems.length > 0) &&
|
||||
<UserManageAuthList
|
||||
userItems={ userItems }
|
||||
mid={ mid }
|
||||
></UserManageAuthList>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div className="apply-row">
|
||||
<button
|
||||
className="btn-50 btn-blue flex-1"
|
||||
onClick={ () => onClickToNavigation() }
|
||||
|
||||
@@ -2397,13 +2397,13 @@ div .credit-period {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px 26px 16px 26px;
|
||||
padding: 20px 26px calc(env(safe-area-inset-bottom, 0px) + 26px) 26px;
|
||||
z-index: 500;
|
||||
background: var(--color-white);
|
||||
}
|
||||
|
||||
.apply-row.bottom-padding {
|
||||
bottom: 70px !important;
|
||||
bottom: calc(env(safe-area-inset-bottom) + 26px) !important;
|
||||
}
|
||||
|
||||
.apply-row.two-button button:first-child {
|
||||
@@ -6174,3 +6174,8 @@ ul.txn-amount-detail li span:last-child {
|
||||
background-color: var(--color-white);
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
/* Scrollbar hide utility class */
|
||||
.scrollbar-hide::-webkit-scrollbar {
|
||||
display: none; /* Chrome, Safari, Opera */
|
||||
}
|
||||
Reference in New Issue
Block a user