홈 페이지 API 연동

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

@@ -5,7 +5,7 @@ export const headerWrapper = style({
   width: '100%',
   height: '40px',
   padding: '10px 16px',
-  margin: '0 0 12px',
+  margin: '0 0 16px',
 });
 
 export const entireWrapper = style({

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

@@ -7,7 +7,7 @@ import Link from 'next/link';
 import Image from 'next/image';
 import { useQuery } from '@tanstack/react-query';
 
-import SearchBarComponent from '@/components/SearchBar';
+import SearchBarArea from './SearchBarArea';
 import Modal from '@/components/Modal/Modal';
 import LoginModal from '@/components/login/LoginModal';
 
@@ -24,7 +24,11 @@ import BellIcon from '/public/icons/ver3/bell.svg';
 import Avatar from '/public/icons/ver3/Avatar.svg';
 
 function Header() {
-  const { isOn: isSearchBarOpened, handleSetOn: handleSearchBarOpened } = useBooleanOutput();
+  const {
+    isOn: isSearchBarOpened,
+    handleSetOn: handleSearchBarOpened,
+    handleSetOff: handleSearchBarClosed,
+  } = useBooleanOutput();
   const { isOn, handleSetOn, handleSetOff } = useBooleanOutput();
   const [isLoggedIn, setIsLoggedIn] = useState(false); // 로그인 상태를 관리하는 useState 추가
 
@@ -41,7 +45,7 @@ function Header() {
   };
 
   const handleInactivateSearchBar = () => {
-    handleSearchBarOpened();
+    handleSearchBarClosed();
   };
 
   const handleSearchIconClick = () => {
@@ -55,7 +59,7 @@ function Header() {
 
   return (
     <header className={styles.headerWrapper}>
-      {isSearchBarOpened && <SearchBarComponent handleCancel={handleInactivateSearchBar} />}
+      {isSearchBarOpened && <SearchBarArea handleCancel={handleInactivateSearchBar} />}
       {!isSearchBarOpened && (
         <div className={styles.entireWrapper}>
           <div className={styles.homeTitleContainer}>

src/app/(home)/_components/TrendingLists.tsx → src/app/(home)/_components/HomeRecommendedLists.tsx

@@ -8,21 +8,19 @@ import { Swiper, SwiperSlide } from 'swiper/react';
 import 'swiper/css';
 import { Autoplay, EffectCoverflow } from 'swiper/modules';
 
-import getTrendingLists from '@/app/_api/home/getTrendingLists';
+import getHomeRecommendedLists from '@/app/_api/home/getHomeRecommendedLists';
 import { QUERY_KEYS } from '@/lib/constants/queryKeys';
-import { TrendingListType } from '@/lib/types/exploreType';
-import { TRENDINGLISTS_DATA } from '../mock/mockdata';
+import { HomeRecommendedListType } from '@/lib/types/homeType';
 
-import * as styles from './TrendingLists.css';
+import * as styles from './HomeRecommendedLists.css';
 import { vars } from '@/styles/theme.css';
 import { TrendingListsSkeleton } from '../../../components/exploreComponents/Skeleton';
 
 function TrendingList() {
-  // 오류로인해 주석처리 해 둠
-  // const { data: trendingLists, isFetching } = useQuery({
-  //   queryKey: [QUERY_KEYS.getTrendingLists],
-  //   queryFn: () => getTrendingLists(),
-  // });
+  const { data: recommendedLists, isFetching } = useQuery({
+    queryKey: [QUERY_KEYS.getHomeRecommendedLists],
+    queryFn: () => getHomeRecommendedLists(),
+  });
 
   const SWIPER_STYLE = useMemo(
     () => ({
@@ -48,7 +46,7 @@ function TrendingList() {
     <section className={styles.wrapper}>
       <div className={styles.listWrapper}>
         <div className={styles.slide}>
-          {TRENDINGLISTS_DATA && TRENDINGLISTS_DATA.length > 0 && (
+          {recommendedLists && recommendedLists.length > 0 && (
             <Swiper
               slidesPerView={'auto'}
               grabCursor={true}
@@ -63,7 +61,7 @@ function TrendingList() {
               className="mySwiper"
               style={SWIPER_STYLE}
             >
-              {TRENDINGLISTS_DATA.map((item, index) => (
+              {recommendedLists.map((item, index) => (
                 <SwiperSlide key={index} className={styles.sliderItem} style={SWIPER_SLIDER_STYLE}>
                   <TrendingListItem item={item} index={index} />
                 </SwiperSlide>
@@ -77,7 +75,7 @@ function TrendingList() {
 }
 
 interface TrendingListItemProps {
-  item: any;
+  item: HomeRecommendedListType;
   index: number;
 }
 
@@ -116,7 +114,7 @@ function TrendingListItem({ item }: TrendingListItemProps) {
 export default TrendingList;
 
 interface TrendingListInformationType {
-  item?: TrendingListType;
+  item?: HomeRecommendedListType;
 }
 
 function TrendingListInformation({ item }: TrendingListInformationType) {
@@ -133,11 +131,12 @@ function TrendingListInformation({ item }: TrendingListInformationType) {
         <p className={styles.listOwner}>{item.ownerNickname}</p>
       </div>
       <ul className={styles.top3Wrapper}>
-        {item.top3.map((el, idx) => (
-          <li key={idx} className={item.itemImageUrl ? styles.top3ItemWithImage : styles.top3ItemNoImage}>
-            {`${idx + 1}. ${el.title}`}
-          </li>
-        ))}
+        {item &&
+          item?.items?.map((el, idx) => (
+            <li key={idx} className={item.itemImageUrl ? styles.top3ItemWithImage : styles.top3ItemNoImage}>
+              {`${idx + 1}. ${el.title}`}
+            </li>
+          ))}
       </ul>
     </div>
   );

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

@@ -1,6 +1,6 @@
 import UsersRecommendation from '@/components/exploreComponents/RecommendedUsers';
 import TopicsRecommendation from '@/app/(home)/_components/TopicsRecommendation';
-import TrendingList from '@/app/(home)/_components/TrendingLists';
+import TrendingList from '@/app/(home)/_components/HomeRecommendedLists';
 
 function RecommendationFeed() {
   return (

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

@@ -0,0 +1,35 @@
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  width: '100%',
+
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const inputWrapper = style({
+  width: '100%',
+
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export const input = style({
+  width: '100%',
+
+  fontSize: '1.6rem',
+  overflow: 'hidden',
+  '::placeholder': {
+    color: '#637587',
+    fontWeight: '400',
+    fontSize: '1.6rem',
+  },
+});
+
+export const cancelButton = style({
+  flexShrink: 0,
+  fontWeight: '400',
+  fontSize: '1.6rem',
+  letterSpacing: '-3%',
+  color: '#213752',
+});

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

@@ -0,0 +1,21 @@
+import * as styles from './SearchBarArea.css';
+import SearchBar from '@/components/SearchBar';
+
+interface SearchBarProps {
+  handleCancel?: () => void;
+}
+
+function SearchBarArea({ handleCancel }: SearchBarProps) {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.inputWrapper}>
+        <SearchBar />
+      </div>
+      <button className={styles.cancelButton} onClick={handleCancel}>
+        취소
+      </button>
+    </div>
+  );
+}
+
+export default SearchBarArea;

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

@@ -49,6 +49,7 @@ export const topic = style({
   fontSize: '1.5rem',
   letterSpacing: '-3%',
   color: '#292929',
+  cursor: 'pointer',
 });
 
 export const topicButton = style([

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

@@ -1,27 +1,39 @@
+'use client';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { useQuery } from '@tanstack/react-query';
+import { QUERY_KEYS } from '@/lib/constants/queryKeys';
+import getRecommendedTopics from '@/app/_api/home/getRecommendedTopics';
 
 import * as styles from './TopicsRecommendation.css';
-/**목데이터 지우기 */
-import { TopicsData } from '../mock/mockdata';
 
+/* @TODO 스켈레톤 구현 */
 function TopicsRecommendation() {
+  const { data: topicLists, isFetching } = useQuery({
+    queryKey: [QUERY_KEYS.getRecommendedTopics],
+    queryFn: () => getRecommendedTopics(),
+  });
+
   return (
     <section className={styles.wrapper}>
       <div className={styles.sectionTitleWrapper}>
         <div className={styles.sectionTitle}>이 주제로 만들어 보세요</div>
-        <Link href={'/'}>
+        <Link href={'/topics'}>
           <span className={styles.showMoreButton}>더보기</span>
         </Link>
       </div>
       <ul className={styles.itemsWrapper}>
-        {TopicsData.map((el, idx) => {
-          return (
-            <li key={idx}>
-              <TopicItem title={el} />
-            </li>
-          );
-        })}
-        <button className={styles.topicButton}>주제 요청하기→</button>
+        {topicLists &&
+          topicLists?.map((el, idx) => {
+            return (
+              <li key={idx}>
+                <TopicItem title={el.title} />
+              </li>
+            );
+          })}
+        <Link href={'/topics'}>
+          <button className={styles.topicButton}>주제 요청하기→</button>
+        </Link>
       </ul>
     </section>
   );
@@ -34,5 +46,15 @@ interface TopicItemProps {
 }
 
 function TopicItem({ title }: TopicItemProps) {
-  return <div className={styles.topic}>{title}</div>;
+  const router = useRouter();
+
+  const handleTopicClick = (title: string) => {
+    router.push(`/list/create?title=${title}`);
+  };
+
+  return (
+    <div className={styles.topic} onClick={() => handleTopicClick(title)}>
+      {title}
+    </div>
+  );
 }