From 0687a95dcd575ba4d9b9c27287445fd4652ff834 Mon Sep 17 00:00:00 2001
From: dia-triple <133629020+dia-triple@users.noreply.github.com>
Date: Tue, 8 Apr 2025 18:16:53 +0900
Subject: [PATCH] =?UTF-8?q?[DMTALK-135]=20feat:=20=EC=98=88=EC=95=BD?=
 =?UTF-8?q?=EC=A0=95=EB=B3=B4=20UI=20=EB=94=94=EC=9E=90=EC=9D=B8=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95=20=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/chat/reservation-info/elements.tsx    | 20 +++++++++----------
 .../reservation-info/reservation-info.tsx     | 10 +++++-----
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/packages/tds-widget/src/chat/reservation-info/elements.tsx b/packages/tds-widget/src/chat/reservation-info/elements.tsx
index a4dd47d98a..d3e4d0017f 100644
--- a/packages/tds-widget/src/chat/reservation-info/elements.tsx
+++ b/packages/tds-widget/src/chat/reservation-info/elements.tsx
@@ -7,15 +7,15 @@ import styled, { css } from 'styled-components'
 
 import { reservationInfoTheme } from './theme-provider'
 
-const RESERVATION_INFO_MIN_CONTENT_HEIGHT = 62
+const RESERVATION_INFO_MIN_CONTENT_HEIGHT = 40
 const PRODUCT_INFO_MIN_CONTENT_HEIGHT = 21
 
 export const Container = styled(BaseContainer)`
-  padding: 11px 15px;
+  padding: 12px;
   box-shadow: 0 0 20px 0
     ${({ theme }) =>
       (theme.reservationInfo || reservationInfoTheme).shadowColor};
-  border-radius: 8px;
+  border-radius: 12px;
   border: 1px solid
     ${({ theme }) =>
       (theme.reservationInfo || reservationInfoTheme).borderColor};
@@ -25,7 +25,7 @@ export const Container = styled(BaseContainer)`
 `
 
 export const Details = styled.dl<{ expanded: boolean }>`
-  margin-top: 6px;
+  margin-top: ${({ expanded }) => (expanded ? '4px' : '1.5px')};
   display: flex;
   flex-direction: column;
   gap: 2px;
@@ -41,14 +41,14 @@ export const Details = styled.dl<{ expanded: boolean }>`
       flex-shrink: 0;
       color: ${({ theme }) =>
         (theme.reservationInfo || reservationInfoTheme).detail.labelColor};
-      margin-right: 14px;
+      margin-right: 8px;
       width: 42px;
     }
 
     dd {
       display: inline;
       color: ${({ theme }) =>
-        (theme.reservationInfo || reservationInfoTheme).valueColor};
+        (theme.reservationInfo || reservationInfoTheme).detail.valueColor};
       ${({ expanded }) => !expanded && maxLinesMixin({ maxLines: 1 })}
 
       & + dd {
@@ -72,8 +72,8 @@ export const ContentContainer = styled(BaseContainer)`
 `
 
 export const Thumbnail = styled.img<{ small?: boolean }>`
-  width: ${({ small = false }) => (small ? '32' : '42')}px;
-  height: ${({ small = false }) => (small ? '32' : '42')}px;
+  width: ${({ small = false }) => (small ? '30' : '40')}px;
+  height: ${({ small = false }) => (small ? '30' : '40')}px;
   border-radius: 6px;
   margin-right: 12px;
 `
@@ -107,10 +107,10 @@ export const ArrowButton = styled.button.attrs({ type: 'button' })<{
 export const TitleContainer = styled(BaseContainer)`
   display: flex;
   flex-direction: row;
-  gap: 6px;
+  gap: 16px;
 
   &:has(${ArrowButton}) {
-    padding-right: 16px;
+    padding-right: 18px;
   }
 `
 
diff --git a/packages/tds-widget/src/chat/reservation-info/reservation-info.tsx b/packages/tds-widget/src/chat/reservation-info/reservation-info.tsx
index 995acdc66b..ef9ce01102 100644
--- a/packages/tds-widget/src/chat/reservation-info/reservation-info.tsx
+++ b/packages/tds-widget/src/chat/reservation-info/reservation-info.tsx
@@ -71,16 +71,16 @@ function ReservationInfoImpl(
         {thumbnail ? <Thumbnail src={thumbnail} small={!hasDetails} /> : null}
         <DetailContainer expanded={expanded}>
           <TitleContainer>
-            {label ? (
-              <Label color={label.color} css={label.css}>
-                {label.text}
-              </Label>
-            ) : null}
             {title ? (
               <Title ref={titleRef} maxLines={expanded ? undefined : 1}>
                 {title}
               </Title>
             ) : null}
+            {label ? (
+              <Label color={label.color} css={label.css}>
+                {label.text}
+              </Label>
+            ) : null}
             {expandable ? (
               <ArrowButton
                 expanded={expanded}