Feat: 홈(구 탐색) 개편

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;

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

@@ -0,0 +1,136 @@
+import { style, createVar, keyframes } from '@vanilla-extract/css';
+import { vars } from '@/styles/__theme.css';
+import { headlineSmall, bodyMedium, bodySmall, labelSmall } from '@/styles/__font.css';
+
+export const listBackground = createVar();
+
+export const wrapperOuter = style({
+  padding: '0 16px 30px',
+  marginTop: '12px',
+
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const titleWrapper = style({
+  marginBottom: '26px',
+
+  display: 'flex',
+  alignItems: 'baseline',
+  gap: '5px',
+});
+
+export const sectionTitle = style([
+  headlineSmall,
+  {
+    fontWeight: 600,
+  },
+]);
+
+const listWrapperHoverAnimation = keyframes({
+  '0%': {
+    transform: 'scale(1)',
+  },
+  '100%': {
+    transform: 'scale(1.01)',
+  },
+});
+
+export const listWrapper = style({
+  width: '100%',
+  marginBottom: '35px',
+  padding: '30px 24px 14px',
+
+  position: 'relative',
+
+  display: 'flex',
+  flexDirection: 'column',
+  borderRadius: '24px',
+  backgroundColor: '#fff',
+
+  ':hover': {
+    animation: `${listWrapperHoverAnimation} 0.1s forwards`,
+    boxShadow: 'rgba(0, 0, 0, 0.04) 0px 3px 5px',
+  },
+});
+
+export const listTopWrapper = style({
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'space-between',
+
+  marginBottom: '8px',
+});
+
+export const version = style({
+  padding: '6px 12px',
+
+  fontWeight: '400',
+  letterSpacing: '-3%',
+  fontSize: '1.4rem',
+  color: '#3D95FF',
+  backgroundColor: '#EEF6FF',
+  borderRadius: '20px',
+});
+
+export const listInformationWrapper = style({
+  marginBottom: '20px',
+
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+export const listTitle = style({
+  color: '#3E4455',
+  wordBreak: 'break-word',
+  fontWeight: '700',
+  fontSize: '2rem',
+  letterSpacing: '-3%',
+});
+
+export const listDescription = style({
+  marginTop: '13px',
+
+  fontWeight: '400',
+  fontSize: '1.6rem',
+  color: '#3E4455',
+  wordBreak: 'break-word',
+});
+
+export const ownerInformationWrapper = style({
+  display: 'flex',
+  justifyContent: 'flex-start',
+  alignItems: 'center',
+  gap: '8px',
+});
+
+export const ownerNicknameText = style({
+  color: '#676B75',
+  fontSize: '1.6rem',
+  fontWeight: '500',
+  letterSpacing: '-3%',
+});
+
+export const profileImageWrapper = style({
+  width: '30px',
+  height: '30px',
+
+  position: 'relative',
+});
+
+export const ownerProfileImage = style({
+  borderRadius: '50%',
+});
+
+export const simpleListWrapper = style({
+  height: 'auto',
+  padding: '20px 16px',
+  marginBottom: '16px',
+
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '10px',
+
+  borderTop: `1px solid ${vars.color.gray5}`,
+  backgroundColor: vars.color.white,
+});