feat: 피드 페이지 UI 구현

next-i18next.config.ts

@@ -0,0 +1,14 @@
+import path from 'path';
+import type { UserConfig } from 'next-i18next';
+
+const nextI18NextConfig: UserConfig = {
+  i18n: {
+    locales: ['ko', 'en'],
+    defaultLocale: 'ko',
+    localeDetection: false, // 리터럴 false
+  },
+  reloadOnPrerender: process.env.NODE_ENV === 'development',
+  localePath: path.resolve('./public/locales'),
+};
+
+export default nextI18NextConfig; // ← 반드시 export default

next.config.ts

@@ -1,5 +1,4 @@
 import type { NextConfig } from 'next';
-import { i18n } from './next-i18next.config.js';
 
 const nextConfig: NextConfig = {
   webpack: (config) => {
@@ -10,7 +9,6 @@ const nextConfig: NextConfig = {
     return config;
   },
   reactStrictMode: true,
-  i18n,
   images: {
     remotePatterns: [
       {

public/locales/en/feed.json

@@ -0,0 +1,6 @@
+{
+  "feed": "Feed",
+  "more_icon": "more icon",
+  "loading": "loading...",
+  "more": "More Epigrams"
+}

public/locales/ko/feed.json

@@ -0,0 +1,6 @@
+{
+  "feed": "피드",
+  "more_icon": "더보기 아이콘",
+  "loading": "불러오는 중...",
+  "more": "에피그램 더보기"
+}

src/components/Feed/index.tsx

@@ -4,14 +4,15 @@ import Link from 'next/link';
 
 type feedProps = {
   feed: Epigram;
+  className?: string;
 };
 
-const Feed = ({ feed }: feedProps) => {
+const Feed = ({ feed, className }: feedProps) => {
   return (
-    <Link href={`/epigrams/${feed.id}`} prefetch={false}>
-      <div className="font-iro">
+    <Link href={`/epigrams/${feed.id}`} prefetch={false} className="block h-full">
+      <div className="h-full flex flex-col justify-between">
         <div
-          className="py-[21px] px-[22px] shadow-[0px_3px_12px_0px_rgba(0,0,0,0.04)] rounded-[16px] bg-blue-100"
+          className={`font-iro ${className} py-[21px] px-[22px] shadow-[0px_3px_12px_0px_rgba(0,0,0,0.04)] rounded-[16px] bg-blue-100 bg-top bg-size-[100%_auto] bg-no-repeat`}
           style={{ backgroundImage: `url(${noteBg?.src ?? noteBg})` }}
         >
           <p>{feed?.content}</p>

src/pages/_app.tsx

@@ -5,7 +5,7 @@ import { AnimatePresence, motion } from 'framer-motion';
 import { HydrationBoundary, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { appWithTranslation } from 'next-i18next';
-import nextI18NextConfig from '../../next-i18next.config.js';
+import nextI18NextConfig from '../../next-i18next.config';
 import GlobalNavagationBar from '@/components/GNB/index';
 import ModalRoot from '@/components/Modal/ModalRoot';
 import { useState } from 'react';

src/pages/feed.tsx

@@ -0,0 +1,91 @@
+import Image from 'next/image';
+
+import more from '@/assets/icon/more-icon.svg';
+
+import FeedSkeleton from '@/components/Feed/FeedSkeleton';
+import { QUERY_KEYS } from '@/lib/QUERY_KEYS';
+import { listEpigrams } from '@/services/epigrams';
+import { dehydrate, QueryClient } from '@tanstack/react-query';
+import { GetStaticProps } from 'next';
+import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
+import { useTranslation } from 'next-i18next';
+import { useInfiniteEpigrams } from '@/hooks/useEpigrams';
+import Feed from '@/components/Feed';
+import nextI18NextConfig from '../../next-i18next.config';
+
+export const getStaticProps: GetStaticProps = async ({ locale }) => {
+  const qc = new QueryClient();
+
+  await qc.prefetchInfiniteQuery({
+    queryKey: QUERY_KEYS.epigrams(6),
+    queryFn: ({ pageParam }) =>
+      listEpigrams({ cursor: pageParam === null ? undefined : (pageParam as number), limit: 6 }),
+    initialPageParam: null,
+  });
+
+  return {
+    props: {
+      dehydratedState: dehydrate(qc),
+      ...(await serverSideTranslations(locale ?? 'ko', ['feed'], nextI18NextConfig)),
+    },
+    revalidate: 60,
+  };
+};
+
+const FeedPage = () => {
+  const { t } = useTranslation('feed');
+
+  const {
+    list: latestFeeds,
+    hasNextPage: hasMoreEpigrams,
+    fetchNextPage: fetchEpigramNextPage,
+    isFetchingNextPage: isFetchingEpigramNextPage,
+    reachedEnd: noMoreEpigrams,
+    isLoading: isEpigramsLoading,
+  } = useInfiniteEpigrams(6);
+
+  return (
+    <div className="flex justify-center">
+      <div className="px-6 pt-[92px] lg:pt-[200px] lg:max-w-[1200px] md:max-w-[600px] w-full">
+        <p className="mb-6 lg:mb-10 text-lg-sb lg:text-2xl-sb">{t('feed')}</p>
+        <div className="grid grid-cols-1 md:grid-cols-2 md:gap-3 lg:gap-[30px] lg:gap-y[10px]">
+          {isEpigramsLoading
+            ? [1, 2, 3, 4, 5, 6].map((index) => (
+                <div key={index}>
+                  <FeedSkeleton />
+                </div>
+              ))
+            : latestFeeds.map((f) => (
+                <div className="md:h-[180px] lg:h-[260px] h-full" key={f.id}>
+                  <Feed feed={f} className="h-full" />
+                </div>
+              ))}
+
+          {isFetchingEpigramNextPage &&
+            [1, 2, 3, 4, 5, 6].map((index) => (
+              <div key={index}>
+                <FeedSkeleton />
+              </div>
+            ))}
+        </div>
+
+        <div className="w-full flex justify-center pt-[72px]">
+          {hasMoreEpigrams && !noMoreEpigrams && (
+            <button
+              className="flex items-center border py-3 px-10 border-line-200 rounded-[100px] cursor-pointer disabled:opacity-50"
+              onClick={() => fetchEpigramNextPage()}
+              disabled={isFetchingEpigramNextPage}
+            >
+              <Image src={more} className="mr-2" alt={t('more_icon')} aria-hidden="true" />
+              <span className="text-md-m lg:text-xl-m lg:font-medium text-blue-500">
+                {isFetchingEpigramNextPage ? t('loading') : t('more')}
+              </span>
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default FeedPage;

src/pages/index.tsx

@@ -19,10 +19,11 @@ import landing3 from '@/assets/images/img_Desktop_landing03.svg';
 import landing4 from '@/assets/images/img_Desktop_landing04.svg';
 import Button from '@/components/Button';
 import Link from 'next/link';
+import nextI18NextConfig from '../../next-i18next.config';
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'ko', ['home'])),
+    ...(await serverSideTranslations(locale ?? 'ko', ['home'], nextI18NextConfig)),
   },
 });
 

src/pages/login.tsx

@@ -9,6 +9,7 @@ import Button from '@/components/Button';
 import Input from '@/components/Input';
 import logo from '@/assets/images/logo-lg.svg';
 import Link from 'next/link';
+import nextI18NextConfig from '../../next-i18next.config';
 
 type LoginForm = {
   email: string;
@@ -17,7 +18,7 @@ type LoginForm = {
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'ko', ['login'])),
+    ...(await serverSideTranslations(locale ?? 'ko', ['login'], nextI18NextConfig)),
   },
 });
 

src/pages/main.tsx

@@ -9,7 +9,6 @@ import topArrow from '@/assets/icon/top-arrow-icon.svg';
 
 import { GetServerSideProps } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
-import nextI18NextConfig from '../../next-i18next.config.js';
 import { useTranslation } from 'next-i18next';
 import { useTodayEpigram } from '@/hooks/useTodayEpigram';
 import { useInfiniteEpigrams } from '@/hooks/useEpigrams';
@@ -22,6 +21,7 @@ import { QUERY_KEYS } from '@/lib/QUERY_KEYS';
 import { dehydrate, QueryClient } from '@tanstack/react-query';
 import { listEpigrams } from '@/services/epigrams';
 import { listComments } from '@/services/comments';
+import nextI18NextConfig from '../../next-i18next.config';
 
 export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
   const qc = new QueryClient();
@@ -42,10 +42,11 @@ export const getServerSideProps: GetServerSideProps = async ({ locale }) => {
 
   return {
     props: {
-      ...(await serverSideTranslations(locale ?? 'ko', ['emotion', 'main', 'comment'], {
-        ...nextI18NextConfig,
-        reloadOnPrerender: true,
-      })),
+      ...(await serverSideTranslations(
+        locale ?? 'ko',
+        ['emotion', 'main', 'comment'],
+        nextI18NextConfig,
+      )),
       dehydratedState: dehydrate(qc),
     },
   };

src/pages/signup.tsx

@@ -11,6 +11,7 @@ import { GetStaticProps } from 'next';
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
 import { useTranslation } from 'next-i18next';
 import { useLogin } from '@/hooks/useLogin';
+import nextI18NextConfig from '../../next-i18next.config';
 
 type SignupForm = {
   email: string;
@@ -21,7 +22,7 @@ type SignupForm = {
 
 export const getStaticProps: GetStaticProps = async ({ locale }) => ({
   props: {
-    ...(await serverSideTranslations(locale ?? 'ko', ['join'])),
+    ...(await serverSideTranslations(locale ?? 'ko', ['join'], nextI18NextConfig)),
   },
 });