사용자 관리 페이지 스크롤 레이아웃 개선

- 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:
Jay Sheen
2025-10-17 16:56:38 +09:00
parent 35f3c694be
commit 3886e93b49
3 changed files with 48 additions and 30 deletions

View File

@@ -5,11 +5,18 @@ export const UserManageAuthList = ({
userItems, userItems,
mid mid
}: UserManageAuthListProps) => { }: UserManageAuthListProps) => {
console.log("UserManageAuthList", userItems, mid);
return ( 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) => ( {userItems.map((item) => (
<UserManageAuthItem <UserManageAuthItem
key={item.usrid} key={item.usrid}
usrid={item.usrid} usrid={item.usrid}
mid={mid} mid={mid}

View File

@@ -40,33 +40,39 @@ export const UserManageWrap = () => {
return ( return (
<> <>
<div className="ing-list"> <div className="ing-list" style={{ display: 'flex', flexDirection: 'column', height: 'calc(100vh - 200px)' }}>
<div className="input-wrapper top-select mt-16"> <div style={{ flexShrink: 0 }}>
<select <div className="input-wrapper top-select mt-16">
value={mid} <select
onChange={e => setMid(e.target.value)} value={mid}
> onChange={e => setMid(e.target.value)}
{ >
midOptions.map((value, index) => ( {
<option midOptions.map((value, index) => (
key={ value.value } <option
value={ value.value } key={ value.value }
selected={ (userMid === value.value)? true: false } value={ value.value }
>{ value.name }</option> selected={ (userMid === value.value)? true: false }
)) >{ value.name }</option>
} ))
</select> }
</select>
</div>
<div className="ing-title"> </div>
</div> </div>
<div className="ing-title"> </div> <div style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
{ (!!userItems && userItems.length > 0) && { (!!userItems && userItems.length > 0) &&
<UserManageAuthList <UserManageAuthList
userItems={ userItems } userItems={ userItems }
mid={ mid } mid={ mid }
></UserManageAuthList> ></UserManageAuthList>
} }
<div className="apply-row bottom-padding"> </div>
<button
<div className="apply-row">
<button
className="btn-50 btn-blue flex-1" className="btn-50 btn-blue flex-1"
onClick={ () => onClickToNavigation() } onClick={ () => onClickToNavigation() }
> </button> > </button>

View File

@@ -2397,13 +2397,13 @@ div .credit-period {
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
padding: 20px 26px 16px 26px; padding: 20px 26px calc(env(safe-area-inset-bottom, 0px) + 26px) 26px;
z-index: 500; z-index: 500;
background: var(--color-white); background: var(--color-white);
} }
.apply-row.bottom-padding { .apply-row.bottom-padding {
bottom: 70px !important; bottom: calc(env(safe-area-inset-bottom) + 26px) !important;
} }
.apply-row.two-button button:first-child { .apply-row.two-button button:first-child {
@@ -6173,4 +6173,9 @@ ul.txn-amount-detail li span:last-child {
border-radius: 4px; border-radius: 4px;
background-color: var(--color-white); background-color: var(--color-white);
transition: all 0.2s ease; transition: all 0.2s ease;
}
/* Scrollbar hide utility class */
.scrollbar-hide::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
} }