Merge branch 'develop' into 380-design-modify-design

Kernel360 · Dec 11, 2024 · 5cb3be3 · 5cb3be3
2 parents d5d20ee + 813a7f7
commit 5cb3be3
Show file tree

Hide file tree

Showing 32 changed files with 123 additions and 615 deletions.
diff --git a/src/app/(default)/dashboard/page.tsx b/src/app/(default)/dashboard/page.tsx
@@ -38,7 +38,7 @@ export default function DashboardPage() {
             setShowLoginModal(false);
             router.replace('/');
           }}
-          title="로그인이 필요합니다."
+          title="로그인이 필요해요"
           description="이 기능을 이용하려면 로그인이 필요해요! "
         >
           <div className="flex justify-center gap-4 mt-4">

diff --git a/src/app/(default)/learn/listening/detail/ListeningDetailClient.tsx b/src/app/(default)/learn/listening/detail/ListeningDetailClient.tsx
@@ -191,13 +191,13 @@ export default function ListeningDetailClient({
   }
 
   if (isError) {
-    return <p className="text-red-500">에러가 발생했습니다: {error.message}</p>;
+    return <p className="text-red-500">에러가 발생했어요: {error.message}</p>;
   }
 
   if (!listeningDetailData || !listeningDetailData.data) {
     return (
       <div className="flex flex-col items-center justify-center h-full">
-        <p className="text-lg text-gray-500">리스닝 콘텐츠가 없습니다.</p>
+        <p className="text-lg text-gray-500">콘텐츠를 불러오지 못했어요</p>
       </div>
     );
   }
@@ -298,7 +298,7 @@ export default function ListeningDetailClient({
         <Modal
           isOpen={showLoginModal}
           onClose={() => setShowLoginModal(false)}
-          title="로그인이 필요합니다."
+          title="로그인이 필요해요"
           description="이 기능을 이용하려면 로그인이 필요해요! "
         >
           <div className="flex justify-center gap-4 mt-4">

diff --git a/src/app/(default)/learn/reading/detail/ReadingDetailClient.tsx b/src/app/(default)/learn/reading/detail/ReadingDetailClient.tsx
@@ -154,7 +154,7 @@ export default function ReadingDetailClient({
         <Modal
           isOpen={showLoginModal}
           onClose={() => setShowLoginModal(false)}
-          title="로그인이 필요합니다."
+          title="로그인이 필요해요"
           description="이 기능을 이용하려면 로그인이 필요해요! "
         >
           <div className="flex justify-center gap-4 mt-4">

diff --git a/src/app/(default)/mypage/profile/page.tsx b/src/app/(default)/mypage/profile/page.tsx
@@ -40,7 +40,7 @@ export default function UserProfile() {
     if (nickname.length < 4 || nickname.length > 12) {
       toast({
         duration: 1000,
-        description: '닉네임은 4~12자 사이여야 합니다.',
+        description: '닉네임은 4~12자 사이로 해주세요',
       });
       return;
     }
@@ -50,7 +50,7 @@ export default function UserProfile() {
     if (!nicknamePattern.test(nickname)) {
       toast({
         duration: 1000,
-        description: '닉네임은 영어, 한글, 숫자 및 단일 공백만 허용됩니다.',
+        description: '닉네임은 영어, 한글, 숫자 및 단일 공백만 사용해주세요',
       });
       return;
     }
@@ -62,12 +62,12 @@ export default function UserProfile() {
         onSuccess: () => {
           toast({
             duration: 1000,
-            description: '닉네임이 성공적으로 변경되었습니다.',
+            description: '닉네임이 성공적으로 변경되었어요',
           });
           refetchUserInfo();
         },
         onError: () => {
-          toast({ duration: 1000, description: '닉네임을 변경하지 못했어요.' });
+          toast({ duration: 1000, description: '닉네임을 변경하지 못했어요' });
           setNickname(userData?.data.nickname || '');
         },
       },
@@ -91,7 +91,7 @@ export default function UserProfile() {
 
       toast({
         duration: 1000,
-        description: '카테고리는 최대 5개까지 선택 가능합니다.',
+        description: '카테고리는 최대 5개까지 선택 가능해요',
       });
 
       return prevSelected;
@@ -116,14 +116,14 @@ export default function UserProfile() {
         onSuccess: () => {
           toast({
             duration: 1000,
-            description: '카테고리가 성공적으로 변경되었습니다.',
+            description: '카테고리가 성공적으로 변경되었어요',
           });
           refetchUserInfo();
         },
         onError: () => {
           toast({
             duration: 1000,
-            description: '카테고리를 변경하지 못했습니다.',
+            description: '카테고리를 변경하지 못했어요',
           });
           setSelectedCategories(
             userData?.data.myCategories?.map((category) => category.id) || [],

diff --git a/src/app/(default)/page.tsx b/src/app/(default)/page.tsx
@@ -15,21 +15,51 @@ import HomePageClient from '../../components/HomePageClient';
 export default async function HomePage() {
   const cookieHeader = cookies().toString();
 
-  // TODO(@smosco): allSettled로 변경 필요 병렬 처리 중에 하나에서 에러나면 아예 에러남
-  const [
-    initialReadingContents,
-    initialListeningContents,
-    initialSentences,
-    initialRecommendedContents,
-  ] = await Promise.all([
+  const results = await Promise.allSettled([
     fetchReadingPreview({ Cookie: cookieHeader }),
     fetchListeningPreview({ Cookie: cookieHeader }),
     fetchRecommendedBookmarks(),
     cookieHeader
-      ? fetchRecommendedContents({ Cookie: cookieHeader }) || []
-      : mockRecommendedData,
+      ? fetchRecommendedContents({ Cookie: cookieHeader })
+      : Promise.resolve(mockRecommendedData),
   ]);
 
+  const initialReadingContents =
+    results[0].status === 'fulfilled'
+      ? results[0].value
+      : {
+          code: 'error',
+          message: '리딩 콘텐츠 프리뷰 조회 실패',
+          data: { readingPreview: [] },
+        };
+
+  const initialListeningContents =
+    results[1].status === 'fulfilled'
+      ? results[1].value
+      : {
+          code: 'error',
+          message: '리스닝 콘텐츠 프리뷰 조회 실패',
+          data: { listeningPreview: [] },
+        };
+
+  const initialSentences =
+    results[2].status === 'fulfilled'
+      ? results[2].value
+      : {
+          code: 'error',
+          message: '오늘의 문장 조회 실패',
+          data: { popularBookmarks: [] },
+        };
+
+  const initialRecommendedContents =
+    results[3].status === 'fulfilled'
+      ? results[3].value
+      : {
+          code: 'error',
+          message: '추천 콘텐츠 조회 실패',
+          data: { recommendedContents: [] },
+        };
+
   return (
     <HomePageClient
       initialReadingContents={initialReadingContents}

diff --git a/src/app/(default)/scrapbook/layout.tsx b/src/app/(default)/scrapbook/layout.tsx
@@ -97,7 +97,7 @@ export default function ScrapbookLayout({
             setShowLoginModal(false);
             router.replace('/');
           }}
-          title="로그인이 필요합니다."
+          title="로그인이 필요해요"
           description="이 기능을 이용하려면 로그인이 필요해요! "
         >
           <div className="flex justify-center gap-4 mt-4">

diff --git a/src/app/(default)/search/page.tsx b/src/app/(default)/search/page.tsx
@@ -29,7 +29,7 @@ function SearchResultsList() {
 
   if (!searchResultData || searchResultData.data.contents.length === 0) {
     return (
-      <EmptyAlert alertDescription={`${query}에 대한 검색 결과가 없습니다.`} />
+      <EmptyAlert alertDescription={`${query}에 대한 검색 결과가 없어요`} />
     );
   }
 

diff --git a/src/app/(fullscreen)/login/add/page.tsx b/src/app/(fullscreen)/login/add/page.tsx
@@ -81,7 +81,7 @@ export default function LoginAddPage() {
       }
 
       toast.toast({
-        description: '카테고리는 최대 5개까지 선택 가능합니다.',
+        description: '카테고리는 최대 5개까지 선택해주세요',
       });
 
       return prevSelected;
@@ -99,7 +99,7 @@ export default function LoginAddPage() {
           <span className="text-lg text-gray-400 font-medium">
             읽고싶은 아티클🖋️이나 영상 🖥️의 카테고리를 골라주세요!
             <br />
-            선택한 카테고리 위주로 콘텐츠 추천이 제공됩니다.
+            선택한 카테고리를 기반으로 콘텐츠를 추천해드려요
           </span>
         </p>
 

diff --git a/src/components/HomePageClient.tsx b/src/components/HomePageClient.tsx
@@ -16,13 +16,11 @@ import {
   fetchRecommendedContents,
 } from '@/api/queries/recommendQueries';
 import Carousel from '@/components/common/Carousel';
-import LoadingSpinner from '@/components/common/LoadingSpinner';
 import SentenceComponent from '@/components/SentenceComponent';
 import { Button } from '@/components/ui/button';
 import {
   ReadingPreviewResponse,
   ListeningPreviewResponse,
-  // TODO(@godhyzzang) : 추천bookmark한 문장도  initialData연결
   RecommendedBookmarksResponse,
   RecommendedContentsResponse,
 } from '@/types/Preview';
@@ -43,40 +41,38 @@ export default function HomePageClient({
   initialSentences,
   initialRecommendedContents,
 }: HomePageClientProps) {
-  const { data: readingList, isLoading: readingLoading } = useQuery({
+  const { data: readingList, isError: readingError } = useQuery({
     queryKey: ['readingPreview'],
     queryFn: () => fetchReadingPreview(),
     initialData: initialReadingContents,
   });
 
-  const { data: listeningList, isLoading: listeningLoading } = useQuery({
+  const { data: listeningList, isError: listeningError } = useQuery({
     queryKey: ['listeningPreview'],
     queryFn: () => fetchListeningPreview(),
     initialData: initialListeningContents,
   });
 
-  const { data: recommendedBookmarksData, isLoading: isSentenceLoading } =
-    useQuery({
-      queryKey: ['recommendedBookmarks'],
-      queryFn: fetchRecommendedBookmarks,
-      initialData: initialSentences,
-    });
+  const { data: recommendedBookmarksData, isError: bookmarksError } = useQuery({
+    queryKey: ['recommendedBookmarks'],
+    queryFn: fetchRecommendedBookmarks,
+    initialData: initialSentences,
+  });
 
-  const { data: recommendedContents, isLoading: isRecommendedLoading } =
-    useQuery({
-      queryKey: ['recommendedContents'],
-      queryFn: () => fetchRecommendedContents(),
-      initialData: initialRecommendedContents,
-    });
+  const { data: recommendedContents, isError: recommendedError } = useQuery({
+    queryKey: ['recommendedContents'],
+    queryFn: () => fetchRecommendedContents(),
+    initialData: initialRecommendedContents,
+  });
 
-  if (
-    readingLoading ||
-    listeningLoading ||
-    isSentenceLoading ||
-    isRecommendedLoading
-  ) {
-    return <LoadingSpinner />;
-  }
+  // if (readingError || listeningError || bookmarksError || recommendedError) {
+  //   console.error('에러 발생: ', {
+  //     readingError,
+  //     listeningError,
+  //     bookmarksError,
+  //     recommendedError,
+  //   });
+  // }
 
   return (
     <div className="w-full flex flex-col gap-6">
@@ -94,11 +90,16 @@ export default function HomePageClient({
             </Link>
           </div>
         }
-        // TODO(@smosco): ItemComponent margin 안 먹음
         itemComponent={ItemComponentCard}
         itemWidth={255}
         isAutoPlay
       />
+      {listeningError && (
+        <p className="px-4 text-gray-500">
+          인기 리스닝 콘텐츠를 불러오지 못했어요
+        </p>
+      )}
+
       {/* 문장 캐러셀 */}
       <Carousel
         previewDatas={recommendedBookmarksData?.data.popularBookmarks || []}
@@ -107,6 +108,10 @@ export default function HomePageClient({
         isAutoPlay
         autoPlayInterval={10000}
       />
+      {bookmarksError && (
+        <p className="px-4 text-gray-500">오늘의 문장을 불러오지 못했어요</p>
+      )}
+
       {/* 인기 리딩 콘텐츠 캐러셀 */}
       <Carousel
         previewDatas={readingList?.data.readingPreview || []}
@@ -125,9 +130,18 @@ export default function HomePageClient({
         itemWidth={255}
         isAutoPlay
       />
+      {readingError && (
+        <p className="px-4 text-gray-500">
+          인기 리딩 콘텐츠를 불러오지 못했어요
+        </p>
+      )}
+
       <RecommendedList
         recommendedData={recommendedContents?.data.recommendedContents}
       />
+      {recommendedError && (
+        <p className="px-4 text-gray-500">추천 콘텐츠를 불러오지 못했어요</p>
+      )}
     </div>
   );
 }
diff --git a/src/components/PreviewScrapButton.tsx b/src/components/PreviewScrapButton.tsx
@@ -108,7 +108,7 @@ export default function PreviewScrapButton({
         <Modal
           isOpen={showLoginModal}
           onClose={() => setShowLoginModal(false)}
-          title="로그인이 필요합니다."
+          title="로그인이 필요해요"
           description="이 기능을 이용하려면 로그인이 필요해요! "
         >
           <div className="flex justify-center gap-4 mt-4">

diff --git a/src/components/RecommendedList.tsx b/src/components/RecommendedList.tsx
@@ -25,9 +25,8 @@ export default function RecommendedList({
             <div className="bg-card p-6 rounded-lg shadow-lg max-w-md w-full text-center space-y-4 backdrop-blur-sm">
               <Lock className="w-9 h-9 mx-auto text-primary" />
               <h3 className="text-xl font-bold">맞춤 추천을 받아보세요!</h3>
-              <p className="text-sm text-muted-foreground">
-                로그인하시면 나만의 학습 기록을 기반으로 한 맞춤 콘텐츠를
-                추천해드립니다.
+              <p className="text-md text-muted-foreground">
+                로그인해서 맞춤 콘텐츠를 추천받아 보세요
               </p>
               <LogInOutButton />
             </div>

diff --git a/src/components/SentenceComponent.tsx b/src/components/SentenceComponent.tsx
@@ -18,15 +18,12 @@ export default function SentenceComponent({
         <div className="flex justify-between items-start relative">
           <div>
             <h3 className="text-xl font-bold text-white mb-2 flex gap-2 ">
-              {/* <Quote className="transform rotate-180" fill="white" /> 다른
-              사람들이 저장한 문장 <Quote fill="white" /> */}
               다른 사람들이 저장한 문장
             </h3>
-
-            <div key={data.contentId} className="">
-              <p className="text-sm text-white mb-2">“ {data.enDetail} ”</p>
+            <div key={data.contentId}>
+              <p className="text-sm text-white mb-2">{data.enDetail}</p>
               {showTranslation && (
-                <p className="text-sm text-gray-200">“ {data.koDetail} ”</p>
+                <p className="text-sm text-gray-200">{data.koDetail}</p>
               )}
             </div>
           </div>

diff --git a/src/components/common/DifficultyEvaluator.tsx b/src/components/common/DifficultyEvaluator.tsx
@@ -20,10 +20,10 @@ export default function DifficultyEvaluator({
     createContentsFeedbackMutation.mutate(level, {
       onSuccess: () => {
         setSuccess(true);
-        toast({ description: '평가가 성공적으로 제출되었습니다.' });
+        toast({ description: '평가가 성공적으로 제출되었어요' });
       },
       onError: () => {
-        toast({ description: '평가를 제출하지 못했습니다.' });
+        toast({ description: '평가를 제출하지 못했어요' });
       },
     });
   };

diff --git a/src/components/common/Panels.tsx b/src/components/common/Panels.tsx
@@ -35,7 +35,7 @@ export function ErrorPanel({
         className,
       )}
     >
-      {title}을 불러오지 못했습니다.
+      {title}을 불러오지 못했어요
     </div>
   );
 }

diff --git a/src/components/common/SearchComponent.tsx b/src/components/common/SearchComponent.tsx
@@ -47,8 +47,8 @@ export default function SearchComponent() {
       <input
         ref={inputRef}
         type="text"
-        placeholder="콘텐츠 제목을 검색하세요"
-        className="min-h-4 p-2 outline-none border-none flex-grow rounded-lg bg-gray-50 text-gray-600 focus:ring-1 focus:ring-violet-400 focus:ring-opacity-70"
+        placeholder="제목 또는 내용을 검색해보세요"
+        className="min-h-4 p-2 pl-4 outline-none border-none flex-grow rounded-lg bg-gray-50 text-gray-600 focus:ring-1 focus:ring-violet-400 focus:ring-opacity-70"
         onKeyDown={handleKeyDown}
       />
       <Button variant="ghost" size="icon" onClick={handleButtonClick}>
-Original file line number
+Diff line change
@@ Expand Up / @@ -35,7 +35,7 @@ export function ErrorPanel({ @@
             className,
           )}
         >
-          {title}을 불러오지 못했습니다.
+          {title}을 불러오지 못했어요
         </div>
       );
     }
@@ Expand Down @@