Skip to content

[#122] refactor(home): 미니홈 메인 전체화면 레이아웃 리팩토링 #151

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
sageherb merged 7 commits into from
Nov 19, 2025
Merged

[#122] refactor(home): 미니홈 메인 전체화면 레이아웃 리팩토링 #151

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
d23aefe
fix(home): 게시글 없는 사용자의 게시글 미리보기가 덮어씌워지는 현상 해결
RumPumpumpum Nov 19, 2025
2209aca
refactor(home): 테일윈드 브레이크 포인트를 통해 전체화면 시 프로필 이미지가 커지도록 구현
RumPumpumpum Nov 19, 2025
357da4a
refactor(home): 브레이크 포인트로 전체화면 시 좌측 프로필 영역에 py 패딩 추가
RumPumpumpum Nov 19, 2025
6937517
refactor(home): 게시물을 6개 불러와서 브레이크 포인트에 따라 6개 혹은 3개의 게시물을 표시하도록 변경
RumPumpumpum Nov 19, 2025
0aaf91a
refactor(home): 프로필 영역의 위아래 패딩을 제거하고 flex 정렬로 중앙배치
RumPumpumpum Nov 19, 2025
8bb99d9
refactor(home): 오른쪽 컨텐츠 영역에 스크롤바 적용하여 반응형으로 대응할 수 있게 구현
RumPumpumpum Nov 19, 2025
006631c
style(home): 코파일럿 리뷰에 따른 css 수정
RumPumpumpum Nov 19, 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
2 changes: 1 addition & 1 deletion src/features/minihome/MiniHome.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export default function MiniHome({ windowId, ownerId, tab = MINIHOME_TABS.home }
</Tabs.Trigger>
))}
</Tabs.List>
<Tabs.Content value={MINIHOME_TABS.home}>
<Tabs.Content value={MINIHOME_TABS.home} className="min-h-0 flex-1">
<Activity>
<HomePage ownerId={ownerId} setActiveTab={setActiveTab} />
</Activity>
Expand Down
22 changes: 13 additions & 9 deletions src/features/minihome/home/HomePage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ export default function HomePage({
const [posts, setPosts] = useState<GalleryPost[]>([]);

useEffect(() => {
setPosts([]);
const fetchHomePage = async () => {
try {
if (!user) {
Expand Down Expand Up @@ -134,13 +135,13 @@ export default function HomePage({
setImages(mappedImages);
}

// 게시물 정보 가져오기 (최근 3개)
// 게시물 정보 가져오기 (최근 6개)
const { data: postRows, error: postError } = await supabase
.from("homepage_posts")
.select("id, title, created_at, visibility")
.eq("homepage_id", homepage.id)
.order("created_at", { ascending: false })
.limit(3);
.limit(6);

if (postError) {
throw postError;
Expand Down Expand Up @@ -228,18 +229,18 @@ export default function HomePage({
};

return (
<div className="flex p-3">
<div className="@container flex h-full min-h-0 items-stretch p-3">
{/* 왼쪽 프로필 영역 */}
<div className="mr-3 flex w-1/3 flex-col items-center">
<div className="mr-3 flex h-full w-1/3 flex-col items-center justify-center">
{/* 프로필 이미지 */}

<Avatar src={avatarUrl} />
<Avatar src={avatarUrl} className="h-32 w-32 @2xl:h-64 @2xl:w-64" />

{/* 이름 */}
<p className="mt-4 text-lg text-[#342b4e]">{nickname}</p>

{/* 소개글 */}
<div className="bevel-pressed relative mt-4 flex h-2/3 w-full justify-center bg-white p-4 text-center text-xs leading-relaxed text-[#2D2640]">
<div className="bevel-pressed relative mt-4 flex h-2/3 w-full justify-center overflow-y-auto bg-white p-3 text-center text-xs leading-relaxed text-[#2D2640] @2xl:max-h-20">
<p>{bio}</p>
</div>

Expand Down Expand Up @@ -267,7 +268,7 @@ export default function HomePage({
</div>

{/* 오른쪽 콘텐츠 */}
<div className="flex w-2/3 flex-col gap-3">
<div className="scrollbar flex h-full min-h-0 w-2/3 flex-col gap-3 overflow-y-auto pr-2">
{/* 사진첩 */}
<div className="bevel-pressed bg-white p-4 text-[#2D2640]">
<div className="mb-3 flex items-center justify-between">
Expand Down Expand Up @@ -315,10 +316,13 @@ export default function HomePage({
</div>

<ul className="flex flex-1 flex-col text-xs text-[#3d3462]">
{posts.map((post) => (
{posts.map((post, index) => (
<li
key={post.id}
className="mr-3 flex flex-1 items-center justify-between border-b border-[#d7ccef] py-2 last:border-0 hover:bg-[#e9e0ff]"
className={twMerge(
"mr-3 flex flex-1 items-center justify-between border-b border-[#d7ccef] py-2 last:border-0 hover:bg-[#e9e0ff]",
index >= 3 && "hidden @2xl:flex"
)}
>
<span className="pl-3">{post.title}</span>
<div className="flex items-center gap-3 text-[#6b5fa0]">
Expand Down
Loading