FE-54🔀상세페이지 url수정 (#132)

* 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 해결 * FE-54🐛 build error해결 * Fe-54♻️상세페이지 리팩토링 (#131) * FE-54🚚 상세페이지,수정페이지 페이지 폴더 변경 * FE-54♻️ 상세페이지로 이동하는 url 수정 * FE-54🚚 작성페이지 페이지 폴더 생성 --------- Co-authored-by: Woojiseok <[email protected]>
epigram5-9 · Jul 31, 2024 · fc471cd · fc471cd
1 parent 1a62014
commit fc471cd
Show file tree

Hide file tree

Showing 9 changed files with 11 additions and 10 deletions.
diff --git a/src/components/epigram/Comment/CommentItem.tsx b/src/components/epigram/Comment/CommentItem.tsx
@@ -4,13 +4,13 @@ import { CommentType } from '@/schema/comment';
 import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
 import getCustomRelativeTime from '@/lib/dateUtils';
 import useDeleteCommentMutation from '@/hooks/useDeleteCommentHook';
-import { CommentCardProps } from '@/components/Card/CommentCard';
 import { useToast } from '@/components/ui/use-toast';
 import { Button } from '@/components/ui/button';
 import DeleteAlertModal from '../DeleteAlertModal';
 
-interface CommentItemProps extends CommentCardProps {
+interface CommentItemProps {
   comment: CommentType;
+  status?: 'view' | 'edit';
   onEditComment: (id: number, content: string, isPrivate: boolean) => void;
 }
 

diff --git a/src/components/epigram/Comment/CommentList.tsx b/src/components/epigram/Comment/CommentList.tsx
@@ -1,8 +1,8 @@
 import React, { useEffect, useRef, useCallback } from 'react';
 import { EpigramCommentProps } from '@/types/epigram.types';
 import useEpigramCommentsQuery from '@/hooks/useEpigramCommentsQueryHook';
-import CommentItem from './CommentItem';
 import NoComment from './NoComment';
+import CommentItem from './CommentItem';
 
 interface CommentListProps extends Omit<EpigramCommentProps, 'userImage'> {
   onEditComment: (id: number, content: string, isPrivate: boolean) => void;
@@ -58,7 +58,7 @@ function CommentList({ epigramId, currentUserId, onEditComment }: CommentListPro
       {allComments.length > 0 ? (
         <>
           {allComments.map((comment) => (
-            <CommentItem key={comment.id} comment={comment} status={comment.writer.id === currentUserId ? 'edit' : 'complete'} onEditComment={onEditComment} />
+            <CommentItem key={comment.id} comment={comment} status={comment.writer.id === currentUserId ? 'edit' : 'view'} onEditComment={onEditComment} />
           ))}
           <div ref={lastCommentRef}>{isFetchingNextPage && <div>더 많은 댓글을 불러오는 중...</div>}</div>
         </>

diff --git a/src/components/epigram/EditEpigram.tsx b/src/components/epigram/EditEpigram.tsx
@@ -115,15 +115,15 @@ function EditEpigram({ epigram }: EditEpigramProps) {
   const handleAlertClose = () => {
     setIsAlertOpen(false);
     if (alertContent.title === '수정 완료') {
-      router.push(`/epigram/${epigram.id}`);
+      router.push(`/epigrams/${epigram.id}`);
     }
   };
 
   return (
     <>
       <Header
         icon='back'
-        routerPage={`/epigram/${epigram.id}`}
+        routerPage={`/epigrams/${epigram.id}`}
         isLogo
         insteadOfLogo='에피그램 수정'
         isProfileIcon

diff --git a/src/components/epigram/MoreOptionMenu.tsx b/src/components/epigram/MoreOptionMenu.tsx
@@ -33,7 +33,7 @@ function MoreOptionsMenu({ epigram }: MoreOptionsMenuProps) {
   });
 
   const handleEditClick = () => {
-    router.push(`/epigram/${epigram}/edit`);
+    router.push(`/epigrams/${epigram}/edit`);
   };
 
   const handleDeleteClick = () => {

diff --git a/src/pageLayout/Epigram/AddEpigram.tsx b/src/pageLayout/Epigram/AddEpigram.tsx
@@ -77,7 +77,7 @@ function AddEpigram() {
   const handleAlertClose = () => {
     setIsAlertOpen(false);
     if (alertContent.title === '등록 완료') {
-      router.push(`/epigram/${addEpigramMutation.data?.id}`);
+      router.push(`/epigrams/${addEpigramMutation.data?.id}`);
     }
   };
 

diff --git a/src/pageLayout/Epigram/EpigramComment.tsx b/src/pageLayout/Epigram/EpigramComment.tsx
@@ -18,7 +18,8 @@ function EpigramComment({ epigramId, currentUserId, userImage }: EpigramCommentP
   };
 
   return (
-    <div className='bg-slate-100 flex justify-center h-screen'>
+    // NOTE: 댓글부분 height 수정
+    <div className='bg-slate-100 flex justify-center'>
       <div className='w-80 md:w-96 lg:w-[640px] pt-6 lg:pt-12'>
         <h3 className='text-base lg:text-xl font-semibold'>댓글 작성</h3>
         <div className={`flex flex-col gap-4 lg:gap-6 ${paddingStyles.sm} ${paddingStyles.md} ${paddingStyles.lg}`}>

diff --git a/src/pages/addEpigram.tsx → src/pages/addEpigram/index.tsx b/src/pages/addEpigram.tsx → src/pages/addEpigram/index.tsx
diff --git a/src/pages/epigram/[id]/edit.tsx → src/pages/epigrams/[id]/edit.tsx b/src/pages/epigram/[id]/edit.tsx → src/pages/epigrams/[id]/edit.tsx
diff --git a/src/pages/epigram/[id]/index.tsx → src/pages/epigrams/[id]/index.tsx b/src/pages/epigram/[id]/index.tsx → src/pages/epigrams/[id]/index.tsx
@@ -22,7 +22,7 @@ function DetailPage() {
 
   return (
     <div className='flex flex-col '>
-      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+      <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />
       <EpigramFigure epigram={epigram} currentUserId={userData?.id} />
       <EpigramComment epigramId={epigram.id} currentUserId={userData?.id} userImage={userData?.image} />
     </div>