커뮤 조회수 표시 기능 구현

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}
             </p>
           </div>
+          <div className={cn('flex', 'items-center', 'gap-8')}>
+            <ViewsIcon />
+            <p className={cn('text-body3s', 'text-caption1s', 'text-gray-300')}>
+              {viewCount}
+            </p>
+          </div>
         </div>
         <p className={cn('text-body3s', 'text-gray-500')}>
           {formatIsoDate(createdAt)}

src/entities/community/ui/CommunityItem/index.tsx

@@ -91,6 +91,10 @@ const CommunityItem = ({
             {formatCount(likeCount)}
           </p>
         </div>
+        {/* <div className={cn('flex', 'items-center', 'gap-8')}>
+          <ViewsIcon />
+          <p className={cn('text-body3s', 'text-gray-300')}>{viewCount}</p>
+        </div> */}
       </div>
     </Link>
   );

src/shared/assets/icons/ViewsIcon.tsx

@@ -0,0 +1,27 @@
+interface ViewsIconProps {
+  size?: number;
+  color?: string;
+}
+
+const ViewsIcon = ({ size = 24, color = '#A6A6A6' }: ViewsIconProps) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M19.231 7.35925C19.5846 6.93506 20.216 6.87778 20.6402 7.23132C21.0644 7.5849 21.1217 8.21626 20.7681 8.6405L15.7681 14.6405C15.5883 14.8563 15.3251 14.9862 15.0445 14.9989C14.764 15.0115 14.4911 14.9055 14.2925 14.7069L10.0552 10.4696L4.75837 16.6503C4.39895 17.0696 3.76851 17.1181 3.34919 16.7587C2.92986 16.3992 2.88137 15.7688 3.24079 15.3495L9.24079 8.34948L9.31208 8.27429C9.48735 8.1082 9.71788 8.01021 9.96149 8.00085C10.2397 7.99024 10.5097 8.09595 10.7066 8.29284L14.9312 12.5175L19.231 7.35925Z"
+        fill={color}
+      />
+      <path
+        d="M2 16C2 15.4696 2.21086 14.961 2.58594 14.5859C2.96101 14.2109 3.46957 14 4 14C4.53043 14 5.03899 14.2109 5.41406 14.5859C5.78913 14.961 6 15.4696 6 16C6 16.5304 5.78914 17.039 5.41406 17.4141C5.03899 17.7891 4.53043 18 4 18C3.46957 18 2.96101 17.7891 2.58594 17.4141C2.21086 17.039 2 16.5304 2 16ZM13 14C13 13.4696 13.2109 12.961 13.5859 12.5859C13.961 12.2109 14.4696 12 15 12C15.5304 12 16.039 12.2109 16.4141 12.5859C16.7891 12.961 17 13.4696 17 14C17 14.5304 16.7891 15.039 16.4141 15.4141C16.039 15.7891 15.5304 16 15 16C14.4696 16 13.961 15.7891 13.5859 15.4141C13.2109 15.039 13 14.5304 13 14ZM8 9C8 8.46957 8.21087 7.96101 8.58594 7.58594C8.96101 7.21087 9.46957 7 10 7C10.5304 7 11.039 7.21087 11.4141 7.58594C11.7891 7.96101 12 8.46957 12 9C12 9.53043 11.7891 10.039 11.4141 10.4141C11.039 10.7891 10.5304 11 10 11C9.46957 11 8.96101 10.7891 8.58594 10.4141C8.21087 10.039 8 9.53043 8 9ZM18 8C18 7.46957 18.2109 6.96101 18.5859 6.58594C18.961 6.21086 19.4696 6 20 6C20.5304 6 21.039 6.21087 21.4141 6.58594C21.7891 6.96101 22 7.46957 22 8C22 8.53043 21.7891 9.03899 21.4141 9.41406C21.039 9.78913 20.5304 10 20 10C19.4696 10 18.961 9.78914 18.5859 9.41406C18.2109 9.03899 18 8.53043 18 8Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export default ViewsIcon;

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';

src/shared/types/community/detail/index.ts

@@ -40,5 +40,6 @@ export interface CommunityDetail {
   author: Author;
   imageUrl: string;
   commentCount: number;
+  viewCount: number;
   comment: Comment[];
 }

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 {

src/views/community/detail/ui/CommunityDetailPage/index.tsx

@@ -61,6 +61,7 @@ const CommunityDetailPage = () => {
           stageId={stageId}
           currentPage={currentPage}
           imageUrl={data.imageUrl}
+          viewCount={data.viewCount}
         />
         <CommentInput
           boardId={boardId}

src/views/community/index.ts

@@ -1,2 +1,2 @@
 export { default as CommunityPage } from './ui/CommunityPage';
-export { default as getBoardMock } from './ui/Mock/getBoardMock';
+// export { default as getBoardMock } from './ui/Mock/getBoardMock';