FE-54🔀 상세페이지 main merge (#120)

* FE-31 상세페이지 UI 제작 (#12) * FE-31💄상세페이지 기본 UI 제작 * FE-31♻️ textarea태그 Textarea컴포넌트로 변경 * FE-31💄 반응형 디자인 추가 --------- Co-authored-by: Woojiseok <[email protected]> * FE-43 ✨ 상세페이지 에피그램 조회 (#18) * FE-43✨ 상세페이지 Epigram API연동 * FE-43⚡ ️axios 에러 핸들링 추가 * FE-43🏗️ 상세페이지 Layout 구조개선 * FE-43📝 주석 추가 * FE-43🔥 사용안하는 파일 삭제 * FE-43✏️ 오타 수정 * FE-43 🐛 id없을때 useQuery실행되는 문제 해결 * FE-43♻️ interface->zod 변경 --------- Co-authored-by: 우지석 <[email protected]> * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 (#22) * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 * FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가 * FE-43💄 MoreOptionMenu 스타일 수정 * FE-31 상세페이지 UI 제작 (#12) * FE-31💄상세페이지 기본 UI 제작 * FE-31♻️ textarea태그 Textarea컴포넌트로 변경 * FE-31💄 반응형 디자인 추가 --------- Co-authored-by: Woojiseok <[email protected]> * FE-43 ✨ 상세페이지 에피그램 조회 (#18) * FE-43✨ 상세페이지 Epigram API연동 * FE-43⚡ ️axios 에러 핸들링 추가 * FE-43🏗️ 상세페이지 Layout 구조개선 * FE-43📝 주석 추가 * FE-43🔥 사용안하는 파일 삭제 * FE-43✏️ 오타 수정 * FE-43 🐛 id없을때 useQuery실행되는 문제 해결 * FE-43♻️ interface->zod 변경 --------- Co-authored-by: 우지석 <[email protected]> * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 (#22) * FE-43✨ 사용자 ID에 따른 미트볼아이콘 표시 * FE-43✨ 에피그램 상세페이지 더보기 드롭다운 추가 * FE-43💄 MoreOptionMenu 스타일 수정 * ✨ 상세페이지 댓글 조회 api연동 (#38) * FE-42💄 EpigramComment안에 CommentCard 추가 * FE-42✨ 상세페이지 댓글 조회 api연동 * FE-42✨ dateUtil함수 추가, 적용 * FE-42✨ 댓글작성자가 본인인지 판별해 수정,삭제 표시 * FE-42🔥 안쓰는 함수 삭제 * FE-42💄 EpigramComment 배경색 수정 * FE-42♻️ CommetCard 구조 개선 * FE-42💄작성된 댓글 없을때 UI 추가 * FE-42🐛 댓글수를 length->totalCount로 변경 * FE-42♻️ useEpigramCommentHook 분리 * FE-42✨ 댓글 목록에 무한스크롤 적용 * FE-42💡 주석 추가 --------- Co-authored-by: 우지석 <[email protected]> * FE-76✨ 댓글 작성 api 연동 (#78) * FE-76♻️ 댓글 textarea 컴포넌트 분리 * FE-76💄 switch 컴포넌트 스타일 수정 * FE-76✨ textarea focus out 버튼 추가 * FE-76✨ postComment schema,interface 추가, 수정 * FE-76✨ 댓글 작성 api 연동 * FE-76🐛 import error 해결 * FE-76✨ switch로 댓글 공개,비공개 설정 기능 추가 * FE-76✨ 댓글 작성 시 image를 유저가 등록한 image로 변경 * FE-76🐛 build error 해결 --------- Co-authored-by: 우지석 <[email protected]> * FE-45✨ 에피그램 삭제 api 연동 (#80) * FE-45✨ 에피그램 삭제 api 연동 * FE-45💄 에피그램 삭제 모달 추가 * FE-45💄 반응형 디자인 수정 * FE-45♻️ DeleteAlertModal 컴포넌트 분리 * FE-45🐛 build error 해결 --------- Co-authored-by: 우지석 <[email protected]> * FE-78✨댓글 수정,삭제 기능 추가 (#91) * FE-78💄 미트볼아이콘 ui수정 * FE-78✨ 댓글 삭제 함수 추가 * FE-78✨댓글 삭제 버튼 기능 추가 * FE-78✨ 댓글 수정 api함수 추가 * FE-78✨ 댓글 수정 기능 추가 * FE-78📝 주석 추가 * FE-78💄 EpigramComment height수정 * FE-78🐛 build error 해결 --------- Co-authored-by: 우지석 <[email protected]> * FE-44✨ 에피그램 수정 기능 추가 (#97) * FE-44🚚 상세페이지 페이지 구조 변경 * FE-44✨ 에피그램 수정 api 함수 추가 * FE-44✨ 에피그램 수정 기능 추가 * FE-44♻️ 저자선택관련 함수 useAuthorSelection훅으로 분리 * FE-44💄 EditEpigram,AddEpigram UI수정 * FE-44🐛 출처 유효성검사 버그 수정 * FE-44✨ 작성자 본인이 아닐때 수정페이지 접근 시 리다이렉트 기능 구현 * FE-44🐛 유효성 검사 버그 수정 --------- Co-authored-by: 우지석 <[email protected]> * FE-41✨좋아요 기능 추가 (#103) * FE-41♻️ httpClien에t interceoptor 추가 * FE-41✨ 좋아요 api 함수 추가 * FE-41✨ 좋아요 기능 Layout에 적용 * FE-41✨ Url Link버튼 생성 * FE-41💄좋아요,link버튼 스타일 수정 * FE-41🐛 import 에러 해결 * FE-41♻️ 기존header-> Header컴포넌트로 변경 --------- Co-authored-by: 우지석 <[email protected]> * FE-54🐛 오타 수정 * build error 해결 --------- Co-authored-by: Woojiseok <[email protected]>
epigram5-9 · Jul 31, 2024 · 52b7c9e · 52b7c9e
1 parent 111eabf
commit 52b7c9e
Show file tree

Hide file tree

Showing 36 changed files with 1,274 additions and 64 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/arrow-left.svg b/public/arrow-left.svg
diff --git a/public/icon/cancelIcon.svg b/public/icon/cancelIcon.svg
diff --git a/public/likeIcon.svg b/public/likeIcon.svg
diff --git a/public/logo.svg b/public/logo.svg
diff --git a/public/meatballIcon.svg b/public/meatballIcon.svg
diff --git a/public/placeLink.svg b/public/placeLink.svg
diff --git a/public/profile.svg b/public/profile.svg
diff --git a/public/share.svg b/public/share.svg
diff --git a/src/apis/epigram.ts b/src/apis/epigram.ts
@@ -0,0 +1,75 @@
+import axios, { AxiosError } from 'axios';
+import { GetEpigramResponseType, EpigramRequestType } from '@/schema/epigram';
+import { DeleteEpigramType } from '@/types/epigram.types';
+import { AddEpigramResponseType, EditEpigramRequestType } from '@/schema/addEpigram';
+import httpClient from '.';
+
+export const getEpigram = async (request: EpigramRequestType): Promise<GetEpigramResponseType> => {
+  const { id } = request;
+
+  if (id === undefined) {
+    throw new Error('Epigram ID가 제공되지 않았습니다.');
+  }
+
+  try {
+    const response = await httpClient.get(`/epigrams/${id}`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response) {
+        throw new Error(`API 에러: ${axiosError.response.status}`);
+      } else if (axiosError.request) {
+        throw new Error('서버로부터 응답을 받지 못했습니다.');
+      } else {
+        throw new Error('요청 설정 중 오류가 발생했습니다.');
+      }
+    } else {
+      throw new Error('예상치 못한 오류가 발생했습니다.');
+    }
+  }
+};
+
+export const deleteEpigram = async (id: number): Promise<DeleteEpigramType> => {
+  const response = await httpClient.delete(`/epigrams/${id}`);
+  return response.data;
+};
+
+// NOTE: 에피그램 수정 api 함수
+export const patchEpigram = async (request: EditEpigramRequestType): Promise<AddEpigramResponseType> => {
+  const { id, ...data } = request;
+  const response = await httpClient.patch(`/epigrams/${id}`, data);
+  return response.data;
+};
+
+export const toggleEpigramLike = async (request: EpigramRequestType): Promise<GetEpigramResponseType> => {
+  const { id } = request;
+
+  if (id === undefined) {
+    throw new Error('Epigram ID가 제공되지 않았습니다.');
+  }
+
+  try {
+    const response = await httpClient.post(`/epigrams/${id}/like`);
+    return response.data;
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      const axiosError = error as AxiosError;
+      if (axiosError.response?.status === 400) {
+        // 이미 좋아요를 눌렀다면, 좋아요 취소 요청을 보냅니다.
+        const response = await httpClient.delete(`/epigrams/${id}/like`);
+        return response.data;
+      }
+      // 그 외의 에러 처리
+      if (axiosError.response) {
+        throw new Error(`API 에러: ${axiosError.response.status}`);
+      } else if (axiosError.request) {
+        throw new Error('서버로부터 응답을 받지 못했습니다.');
+      } else {
+        throw new Error('요청 설정 중 오류가 발생했습니다.');
+      }
+    } else {
+      throw new Error('예상치 못한 오류가 발생했습니다.');
+    }
+  }
+};
diff --git a/src/apis/queries.ts b/src/apis/queries.ts
@@ -1,10 +1,14 @@
 import { createQueryKeyStore } from '@lukemorales/query-key-factory';
 import { GetUserRequestType } from '@/schema/user';
+import { EpigramRequestType } from '@/schema/epigram';
+import { CommentRequestType } from '@/schema/comment';
 import { GetMonthlyEmotionLogsRequestType } from '@/schema/emotion';
 import { getMe, getUser } from './user';
+import { getEpigram } from './epigram';
+import { getEpigramComments } from './epigramComment';
 import getMonthlyEmotionLogs from './emotion';
 
-const quries = createQueryKeyStore({
+const queries = createQueryKeyStore({
   user: {
     getMe: () => ({
       queryKey: ['getMe'],
@@ -15,6 +19,25 @@ const quries = createQueryKeyStore({
       queryFn: () => getUser(request),
     }),
   },
+  // NOTE: Epigram 관련 query함수
+  epigram: {
+    getEpigram: (request: EpigramRequestType) => ({
+      queryKey: ['epigram', request.id, request],
+      queryFn: () => {
+        if (request.id === undefined) {
+          throw new Error('Epigram ID가 제공되지 않았습니다.');
+        }
+        return getEpigram(request);
+      },
+      enabled: request.id !== undefined,
+    }),
+  },
+  epigramComment: {
+    getComments: (request: CommentRequestType) => ({
+      queryKey: ['epigramComments', request],
+      queryFn: () => getEpigramComments(request),
+    }),
+  },
   emotion: {
     getMonthlyEmotionLogs: (request: GetMonthlyEmotionLogsRequestType) => ({
       queryKey: ['getMonthlyEmotionLogs', request],
@@ -23,4 +46,4 @@ const quries = createQueryKeyStore({
   },
 });
 
-export default quries;
+export default queries;