Skip to content

Commit d2caf4d

Browse files
jiyeeeahjiyeeeah
committedOct 23, 2023
Feat: 모달 열리게 하는 부분 수정 #65 
1 parent 811b839 commit d2caf4d

File tree

9 files changed

+59
-30
lines changed

9 files changed

+59
-30
lines changed
 

‎components/pages/main/Feed/BoardsList/index.tsx

+1-4
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@
22
/* eslint-disable jsx-a11y/click-events-have-key-events */
33
import useGetBoardList from '@/hooks/queries/useGetBoardList';
44
import FeedBoardLoading from '@/components/ui/Loading/FeedBoardLoading';
5-
import Link from 'next/link';
65
import FlexBox from '../../../../ui/FlexBox';
76
import FeedBoardCard from '../../../../ui/BoardCard/FeedBoardCard';
87

@@ -24,9 +23,7 @@ export default function BoardsList() {
2423
page.content.length > 0 ? (
2524
page.content.map((board) => (
2625
<div key={board.id} className="w-full">
27-
<Link key={board.id} href={`/board/${board.id}`}>
28-
<FeedBoardCard board={board} />
29-
</Link>
26+
<FeedBoardCard board={board} />
3027
</div>
3128
))
3229
) : (

‎components/ui/BoardCard/BoardCardPackage/Comments.tsx

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,23 @@
1+
/* eslint-disable jsx-a11y/no-static-element-interactions */
2+
/* eslint-disable jsx-a11y/click-events-have-key-events */
3+
import { useRouter } from 'next/navigation';
4+
15
export default function BoardCardComments({
6+
boardId,
27
userName,
38
content,
49
}: {
10+
boardId: number;
511
userName: string;
612
content: string;
713
}) {
14+
const router = useRouter();
15+
816
return (
9-
<div className="flex flex-row">
17+
<div
18+
className="flex flex-row hover:cursor-pointer"
19+
onClick={() => router.push(`/board/${boardId}`)}
20+
>
1021
<div className="inline-block mr-1 body2 text-grey-500">{userName}</div>
1122
<div className="inline body4 text-grey-500">{content}</div>
1223
</div>

‎components/ui/BoardCard/BoardCardPackage/Content.tsx

+19-7
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,26 @@ import Image from 'next/image';
77
import { useState } from 'react';
88
import CaretLeft from 'public/CaretLeft.svg';
99
import CaretRight from 'public/CaretRight.svg';
10+
import { useRouter } from 'next/navigation';
1011
import FlexBox from '../../FlexBox';
1112
import Divider from '../../Divider';
1213
import Images from './Images';
1314

1415
export default function BoardCardContent({
1516
children,
1617
type,
18+
boardId,
1719
content,
1820
imgs,
19-
onClickModal,
2021
}: {
2122
children: React.ReactNode;
2223
type: 'mainPC' | 'modal' | 'myPage' | 'id';
24+
boardId: number;
2325
content: string;
2426
imgs: string[];
25-
onClickModal?: () => void;
2627
}) {
28+
const router = useRouter();
29+
2730
const [imgNum, setImgNum] = useState(0);
2831
const downImgNum = () => {
2932
if (imgNum - 1 >= 0) {
@@ -49,10 +52,16 @@ export default function BoardCardContent({
4952
} ${type === 'modal' && 'w-[375px] h-full'} gap-3`}
5053
>
5154
<div
52-
className={`body3 text-grey-800 ${
55+
className={`body3 text-grey-800 w-full ${
5356
type === 'mainPC' ? 'max-h-40' : null
57+
} ${
58+
type === 'mainPC' || type === 'myPage' ? 'hover:cursor-pointer' : null
5459
}`}
55-
onClick={onClickModal}
60+
onClick={() =>
61+
type === 'mainPC' || type === 'myPage'
62+
? router.push(`board/${boardId}`)
63+
: null
64+
}
5665
>
5766
{content}
5867
</div>
@@ -68,7 +77,7 @@ export default function BoardCardContent({
6877
<>
6978
{type === 'mainPC' && (
7079
<div className="grid w-full h-full grid-cols-2 gap-9">
71-
<Images imgs={imgs} onClickModal={onClickModal} />
80+
<Images boardId={boardId} imgs={imgs} />
7281
{renderBoardContent()}
7382
</div>
7483
)}
@@ -99,8 +108,11 @@ export default function BoardCardContent({
99108
)}
100109

101110
{type === 'myPage' && (
102-
<div className="grid w-full h-full grid-rows-2 gap-9">
103-
<Images imgs={imgs} onClickModal={onClickModal} />
111+
<div
112+
className="grid w-full h-full grid-rows-2 gap-9"
113+
onClick={() => router.push(`/board/${boardId}`)}
114+
>
115+
<Images boardId={boardId} imgs={imgs} />
104116
{renderBoardContent()}
105117
</div>
106118
)}

‎components/ui/BoardCard/BoardCardPackage/Header.tsx

+12-9
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import useRelativeTime from '@/hooks/common/useRelativeTime';
22
import { Board } from '@/types/types';
33
import useGetUserInfo from '@/hooks/queries/useGetUserInfo';
4+
import Link from 'next/link';
45
import Avatar from '../../Avatar';
56
import FlexBox from '../../FlexBox';
67
import BoardCardDropdown from './BoardCardDropdown';
@@ -10,17 +11,19 @@ export default function BoardCardHeader({ board }: { board: Board }) {
1011

1112
return (
1213
<FlexBox justify="between" className="w-full">
13-
<FlexBox className="gap-[10px]">
14-
<Avatar size="xl" image={board.userImageUrl} name={board.writer} />
15-
<FlexBox direction="column" align="start" className="gap-1">
16-
<FlexBox className="gap-2">
17-
<div className="header4 text-grey-800">{board.writer}</div>
14+
<Link href={`/board/${board.id}`} className="grow">
15+
<FlexBox justify="start" className="gap-[10px]">
16+
<Avatar size="xl" image={board.userImageUrl} name={board.writer} />
17+
<FlexBox direction="column" align="start" className="gap-1">
18+
<FlexBox className="gap-2">
19+
<div className="header4 text-grey-800">{board.writer}</div>
20+
</FlexBox>
21+
<div className="caption2 text-grey-400">
22+
{useRelativeTime(board.createdDate)}
23+
</div>
1824
</FlexBox>
19-
<div className="caption2 text-grey-400">
20-
{useRelativeTime(board.createdDate)}
21-
</div>
2225
</FlexBox>
23-
</FlexBox>
26+
</Link>
2427
<BoardCardDropdown
2528
boardId={board.id}
2629
isMyBoard={board.userId === user?.userId}

‎components/ui/BoardCard/BoardCardPackage/Images.tsx

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
/* eslint-disable jsx-a11y/no-static-element-interactions */
22
/* eslint-disable jsx-a11y/click-events-have-key-events */
33
import Image from 'next/image';
4+
import { useRouter } from 'next/navigation';
45

56
export default function PostCardImages({
7+
boardId,
68
imgs,
7-
onClickModal,
89
}: {
10+
boardId: number;
911
imgs: string[];
10-
onClickModal?: () => void;
1112
}) {
13+
const router = useRouter();
14+
1215
if (imgs) {
1316
return (
1417
<div
15-
className="grid w-full grid-cols-2 place-content-stretch"
16-
onClick={onClickModal}
18+
className="grid w-full grid-cols-2 place-content-stretch hover:cursor-pointer"
19+
onClick={() => router.push(`/board/${boardId}`)}
1720
>
1821
<div className="relative row-span-2 -z-10">
1922
<Image

‎components/ui/BoardCard/BoardIdCard.tsx

+2-5
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
1-
// import { Board } from '@/types/types';
21
import useGetBoard from '@/hooks/queries/useGetBoard';
32
import useGetCommentList from '@/hooks/queries/useGetCommentList';
43
import { BoardCardId } from './BoardCardPackage/BoardCardIdPackage';
54

6-
// interface MyBoardCardProps {
7-
// board: Board;
8-
// }
9-
105
export default function BoardIdCard({ boardId }: { boardId: number }) {
116
const { data: board } = useGetBoard(boardId);
127
const { data: commentList, Observer } = useGetCommentList(boardId);
@@ -17,6 +12,7 @@ export default function BoardIdCard({ boardId }: { boardId: number }) {
1712
<BoardCardId.Header board={board} />
1813
<BoardCardId.Content
1914
type="id"
15+
boardId={board.id}
2016
content={board.content}
2117
imgs={board.fileNames}
2218
>
@@ -44,4 +40,5 @@ export default function BoardIdCard({ boardId }: { boardId: number }) {
4440
</BoardCardId>
4541
);
4642
}
43+
return <div>내용이 없습니다</div>;
4744
}

‎components/ui/BoardCard/FeedBoardCard.tsx

+4
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
/* eslint-disable jsx-a11y/no-static-element-interactions */
2+
/* eslint-disable jsx-a11y/click-events-have-key-events */
13
import { Board } from '@/types/types';
24
import { BoardCard } from '@/components/ui/BoardCard/BoardCardPackage';
35
import FlexBox from '../FlexBox';
@@ -12,6 +14,7 @@ export default function FeedBoardCard({ board }: { board: Board }) {
1214
<BoardCard.Header board={board} />
1315
<BoardCard.Content
1416
type="mainPC"
17+
boardId={board.id}
1518
content={board.content}
1619
imgs={board.fileNames}
1720
>
@@ -30,6 +33,7 @@ export default function FeedBoardCard({ board }: { board: Board }) {
3033
{board.replyListDto?.map((comment) => (
3134
<BoardCard.Comments
3235
key={comment.id}
36+
boardId={board.id}
3337
userName={comment.nickname}
3438
content={comment.content}
3539
/>

‎components/ui/BoardCard/ModalBoardCard.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export default function ModalBoardCard({ boardId }: { boardId: number }) {
1212
<BoardCardModal.Header board={board} />
1313
<BoardCardModal.Content
1414
type="modal"
15+
boardId={board.id}
1516
content={board.content}
1617
imgs={board.fileNames}
1718
>

‎components/ui/BoardCard/MyPageBoardCard.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export default function MyPageBoardCard({ board }: { board: Board }) {
77
<BoardCard.Header board={board} />
88
<BoardCard.Content
99
type="myPage"
10+
boardId={board.id}
1011
content={board.content}
1112
imgs={board.fileNames}
1213
>

0 commit comments

Comments
 (0)
Please sign in to comment.