Skip to content

맥북 환경에서 룸 UI 스크롤 이슈 #225

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

Open
wants to merge 5 commits into
base: dev
Choose a base branch
from
Open

맥북 환경에서 룸 UI 스크롤 이슈 #225

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
36c02e5
💄design: 대기실 버튼 사이즈 조정 및 공통 className 분리
joyswim Sep 2, 2025
33a455d
💄design: 룸 UserList 크기 작게 조정
joyswim Sep 2, 2025
90a0c02
🐛fix: 룸/결과 가로스크롤 이슈 해결(margin>padding) 수정
joyswim Sep 2, 2025
2c286f6
💄design: UserList 크기 크게 조정
joyswim Sep 2, 2025
3d3feef
🐛fix: 가로세로 스크롤 영역만큼 스크롤 이슈 overflow-hidden 적용
joyswim Sep 2, 2025
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
16 changes: 10 additions & 6 deletions src/app/room/[roomId]/_component/PrevGame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ const PrevGame = ({
}: PrevGameProps) => {
const gameType = gameToType(roomDetail.game.nameEn);
const totalRoundsRef = useRef<number>(GAME_QUESTIONS_COUNT[gameType].MIN);
const buttonClassName = 'text-sm 2xl:text-base font-semibold w-[11rem]';

const { myName } = useRoomStore();
const { openModal } = useModalStore();
Expand Down Expand Up @@ -112,10 +113,10 @@ const PrevGame = ({
/>
<Button
className={cn(
'text-base font-semibold w-[12rem]',
buttonClassName,
!isAllReady && 'pointer-events-none'
)}
size="xl"
size="lg"
variant={
isAllReady && roomDetail.players.length !== 1
? 'default'
Expand Down Expand Up @@ -145,8 +146,11 @@ const PrevGame = ({
{isDevelopment && (
<Button
variant={'secondary'}
className="text-base font-semibold w-[12rem] flex items-center justify-center gap-2"
size="xl"
className={cn(
buttonClassName,
'flex items-center justify-center gap-2'
)}
size="lg"
onClick={handleGameChange}
>
<SlidersHorizontal />
Expand All @@ -159,8 +163,8 @@ const PrevGame = ({

{!isRoomManager && (
<Button
className="text-base font-semibold w-[12rem]"
size="xl"
className={buttonClassName}
size="lg"
variant={isReady ? 'waiting' : 'default'}
onClick={isReady ? handleUnready : handleReady}
>
Expand Down
4 changes: 2 additions & 2 deletions src/app/room/[roomId]/_component/UserList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,10 +26,10 @@ const UserList = ({ players }: UserListProps) => {
};

return (
<section className="flex flex-col gap-3 h-[80vh] w-[14rem] min-w-[14rem] max-w-[15rem] relative ml-10">
<section className="flex flex-col gap-3 h-[80vh] w-[14.5rem] 2xl:w-[16rem] max-w-[16rem] relative pl-10 shrink-0">
{roomStatus === ROOM_STATUS.IDLE && (
<Button
className="absolute -top-12 left-0"
className="absolute -top-12 left-10"
size={'sm'}
variant={'secondary'}
onClick={handleLinkCopy}
Expand Down
2 changes: 1 addition & 1 deletion src/app/room/[roomId]/_component/WaitingRoom.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ const WaitingRoom = ({
}

return (
<section className="w-screen min-h-screen flex items-start justify-start 2xl:justify-center gap-4 shrink-0 py-20 overflow-y-hidden">
<section className="w-screen min-h-screen flex items-start justify-start 2xl:justify-center gap-4 shrink-0 py-20 overflow-hidden">
<UserList players={players} />
<section className="flex flex-col gap-300 h-[calc(100vh-12rem)] min-h-[30rem] max-w-[60%] min-w-max w-full rounded-lg shrink-0">
<ErrorHandlingWrapper
Expand Down
6 changes: 3 additions & 3 deletions src/components/UserInfoCard/UserInfoCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ const UserInfoCard = ({
className={cn(
isReady ? 'bg-primary/50' : 'bg-container',
isStart && 'bg-container',
'w-full h-[4rem] flex rounded-lg relative'
'w-full h-[3.5rem] 2xl:h-[4rem] flex rounded-lg relative'
)}
>
{isHost && (
Expand All @@ -49,7 +49,7 @@ const UserInfoCard = ({
/>
</section>
)}
<figure className="flex justify-center items-center rounded-l-lg overflow-hidden w-[4rem] bg-white">
<figure className="flex justify-center items-center rounded-l-lg overflow-hidden w-[3rem] 2xl:w-[3.5rem] bg-white">
<Image
src={`/images/characters/${fileName}.webp`}
alt="profile"
Expand All @@ -59,7 +59,7 @@ const UserInfoCard = ({
/>
<figcaption className="sr-only">{`${fileName} 캐릭터 이미지`}</figcaption>
</figure>
<div className="w-[calc(100%-4rem)] pl-3 pr-2 flex items-center font-medium justify-between gap-1">
<div className="w-[calc(100%-4rem)] flex items-center font-medium justify-between pl-2">
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

high

캐릭터 이미지(<figure>)의 너비가 w-[4rem]에서 반응형 너비(w-[3rem] 2xl:w-[3.5rem])로 변경되었는데, 사용자 이름 영역(div)의 너비는 w-[calc(100%-4rem)]으로 고정되어 있습니다. 이 값은 더 이상 유효하지 않으며, 화면 크기에 따라 레이아웃이 깨질 수 있습니다.

부모 요소에 flex가 적용되어 있으므로, calc() 대신 flex-1 유틸리티를 사용하여 남은 공간을 모두 차지하도록 하는 것이 더 유연하고 안정적인 방법입니다.

Suggested change
<div className="w-[calc(100%-4rem)] flex items-center font-medium justify-between pl-2">
<div className="flex-1 flex items-center font-medium justify-between pl-2">

<span className={cn(myName === name && 'text-primary-400 font-bold')}>
{name}
</span>
Expand Down