배포 전용 URL세팅 (#51)

* feat: 공통 리스트 타입 가드 생성 및 적용 - home home과 feedback의 공통 컴포넌트에 사용되는 데이터타입의 타입가드를 생성하고 적용합니다. (home만 우선적으로 적용) * chore: 허스키 내용 주석 추가 * chore: 배포전용 API URL 적용 - 배포용 URL env에 추가 - 클라이언트 컴포넌트: 프록시 설정에 배포용 API 추가 (next.config.ts) - 서버 컴포넌트: 서버 컴포넌트 배포용 API 변수 생성 및 모든 API메소드 적용(serverApiBaseURL.ts) - 카카오 로그인 배포용 리다이렉션 URL 추가
DDD-Community · May 15, 2024 · ba25714 · ba25714
1 parent 3a9657a
commit ba25714
Show file tree

Hide file tree

Showing 20 changed files with 105 additions and 70 deletions.
diff --git a/.husky/commit-msg b/.husky/commit-msg
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
+# . "$(dirname -- "$0")/_/husky.sh"
 
 # COMMIT_MSG_FILE=$1
 # COMMIT_MSG=$(awk '!/^\s*#/' "$COMMIT_MSG_FILE")

diff --git a/.husky/pre-commit b/.husky/pre-commit
@@ -1,5 +1,5 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
+# . "$(dirname -- "$0")/_/husky.sh"
 
 # branch_name=$(git branch --show-current)
 

diff --git a/.husky/pre-push b/.husky/pre-push
@@ -1,4 +1,4 @@
 #!/usr/bin/env sh
-. "$(dirname -- "$0")/_/husky.sh"
+# . "$(dirname -- "$0")/_/husky.sh"
 
 npm run build
diff --git a/next.config.js b/next.config.js
@@ -8,7 +8,10 @@ const nextConfig = {
     return [
       {
         source: '/api/:path*',
-        destination: `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/:path*`,
+        destination:
+          process.env.NODE_ENV === 'development'
+            ? `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/:path*`
+            : `${process.env.NEXT_PUBLIC_BASE_URL_PROD}/api/:path*`,
       },
     ];
   },

diff --git a/src/app/(afterlogin)/(navbar)/_components/CardInfo.tsx b/src/app/(afterlogin)/(navbar)/_components/CardInfo.tsx
@@ -1,24 +1,26 @@
 'use client';
 
-import { PresentationListType } from '@/types/service';
+import { CardListType } from '@/types/service';
 import styles from './CardInfo.module.scss';
-import { ElementType } from 'react';
+
 import HomeCardDescription from './_Home/HomeCardDescription';
+import { PresentationListTypeGuard } from '@/types/guards';
 
 interface Props {
-  presentation: PresentationListType['page']['content'][0];
+  listInfo: CardListType;
   usage: 'home' | 'feedback';
 }
-const CardInfo = ({ presentation, usage }: Props) => {
+const CardInfo = ({ listInfo, usage }: Props) => {
   return (
     <div className={styles.info}>
-      <span className={styles.info__title}>{presentation.title}</span>
-      {usage === 'home' ? <HomeCardDescription presentation={presentation} /> : <></>}
-      {/* <span className={styles.info__desc}>
-        D{presentation.dday < 0 ? `+${Math.abs(presentation.dday)}` : `-${presentation.dday}`}
-        <em className={styles.info__division}></em>
-        발표 시간 {presentation.timeLimit.hours * 60 + presentation.timeLimit.minutes}분
-      </span> */}
+      <span className={styles.info__title}>{listInfo.title}</span>
+      {usage === 'home' && PresentationListTypeGuard(listInfo) ? (
+        <>
+          <HomeCardDescription listInfo={listInfo} />
+        </>
+      ) : (
+        <></>
+      )}
     </div>
   );
 };

diff --git a/src/app/(afterlogin)/(navbar)/_components/CardItem.tsx b/src/app/(afterlogin)/(navbar)/_components/CardItem.tsx
@@ -5,31 +5,30 @@ import styles from './CardItem.module.scss';
 
 import useToggle from '@/app/_hooks/useToggle';
 import Confirm from '@/app/_components/_modules/_modal/Confirm';
-import { PresentationListType } from '@/types/service';
+import { CardListType } from '@/types/service';
 import Image from 'next/image';
 import { useRouter } from 'next/navigation';
 import DeleteIcon from '../home/_components/_svgs/DeleteIcon';
 import ModifyIcon from '../home/_components/_svgs/ModifyIcon';
 import MenuIcon from '../home/_components/_svgs/MenuIcon';
 import { useDeletePresentation } from '../home/_hooks/presentationList';
 import CardInfo from './CardInfo';
-import HomeButton from './_Home/PracticeButton';
 import PracticeButton from './_Home/PracticeButton';
 
 interface Props {
-  presentation: PresentationListType['page']['content'][0];
+  listInfo: CardListType;
   usage: 'home' | 'feedback';
 }
 
-const CardItem = ({ presentation, usage }: Props) => {
+const CardItem = ({ listInfo, usage }: Props) => {
   const router = useRouter();
   const flyout = useToggle();
   const modal = useToggle();
 
-  const { mutate } = useDeletePresentation(presentation.id);
+  const { mutate } = useDeletePresentation(listInfo.id);
 
   const handleModify = () => {
-    router.push(`/upload/${presentation.id}`);
+    router.push(`/upload/${listInfo.id}`);
     flyout.onClose();
   };
 
@@ -47,13 +46,14 @@ const CardItem = ({ presentation, usage }: Props) => {
       <article className={styles.container}>
         <div className={styles.thumbnail}>
           <Image
-            src={`${process.env.NEXT_PUBLIC_BASE_URL_CDN}/${presentation.thumbnailPath}`}
-            alt={`${presentation.id} 썸네일`}
+            src={`${process.env.NEXT_PUBLIC_BASE_URL_CDN}/${listInfo.thumbnailPath}`}
+            alt={`${listInfo.id} 썸네일`}
             width={440}
             height={250}
             style={{ borderRadius: '16px' }}
           />
           <div className={styles.menu__box}>
+            {/* TODO: 피드백에 맞는 버튼 로직 생성 필요 */}
             <FlyoutMenu context={flyout}>
               <FlyoutMenu.ToggleButton>
                 <MenuIcon />
@@ -76,12 +76,12 @@ const CardItem = ({ presentation, usage }: Props) => {
           </div>
         </div>
         <div className={styles.info__box}>
-          <div className={styles.info}>
-            <CardInfo presentation={presentation} usage={usage} />
+          <div className={styles.listInfo}>
+            <CardInfo listInfo={listInfo} usage={usage} />
           </div>
           <div className={styles.action__box}>
             {usage === 'home' ? (
-              <PracticeButton onClick={() => router.push(`/setting/${presentation.id}`)} />
+              <PracticeButton onClick={() => router.push(`/setting/${listInfo.id}`)} />
             ) : (
               <></>
             )}

diff --git a/src/app/(afterlogin)/(navbar)/_components/CardList.tsx b/src/app/(afterlogin)/(navbar)/_components/CardList.tsx
@@ -4,10 +4,11 @@ import styles from './CardList.module.scss';
 import { clientHomeApi } from '@/services/client/home';
 import { useInView } from 'react-intersection-observer';
 import { Fragment, useEffect } from 'react';
-import { PresentationListType } from '@/types/service';
+import { CardListType, FeedbackListType, PresentationListType } from '@/types/service';
 import { useRouter } from 'next/navigation';
 import PlusIcon from '../home/_components/_svgs/PlusIcon';
 import CardItem from './CardItem';
+import { clientFeedbackApi } from '@/services/client/feedback';
 
 // 패칭 api
 // 최근 발표 사용 여부
@@ -28,6 +29,8 @@ const CardList = ({ usage }: Props) => {
         return await response.json();
       }
       if (usage === 'feedback') {
+        const response = await clientFeedbackApi.getFeedbackList({ pageParam });
+        return await response.json();
       }
     },
     initialPageParam: 0,
@@ -58,15 +61,15 @@ const CardList = ({ usage }: Props) => {
 
   return (
     <section className={styles.container}>
-      <h2>내 발표연습 목록</h2>
+      <h2>내 {usage === 'home' ? '발표연습' : '피드백'} 목록</h2>
 
       <ul className={styles.exercise__box}>
-        {data?.pages.map((eachPage: PresentationListType, index) => {
+        {data?.pages.map((eachPage: PresentationListType | FeedbackListType, index) => {
           return (
             <Fragment key={index}>
-              {eachPage.page.content.map((presentation, index) => (
+              {eachPage.page.content.map((listInfo: CardListType, index) => (
                 <li className={styles.exercise} key={index}>
-                  <CardItem presentation={presentation} usage={usage} />
+                  <CardItem listInfo={listInfo} usage={usage} />
                 </li>
               ))}
             </Fragment>

diff --git a/src/app/(afterlogin)/(navbar)/_components/_Home/HomeCardDescription.tsx b/src/app/(afterlogin)/(navbar)/_components/_Home/HomeCardDescription.tsx
@@ -1,20 +1,21 @@
 import React from 'react';
 import styles from './HomeCardDescription.module.scss';
-import { PresentationListType } from '@/types/service';
+import { CardListType } from '@/types/service';
+import { PresentationListTypeGuard } from '@/types/guards';
 
 interface Props {
-  presentation?: PresentationListType['page']['content'][0];
+  listInfo: CardListType;
 }
 
-const HomeCardDescription = ({ presentation }: Props) => {
-  return (
-    presentation && (
-      <span className={styles.desc}>
-        D{presentation.dday < 0 ? `+${Math.abs(presentation.dday)}` : `-${presentation.dday}`}
-        <em className={styles.division}></em>
-        발표 시간 {presentation.timeLimit.hours * 60 + presentation.timeLimit.minutes}분
-      </span>
-    )
+const HomeCardDescription = ({ listInfo }: Props) => {
+  return listInfo && PresentationListTypeGuard(listInfo) ? (
+    <span className={styles.desc}>
+      D{listInfo.dday < 0 ? `+${Math.abs(listInfo.dday)}` : `-${listInfo.dday}`}
+      <em className={styles.division}></em>
+      발표 시간 {listInfo.timeLimit.hours * 60 + listInfo.timeLimit.minutes}분
+    </span>
+  ) : (
+    <></>
   );
 };
 

diff --git a/src/app/(afterlogin)/(navbar)/feedback/[id]/page.tsx b/src/app/(afterlogin)/(navbar)/feedback/[id]/page.tsx
@@ -11,10 +11,9 @@ interface Props {
   };
 }
 const page = async ({ params }: Props) => {
-  // const id = Number(params.id);
-  // console.log(id);
-  // const res = await serverFeedbackApi.getFeedbackInfo(id);
-  // console.log(res);
+  const id = Number(params.id);
+  const res = await serverFeedbackApi.getFeedbackInfo(id);
+
   return (
     <div className={styles.container}>
       <div className={styles.content}>

diff --git a/src/app/(beforelogin)/accounts/login/process/_components/GetToken.tsx b/src/app/(beforelogin)/accounts/login/process/_components/GetToken.tsx
@@ -17,7 +17,7 @@ const GetToken = () => {
 
   useEffect(() => {
     const getLogin = async () => {
-      const nextServerUrl = `${process.env.NEXT_PUBLIC_ROUTE_HANDLER}/api/get/auth/kakao?code=${codeQuery}`;
+      // const nextServerUrl = `${process.env.NEXT_PUBLIC_ROUTE_HANDLER}/api/get/auth/kakao?code=${codeQuery}`;
       const clientUrl = `/api/accounts/login/process?code=${codeQuery}&provider=kakao`;
       try {
         const loginResponse = await fetch(`${clientUrl}`, {

diff --git a/src/app/(beforelogin)/login/_components/SocialLoginButtons.tsx b/src/app/(beforelogin)/login/_components/SocialLoginButtons.tsx
@@ -4,7 +4,6 @@ import classNames from 'classnames/bind';
 import styles from './SocialLoginButtons.module.scss';
 
 import { SOCIAL_ACCESS_URL } from '@/config/path';
-import Image from 'next/image';
 import GoogleIcon from '../_svgs/GoogleIcon';
 import NaverIcon from '../_svgs/NaverIcon';
 import KaKaoIcon from '../_svgs/KaKaoIcon';

diff --git a/src/config/path.ts b/src/config/path.ts
@@ -1,5 +1,8 @@
 export const SOCIAL_ACCESS_URL = {
-  KAKAO: `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_ROUTE_HANDLER}/accounts/login/process`,
+  KAKAO:
+    process.env.NODE_ENV === 'development'
+      ? `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_ROUTE_HANDLER}/accounts/login/process`
+      : `https://kauth.kakao.com/oauth/authorize?response_type=code&client_id=${process.env.NEXT_PUBLIC_KAKAO_API_KEY}&redirect_uri=${process.env.NEXT_PUBLIC_BASE_URL_PROD}/accounts/login/process`,
   NAVER: '',
   GOOGLE: '',
 };
diff --git a/src/services/server/feedback.ts b/src/services/server/feedback.ts
@@ -1,21 +1,21 @@
 import { fetch_ServerAuth } from './fetchServer';
+import { SERVER_BASE_URL } from './serverApiBaseURL';
 
 export const serverFeedbackApi = {
   getFeedbackInfo: async (feedbackId: number) => {
-    const response = await fetch_ServerAuth(
-      `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/feedbacks/${feedbackId}`,
-      {
-        method: 'GET',
-      },
-    );
+    const response = await fetch_ServerAuth(`${SERVER_BASE_URL}/api/feedbacks/${feedbackId}`, {
+      method: 'GET',
+    });
+    // console.log('response');
+    // console.log(response);
     if (response.ok) return response;
 
     const errorBody = await response.json();
     throw new Error(errorBody.message || '데이터를 불러오는 도중 문제가 발생했습니다');
   },
   getFeedbackList: async ({ pageParam }: { pageParam?: number }) => {
     const response = await fetch_ServerAuth(
-      `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/feedbacks?page=${pageParam}&size=6`,
+      `${SERVER_BASE_URL}/api/feedbacks?page=${pageParam}&size=6`,
       {
         method: 'GET',
       },

diff --git a/src/services/server/home.ts b/src/services/server/home.ts
@@ -1,9 +1,10 @@
 import { fetch_ServerAuth } from './fetchServer';
+import { SERVER_BASE_URL } from './serverApiBaseURL';
 
 export const serverHomeApi = {
   getPresentationList: async ({ pageParam }: { pageParam?: number }) => {
     const response = await fetch_ServerAuth(
-      `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/presentations?page=${pageParam}&size=6`,
+      `${SERVER_BASE_URL}/api/presentations?page=${pageParam}&size=6`,
       { method: 'GET', cache: 'no-store' },
     );
 
@@ -12,16 +13,13 @@ export const serverHomeApi = {
   },
 
   getLatestPresentation: async () => {
-    const response = await fetch_ServerAuth(
-      `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/presentations/latest`,
-      {
-        method: 'GET',
-        cache: 'no-store',
-        // headers: {
-        //   'Content-Type': 'application/json',
-        // },
-      },
-    );
+    const response = await fetch_ServerAuth(`${SERVER_BASE_URL}/api/presentations/latest`, {
+      method: 'GET',
+      cache: 'no-store',
+      // headers: {
+      //   'Content-Type': 'application/json',
+      // },
+    });
 
     if (response.ok) return response;
     throw new Error('데이터를 불러오는 도중 문제가 발생했습니다');

diff --git a/src/services/server/serverApiBaseURL.ts b/src/services/server/serverApiBaseURL.ts
@@ -0,0 +1,4 @@
+export const SERVER_BASE_URL =
+  process.env.NODE_ENV === 'development'
+    ? process.env.NEXT_PUBLIC_BASE_URL_DEV
+    : process.env.NEXT_PUBLIC_BASE_URL_PROD;
diff --git a/src/services/server/setting.ts b/src/services/server/setting.ts
@@ -1,4 +1,5 @@
 import { fetch_ServerAuth } from './fetchServer';
+import { SERVER_BASE_URL } from './serverApiBaseURL';
 
 export const serverSettingApi = {
   /**
@@ -7,7 +8,7 @@ export const serverSettingApi = {
    */
   getPresentationSettingData: async (presentationId: number) => {
     const response = await fetch_ServerAuth(
-      `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/practices/presentation/${presentationId}`,
+      `${SERVER_BASE_URL}/api/practices/presentation/${presentationId}`,
       { method: 'GET', cache: 'no-store' },
     );
 

diff --git a/src/services/server/upload.ts b/src/services/server/upload.ts
@@ -1,10 +1,11 @@
 import { UploadDataType } from '@/types/service';
 import { fetch_ServerAuth } from './fetchServer';
+import { SERVER_BASE_URL } from './serverApiBaseURL';
 
 export const serverPptApi = {
   getPresentationData: async (presentationId: number) => {
     const response = await fetch_ServerAuth(
-      `${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/presentations/${presentationId}`,
+      `${SERVER_BASE_URL}/api/presentations/${presentationId}`,
       {
         method: 'GET',
       },

diff --git a/src/services/server/user.ts b/src/services/server/user.ts
@@ -1,13 +1,14 @@
 import { cookies } from 'next/headers';
 import { fetch_ServerAuth } from './fetchServer';
+import { SERVER_BASE_URL } from './serverApiBaseURL';
 
 export const serverUserApi = {
   /**
    * 서버 컴포넌트에서, 유저 정보를 가져오는 함수
    * @return 유저 정보 객체를 반환합니다
    */
   getUserInfo: async () => {
-    const res = await fetch_ServerAuth(`${process.env.NEXT_PUBLIC_BASE_URL_DEV}/api/accounts/me`, {
+    const res = await fetch_ServerAuth(`${SERVER_BASE_URL}/api/accounts/me`, {
       method: 'GET',
       headers: { Cookie: cookies().toString() },
       cache: 'no-store',

diff --git a/src/types/guards.ts b/src/types/guards.ts
@@ -0,0 +1,13 @@
+import { CardListType, FeedbackListType, PresentationListType } from './service';
+
+export const PresentationListTypeGuard = (
+  data: CardListType,
+): data is PresentationListType['page']['content'][0] => {
+  return 'dday' in data;
+};
+
+export const FeedbackListTypeGuard = (
+  data: CardListType,
+): data is FeedbackListType['page']['content'][0] => {
+  return 'status' in data;
+};