Merge pull request #521 from KEEPER31337/feature/게시판_리스트_그리드_뷰_전환_기능_#134

Feature/게시판 리스트 그리드 뷰 전환 기능 #134

Author: publdaze

src/api/dto.ts

@@ -160,6 +160,7 @@ export interface PostSummaryInfo {
   id: number;
   title: string;
   writerName: string;
+  writerThumbnailPath: string;
   visitCount: number;
   commentCount: number;
   isSecret: boolean;

src/components/Button/TableViewSwitchButton.tsx

@@ -1,22 +1,28 @@
 import React from 'react';
+import { useRecoilState } from 'recoil';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { MdOutlineApps, MdOutlineViewHeadline } from 'react-icons/md';
+import tableViewState from '@recoil/view.recoil';
 
-type switchType = 'List' | 'Grid';
+export type TableType = 'List' | 'Grid';
 
-interface TableViewSwitchButtonProps {
-  type: switchType;
-  isActive?: boolean;
-}
+const TableViewSwitchButton = () => {
+  const [tableView, setTableView] = useRecoilState(tableViewState);
+
+  const handleTableView = (event: React.MouseEvent<HTMLElement>, newTableView: TableType | null) => {
+    if (!newTableView) return;
+    setTableView(newTableView);
+  };
 
-const TableViewSwitchButton = ({ type, isActive }: TableViewSwitchButtonProps) => {
   return (
-    <div
-      className={`flex h-8 w-8 items-center justify-center rounded-sm border ${
-        isActive ? 'border-pointBlue' : 'border-white'
-      }`}
-    >
-      {type === 'List' ? <MdOutlineViewHeadline size="20" color="#4CEEF9" /> : <MdOutlineApps size="20" />}
-    </div>
+    <ToggleButtonGroup exclusive size="small" value={tableView} onChange={handleTableView}>
+      <ToggleButton value="List" aria-label="List">
+        <MdOutlineViewHeadline size="20" />
+      </ToggleButton>
+      <ToggleButton value="Grid" aria-label="Grid">
+        <MdOutlineApps size="20" />
+      </ToggleButton>
+    </ToggleButtonGroup>
   );
 };
 

src/components/Card/PostingCard.interface.ts

@@ -5,7 +5,7 @@ export interface CardMainInfoProps {
 
 export interface CardDetailInfoProps {
   writerThumbnailPath: string | null;
-  writer: string;
+  writerName: string;
   registerTime: string;
 }
 

src/components/Card/PostingCard.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { Avatar, Card, CardContent, CardMedia, Typography } from '@mui/material';
+import { Avatar, Card, CardContent, CardMedia, Stack, Typography } from '@mui/material';
 import { VscComment, VscEye } from 'react-icons/vsc';
-import { DateTime } from 'luxon';
 import { ReactComponent as Logo } from '@assets/logo/logo_neon.svg';
+import { getServerImgUrl } from '@utils/converter';
 import { CardDetailInfoProps, CardMainInfoProps, InteractionScoreProps } from './PostingCard.interface';
 
 export interface PostingCardProps extends CardMainInfoProps, CardDetailInfoProps, InteractionScoreProps {
@@ -22,18 +22,18 @@ const CardMainInfo = ({ type, title }: CardMainInfoProps) => {
   );
 };
 
-const CardDetailInfo = ({ writerThumbnailPath, writer, registerTime }: CardDetailInfoProps) => {
+const CardDetailInfo = ({ writerThumbnailPath, writerName, registerTime }: CardDetailInfoProps) => {
   return (
     <div className="flex">
       <Avatar className="mr-2 !h-6 !w-6" src={writerThumbnailPath ?? undefined} />
-      <div>
+      <Stack>
         <Typography className="font-medium" variant="small">
-          {writer}
+          {writerName}
         </Typography>
         <Typography className="font-semibold text-subGray" variant="small">
-          {DateTime.fromISO(registerTime).toFormat('yyyy.MM.dd')}
+          {registerTime}
         </Typography>
-      </div>
+      </Stack>
     </div>
   );
 };
@@ -62,22 +62,31 @@ const PostingCard = ({
   type,
   title,
   writerThumbnailPath,
-  writer,
+  writerName,
   registerTime,
   visitCount,
   commentCount,
 }: PostingCardProps) => {
   return (
     <Card className="w-52 !rounded-none !bg-middleBlack !bg-none">
       {thumbnailPath ? (
-        <CardMedia className="h-[118px] bg-middleBlack" component="img" src={thumbnailPath} alt="썸네일" />
+        <CardMedia
+          className="h-[118px] bg-middleBlack"
+          component="img"
+          src={getServerImgUrl(thumbnailPath)}
+          alt="썸네일"
+        />
       ) : (
         <Logo className="m-auto h-[118px] w-28" />
       )}
       <CardContent className="flex h-24 flex-col justify-between !bg-mainBlack !p-3">
         <CardMainInfo type={type} title={title} />
         <div className="flex items-end justify-between">
-          <CardDetailInfo writerThumbnailPath={writerThumbnailPath} writer={writer} registerTime={registerTime} />
+          <CardDetailInfo
+            writerThumbnailPath={writerThumbnailPath}
+            writerName={writerName}
+            registerTime={registerTime}
+          />
           <InteractionScore visitCount={visitCount} commentCount={commentCount} />
         </div>
       </CardContent>

src/components/Image/ServerImg.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import LogoNeon from '@assets/logo/logo_neon.svg';
+import { getServerImgUrl } from '@utils/converter';
 
 interface ServerImg {
   src: string;
@@ -10,7 +11,7 @@ interface ServerImg {
 
 const ServerImg = ({ src, alt, className, errorClassName }: ServerImg) => {
   const [error, setError] = useState(false);
-  const srcWithServerUrl = `${process.env.REACT_APP_API_URL}/${src}`;
+  const srcWithServerUrl = getServerImgUrl(src);
 
   const handleImgError: React.ReactEventHandler<HTMLImageElement> = (e) => {
     e.currentTarget.src = LogoNeon;

src/components/Table/GridTable.tsx

@@ -1,24 +1,36 @@
 import React from 'react';
 import PostingCard, { PostingCardProps } from '@components/Card/PostingCard';
 import StandardTablePagination from '@components/Pagination/StandardTablePagination';
+import { PaginationOption } from '@components/Pagination/StandardTablePagination.interface';
 import { Row } from './StandardTable.interface';
 
 interface GridTableProps<T> {
   rows: (PostingCardProps & Row<T>)[];
+  paginationOption?: PaginationOption;
 }
 
-const GridTable = <T,>({ rows }: GridTableProps<T>) => {
+const GridTable = <T,>({ rows, paginationOption }: GridTableProps<T>) => {
   return (
     <div>
       <div className="mb-1 grid grid-cols-5 gap-2">
         {rows.map(
-          ({ id, thumbnailPath, type, title, writerThumbnailPath, writer, registerTime, visitCount, commentCount }) => (
+          ({
+            id,
+            thumbnailPath,
+            type,
+            title,
+            writerThumbnailPath,
+            writerName,
+            registerTime,
+            visitCount,
+            commentCount,
+          }) => (
             <PostingCard
               key={id}
               type={type}
               title={title}
               writerThumbnailPath={writerThumbnailPath}
-              writer={writer}
+              writerName={writerName}
               registerTime={registerTime}
               visitCount={visitCount}
               commentCount={commentCount}
@@ -27,7 +39,7 @@ const GridTable = <T,>({ rows }: GridTableProps<T>) => {
           ),
         )}
       </div>
-      <StandardTablePagination rowsPerPage={10} />
+      <StandardTablePagination {...paginationOption} />
     </div>
   );
 };

src/pages/board/BoardList.tsx

@@ -9,6 +9,9 @@ import { useGetPostListQuery } from '@api/postApi';
 import { categoryNameToId } from '@utils/converter';
 import { Column, Row } from '@components/Table/StandardTable.interface';
 import usePagination from '@hooks/usePagination';
+import tableViewState from '@recoil/view.recoil';
+import { useRecoilValue } from 'recoil';
+import GridTable from '@components/Table/GridTable';
 
 interface BoardRow {
   no: number;
@@ -37,6 +40,7 @@ const BoardList = () => {
 
   const navigate = useNavigate();
   const { data: posts } = useGetPostListQuery({ categoryId, page });
+  const tableView = useRecoilValue(tableViewState);
 
   if (!posts) {
     return null;
@@ -60,20 +64,28 @@ const BoardList = () => {
       </div>
       <div className="flex items-center justify-between pb-5">
         <SearchSection />
-        <div className="flex gap-2">
-          <TableViewSwitchButton type="List" isActive />
-          <TableViewSwitchButton type="Grid" />
-        </div>
+        <TableViewSwitchButton />
       </div>
-      <StandardTable
-        columns={boardColumn}
-        rows={posts.content.map((post, postIndex) => ({
-          no: getRowNumber({ size: posts.size, index: postIndex }),
-          ...post,
-        }))}
-        onRowClick={handlePostRowClick}
-        paginationOption={{ rowsPerPage: posts.size, totalItems: posts.totalElements }}
-      />
+      {tableView === 'List' && (
+        <StandardTable
+          columns={boardColumn}
+          rows={posts.content.map((post, postIndex) => ({
+            no: getRowNumber({ size: posts.size, index: postIndex }),
+            ...post,
+          }))}
+          onRowClick={handlePostRowClick}
+          paginationOption={{ rowsPerPage: posts.size, totalItems: posts.totalElements }}
+        />
+      )}
+      {tableView === 'Grid' && (
+        <GridTable<BoardRow>
+          rows={posts.content.map((post, postIndex) => ({
+            no: getRowNumber({ size: posts.size, index: postIndex }),
+            ...post,
+          }))}
+          paginationOption={{ rowsPerPage: posts.size, totalItems: posts.totalElements }}
+        />
+      )}
     </div>
   );
 };

src/recoil/view.recoil.ts

@@ -0,0 +1,13 @@
+import { TableType } from '@components/Button/TableViewSwitchButton';
+import { atom } from 'recoil';
+import { recoilPersist } from 'recoil-persist';
+
+const { persistAtom } = recoilPersist();
+
+const tableViewState = atom<TableType>({
+  key: 'tableViewState',
+  default: 'List',
+  effects_UNSTABLE: [persistAtom],
+});
+
+export default tableViewState;

src/utils/converter.ts

@@ -25,4 +25,8 @@ const categoryNameToId = (categoryName: string) => {
   return null;
 };
 
-export { formatFileSize, categoryNameToId };
+const getServerImgUrl = (url: string) => {
+  return `${process.env.REACT_APP_API_URL}/${url}`;
+};
+
+export { formatFileSize, categoryNameToId, getServerImgUrl };