Merge pull request #302 from JEOLLOGA/refactor/#301/homepage-rsc

[REFACTOR] Homepage 서버 컴포넌트 전환

Author: maylh

next.config.ts

@@ -5,22 +5,31 @@ const withVanillaExtract = createVanillaExtractPlugin();
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,
+
   images: {
     domains: ['noms.templestay.com', 'www.templestay.com'],
   },
+
   webpack(config) {
-    config.module.rules.push({
-      test: /\.svg$/,
-      issuer: /\.[jt]sx?$/,
-      use: [
-        {
-          loader: '@svgr/webpack',
-          options: {
-            memo: true,
-          },
-        },
-      ],
-    });
+    const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'));
+
+    config.module.rules.push(
+      {
+        ...fileLoaderRule,
+        test: /\.svg$/i,
+        resourceQuery: /url/,
+      },
+
+      {
+        test: /\.svg$/i,
+        issuer: fileLoaderRule.issuer,
+        resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/] },
+        use: ['@svgr/webpack'],
+      },
+    );
+
+    fileLoaderRule.exclude = /\.svg$/i;
+
     return config;
   },
 };

src/app/page.tsx

@@ -1,30 +1,22 @@
-'use client';
-
-import { useGetNickname } from '@apis/user';
 import HomeClient from '@app/HomeClient';
 import LookCard from '@components/card/lookCard/LookCard';
 import MapCard from '@components/card/mapCard/MapCard';
 import CurationCarousel from '@components/carousel/curationCarousel/CurationCarousel';
 import DetailTitle from '@components/detailTitle/DetailTitle';
-import ExceptLayout from '@components/except/exceptLayout/ExceptLayout';
 import Footer from '@components/footer/Footer';
 import Header from '@components/header/Header';
-import { getStorageValue } from '@hooks/useLocalStorage';
+import { cookies } from 'next/headers';
 
 import * as styles from './homePage.css';
 
-const HomePage = () => {
-  const userId = Number(getStorageValue('userId'));
-  const { data, isLoading } = useGetNickname(userId);
-
-  if (isLoading) {
-    return <ExceptLayout type="loading" />;
-  }
+const HomePage = async () => {
+  const cookieStore = await cookies();
+  const userName = cookieStore.get('userNickname')?.value;
 
   return (
     <div className={styles.homeWrapper}>
       <Header />
-      <LookCard name={data?.nickname} />
+      <LookCard name={userName} />
       <MapCard />
       <div className={styles.curationCarouselStyle}>
         <DetailTitle title="절로가 PICK!" />

src/components/card/lookCard/LookCard.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import BasicBtn from '@components/common/button/basicBtn/BasicBtn';
 import useFilter from '@hooks/useFilter';
 import useEventLogger from 'src/gtm/hooks/useEventLogger';

src/components/card/mapCard/Map.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import mapImage from '@assets/images/home_card_map.png';
 import LocBtn from '@components/card/mapCard/LocBtn';
 import { REGION_INFOS, REGION_LABEL_MAP } from '@constants/regionInfos';

src/components/carousel/curationCarousel/CurationCarousel.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import CurationCard from '@components/curation/curationCard/CurationCard';
 import { CURATION_INFO } from '@constants/curationInfo';
 import useCarousel from '@hooks/useCarousel';

src/components/footer/Footer.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Icon from '@assets/svgs';
 import useEventLogger from 'src/gtm/hooks/useEventLogger';
 

src/components/header/Header.tsx

@@ -1,3 +1,5 @@
+'use client';
+
 import Icon from '@assets/svgs';
 import useNavigateTo from '@hooks/useNavigateTo';
 

src/components/search/searchBar/SearchBar.tsx

@@ -1,4 +1,5 @@
 'use client';
+
 import Icon from '@assets/svgs';
 import useFilter from '@hooks/useFilter';
 import { usePathname } from 'next/navigation';

src/hooks/useCarousel.ts

@@ -1,4 +1,5 @@
 'use client';
+
 import { useState, useRef } from 'react';
 
 interface UseCarouselProps {

src/hooks/useFilter.ts

@@ -1,3 +1,5 @@
+'use client';
+
 import useFetchFilteredList from '@apis/filter';
 import { fetchFilteredCount } from '@apis/filter/axios';
 import useLocalStorage, { getStorageValue } from '@hooks/useLocalStorage';