feat: 스타일 검수 (#ATR-537)

Atractorrr · Jul 10, 2024 · 3520a7f · 3520a7f
1 parent e6352fd
commit 3520a7f
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 46 deletions.
diff --git a/apps/service/src/features/calendar/ui/Calendar.tsx b/apps/service/src/features/calendar/ui/Calendar.tsx
@@ -1,7 +1,7 @@
 'use client'
 
 import { useTheme } from '@/entities/theme'
-import { Container, ErrorGuideTxt } from '@/shared/ui'
+import { ErrorGuideTxt } from '@/shared/ui'
 import React from 'react'
 import ActivityCalendar from 'react-activity-calendar'
 import { ErrorBoundary } from 'react-error-boundary'
@@ -21,29 +21,27 @@ function CustomErrorGuideTxt() {
 export default function Calendar({ calendarData }: CalendarProps) {
   const { realTheme } = useTheme()
   return (
-    <Container className="flex h-full justify-center p-5 pt-7">
-      <ErrorBoundary FallbackComponent={CustomErrorGuideTxt}>
-        <ActivityCalendar
-          data={calendarData}
-          labels={CALENDAR_LABELS}
-          colorScheme={realTheme}
-          theme={CALENDAR_THEME}
-          blockSize={10}
-          showWeekdayLabels
-          hideMonthLabels={false}
-          renderBlock={(block, activity) => {
-            const message = activity.count
-              ? `${activity.date}에 ${activity.count}개의 아티클을 읽었어요 🎉`
-              : `${activity.date}에는 아티클을 읽지 못했어요 🥲`
+    <ErrorBoundary FallbackComponent={CustomErrorGuideTxt}>
+      <ActivityCalendar
+        data={calendarData}
+        labels={CALENDAR_LABELS}
+        colorScheme={realTheme}
+        theme={CALENDAR_THEME}
+        blockSize={10}
+        showWeekdayLabels
+        hideMonthLabels={false}
+        renderBlock={(block, activity) => {
+          const message = activity.count
+            ? `${activity.date}에 ${activity.count}개의 아티클을 읽었어요 🎉`
+            : `${activity.date}에는 아티클을 읽지 못했어요 🥲`
 
-            return React.cloneElement(block, {
-              'data-tooltip-id': 'react-tooltip',
-              'data-tooltip-html': message,
-            })
-          }}
-        />
-        <ReactTooltip id="react-tooltip" />
-      </ErrorBoundary>
-    </Container>
+          return React.cloneElement(block, {
+            'data-tooltip-id': 'react-tooltip',
+            'data-tooltip-html': message,
+          })
+        }}
+      />
+      <ReactTooltip id="react-tooltip" />
+    </ErrorBoundary>
   )
 }
diff --git a/apps/service/src/features/recent-newsletter/ui/RecentNewsletterContainer.tsx b/apps/service/src/features/recent-newsletter/ui/RecentNewsletterContainer.tsx
@@ -42,11 +42,8 @@ export default function RecentNewsletterContainer() {
         </div>
         {UserRecentNewsLetterResponse?.data.mypageArticles.length !== 0 ? (
           <div className="relative w-full">
-            <div
-              className=" overflow-x-auto
-        before:absolute before:inset-y-0 before:left-0 before:z-10 before:w-5 before:bg-gradient-to-r before:from-white before:to-transparent after:absolute after:inset-y-0 after:right-0 after:z-10 after:w-5 after:bg-gradient-to-l after:from-white after:to-transparent dark:before:from-gray-800 dark:after:from-gray-800
-        ">
-              <div className="flex min-w-fit items-start justify-start gap-4 px-8 py-4">
+            <div className="overflow-x-auto before:absolute before:inset-y-0 before:left-0 before:z-10 before:w-5 before:bg-gradient-to-r before:from-white before:to-transparent after:absolute after:inset-y-0 after:right-0 after:z-10 after:w-5 after:bg-gradient-to-l after:from-white after:to-transparent dark:before:from-gray-800 dark:after:from-gray-800">
+              <div className="flex min-w-fit items-start justify-start gap-4 px-5 pb-5">
                 {UserRecentNewsLetterResponse?.data.mypageArticles.map(
                   (article) => (
                     <Link
@@ -87,7 +84,7 @@ export default function RecentNewsletterContainer() {
         ) : (
           <div className="flex cursor-default flex-col items-center justify-center pb-32 pt-20">
             <GuideTxt
-              title="최근 읽은 아티클이 없습니다"
+              title="최근 읽은 아티클이 없어요"
               sub="지금 아티클을 읽어보세요"
             />
           </div>

diff --git a/apps/service/src/features/subscribe-list/ui/SubscribeList.tsx b/apps/service/src/features/subscribe-list/ui/SubscribeList.tsx
@@ -36,7 +36,7 @@ export default function SubscribeList() {
             />
           </div>
           {subscribeList?.length !== 0 ? (
-            <ul className="flex flex-col justify-start overflow-y-auto px-3 xl:h-[calc(100%-64px)] xl:max-h-64">
+            <ul className="flex flex-col justify-start overflow-y-auto px-3 xl:h-[calc(100%-64px)] xl:max-h-[264px]">
               {subscribeList?.map((newsletter) => (
                 <li key={newsletter.id} className="peer peer-[]:mt-1">
                   <Link

diff --git a/apps/service/src/features/subscribe-newsletter/ui/DefaultButton.tsx b/apps/service/src/features/subscribe-newsletter/ui/DefaultButton.tsx
@@ -14,7 +14,7 @@ const DefaultButton = forwardRef<
   <button
     ref={ref as LegacyRef<HTMLButtonElement> | undefined}
     type="button"
-    className="block h-12 w-full rounded-lg bg-gray-700 p-2 text-center font-medium text-gray-50 transition-colors hover:bg-gray-800 disabled:!bg-gray-50 disabled:!text-gray-400 xs:text-lg md:h-10 md:text-base dark:bg-gray-50 dark:text-gray-700 dark:hover:bg-gray-100 dark:disabled:!bg-gray-700 dark:disabled:!text-gray-500"
+    className="block h-12 w-full rounded-lg bg-gray-700 p-2 text-center font-medium text-gray-50 transition-colors hover:bg-gray-800 disabled:!bg-gray-50 disabled:!text-gray-400 xs:text-lg md:h-10 md:rounded md:text-base dark:bg-gray-50 dark:text-gray-700 dark:hover:bg-gray-100 dark:disabled:!bg-gray-700 dark:disabled:!text-gray-500"
     {...props}>
     {children || '구독하기'}
   </button>

diff --git a/apps/service/src/widgets/main/ui/RecentArticleItem.tsx b/apps/service/src/widgets/main/ui/RecentArticleItem.tsx
@@ -39,13 +39,15 @@ export default function RecentArticleItem({ ...props }: RecentArticle) {
           />
         </div>
         <div className="flex flex-col">
-          <h2 className="grow break-keep font-medium">{props.title}</h2>
-          <div className="flex text-sm text-gray-500 dark:text-gray-400">
-            <p>{props.newsletter.name}</p>
-            <p className="before:mx-1 before:content-['·']">
+          <p className="line-clamp-2 grow break-keep font-medium">
+            {props.title}
+          </p>
+          <p className="flex text-sm text-gray-500 dark:text-gray-400">
+            <span>{props.newsletter.name}</span>
+            <span className="before:mx-1 before:content-['·']">
               {getTimeFromNow(props.receivedAt)}
-            </p>
-          </div>
+            </span>
+          </p>
         </div>
       </div>
     </Link>

diff --git a/apps/service/src/widgets/newsletter-introduce/ui/NewsletterProfile.tsx b/apps/service/src/widgets/newsletter-introduce/ui/NewsletterProfile.tsx
@@ -19,10 +19,10 @@ export default async function NewsletterProfile({
         <div className="flex w-full flex-col gap-4 p-5 md:gap-2">
           <div className="flex w-full flex-col gap-6 sm:flex-row">
             <div className="flex flex-col gap-2">
-              <div className="h-[240px] w-full shrink-0 overflow-hidden rounded-md bg-gray-100 sm:h-[160px] sm:w-[180px] dark:bg-gray-700">
+              <div className="h-[240px] w-full shrink-0 overflow-hidden rounded-md border border-gray-100 bg-gray-50 sm:h-[160px] sm:w-[180px] dark:border-gray-700 dark:bg-gray-700">
                 <ThumbnailImage
                   src={data.thumbnailUrl}
-                  alt={`뉴스레터 이름 : ${data.name}`}
+                  alt={`뉴스레터 프로필 이미지 : ${data.name}`}
                   type="profile"
                   logoType="text"
                 />

diff --git a/apps/service/src/widgets/user-record/ui/UserRecord.tsx b/apps/service/src/widgets/user-record/ui/UserRecord.tsx
@@ -1,9 +1,10 @@
 'use client'
 
+import { skipToken, useQuery } from '@tanstack/react-query'
 import { useAuth } from '@/entities/auth'
 import { Calendar, calculateLevel, fetchUserRecord } from '@/features/calendar'
 import { Graph } from '@/features/graph'
-import { skipToken, useQuery } from '@tanstack/react-query'
+import { Container } from '@/shared/ui'
 
 export default function UserRecord() {
   const { userEmail } = useAuth()
@@ -16,11 +17,13 @@ export default function UserRecord() {
   return (
     <div className="mt-6 flex w-full flex-col items-stretch justify-start gap-6 xl:flex-row xl:justify-between">
       <div className="h-auto w-full xl:w-2/3">
-        {calendarDataWithLevel ? (
-          <Calendar calendarData={calendarDataWithLevel} />
-        ) : (
-          ''
-        )}
+        <Container className="flex h-full justify-center p-5 pt-7">
+          {calendarDataWithLevel ? (
+            <Calendar calendarData={calendarDataWithLevel} />
+          ) : (
+            ''
+          )}
+        </Container>
       </div>
       <div className="h-auto w-full xl:w-1/2">
         <Graph />