From c864634ffe7c57c1a3f2f8050cc005a027caa155 Mon Sep 17 00:00:00 2001
From: godhyzzang <109357302+godhyzzang@users.noreply.github.com>
Date: Tue, 5 Nov 2024 16:47:23 +0900
Subject: [PATCH] =?UTF-8?q?refactor=20:=20api=ED=98=B8=EC=B6=9C=EB=AC=B8?=
 =?UTF-8?q?=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(fullscreen)/login/add/page.tsx | 81 +++++++++++++------------
 1 file changed, 41 insertions(+), 40 deletions(-)

diff --git a/src/app/(fullscreen)/login/add/page.tsx b/src/app/(fullscreen)/login/add/page.tsx
index fab3af98..2dac5eef 100644
--- a/src/app/(fullscreen)/login/add/page.tsx
+++ b/src/app/(fullscreen)/login/add/page.tsx
@@ -4,8 +4,8 @@ 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';
@@ -13,7 +13,7 @@ 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}