From ba25714c02170dfa630db219bc5fdbcbc1e31c20 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=A1=B0=EB=AF=BC=ED=98=B8?= <78631876+minh0518@users.noreply.github.com> Date: Wed, 15 May 2024 21:30:43 +0900 Subject: [PATCH] =?UTF-8?q?=EB=B0=B0=ED=8F=AC=20=EC=A0=84=EC=9A=A9=20URL?= =?UTF-8?q?=EC=84=B8=ED=8C=85=20=20(#51)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat: 공통 리스트 타입 가드 생성 및 적용 - home home과 feedback의 공통 컴포넌트에 사용되는 데이터타입의 타입가드를 생성하고 적용합니다. (home만 우선적으로 적용) * chore: 허스키 내용 주석 추가 * chore: 배포전용 API URL 적용 - 배포용 URL env에 추가 - 클라이언트 컴포넌트: 프록시 설정에 배포용 API 추가 (next.config.ts) - 서버 컴포넌트: 서버 컴포넌트 배포용 API 변수 생성 및 모든 API메소드 적용(serverApiBaseURL.ts) - 카카오 로그인 배포용 리다이렉션 URL 추가 --- .husky/commit-msg | 2 +- .husky/pre-commit | 2 +- .husky/pre-push | 2 +- next.config.js | 5 +++- .../(navbar)/_components/CardInfo.tsx | 24 ++++++++++--------- .../(navbar)/_components/CardItem.tsx | 22 ++++++++--------- .../(navbar)/_components/CardList.tsx | 13 ++++++---- .../_components/_Home/HomeCardDescription.tsx | 23 +++++++++--------- .../(navbar)/feedback/[id]/page.tsx | 7 +++--- .../login/process/_components/GetToken.tsx | 2 +- .../login/_components/SocialLoginButtons.tsx | 1 - src/config/path.ts | 5 +++- src/services/server/feedback.ts | 14 +++++------ src/services/server/home.ts | 20 +++++++--------- src/services/server/serverApiBaseURL.ts | 4 ++++ src/services/server/setting.ts | 3 ++- src/services/server/upload.ts | 3 ++- src/services/server/user.ts | 3 ++- src/types/guards.ts | 13 ++++++++++ src/types/service.ts | 7 ++++++ 20 files changed, 105 insertions(+), 70 deletions(-) create mode 100644 src/services/server/serverApiBaseURL.ts create mode 100644 src/types/guards.ts diff --git a/.husky/commit-msg b/.husky/commit-msg index 0c2ccb9..8cd32e2 100644 --- 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 index 54ee978..34ab85d 100644 --- 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 index a9f6a01..55f4bbb 100644 --- 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 index 76c90e5..80dea1b 100644 --- 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 index bd406df..0409bf3 100644 --- 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 (
- {presentation.title} - {usage === 'home' ? : <>} - {/* - D{presentation.dday < 0 ? `+${Math.abs(presentation.dday)}` : `-${presentation.dday}`} - - 발표 시간 {presentation.timeLimit.hours * 60 + presentation.timeLimit.minutes}분 - */} + {listInfo.title} + {usage === 'home' && PresentationListTypeGuard(listInfo) ? ( + <> + + + ) : ( + <> + )}
); }; diff --git a/src/app/(afterlogin)/(navbar)/_components/CardItem.tsx b/src/app/(afterlogin)/(navbar)/_components/CardItem.tsx index 7a51d80..8b19f98 100644 --- a/src/app/(afterlogin)/(navbar)/_components/CardItem.tsx +++ b/src/app/(afterlogin)/(navbar)/_components/CardItem.tsx @@ -5,7 +5,7 @@ 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'; @@ -13,23 +13,22 @@ 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) => {
{`${presentation.id}
+ {/* TODO: 피드백에 맞는 버튼 로직 생성 필요 */} @@ -76,12 +76,12 @@ const CardItem = ({ presentation, usage }: Props) => {
-
- +
+
{usage === 'home' ? ( - router.push(`/setting/${presentation.id}`)} /> + router.push(`/setting/${listInfo.id}`)} /> ) : ( <> )} diff --git a/src/app/(afterlogin)/(navbar)/_components/CardList.tsx b/src/app/(afterlogin)/(navbar)/_components/CardList.tsx index df6194f..8e8d9ed 100644 --- 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 (
-

내 발표연습 목록

+

내 {usage === 'home' ? '발표연습' : '피드백'} 목록

    - {data?.pages.map((eachPage: PresentationListType, index) => { + {data?.pages.map((eachPage: PresentationListType | FeedbackListType, index) => { return ( - {eachPage.page.content.map((presentation, index) => ( + {eachPage.page.content.map((listInfo: CardListType, index) => (
  • - +
    • ))}     diff --git a/src/app/(afterlogin)/(navbar)/_components/_Home/HomeCardDescription.tsx b/src/app/(afterlogin)/(navbar)/_components/_Home/HomeCardDescription.tsx index 15baeb2..547a83d 100644 --- 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 && ( - - D{presentation.dday < 0 ? `+${Math.abs(presentation.dday)}` : `-${presentation.dday}`} - - 발표 시간 {presentation.timeLimit.hours * 60 + presentation.timeLimit.minutes}분 - - ) +const HomeCardDescription = ({ listInfo }: Props) => { + return listInfo && PresentationListTypeGuard(listInfo) ? ( + + D{listInfo.dday < 0 ? `+${Math.abs(listInfo.dday)}` : `-${listInfo.dday}`} + + 발표 시간 {listInfo.timeLimit.hours * 60 + listInfo.timeLimit.minutes}분 + + ) : ( + <> ); }; diff --git a/src/app/(afterlogin)/(navbar)/feedback/[id]/page.tsx b/src/app/(afterlogin)/(navbar)/feedback/[id]/page.tsx index e0acafe..b211af9 100644 --- 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 (
    diff --git a/src/app/(beforelogin)/accounts/login/process/_components/GetToken.tsx b/src/app/(beforelogin)/accounts/login/process/_components/GetToken.tsx index 4d18591..0a3fb87 100644 --- 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 index 1a0ef47..2f116e2 100644 --- 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 index 7f17766..7e06dac 100644 --- 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 index 1882750..c888ce1 100644 --- a/src/services/server/feedback.ts +++ b/src/services/server/feedback.ts @@ -1,13 +1,13 @@ 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(); @@ -15,7 +15,7 @@ export const serverFeedbackApi = { }, 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 index 7c618bb..20e85b7 100644 --- 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 new file mode 100644 index 0000000..b6ed61f --- /dev/null +++ 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 index e715a24..51552c5 100644 --- 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 index f50d148..97f6002 100644 --- 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 index 47922b0..cfdea4b 100644 --- a/src/services/server/user.ts +++ b/src/services/server/user.ts @@ -1,5 +1,6 @@ import { cookies } from 'next/headers'; import { fetch_ServerAuth } from './fetchServer'; +import { SERVER_BASE_URL } from './serverApiBaseURL'; export const serverUserApi = { /** @@ -7,7 +8,7 @@ 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 new file mode 100644 index 0000000..696b97d --- /dev/null +++ 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; +}; diff --git a/src/types/service.ts b/src/types/service.ts index a4adf10..a019c97 100644 --- a/src/types/service.ts +++ b/src/types/service.ts @@ -273,6 +273,9 @@ export interface FeedbackListType { practiceDate: Date; totalScore: number; status: 'IN_PROGRESS' | 'DONE'; + thumbnailPath: string; // 임시 + createdAt: Date; // 임시 + modifiedAt: Date; // 임시 }[]; totalPages: number; totalElements: number; @@ -345,3 +348,7 @@ export interface FeedbackInfoType { ]; }; } + +export type CardListType = + | PresentationListType['page']['content'][0] + | FeedbackListType['page']['content'][0];