diff --git a/src/entities/community/detail/ui/CommunityContent/index.tsx b/src/entities/community/detail/ui/CommunityContent/index.tsx index 92305286..278c89d8 100644 --- a/src/entities/community/detail/ui/CommunityContent/index.tsx +++ b/src/entities/community/detail/ui/CommunityContent/index.tsx @@ -2,7 +2,7 @@ import Image from 'next/image'; import { useState } from 'react'; -import { CommentIcon } from '@/shared/assets/icons'; +import { CommentIcon, ViewsIcon } from '@/shared/assets/icons'; import HeartIcon from '@/shared/assets/icons/HeartIcon'; import { PersonIcon, SelectHeartIcon } from '@/shared/assets/svg'; import { formatIsoDate } from '@/shared/model/formatIsoDate'; @@ -22,6 +22,7 @@ interface CommunityContentProps { boardId: string; stageId: string; currentPage: number; + viewCount: number; imageUrl?: string; } @@ -38,6 +39,7 @@ const CommunityContent = ({ stageId, currentPage, imageUrl, + viewCount, }: CommunityContentProps) => { const [liked, setLiked] = useState(isLiked); const [likeCountState, setLikeCountState] = useState(likeCount); @@ -155,6 +157,12 @@ const CommunityContent = ({ {likeCountState}

+
+ +

+ {viewCount} +

+

{formatIsoDate(createdAt)} diff --git a/src/entities/community/ui/CommunityItem/index.tsx b/src/entities/community/ui/CommunityItem/index.tsx index 352207b2..8ac466bf 100644 --- a/src/entities/community/ui/CommunityItem/index.tsx +++ b/src/entities/community/ui/CommunityItem/index.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { CommentIcon, HeartIcon } from '@/shared/assets/icons'; +import { CommentIcon, HeartIcon, ViewsIcon } from '@/shared/assets/icons'; import { CommunityItemProps } from '@/shared/types/community'; import SportTypelabel from '@/shared/ui/sportTypelabel'; import { cn } from '@/shared/utils/cn'; @@ -21,7 +21,8 @@ const CommunityItem = ({ return count >= 100 ? '99+' : count.toString(); }; - const { boardId, gameCategory, title, commentCount, likeCount } = item; + const { boardId, gameCategory, title, commentCount, likeCount, viewCount } = + item; return ( +

+ +

{viewCount}

+
); diff --git a/src/shared/assets/icons/ViewsIcon.tsx b/src/shared/assets/icons/ViewsIcon.tsx new file mode 100644 index 00000000..db103b61 --- /dev/null +++ b/src/shared/assets/icons/ViewsIcon.tsx @@ -0,0 +1,27 @@ +interface ViewsIconProps { + size?: number; + color?: string; +} + +const ViewsIcon = ({ size = 24, color = '#A6A6A6' }: ViewsIconProps) => { + return ( + + + + + ); +}; + +export default ViewsIcon; diff --git a/src/shared/assets/icons/index.ts b/src/shared/assets/icons/index.ts index d0cd657f..b9caa310 100644 --- a/src/shared/assets/icons/index.ts +++ b/src/shared/assets/icons/index.ts @@ -19,3 +19,4 @@ export { default as SelectIcon } from './SelectIcon'; export { default as DeleteIcon } from './DeleteIcon'; export { default as CommentIcon } from './CommentIcon'; export { default as HeartIcon } from './HeartIcon'; +export { default as ViewsIcon } from './ViewsIcon'; diff --git a/src/shared/types/community/detail/index.ts b/src/shared/types/community/detail/index.ts index dd9875ca..11629a08 100644 --- a/src/shared/types/community/detail/index.ts +++ b/src/shared/types/community/detail/index.ts @@ -40,5 +40,6 @@ export interface CommunityDetail { author: Author; imageUrl: string; commentCount: number; + viewCount: number; comment: Comment[]; } diff --git a/src/shared/types/community/index.ts b/src/shared/types/community/index.ts index a551b5f9..4fd9b302 100644 --- a/src/shared/types/community/index.ts +++ b/src/shared/types/community/index.ts @@ -22,6 +22,7 @@ interface BoardItem { title: string; likeCount: number; commentCount: number; + viewCount: number; createdAt: string; isFiltered: boolean; stageType: StageType; @@ -45,6 +46,7 @@ export interface CommunityItemProps { author: Author; likeCount: number; commentCount: number; + viewCount: number; } enum System { diff --git a/src/views/community/detail/ui/CommunityDetailPage/index.tsx b/src/views/community/detail/ui/CommunityDetailPage/index.tsx index a3330d8a..9caa93ae 100644 --- a/src/views/community/detail/ui/CommunityDetailPage/index.tsx +++ b/src/views/community/detail/ui/CommunityDetailPage/index.tsx @@ -61,6 +61,7 @@ const CommunityDetailPage = () => { stageId={stageId} currentPage={currentPage} imageUrl={data.imageUrl} + viewCount={data.viewCount} /> { - return { - info: { - totalPage: 10, - totalElement: 100, - }, - board: [ - { - boardId: 1, - gameCategory: 'SOCCER', - title: '속도 게임 최고 기록!', - likeCount: 150, - commentCount: 100, - createdAt: '2025-03-07T14:30:00Z', - isFiltered: false, - stageType: 's', - author: { - studentId: 20250001, - name: '김철수', - classNumber: 1, - studentNumber: 1, - }, - }, - { - boardId: 2, - gameCategory: 'BASE_BALL', - title: '정확도 게임 팁 공유', - likeCount: 8, - commentCount: 98, - createdAt: '2025-03-07T15:45:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250002, - name: '이영희', - classNumber: 1, - studentNumber: 2, - }, - }, - { - boardId: 3, - gameCategory: 'VOLLEY_BALL', - title: '기억력 챌린지 도전기', - likeCount: 20, - commentCount: 100, - createdAt: '2025-03-07T16:00:00Z', - isFiltered: false, - stageType: 'EASY', - author: { - studentId: 20250003, - name: '박민수', - classNumber: 2, - studentNumber: 10, - }, - }, - { - boardId: 4, - gameCategory: 'BASKET_BALL', - title: '슛 정확도 연습법!', - likeCount: 12, - commentCount: 100, - createdAt: '2025-03-07T17:00:00Z', - isFiltered: false, - stageType: 'MEDIUM', - author: { - studentId: 20250004, - name: '최유리', - classNumber: 3, - studentNumber: 15, - }, - }, - { - boardId: 5, - gameCategory: 'BASKET_BALL', - title: '서브 속도 기록 달성!', - likeCount: 18, - commentCount: 100, - createdAt: '2025-03-07T18:30:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250005, - name: '한지훈', - classNumber: 2, - studentNumber: 8, - }, - }, - { - boardId: 6, - gameCategory: 'SOCCER', - title: '백핸드 스킬 연습법', - likeCount: 10, - commentCount: 100, - createdAt: '2025-03-07T19:00:00Z', - isFiltered: false, - stageType: 'MEDIUM', - author: { - studentId: 20250006, - name: '정수빈', - classNumber: 1, - studentNumber: 5, - }, - }, - { - boardId: 7, - gameCategory: 'SOCCER', - title: '드리블 마스터하기', - likeCount: 22, - commentCount: 100, - createdAt: '2025-03-07T20:15:00Z', - isFiltered: false, - stageType: 'HARD', - author: { - studentId: 20250007, - name: '이준호', - classNumber: 3, - studentNumber: 12, - }, - }, - { - boardId: 8, - gameCategory: 'SOCCER', - title: '스매시 연습 팁', - likeCount: 9, - commentCount: 100, - createdAt: '2025-03-07T21:00:00Z', - isFiltered: true, - stageType: 'EASY', - author: { - studentId: 20250008, - name: '김나현', - classNumber: 2, - studentNumber: 3, - }, - }, - { - boardId: 9, - gameCategory: 'SOCCER', - title: '퍼팅 거리 조절 방법', - likeCount: 14, - commentCount: 100, - createdAt: '2025-03-07T22:30:00Z', - isFiltered: false, - stageType: 'MEDIUM', - author: { - studentId: 20250009, - name: '오지훈', - classNumber: 1, - studentNumber: 7, - }, - }, - { - boardId: 10, - gameCategory: 'BADMINTON', - title: '스핀 서브 완벽 가이드', - likeCount: 17, - commentCount: 100, - createdAt: '2025-03-07T23:00:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250010, - name: '박서연', - classNumber: 3, - studentNumber: 9, - }, - }, - { - boardId: 11, - gameCategory: 'ETC', - title: '발로란트', - likeCount: 17, - commentCount: 100, - createdAt: '2025-03-07T23:00:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250010, - name: '정태관', - classNumber: 3, - studentNumber: 9, - }, - }, - ], - }; -}; +// const getBoardMock = (): BoardData => { +// return { +// info: { +// totalPage: 10, +// totalElement: 100, +// }, +// board: [ +// { +// boardId: 1, +// gameCategory: 'SOCCER', +// title: '속도 게임 최고 기록!', +// likeCount: 150, +// commentCount: 100, +// createdAt: '2025-03-07T14:30:00Z', +// isFiltered: false, +// stageType: 's', +// author: { +// studentId: 20250001, +// name: '김철수', +// classNumber: 1, +// studentNumber: 1, +// }, +// }, +// { +// boardId: 2, +// gameCategory: 'BASE_BALL', +// title: '정확도 게임 팁 공유', +// likeCount: 8, +// commentCount: 98, +// createdAt: '2025-03-07T15:45:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250002, +// name: '이영희', +// classNumber: 1, +// studentNumber: 2, +// }, +// }, +// { +// boardId: 3, +// gameCategory: 'VOLLEY_BALL', +// title: '기억력 챌린지 도전기', +// likeCount: 20, +// commentCount: 100, +// createdAt: '2025-03-07T16:00:00Z', +// isFiltered: false, +// stageType: 'EASY', +// author: { +// studentId: 20250003, +// name: '박민수', +// classNumber: 2, +// studentNumber: 10, +// }, +// }, +// { +// boardId: 4, +// gameCategory: 'BASKET_BALL', +// title: '슛 정확도 연습법!', +// likeCount: 12, +// commentCount: 100, +// createdAt: '2025-03-07T17:00:00Z', +// isFiltered: false, +// stageType: 'MEDIUM', +// author: { +// studentId: 20250004, +// name: '최유리', +// classNumber: 3, +// studentNumber: 15, +// }, +// }, +// { +// boardId: 5, +// gameCategory: 'BASKET_BALL', +// title: '서브 속도 기록 달성!', +// likeCount: 18, +// commentCount: 100, +// createdAt: '2025-03-07T18:30:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250005, +// name: '한지훈', +// classNumber: 2, +// studentNumber: 8, +// }, +// }, +// { +// boardId: 6, +// gameCategory: 'SOCCER', +// title: '백핸드 스킬 연습법', +// likeCount: 10, +// commentCount: 100, +// createdAt: '2025-03-07T19:00:00Z', +// isFiltered: false, +// stageType: 'MEDIUM', +// author: { +// studentId: 20250006, +// name: '정수빈', +// classNumber: 1, +// studentNumber: 5, +// }, +// }, +// { +// boardId: 7, +// gameCategory: 'SOCCER', +// title: '드리블 마스터하기', +// likeCount: 22, +// commentCount: 100, +// createdAt: '2025-03-07T20:15:00Z', +// isFiltered: false, +// stageType: 'HARD', +// author: { +// studentId: 20250007, +// name: '이준호', +// classNumber: 3, +// studentNumber: 12, +// }, +// }, +// { +// boardId: 8, +// gameCategory: 'SOCCER', +// title: '스매시 연습 팁', +// likeCount: 9, +// commentCount: 100, +// createdAt: '2025-03-07T21:00:00Z', +// isFiltered: true, +// stageType: 'EASY', +// author: { +// studentId: 20250008, +// name: '김나현', +// classNumber: 2, +// studentNumber: 3, +// }, +// }, +// { +// boardId: 9, +// gameCategory: 'SOCCER', +// title: '퍼팅 거리 조절 방법', +// likeCount: 14, +// commentCount: 100, +// createdAt: '2025-03-07T22:30:00Z', +// isFiltered: false, +// stageType: 'MEDIUM', +// author: { +// studentId: 20250009, +// name: '오지훈', +// classNumber: 1, +// studentNumber: 7, +// }, +// }, +// { +// boardId: 10, +// gameCategory: 'BADMINTON', +// title: '스핀 서브 완벽 가이드', +// likeCount: 17, +// commentCount: 100, +// createdAt: '2025-03-07T23:00:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250010, +// name: '박서연', +// classNumber: 3, +// studentNumber: 9, +// }, +// }, +// { +// boardId: 11, +// gameCategory: 'ETC', +// title: '발로란트', +// likeCount: 17, +// commentCount: 100, +// createdAt: '2025-03-07T23:00:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250010, +// name: '정태관', +// classNumber: 3, +// studentNumber: 9, +// }, +// }, +// ], +// }; +// }; -export default getBoardMock; +// export default getBoardMock; diff --git a/src/views/main/index.ts b/src/views/main/index.ts index 37925924..0757d764 100644 --- a/src/views/main/index.ts +++ b/src/views/main/index.ts @@ -1,4 +1,4 @@ export { default as MainPage } from './ui/MainPage'; export { default as getMatchInfo } from './ui/Mock/getMatchInfo'; export { default as getRankingMock } from './ui/Mock/getRankingMock'; -export { default as getBoardMock } from './ui/Mock/getBoardMock'; +// export { default as getBoardMock } from './ui/Mock/getBoardMock'; diff --git a/src/views/main/ui/Mock/getBoardMock.ts b/src/views/main/ui/Mock/getBoardMock.ts index 41ef453b..5d5b78c2 100644 --- a/src/views/main/ui/Mock/getBoardMock.ts +++ b/src/views/main/ui/Mock/getBoardMock.ts @@ -1,190 +1,190 @@ -import { BoardData } from '@/shared/types/community'; +// import { BoardData } from '@/shared/types/community'; -const getBoardMock = (): BoardData => { - return { - info: { - totalPage: 5, - totalElement: 100, - }, - board: [ - { - boardId: 1, - gameCategory: 'SOCCER', - title: '속도 게임 최고 기록!', - likeCount: 150, - commentCount: 100, - createdAt: '2025-03-07T14:30:00Z', - isFiltered: false, - stageType: 's', - author: { - studentId: 20250001, - name: '김철수', - classNumber: 1, - studentNumber: 1, - }, - }, - { - boardId: 2, - gameCategory: 'BASE_BALL', - title: '정확도 게임 팁 공유', - likeCount: 8, - commentCount: 98, - createdAt: '2025-03-07T15:45:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250002, - name: '이영희', - classNumber: 1, - studentNumber: 2, - }, - }, - { - boardId: 3, - gameCategory: 'VOLLEY_BALL', - title: '기억력 챌린지 도전기', - likeCount: 20, - commentCount: 100, - createdAt: '2025-03-07T16:00:00Z', - isFiltered: false, - stageType: 'EASY', - author: { - studentId: 20250003, - name: '박민수', - classNumber: 2, - studentNumber: 10, - }, - }, - { - boardId: 4, - gameCategory: 'BASKET_BALL', - title: '슛 정확도 연습법!', - likeCount: 12, - commentCount: 100, - createdAt: '2025-03-07T17:00:00Z', - isFiltered: false, - stageType: 'MEDIUM', - author: { - studentId: 20250004, - name: '최유리', - classNumber: 3, - studentNumber: 15, - }, - }, - { - boardId: 5, - gameCategory: 'BASKET_BALL', - title: '서브 속도 기록 달성!', - likeCount: 18, - commentCount: 100, - createdAt: '2025-03-07T18:30:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250005, - name: '한지훈', - classNumber: 2, - studentNumber: 8, - }, - }, - { - boardId: 6, - gameCategory: 'SOCCER', - title: '백핸드 스킬 연습법', - likeCount: 10, - commentCount: 100, - createdAt: '2025-03-07T19:00:00Z', - isFiltered: false, - stageType: 'MEDIUM', - author: { - studentId: 20250006, - name: '정수빈', - classNumber: 1, - studentNumber: 5, - }, - }, - { - boardId: 7, - gameCategory: 'SOCCER', - title: '드리블 마스터하기', - likeCount: 22, - commentCount: 100, - createdAt: '2025-03-07T20:15:00Z', - isFiltered: false, - stageType: 'HARD', - author: { - studentId: 20250007, - name: '이준호', - classNumber: 3, - studentNumber: 12, - }, - }, - { - boardId: 8, - gameCategory: 'SOCCER', - title: '스매시 연습 팁', - likeCount: 9, - commentCount: 100, - createdAt: '2025-03-07T21:00:00Z', - isFiltered: true, - stageType: 'EASY', - author: { - studentId: 20250008, - name: '김나현', - classNumber: 2, - studentNumber: 3, - }, - }, - { - boardId: 9, - gameCategory: 'SOCCER', - title: '퍼팅 거리 조절 방법', - likeCount: 14, - commentCount: 100, - createdAt: '2025-03-07T22:30:00Z', - isFiltered: false, - stageType: 'MEDIUM', - author: { - studentId: 20250009, - name: '오지훈', - classNumber: 1, - studentNumber: 7, - }, - }, - { - boardId: 10, - gameCategory: 'BADMINTON', - title: '스핀 서브 완벽 가이드', - likeCount: 17, - commentCount: 100, - createdAt: '2025-03-07T23:00:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250010, - name: '박서연', - classNumber: 3, - studentNumber: 9, - }, - }, - { - boardId: 11, - gameCategory: 'ETC', - title: '발로란트', - likeCount: 17, - commentCount: 100, - createdAt: '2025-03-07T23:00:00Z', - isFiltered: true, - stageType: 'HARD', - author: { - studentId: 20250010, - name: '정태관', - classNumber: 3, - studentNumber: 9, - }, - }, - ], - }; -}; +// const getBoardMock = (): BoardData => { +// return { +// info: { +// totalPage: 5, +// totalElement: 100, +// }, +// board: [ +// { +// boardId: 1, +// gameCategory: 'SOCCER', +// title: '속도 게임 최고 기록!', +// likeCount: 150, +// commentCount: 100, +// createdAt: '2025-03-07T14:30:00Z', +// isFiltered: false, +// stageType: 's', +// author: { +// studentId: 20250001, +// name: '김철수', +// classNumber: 1, +// studentNumber: 1, +// }, +// }, +// { +// boardId: 2, +// gameCategory: 'BASE_BALL', +// title: '정확도 게임 팁 공유', +// likeCount: 8, +// commentCount: 98, +// createdAt: '2025-03-07T15:45:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250002, +// name: '이영희', +// classNumber: 1, +// studentNumber: 2, +// }, +// }, +// { +// boardId: 3, +// gameCategory: 'VOLLEY_BALL', +// title: '기억력 챌린지 도전기', +// likeCount: 20, +// commentCount: 100, +// createdAt: '2025-03-07T16:00:00Z', +// isFiltered: false, +// stageType: 'EASY', +// author: { +// studentId: 20250003, +// name: '박민수', +// classNumber: 2, +// studentNumber: 10, +// }, +// }, +// { +// boardId: 4, +// gameCategory: 'BASKET_BALL', +// title: '슛 정확도 연습법!', +// likeCount: 12, +// commentCount: 100, +// createdAt: '2025-03-07T17:00:00Z', +// isFiltered: false, +// stageType: 'MEDIUM', +// author: { +// studentId: 20250004, +// name: '최유리', +// classNumber: 3, +// studentNumber: 15, +// }, +// }, +// { +// boardId: 5, +// gameCategory: 'BASKET_BALL', +// title: '서브 속도 기록 달성!', +// likeCount: 18, +// commentCount: 100, +// createdAt: '2025-03-07T18:30:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250005, +// name: '한지훈', +// classNumber: 2, +// studentNumber: 8, +// }, +// }, +// { +// boardId: 6, +// gameCategory: 'SOCCER', +// title: '백핸드 스킬 연습법', +// likeCount: 10, +// commentCount: 100, +// createdAt: '2025-03-07T19:00:00Z', +// isFiltered: false, +// stageType: 'MEDIUM', +// author: { +// studentId: 20250006, +// name: '정수빈', +// classNumber: 1, +// studentNumber: 5, +// }, +// }, +// { +// boardId: 7, +// gameCategory: 'SOCCER', +// title: '드리블 마스터하기', +// likeCount: 22, +// commentCount: 100, +// createdAt: '2025-03-07T20:15:00Z', +// isFiltered: false, +// stageType: 'HARD', +// author: { +// studentId: 20250007, +// name: '이준호', +// classNumber: 3, +// studentNumber: 12, +// }, +// }, +// { +// boardId: 8, +// gameCategory: 'SOCCER', +// title: '스매시 연습 팁', +// likeCount: 9, +// commentCount: 100, +// createdAt: '2025-03-07T21:00:00Z', +// isFiltered: true, +// stageType: 'EASY', +// author: { +// studentId: 20250008, +// name: '김나현', +// classNumber: 2, +// studentNumber: 3, +// }, +// }, +// { +// boardId: 9, +// gameCategory: 'SOCCER', +// title: '퍼팅 거리 조절 방법', +// likeCount: 14, +// commentCount: 100, +// createdAt: '2025-03-07T22:30:00Z', +// isFiltered: false, +// stageType: 'MEDIUM', +// author: { +// studentId: 20250009, +// name: '오지훈', +// classNumber: 1, +// studentNumber: 7, +// }, +// }, +// { +// boardId: 10, +// gameCategory: 'BADMINTON', +// title: '스핀 서브 완벽 가이드', +// likeCount: 17, +// commentCount: 100, +// createdAt: '2025-03-07T23:00:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250010, +// name: '박서연', +// classNumber: 3, +// studentNumber: 9, +// }, +// }, +// { +// boardId: 11, +// gameCategory: 'ETC', +// title: '발로란트', +// likeCount: 17, +// commentCount: 100, +// createdAt: '2025-03-07T23:00:00Z', +// isFiltered: true, +// stageType: 'HARD', +// author: { +// studentId: 20250010, +// name: '정태관', +// classNumber: 3, +// studentNumber: 9, +// }, +// }, +// ], +// }; +// }; -export default getBoardMock; +// export default getBoardMock;