fix: 방명록 수정 (#43)

Nexters · Aug 19, 2023 · d36668b · d36668b
1 parent 8b4738d
commit d36668b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/src/components/user/guest-book/GuestBookBanner.tsx b/src/components/user/guest-book/GuestBookBanner.tsx
@@ -18,12 +18,14 @@ interface VisitLog {
 
 const Log = ({ text, name }: Pick<VisitLog, 'name' | 'text'>) => {
   return (
-    <div className='tw-relative tw-flex tw-h-9 tw-flex-row tw-justify-between tw-py-1.5'>
-      <div className='tw-flex tw-flex-row tw-gap-2'>
-        <Icon iconType='GuestBook' />
-        <p>{text}</p>
+    <div className='tw-relative tw-flex tw-h-9 tw-w-full tw-items-center tw-justify-between tw-gap-1 tw-py-1.5'>
+      <div className='tw-flex tw-flex-1 tw-items-center tw-gap-2 tw-overflow-hidden'>
+        <Icon iconType='GuestBook' className='tw-flex-shrink-0' />
+        <p className='tw-flex-1 tw-overflow-hidden tw-text-ellipsis tw-whitespace-nowrap'>
+          {text}
+        </p>
       </div>
-      <button className='tw-text-grayscale-300'>{`-  ${name}`}</button>
+      <span className='tw-flex-shrink-0 tw-text-grayscale-300'>{`-  ${name}`}</span>
     </div>
   );
 };

diff --git a/src/pages/user/[id]/guest-book/index.tsx b/src/pages/user/[id]/guest-book/index.tsx
@@ -87,18 +87,20 @@ export default function GuestBookPage({ userId }: GuestBookProps) {
             <div
               key={log_id}
               className={cn(
-                'tw-h-[188px] tw-border-b tw-border-white tw-pb-4 tw-pl-5 tw-pr-5 tw-pt-5',
+                'tw-flex tw-h-[188px] tw-flex-col tw-border-b tw-border-white tw-pb-4 tw-pl-5 tw-pr-5 tw-pt-5',
                 {
                   'tw-border-r': idx % 2 === 0,
                 },
               )}
             >
-              <p className='tw-text-body1 tw-h-[108px] tw-text-white'>{text}</p>
+              <p className='tw-text-body1 tw-mb-2 tw-flex-1 tw-overflow-scroll tw-text-white'>
+                {text}
+              </p>
               <div className='tw-flex tw-items-center tw-justify-between'>
                 <div className='tw-flex tw-flex-col tw-gap-1 tw-text-white'>
                   <span className='tw-text-caption'>{name}</span>
                   <span className='tw-text-caption tw-text-grayscale-400'>
-                    {created_at}
+                    {new Date(created_at).toLocaleDateString()}
                   </span>
                 </div>
                 {getIsLogin() && (