feature-046: 머지 충돌 해결

src/App.tsx

@@ -39,12 +39,13 @@ const App = () => {
   const userToken = useRecoilValue(userTokenState);
   const { initializeCategory } = handleCategory();
   useEffect(() => {
-    getCategories()
-      .then((res) => {
-        setCategories(initializeCategory(res));
-      })
-      .catch((err) => console.log(err));
-  }, []);
+    userToken &&
+      getCategories()
+        .then((res) => {
+          setCategories(initializeCategory(res));
+        })
+        .catch((err) => console.log(err));
+  }, [userToken]);
 
   return (
     <ThemeProvider theme={theme}>

src/components/Home/InsightVideos.tsx

@@ -8,10 +8,13 @@ interface InsightVideosProps {
   popularHashtags: string[];
 }
 
-const InsightVideos: React.FC<InsightVideosProps> = ({ username, popularHashtags }) => {
-    const formattedHashtags = popularHashtags.map(tag => '#' + tag);
-    const [categoryItems] = useState<cardDummy[]>([]); 
-    const [checkedItems, setCheckedItems] = useState<boolean[]>([]);
+const InsightVideos: React.FC<InsightVideosProps> = ({
+  username,
+  popularHashtags,
+}) => {
+  const formattedHashtags = popularHashtags.map((tag) => '#' + tag);
+  const [categoryItems] = useState<cardDummy[]>([]);
+  const [checkedItems, setCheckedItems] = useState<boolean[]>([]);
 
   return (
     <InsightVideosContainer>
@@ -23,16 +26,16 @@ const InsightVideos: React.FC<InsightVideosProps> = ({ username, popularHashtags
             콘텐츠에요!
           </h4>
         </div>
-        <div className='insight-videos'>
-          <Card 
-          categoryItems={categoryItems} 
-          checkedItems={checkedItems} 
-          setCheckedItems={setCheckedItems} 
-        />
+        <div className="insight-videos">
+          <Card
+            videos={categoryItems}
+            checkedVideos={checkedItems}
+            setCheckedVideos={setCheckedItems}
+          />
         </div>
       </div>
     </InsightVideosContainer>
   );
- };
+};
 
 export default InsightVideos;

src/components/category/Card.tsx

@@ -60,7 +60,6 @@ const Card: React.FC<ICardProps> = ({
     prev[id] = !prev[id];
     setCheckedVideos(prev);
   };
-  console.log(videos);
   return (
     <CardStyles.Container>
       {videos.map((video, idx) => (

src/components/layout/sideBar/AddCategory.tsx

@@ -2,12 +2,12 @@ import * as AddCategoryStyle from '@/styles/layout/sideBar/AddCategory.style';
 import PlusSvg from '@/assets/icons/plus.svg?react';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
 import { topCategoryModalState } from '@/stores/modal';
-import { userState } from '@/stores/user';
+import { userTokenState } from '@/stores/user';
 import { useState } from 'react';
 import GuestNoticeModal from '@/components/modals/GuestNoticeModal';
 
 const AddCategory = () => {
-  const isUser = useRecoilValue(userState);
+  const isUser = useRecoilValue(userTokenState);
   const setTopCategoryModal = useSetRecoilState(topCategoryModalState);
   const [isGuestNoticeModalOpen, setIsGuestNoticeModalOpen] = useState(false);
 

src/components/layout/sideBar/index.tsx

@@ -1,14 +1,14 @@
 import * as SideBarStyles from '@/styles/layout/sideBar';
 import { useRecoilValue } from 'recoil';
-import { userState } from '@/stores/user';
+import { userTokenState } from '@/stores/user';
 import GuestMode from './GuestMode';
 import UserMode from './UserMode';
 import AddCategory from './AddCategory';
 import ConvertVideo from './ConvertVideo';
 import VinoGuide from './VinoGuide';
 
 const SideBar = () => {
-  const isUser = useRecoilValue(userState);
+  const isUser = useRecoilValue(userTokenState);
 
   return (
     <SideBarStyles.Container>

src/pages/CategoryPage.tsx

@@ -137,7 +137,7 @@ const CategoryPage = () => {
         )}
       </CategoryPageStyles.MenuWrap>
 
-      {videos.length === 0 && <EmptyCard />}
+      {(videos.length === 0 || videos === undefined) && <EmptyCard />}
       {videos.length > 0 && (
         <Card
           videos={videos}

src/stores/user.ts

@@ -2,11 +2,6 @@ import { atom } from 'recoil';
 
 import localStorageEffect from './effects/localStorageEffect';
 
-export const userState = atom({
-  key: 'user',
-  default: true,
-});
-
 export const userTokenState = atom<string | null>({
   key: 'user-token',
   default: null,