From 15b4917cd2990a918c9259eb841d7e8e9c4fdabc Mon Sep 17 00:00:00 2001 From: dev-junseo <80705329+dev-junseo@users.noreply.github.com> Date: Thu, 30 Nov 2023 16:09:43 +0900 Subject: [PATCH 1/3] =?UTF-8?q?#174=20=EB=8C=93=EA=B8=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/api/reply-api.ts | 10 +- .../home/[categoryId]/[postId]/page.tsx | 15 +-- .../[categoryId]/[postId]/postId.style.tsx | 112 ++++++++++++------ client/src/app/login/page.tsx | 19 ++- client/src/types/dto.ts | 5 + 5 files changed, 109 insertions(+), 52 deletions(-) diff --git a/client/src/api/reply-api.ts b/client/src/api/reply-api.ts index 5ec5aef..029c764 100644 --- a/client/src/api/reply-api.ts +++ b/client/src/api/reply-api.ts @@ -1,4 +1,4 @@ -import { IPatchReplyLike, IPutReply, IReply, IReplyParams } from '@/types/dto'; +import { IDeleteReply, IPatchReplyLike, IPutReply, IReply, IReplyParams } from '@/types/dto'; import { defaultInstance } from '.'; import { useQuery } from '@tanstack/react-query'; @@ -28,3 +28,11 @@ export const putReplyApi = async (body: IPutReply) => { const { data } = await defaultInstance.put('/replies', body); return data; }; + +export const DeleteReplyApi = async (params: IDeleteReply) => { + const { data } = await defaultInstance.delete('/replies', { + params, + }); + + return data; +}; \ No newline at end of file diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx index f18fbf5..cec23e8 100644 --- a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx +++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx @@ -60,8 +60,8 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post const theme = useTheme(); const [page, setPage] = useState(0); - const [order, setOrder] = useState('like'); - const orderList = ['like', 'recent', 'oldest']; + const [order, setOrder] = useState('likesCount'); + const orderList = ['likesCount', 'createdAt']; const { data: replyData } = useGetReplyQuery({ postId: Number(params.postId), page: page, @@ -80,6 +80,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post const postReplyCreateQuery = useMutation(PostReplyApi, { onSuccess: () => { queryClient.invalidateQueries(['replies']); + setMessage(''); }, }); @@ -277,13 +278,6 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post }}> 최신순 - { - handleClose(); - setOrder(orderList[2]); - }}> - 오래된순 - 정렬기준 @@ -296,6 +290,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post variant="standard" label={'댓글 추가'} sx={{ margin: '0 30px' }} + value={message} onChange={(e) => { setMessage(e.target.value); }} @@ -318,7 +313,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post message={replyInfo.message} likesCount={replyInfo.likesCount} isLiked={replyInfo.isLiked} - isEdit={replyInfo.isEdit}> + who={replyInfo.who}> ); })} (false); + const [deleteReplyOpen, setDeleteReplyOpen] = useState(false); const [IntroduceOpen, setIntroduceOpen] = useState(false); const { data: introduceData } = useGetIntroduceQuery({ @@ -116,6 +121,17 @@ function RepliesComponent({ }); const [introduce, setIntroduce] = useState(); + const deleteReplyQuery = useMutation(DeleteReplyApi, { + onSuccess() { + queryClient.invalidateQueries(['reply']); + }, + }); + + + const deleteClick = () => { + deleteReplyQuery.mutate({ replyId: replyId}); + }; + const [isAccept, setIsAccept] = useState(Number); const putAllowFriendIdCreateQuery = useMutation(PutFriendAllowApi, { onSuccess: () => { @@ -174,44 +190,54 @@ function RepliesComponent({ }, [introduceData]); return ( - + - + + + {nickname} + + + {likesCount} + + {isLiked ? ( + + + + ) : ( + + + + )} + + {who === 'me(author)' || who === 'me' ? : <>} + + + {who === 'me(author)' || who === 'me' ? : <>} + + + - {nickname} - {message} + + + + + {message} - - - {isLiked ? ( - - - - ) : ( - - - - )} - {likesCount} - - {isEdit ? : <>} - - - + setPutReplyOpen(false)}> 수정하기 @@ -229,7 +255,17 @@ function RepliesComponent({ 게시하기 + setDeleteReplyOpen(false)} + message="친구 삭제하시겠습니까?" + action={{ + content: '확인', + action: deleteClick, + }} + /> + {/* 댓글 상대방 introduction */} setIntroduceOpen(false)}> diff --git a/client/src/app/login/page.tsx b/client/src/app/login/page.tsx index 3f01011..c9176c6 100644 --- a/client/src/app/login/page.tsx +++ b/client/src/app/login/page.tsx @@ -1,11 +1,24 @@ +import Button from '@/components/Button/Button'; import { GITHUB_AUTH_URL } from '@/constant/common'; -import { Stack } from '@mui/material'; +import { Link, Stack } from '@mui/material'; import React from 'react'; function page() { return ( - - 깃허브 + + + ); } diff --git a/client/src/types/dto.ts b/client/src/types/dto.ts index 2ccf85a..3adbafd 100644 --- a/client/src/types/dto.ts +++ b/client/src/types/dto.ts @@ -107,6 +107,11 @@ export interface IPatchReplyLike { replyId: number; } +//댓글 삭제 +export interface IDeleteReply { + replyId: number; +} + // 글쓰기 페이지 export interface IWrite { thumbnail?: string | null; From 8ba5194bd96d99578deebc6b7637b8b6109d156b Mon Sep 17 00:00:00 2001 From: dev-junseo <80705329+dev-junseo@users.noreply.github.com> Date: Thu, 30 Nov 2023 18:03:25 +0900 Subject: [PATCH 2/3] =?UTF-8?q?#174=20=E3=85=87=E3=85=87=E3=85=87?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/api/category-api.ts | 23 ++- .../app/[blogName]/home/[categoryId]/page.tsx | 147 +++--------------- client/src/app/oauth2/redirect/page.tsx | 7 +- client/src/types/dto.ts | 23 +++ 4 files changed, 71 insertions(+), 129 deletions(-) diff --git a/client/src/api/category-api.ts b/client/src/api/category-api.ts index 56d0ab9..3132efa 100644 --- a/client/src/api/category-api.ts +++ b/client/src/api/category-api.ts @@ -1,4 +1,10 @@ -import { ICategoryParams, IDeleteCategory, IPostCategory, IPutCategory } from '@/types/dto'; +import { + ICategoryParams, + IDeleteCategory, + IPostCategory, + IPutCategory, + ISearchCategoryParams, +} from '@/types/dto'; import { defaultInstance } from '.'; import { useQuery } from '@tanstack/react-query'; @@ -34,3 +40,18 @@ export const DeleteCategoryApi = async (params: IDeleteCategory) => { }); return data; }; + +//카테고리별 미리보기 +export const GetSearchCategoryApi = async (params: ISearchCategoryParams) => { + const { data } = await defaultInstance.get('/search/category', { params }); + + return data; +}; + +export const useGetSearchCategoryQuery = (params: ISearchCategoryParams) => { + const { isLoading, error, data } = useQuery(['searchCategory', params], () => + GetSearchCategoryApi(params), + ); + + return { isLoading, error, data }; +}; diff --git a/client/src/app/[blogName]/home/[categoryId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/page.tsx index 5968f28..e761d02 100644 --- a/client/src/app/[blogName]/home/[categoryId]/page.tsx +++ b/client/src/app/[blogName]/home/[categoryId]/page.tsx @@ -6,13 +6,12 @@ import { PostAreaComponent, PostPagination, ScrapList } from './category.style'; import CenterContent from '@/components/Layout/CenterContent'; import LockOpenIcon from '@mui/icons-material/LockOpen'; import LockIcon from '@mui/icons-material/Lock'; -import StarIcon from '@mui/icons-material/Star'; -import StarBorderIcon from '@mui/icons-material/StarBorder'; import { useGetSidebarQuery } from '@/api/blog-api'; -import { ISidebarContent } from '@/types/dto'; +import { ISearchCategory, ISidebarContent } from '@/types/dto'; import DragAndDrop from '@/components/DND/DragAndDrop'; import { Stack } from '@mui/material'; import { usegetblogIdQuery } from '@/api/readme-api'; +import { useGetSearchCategoryQuery } from '@/api/category-api'; function page({ params }: { params: { blogName: string; categoryId: string } }) { const [page, setPage] = useState(0); @@ -21,119 +20,19 @@ function page({ params }: { params: { blogName: string; categoryId: string } }) const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData }); const [writeList, setWriteList] = useState(); + const { data: searchCategoryData } = useGetSearchCategoryQuery({ + categoryId: Number(params.categoryId), + page: page, + }); + const [searchCategory, setSearchCategory] = useState(); useEffect(() => { - setBlogId(blogIdData) + setBlogId(blogIdData); + setSearchCategory(searchCategoryData); setWriteList(sidebarData?.sidebarDtos); - }, [blogIdData, sidebarData]); + }, [blogIdData, searchCategoryData, sidebarData]); - const backend = [ - { - isAuthor: true, - categoryName: 'string', - - PostPreviewResponse: { - count: 0, - PostPreviewDtos: [ - { - PostPreviewDto: { - blogUrl: 'string', - postId: 0, - title: 'string', - imageUrl: 'string', - likesCount: 0, - viewsCount: 0, - repliesCount: 0, - createdAt: 0, - isPrivate: 1, - isScrapped: true, - }, - }, - { - PostPreviewDto: { - blogUrl: 'string', - postId: 1, - title: 'string', - imageUrl: 'string', - likesCount: 0, - viewsCount: 0, - repliesCount: 0, - createdAt: 0, - isPrivate: 1, - isScrapped: false, - }, - }, - { - PostPreviewDto: { - blogUrl: 'string', - postId: 2, - title: 'string', - imageUrl: 'string', - likesCount: 0, - viewsCount: 0, - repliesCount: 0, - createdAt: 0, - isPrivate: 0, - isScrapped: true, - }, - }, - { - PostPreviewDto: { - blogUrl: 'string', - postId: 3, - title: 'string', - imageUrl: 'string', - likesCount: 0, - viewsCount: 0, - repliesCount: 0, - createdAt: 0, - isPrivate: 0, - isScrapped: false, - }, - }, - { - PostPreviewDto: { - blogUrl: 'string', - postId: 4, - title: 'string', - imageUrl: 'string', - likesCount: 0, - viewsCount: 0, - repliesCount: 0, - createdAt: 0, - isPrivate: 1, - isScrapped: true, - }, - }, - ], - }, - }, - { - PostPreviewResponse: { - count: 0, - PostPreviewDtos: [ - { - PostPreviewDto: { - blogUrl: 'string', - postId: 0, - title: 'string', - imageUrl: 'string', - likesCount: 0, - viewsCount: 0, - repliesCount: 0, - createdAt: 0, - isPrivate: 1, - isScrapped: true, - }, - }, - ], - }, - }, - ]; - - const result = backend[page]; - - const totalPages = backend.length; + const totalPages = searchCategory?.totalPages; return ( @@ -144,26 +43,20 @@ function page({ params }: { params: { blogName: string; categoryId: string } }) rightContainer={ - {result.PostPreviewResponse.PostPreviewDtos.map((postInfo) => { + {searchCategory?.postPreviewDtos.map((postInfo) => { return ( - ) : ( - - ) - ) : postInfo.PostPreviewDto.isScrapped ? ( - + postInfo.isPrivate ? ( + ) : ( - + ) } /> diff --git a/client/src/app/oauth2/redirect/page.tsx b/client/src/app/oauth2/redirect/page.tsx index 004365d..5f61cda 100644 --- a/client/src/app/oauth2/redirect/page.tsx +++ b/client/src/app/oauth2/redirect/page.tsx @@ -65,7 +65,12 @@ const Page = () => { variant="outlined" value={blogUrl} onChange={(e) => { - setBlogUrl(e.target.value); + const value = e.target.value; + const ALPHA_NUMERIC_DASH_REGEX = /^[a-zA-Z0-9-]+$/; + if (value !== '' && !ALPHA_NUMERIC_DASH_REGEX.test(value)) { + return; + } + setBlogUrl(value); }} /> diff --git a/client/src/types/dto.ts b/client/src/types/dto.ts index 3adbafd..fe1df0e 100644 --- a/client/src/types/dto.ts +++ b/client/src/types/dto.ts @@ -434,6 +434,29 @@ export interface IDeleteCategory { categoryId: number; } +//카테고리별 미리보기 +export interface ISearchCategoryParams { + categoryId: number; + page: number; +} + +//카테고리별 미리보기 가져온 정보 +export interface ISearchCategory { + postPreviewDtos: { + blogUrl: string; + postId: number; + categoryId: number; + title: string; + thumbnail: string; + likesCount: number; + viewsCount: number; + repliesCount: number; + createdAt: string; + isPrivate: boolean; + }[]; + totalPages: number; +} + // history export interface IHistory { week?: { From b523e56fb00ea1872528fbdb6ad8dce5005295a8 Mon Sep 17 00:00:00 2001 From: dev-junseo <80705329+dev-junseo@users.noreply.github.com> Date: Thu, 30 Nov 2023 18:06:20 +0900 Subject: [PATCH 3/3] =?UTF-8?q?#174=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/api/blog-api.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/src/api/blog-api.ts b/client/src/api/blog-api.ts index c88735f..1c7fe04 100644 --- a/client/src/api/blog-api.ts +++ b/client/src/api/blog-api.ts @@ -1,4 +1,4 @@ -import { IBlog, IChangeBlogName, IPost, ISidebar } from '@/types/dto'; +import { IBlog, IBlogUrlParams, IChangeBlogName, IPost, ISidebar } from '@/types/dto'; import { defaultInstance, unAxiosDefaultInstance } from '.'; import { useQuery } from '@tanstack/react-query';