refactor: api 구조 리팩터링 (#32)

DNDACADEMY · Jan 25, 2024 · 35b4542 · 35b4542
1 parent b40190e
commit 35b4542
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 15 deletions.
diff --git a/@types/environment.d.ts b/@types/environment.d.ts
@@ -3,5 +3,6 @@ namespace NodeJS {
  interface ProcessEnv extends NodeJS.ProcessEnv {
  NEXT_PUBLIC_API_HOST: string;
  NEXT_PUBLIC_ORIGIN: string;
+ NEXT_PUBLIC_BLOG_HOST: string;
  }
 }
diff --git a/src/app/api/index.ts b/src/app/api/index.ts
@@ -2,7 +2,7 @@ import dayjs from 'dayjs';
 
 import { paramsSerializer } from '@/utils';
 
-import { FetchRequest } from './model';
+import { FetchRequest, UrlPrefixType } from './model';
 
 const CACHE_MINUTE = 5;
 
@@ -24,29 +24,31 @@ export const getCacheDate = (cacheTime = CACHE_MINUTE) => {
  const modMin = dayjs().get('minute') % cacheTime;
  const minute = modMin === 0 ? currentMin : currentMin - modMin;
 
- return `?date=${date}-${minute}`;
+ return {
+ date: `${date}-${minute}`,
+ };
 };
 
-const getUrl = (url: string, isBFF = false) => {
- if (isBFF) {
+const getUrl = (url: string, type: UrlPrefixType) => {
+ if (type === 'bff') {
  return `${process.env.NEXT_PUBLIC_ORIGIN}/api${url}`;
  }
 
+ if (type === 'blog') {
+ return `${process.env.NEXT_PUBLIC_BLOG_HOST}${url}`;
+ }
+
  return `${process.env.NEXT_PUBLIC_API_HOST}${url}`;
 };
 
 async function api<T, K = undefined>({
- url, params, config = {}, isBFF, method = 'GET',
+ url, params, config = {}, type = 'public', method = 'GET',
 }: FetchRequest<K>): Promise<T> {
- const response = await fetch(`${getUrl(url, isBFF)}?${paramsSerializer({
+ const response = await fetch(`${getUrl(url, type)}?${paramsSerializer({
  ...params,
  })}`, {
  ...config,
  method,
- headers: {
- ...config.headers,
- 'Content-Type': 'application/json',
- },
  });
 
  if (!response.ok) {

diff --git a/src/app/api/model.ts b/src/app/api/model.ts
@@ -10,10 +10,12 @@ type Method =
  | 'link' | 'LINK'
  | 'unlink' | 'UNLINK';
 
+export type UrlPrefixType = 'public' | 'blog' | 'bff';
+
 export interface FetchRequest<T = any> {
  url: string;
  params?: T;
  method?: Method;
- isBFF?: boolean;
+ type?: UrlPrefixType;
  config?: Omit<RequestInit, 'method'>;
 }
diff --git a/src/app/api/projects/route.ts b/src/app/api/projects/route.ts
@@ -1,6 +1,7 @@
 import { NextRequest, NextResponse } from 'next/server';
 
 import { Project } from '@/lib/types/project';
+import { paramsSerializer } from '@/utils';
 
 import { getCacheDate } from '..';
 
@@ -12,7 +13,7 @@ export async function GET(request: NextRequest) {
 
  const size = searchParams.get('size');
 
- const response = await fetch(`${process.env.NEXT_PUBLIC_API_HOST}/data/project.json${getCacheDate()}`, {
+ const response = await fetch(`${process.env.NEXT_PUBLIC_API_HOST}/data/project.json?${paramsSerializer(getCacheDate())}`, {
  method: 'GET',
  });
 

diff --git a/src/components/molecules/ProjectsSlider/index.tsx b/src/components/molecules/ProjectsSlider/index.tsx
@@ -14,10 +14,10 @@ function ProjectsSlider() {
 
  return (
  <div className={styles.projectsSlider}>
- <Marquee pauseOnHover speed={80} className={styles.marquee}>
+ <Marquee pauseOnHover speed={100} className={styles.marquee}>
  <div className={styles.projectSliderWrapper}>
  {projects.map(({ id, thumbnail, title }) => (
- <Link href={`/projects/${id}`} key={id}>
+ <Link key={id} href={`/projects/${id}`} prefetch={false}>
  <Image
  key={id}
  src={thumbnail}

diff --git a/src/hooks/queries/useGetProjectsQuery.ts b/src/hooks/queries/useGetProjectsQuery.ts
@@ -8,7 +8,7 @@ function useGetProjectsQuery({ size }: { size?: number; } = {}) {
  queryKey: ['projects'],
  queryFn: () => api<ProjectType[], { size?: number; }>({
  url: '/projects',
- isBFF: true,
+ type: 'bff',
  method: 'GET',
  params: {
  size,