Merge pull request #209 from Kernel360/208-design-develop-ui-of-login…

…add-page design : login/add페이지 ui develop
Kernel360 · Nov 5, 2024 · e113526 · e113526
2 parents 05161cf + c864634
commit e113526
Showing 1 changed file with 41 additions and 40 deletions.
diff --git a/src/app/(fullscreen)/login/add/page.tsx b/src/app/(fullscreen)/login/add/page.tsx
@@ -4,16 +4,16 @@ import React, { useState, useEffect } from 'react';
 
 import { useRouter } from 'next/navigation';
 
+import { useFetchAllCategories } from '@/api/hooks/useCategories';
 import { useUpdateUserInfo } from '@/api/hooks/useUserInfo';
-import { fetchAllCategories } from '@/api/queries/fetchAllCategories';
 import LoadingSpinner from '@/components/common/LoadingSpinner';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
 import { useToast } from '@/hooks/use-toast';
 import { CategoryList } from '@/types/Category';
 
 export default function LoginAddPage() {
-  const [isLoading, setIsLoading] = useState(true);
+  const { data, isLoading } = useFetchAllCategories();
 
   const [categories, setCategories] = useState<CategoryList[]>([]);
 
@@ -23,21 +23,11 @@ export default function LoginAddPage() {
 
   const toast = useToast();
 
-  const getAllCategories = async () => {
-    try {
-      const initialCategories = await fetchAllCategories();
-
-      setCategories(initialCategories.data.categoryList);
-    } catch (error) {
-      console.error('Error fetching categories:', error);
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
   useEffect(() => {
-    getAllCategories();
-  }, []);
+    if (data) {
+      setCategories(data.data.categoryList);
+    }
+  }, [data]);
 
   const handlePreferedCategories = () => {
     if (selectedCategories.length !== 0 && selectedCategories.length <= 5) {
@@ -75,32 +65,43 @@ export default function LoginAddPage() {
     });
   };
 
-  return (
+  return isLoading ? (
+    <div className="flex justify-center items-center h-screen w-full">
+      <LoadingSpinner />
+    </div>
+  ) : (
     <div className=" flex items-center justify-center  min-h-screen bg-gradient-to-br from-indigo-50 to-violet-50">
       <Card className="h-84 mx-8 my-8 py-6 bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-800">
-        <h1 className="text-3xl font-bold py-6 mb-6 text-center text-violet-700 dark:text-gray-100">
-          읽고싶은 글이나 영상의 카테고리를 골라주세요!
-        </h1>
-        {isLoading ? (
-          <LoadingSpinner />
-        ) : (
-          <div className="grid md:grid-cols-3 sm:grid-cols-2  gap-4 mx-44 ">
-            {categories.map((category) => (
-              <Button
-                type="button"
-                key={category.id}
-                onClick={() => toggleCategory(category.id)}
-                className={`py-4 rounded-xl text-lg font-medium transition-all duration-200 ease-in-out ${
-                  selectedCategories.includes(category.id)
-                    ? 'bg-primary text-primary-foreground shadow-lg scale-105'
-                    : 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600'
-                }`}
-              >
-                {category.name}
-              </Button>
-            ))}
-          </div>
-        )}
+        <p className="text-3xl font-bold py-6 mb-6 text-center text-violet-600  dark:text-gray-100">
+          <br />
+          첫 방문이시군요! 환영합니다!👋
+          <br />
+          <br />
+          <span className="text-2xl text-gray-400 font-medium">
+            {' '}
+            읽고싶은 아티클🖋️이나 영상 🖥️의 카테고리를 골라주세요!
+            <br />
+            선택한 카테고리 위주로 컨텐츠 추천이 제공됩니다.
+          </span>
+        </p>
+
+        <div className="grid md:grid-cols-3 sm:grid-cols-2  gap-4 mx-44 ">
+          {categories.map((category) => (
+            <Button
+              type="button"
+              key={category.id}
+              onClick={() => toggleCategory(category.id)}
+              className={`py-4 rounded-xl text-lg font-medium transition-all duration-200 ease-in-out ${
+                selectedCategories.includes(category.id)
+                  ? 'bg-primary text-primary-foreground shadow-lg scale-105'
+                  : 'bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600'
+              }`}
+            >
+              {category.name}
+            </Button>
+          ))}
+        </div>
+
         <div className=" flex mt-20 mx-96 gap-2 ">
           <Button
             onClick={notChoosingCategories}