From 4f9789c08adfa868dca3b8126dac045e38b35fe3 Mon Sep 17 00:00:00 2001 From: Mina Choi Date: Thu, 23 Jul 2026 15:43:23 +0900 Subject: [PATCH] =?UTF-8?q?[feat]=20=EA=B3=B5=EA=B8=89=EC=82=AC=20?= =?UTF-8?q?=ED=8F=AC=ED=84=B8=C2=B7landing:=20=EC=B1=84=ED=8C=85=20?= =?UTF-8?q?=EB=82=A8=EC=9D=80=EC=8B=9C=EA=B0=84=C2=B7=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=A0=95=EB=B9=84,=20=EB=8D=B0=EB=AA=A8=20=EB=AF=B8=EB=94=94?= =?UTF-8?q?=EC=96=B4(mp4/gif)=20=EA=B5=90=EC=B2=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 공급사 포털: 채팅 말풍선·남은시간 표기·헤더바·채팅 화면 정비 - landing: how-it-works 데모를 GIF 재생으로 되돌리고 히어로·디바이스 목업 조정, negotiation_annotated_3d 미디어 갱신 --- .../features/chat/components/ChatMessage.tsx | 2 +- .../chat/components/RemainingTime.tsx | 17 ++++++++++++++--- frontend/src/layouts/MainHeaderBar.tsx | 6 ++++-- frontend/src/pages/ChatPage.tsx | 9 +++++---- .../components/sections/hero-neumorphic.tsx | 4 ++-- .../components/sections/how-it-works-demo.tsx | 2 -- landing/app/components/ui/device-mockups.tsx | 8 ++++---- landing/app/routes/home.tsx | 2 +- .../public/gifs/negotiation_annotated_3d.jpg | Bin 71029 -> 87256 bytes .../public/gifs/negotiation_annotated_3d.mp4 | Bin 1070596 -> 693250 bytes 10 files changed, 31 insertions(+), 19 deletions(-) diff --git a/frontend/src/features/chat/components/ChatMessage.tsx b/frontend/src/features/chat/components/ChatMessage.tsx index 3141b53..0f57969 100644 --- a/frontend/src/features/chat/components/ChatMessage.tsx +++ b/frontend/src/features/chat/components/ChatMessage.tsx @@ -22,7 +22,7 @@ export function ChatMessage() { 스크롤 시 여백도 함께 밀려 올라가도록 스크롤 컨테이너 안쪽에 둔다 */}
diff --git a/frontend/src/features/chat/components/RemainingTime.tsx b/frontend/src/features/chat/components/RemainingTime.tsx index b507076..4f4355f 100644 --- a/frontend/src/features/chat/components/RemainingTime.tsx +++ b/frontend/src/features/chat/components/RemainingTime.tsx @@ -20,12 +20,23 @@ export function RemainingTime() { return ( - - 협상 마감 {remaining} + + + {ended ? ( + // 종료 시엔 어느 폭에서도 긴 문장('종료되었습니다.')을 쓰지 않는다 — 헤더에서 잘리던 원인. + '마감 종료' + ) : ( + <> + 협상 마감 + {remaining} + + )} + ) } diff --git a/frontend/src/layouts/MainHeaderBar.tsx b/frontend/src/layouts/MainHeaderBar.tsx index e7b1e1b..d47b808 100644 --- a/frontend/src/layouts/MainHeaderBar.tsx +++ b/frontend/src/layouts/MainHeaderBar.tsx @@ -1,9 +1,11 @@ import { type ReactNode } from 'react' import { cn } from '@/lib' -// safe-t: 노치 기기에서 헤더가 상태바 밑으로 파고들지 않도록 안전영역만큼 키운다(h-[56px] 은 콘텐츠 높이). +// safe-t: 노치 기기에서 헤더가 상태바 밑으로 파고들지 않도록 안전영역만큼 키운다. +// box-content 금지 — w-full + px-* 와 겹치면 폭이 "부모100% + 좌우패딩"이 되어 오른쪽이 잘린다. +// 대신 border-box(기본) 유지하고 min-h 로 56px + 안전영역을 확보한다. const HEADER_BASE = - 'flex w-full h-[56px] box-content safe-t items-center bg-white text-foreground border-b border-border' + 'flex w-full min-h-[calc(56px+env(safe-area-inset-top))] safe-t items-center bg-white text-foreground border-b border-border' const HEADER_ALIGN = { left: 'justify-start', diff --git a/frontend/src/pages/ChatPage.tsx b/frontend/src/pages/ChatPage.tsx index 5f6a1cd..a4c0a25 100644 --- a/frontend/src/pages/ChatPage.tsx +++ b/frontend/src/pages/ChatPage.tsx @@ -25,8 +25,9 @@ export function ChatPage() { sidebar={} header={ -
-
+ {/* min-w-0: flex 기본 min-width:auto 라 자식이 안 줄어들어 헤더 밖으로 넘치던 것 방지 */} +
+
@@ -34,7 +35,7 @@ export function ChatPage() { 실시간 구매 협상 채널
-
+
} label="상품" panel="product" /> } label="현황" panel="status" /> @@ -92,7 +93,7 @@ function PanelToggle({ type="button" onClick={() => open(panel)} className={cn( - 'flex items-center gap-1 rounded-lg border border-border px-2 py-1.5 text-xs font-bold text-neutral-70 hover:bg-neutral-10 lg:hidden', + 'flex shrink-0 items-center gap-1 rounded-lg border border-border px-2 py-1.5 text-xs font-bold text-neutral-70 hover:bg-neutral-10 lg:hidden', interactive, )} > diff --git a/landing/app/components/sections/hero-neumorphic.tsx b/landing/app/components/sections/hero-neumorphic.tsx index 648afae..8793f8f 100644 --- a/landing/app/components/sections/hero-neumorphic.tsx +++ b/landing/app/components/sections/hero-neumorphic.tsx @@ -57,8 +57,8 @@ export function HeroNeumorphic() { className="w-full flex justify-center" >