Skip to content

♻️[Refactor] 채팅창 높이 지정 #305 #307

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
haegu97 merged 1 commit into from
Jan 10, 2025
Merged

♻️[Refactor] 채팅창 높이 지정 #305 #307

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
111 changes: 60 additions & 51 deletions src/app/chat/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -178,61 +178,70 @@ function ChatRoomPage() {
};

return (
<div className="relative flex w-full flex-1 flex-col gap-5 pb-10">
<header className="flex w-full min-w-[336px] items-end bg-gray-light-02 px-[20px] py-[30px] sm:justify-between md:px-[24px] lg:px-[102px]">
<div className="flex w-full flex-col gap-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<IconButton
icon={<GoBackIcon />}
onClick={handleGoBack}
className="bg-gray-light-02"
/>
<h3>채팅</h3>
<ParticipantCounter current={bookClubDetail?.memberCount} />
</div>
<div>
<IconButton
icon={<HamburgerMenuIcon width={16} height={12} />}
onClick={() => {}}
className="bg-gray-light-02"
/>
<div className="absolute bottom-0 left-0 right-0 top-[60px] flex justify-center">
Copy link
Contributor

@cloud0406 cloud0406 Jan 10, 2025

Choose a reason for hiding this comment

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

p4: 음 아마 absolute로 주게되면 바라보고 있는 기준 컴포넌트가 수정되어서 사이즈가 조금 변경될때마다 여기서도 수정작업이 들어가야할 것 같긴하네요
지금 당장은 디자인이 수정될 일은 없어서 괜찮을 것 같은데 이 부분은 다른 방법으로 접근할 수 있나 한 번 합쳐서 저도 봐보도록 하겠습니다!

<div className="flex h-full w-full max-w-[996px] flex-col">
<header className="w-full bg-gray-light-02 px-[20px] py-[30px] sm:justify-between md:px-[24px] lg:px-[102px]">
<div className="flex w-full flex-col gap-5">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<IconButton
icon={<GoBackIcon />}
onClick={handleGoBack}
className="bg-gray-light-02"
/>
<h3>채팅</h3>
<ParticipantCounter current={bookClubDetail?.memberCount} />
</div>
<div>
<IconButton
icon={<HamburgerMenuIcon width={16} height={12} />}
onClick={() => {}}
className="bg-gray-light-02"
/>
</div>
</div>
<ChatCard
variant="chatRoomHeader"
props={{
imageUrl:
bookClubDetail?.imageUrl || '/images/defaultBookClub.jpg',
isHost: bookClubDetail?.isHost || false,
title: bookClubDetail?.title || '',
location: bookClubDetail?.town || '',
datetime: bookClubDetail?.targetDate
? formatDateForUI(bookClubDetail.targetDate, 'KOREAN')
: '',
meetingType: bookClubDetail?.meetingType || 'OFFLINE',
onClick: () => router.push(`/bookclub/${chatId}`),
}}
/>
</div>
<ChatCard
variant="chatRoomHeader"
props={{
imageUrl:
bookClubDetail?.imageUrl || '/images/defaultBookClub.jpg',
isHost: bookClubDetail?.isHost || false,
title: bookClubDetail?.title || '',
location: bookClubDetail?.town || '',
datetime: bookClubDetail?.targetDate
? formatDateForUI(bookClubDetail.targetDate, 'KOREAN')
: '',
meetingType: bookClubDetail?.meetingType || 'OFFLINE',
onClick: () => router.push(`/bookclub/${chatId}`),
}}
</header>

<div className="flex-1 overflow-y-auto">
<ChatBubbleList
groupedMessages={convertToGroupedMessage(chatHistory)}
hostId={chatId}
onProfileClick={() => {}}
/>
</div>
</header>
<div className="flex-1 overflow-y-auto">
<ChatBubbleList
groupedMessages={convertToGroupedMessage(chatHistory)}
hostId={chatId}
onProfileClick={() => {}}
/>
</div>
<div className="sticky bottom-0 flex w-full items-center justify-between gap-3 bg-white">
<form className="w-full" onSubmit={handleSubmit}>
<MessageInput value={message} onChange={handleMessageChange} />
</form>
<IconButton
icon={<MessageIcon />}
aria-label="메시지 전송"
className="h-[52px] w-[52px] bg-green-light-01"
onClick={handleSubmit}
/>

<div className="w-full bg-white p-4">
<form
className="flex w-full items-center gap-3"
onSubmit={handleSubmit}
>
<div className="flex-1">
<MessageInput value={message} onChange={handleMessageChange} />
</div>
<IconButton
icon={<MessageIcon />}
aria-label="메시지 전송"
className="h-[52px] w-[52px] bg-green-light-01"
onClick={handleSubmit}
/>
</form>
</div>
</div>
</div>
);
Expand Down
Loading