add: trendStore.ts with Axios and zustand, TrendList component, TrendItem component, CategorySlider component, and RankingPage.tsx page

Author: clicelee

package.json

@@ -10,15 +10,16 @@
     "preview": "vite preview",
     "format": "prettier --write \"src/**/*.{js,jsx,ts,tsx,css,scss,md}\"",
     "start": "vite"
-
   },
   "dependencies": {
     "autoprefixer": "^10.4.19",
+    "axios": "^1.7.2",
     "postcss": "^8.4.39",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.24.0",
-    "tailwindcss": "^3.4.4"
+    "tailwindcss": "^3.4.4",
+    "zustand": "^4.5.4"
   },
   "devDependencies": {
     "@types/react": "^18.3.3",

pnpm-lock.yaml

@@ -8,10 +8,12 @@ import Login from './pages/LoginPage/LoginPage';
 import Profile from './pages/ProfilePage/ProfilePage';
 import ParticipatedDebates from './pages/MyPage/ParticipatedDebate';
 import Debate from './pages/MyPage/Debate';
+import RankingPage from './pages/RankingPage/RankingPage';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
     <BrowserRouter>
+    <RankingPage/>
     <Profile/>
     <Login/>
     <Debate/>

src/main.tsx

@@ -1,11 +1,60 @@
-const RangkingPage=()=>{
-    return (
-      <div className="flex items-center justify-center min-h-screen bg-gray-100">
-        <h2 className="text-4xl font-bold text-blue-600">Ranking test1</h2>
-      </div>
-    );
-  }
+import React, { useEffect } from 'react';
+import CategorySlider from './components/CategorySlider';
+import TrendList from './components/TrendList';
+import { useTrendStore } from '../../store/trendStore';
 
-export default RangkingPage;
+const RankingPage: React.FC = () => {
+  const { menuType, setMenuType, date, setDate, fetchTrends } = useTrendStore();
 
+  useEffect(() => {
+    fetchTrends();
+  }, [menuType, date]);
 
+  const handleDateChange = (direction: 'prev' | 'next') => {
+    const currentDate = new Date(date);
+    if (menuType === 'daily') {
+      currentDate.setDate(currentDate.getDate() + (direction === 'prev' ? -1 : 1));
+    } else if (menuType === 'weekly') {
+      currentDate.setDate(currentDate.getDate() + (direction === 'prev' ? -7 : 7));
+    }
+    setDate(currentDate.toISOString().split('T')[0]);
+  };
+
+  return (
+    <div>
+      <header className="p-4 bg-gray-100 flex justify-between">
+        <button
+          className={`px-4 py-2 ${menuType === 'realTime' ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'} rounded`}
+          onClick={() => setMenuType('realTime')}
+        >
+          실시간
+        </button>
+        <button
+          className={`px-4 py-2 ${menuType === 'daily' ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'} rounded`}
+          onClick={() => setMenuType('daily')}
+        >
+          일간
+        </button>
+        <button
+          className={`px-4 py-2 ${menuType === 'weekly' ? 'bg-blue-500 text-white' : 'bg-white text-blue-500'} rounded`}
+          onClick={() => setMenuType('weekly')}
+        >
+          주간
+        </button>
+      </header>
+      {menuType !== 'realTime' && (
+        <div className="flex justify-between items-center my-4">
+          <button onClick={() => handleDateChange('prev')}>&lt;</button>
+          <span>{menuType === 'daily' ? date : `2024.${date}`}</span>
+          <button onClick={() => handleDateChange('next')}>&gt;</button>
+        </div>
+      )}
+      <main className="container mx-auto p-4">
+        <CategorySlider />
+        <TrendList />
+      </main>
+    </div>
+  );
+};
+
+export default RankingPage;

src/pages/RankingPage/.gitkeep

@@ -0,0 +1,23 @@
+import React, { useState } from 'react';
+
+const categories = ['통합', '나무위키', '트위터', '다음카페', '커뮤니티'];
+
+const CategorySlider: React.FC = () => {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  return (
+    <div className="flex overflow-x-auto whitespace-nowrap bg-gray-100 p-4 mt-6">
+      {categories.map((category, index) => (
+        <div
+          key={index}
+          className={`px-4 py-2 rounded-full cursor-pointer text-sm border ${index === activeIndex ? 'bg-red-500 text-white border-red-500' : 'bg-white text-gray-800 border-gray-300'} transition-all duration-300 mx-2`}
+          onClick={() => setActiveIndex(index)}
+        >
+          {category}
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default CategorySlider;