Feat: 홈(구 탐색) 개편

.vscode/settings.json

@@ -1 +1,3 @@
-{}
+{
+  "typescript.tsdk": "node_modules/typescript/lib"
+}

src/app/(home)/_components/Categories.css.ts

@@ -0,0 +1,53 @@
+import { style } from '@vanilla-extract/css';
+
+export const gridContainer = style({
+  padding: '0 16px',
+
+  width: '100%',
+  position: 'relative',
+});
+
+export const list = style({
+  display: 'inline-flex',
+  gap: '8px',
+  flexWrap: 'wrap',
+  listStyle: 'none',
+  padding: 0,
+  margin: 0,
+});
+
+export const item = style({
+  padding: '6px 12px',
+  flexShrink: 0,
+
+  borderRadius: '20px',
+  backgroundColor: '#fff',
+  fontWeight: '500',
+  fontSize: '1.4rem',
+  color: '#8599AD',
+});
+
+export const selectedItem = style([
+  item,
+  {
+    backgroundColor: '#E3EEFF',
+    color: '#3D95FF',
+  },
+]);
+
+export const alignText = style({
+  flexGrow: 1,
+});
+
+export const orderDropdown = style({
+  display: 'flex',
+  alignItems: 'center',
+  gap: '8px',
+  float: 'right',
+});
+
+export const order = style({
+  fontWeight: '400',
+  fontSize: '1.6rem',
+  color: '#3C4F76',
+});

src/app/(home)/_components/Categories.tsx

@@ -0,0 +1,54 @@
+'use client';
+
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+
+import { CategoryType } from '@/lib/types/categoriesType';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import getCategories from '@/app/_api/category/getCategories';
+
+import * as styles from './Categories.css';
+import ChevronDown from '/public/icons/ver3/chevron_down.svg';
+
+interface CategoriesType {
+  onClick: (name: string) => void;
+}
+
+function Categories({ onClick }: CategoriesType) {
+  const [selectedCategoryCode, setSelectedCategoryCode] = useState('0');
+
+  const { data, isFetching } = useQuery<CategoryType[]>({
+    queryKey: [QUERY_KEYS.getCategories],
+    queryFn: getCategories,
+  });
+
+  const handleClickCategory = (codeNum: string, name: string) => {
+    setSelectedCategoryCode(codeNum);
+    onClick(name);
+  };
+
+  return (
+    <div className={styles.gridContainer}>
+      <ul className={styles.list}>
+        {data?.map((el) => {
+          return (
+            <li key={el.code}>
+              <button
+                className={selectedCategoryCode === el.code ? `${styles.selectedItem}` : `${styles.item}`}
+                onClick={() => handleClickCategory(el.code, el.engName)}
+              >
+                {el.korName}
+              </button>
+            </li>
+          );
+        })}
+      </ul>
+      {/* <div className={styles.orderDropdown}>
+        <span className={styles.order}>정렬</span>
+        <ChevronDown />
+      </div> */}
+    </div>
+  );
+}
+
+export default Categories;

src/app/(home)/_components/Feed.tsx

@@ -0,0 +1,23 @@
+'use client';
+
+import { useTab } from '@/store/useTab';
+
+import HomeTab from '@/app/(home)/_components/HomeTab';
+import RecommendationFeed from '@/app/(home)/_components/RecommendationFeed';
+import FollowingFeed from '@/app/(home)/_components/FollowingFeed';
+import RecentFeed from '@/app/(home)/_components/RecentFeed';
+
+function Feed() {
+  const { currentTab } = useTab();
+
+  return (
+    <div>
+      <HomeTab />
+      {currentTab === 'recommendation' && <RecommendationFeed />}
+      {currentTab === 'recent' && <RecentFeed />}
+      {currentTab === 'following' && <FollowingFeed />}
+    </div>
+  );
+}
+
+export default Feed;