refactor: mypageTable style

use overflow-hidden to clip support dark theme
gsainfoteam · Nov 16, 2023 · f0942a4 · f0942a4
1 parent 0e12e85
commit f0942a4
Showing 1 changed file with 12 additions and 19 deletions.
diff --git a/src/app/[lng]/mypage/MypageTable.tsx b/src/app/[lng]/mypage/MypageTable.tsx
@@ -30,13 +30,11 @@ interface MypageTableProps {
   link: string;
 }
 
-interface UnderLinedTextProps {
-  text: string;
-}
-
-const UnderLinedText = ({ text }: UnderLinedTextProps) => {
+const UnderLinedText = ({ children }: React.PropsWithChildren) => {
   return (
-    <div className="m-5 border-b border-gray-200 w-50 text-white">{text}</div>
+    <div className="m-5 border-b border-gray-200 w-50 text-white">
+      {children}
+    </div>
   );
 };
 
@@ -48,38 +46,33 @@ const MypageTable = async ({
 }: MypageTableProps & { lng: Locale }) => {
   const { t } = await createTranslation(lng, 'translation');
   return (
-    <div className="rounded-lg shadow-md bg-white w-[550px] xl:w-[600px]">
-      <div className="w-full border border-white border-collapse border-spacing-0 rounded-lg">
-        <div className="m-0 flex flex-row w-full border border-collapse border-spacing-0 rounded-tl-lg rounded-tr-lg bg-primary">
+    <div className="rounded-lg shadow-md bg-white dark:bg-text w-[550px] xl:w-[600px]">
+      <div className="w-full border border-white border-collapse border-spacing-0 rounded-lg overflow-hidden">
+        <div className="m-0 flex flex-row w-full border-collapse border-spacing-0 bg-primary">
           <div className="w-3/4 rounded-tl-10">
             <div className="text-xl m-5 text-white font-bold">{title}</div>
           </div>
           <div className="w-1/4 rounded-tr-10 text-right">
             <div className="flex items-end justify-end text-s text-regular text-white h-full">
-              <UnderLinedText text={t('mypage.totalList')}></UnderLinedText>
+              <UnderLinedText>{t('mypage.totalList')}</UnderLinedText>
             </div>
           </div>
         </div>
 
         {articles.map((articleObj, index) => {
           const isLastRow = index === articles.length - 1;
-          const borderBottomRadius = isLastRow ? '10px' : '0px';
           const underLine = isLastRow ? '' : 'border-b border-gray-300';
           return (
             <div
               key={index}
-              className={`flex h-[70px] ${underLine} items-center flex-row justify-between bg-colorless rounded-bl-${borderBottomRadius} rounded-br-${borderBottomRadius}`}
+              className={`flex h-[70px] ${underLine} items-center flex-row justify-between bg-colorless`}
             >
-              <div
-                className={`pb-0 sm:pb-0 rounded-bl-${borderBottomRadius} leading-1.5`}
-              >
-                <div className="text-regular m-3.5 text-text">
+              <div className="pb-0 sm:pb-0  leading-1.5">
+                <div className="text-regular m-3.5 text-text dark:text-white">
                   {articleObj.title}
                 </div>
               </div>
-              <div
-                className={`items-end justify-end rounded-br-${borderBottomRadius}`}
-              >
+              <div className="items-end justify-end">
                 <div className="text-regular m-5 text-secondayText">
                   {dayjs(articleObj.createdAt).format('YYYY-MM-DD')}
                 </div>