마이페이지 찜한 게시물 리스트 작업 및 github action세팅

.github/workflows/cd.yml

@@ -0,0 +1,21 @@
+name: CD
+env:
+  VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
+  VERCEL_PROJECT_ID: ${{ secrets.VERCEL_PROJECT_ID }}
+on:
+  push:
+    branches:
+      - main
+jobs:
+  Deploy-Production:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install Vercel CLI
+        run: npm install --global vercel@latest
+      - name: Pull Vercel Environment Information
+        run: vercel pull --yes --environment=production --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Build Project Artifacts
+        run: vercel build --prod --token=${{ secrets.VERCEL_TOKEN }}
+      - name: Deploy Project Artifacts to Vercel
+        run: vercel deploy --prebuilt --prod --token=${{ secrets.VERCEL_TOKEN }}

.github/workflows/ci.yml

@@ -0,0 +1,27 @@
+name: CI
+
+on: [pull_request]
+
+jobs:
+  lint:
+    name: Lint
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - run: npm install
+      - run: npm run lint
+  build:
+    name: Build
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '18'
+      - run: npm install
+      - run: CI='false' npm run build

.gitignore

@@ -24,3 +24,5 @@ dist-ssr
 *.sw?
 
 .env
+
+.vercel

package.json

@@ -6,7 +6,8 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\"",
+    "lint:fix": "eslint --fix \"src/**/*.{js,jsx,ts,tsx}\"",
     "preview": "vite preview"
   },
   "dependencies": {

src/components/Inner.tsx

@@ -1,12 +1,17 @@
-import { ReactNode } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import styles from './Inner.module.scss';
 
 interface InnerProp {
   children: ReactNode;
+  style?: CSSProperties;
 }
 
-const Inner = ({ children }: InnerProp) => {
-  return <div className={styles.inner}>{children}</div>;
+const Inner = ({ children, style }: InnerProp) => {
+  return (
+    <div className={styles.inner} style={style}>
+      {children}
+    </div>
+  );
 };
 
 export default Inner;

src/components/button/Button.tsx

@@ -1,4 +1,4 @@
-import styles from './button.module.scss';
+import styles from './Button.module.scss';
 
 interface Props {
   data: string;

src/components/mypage/LikedPosts.tsx

@@ -0,0 +1,113 @@
+import { deleteDocument, getAllDocument } from '@/lib/firebaseQuery';
+import useUserStore from '@/store/useUsersStore';
+import { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import RenderLikedPosts from './RenderLikedPosts';
+import styles from './Mypage.module.scss';
+import { Pagination } from 'antd';
+import { DocumentData } from 'firebase/firestore';
+
+export interface Liked {
+  id: string;
+  data: DocumentData;
+}
+
+const MyPosts = () => {
+  const itemsPerPage = 4;
+  const [likes, setLikes] = useState<Liked[]>([]);
+  const [currentPage, setCurrentPage] = useState(1);
+  const navigate = useNavigate();
+
+  const { user } = useUserStore();
+
+  const indexOfLastItem = currentPage * itemsPerPage;
+  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
+  const currentItems = likes.slice(indexOfFirstItem, indexOfLastItem);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      if (!user) return;
+
+      try {
+        const docSnap = await getAllDocument(`/heart/${user.uid}/like`);
+
+        setLikes(docSnap);
+      } catch (error) {
+        console.error('데이터를 가져오는 중 오류 발생:', error);
+      }
+    };
+
+    fetchData();
+  }, [user]);
+
+  const handlePageChange = (pageNumber: number) => {
+    setCurrentPage(pageNumber);
+  };
+
+  const onCancleLikedPost = async (likeId: string) => {
+    const confirm = window.confirm('해당 게시물의 좋아요를 취소하시겠습니까?');
+
+    if (confirm && user) {
+      try {
+        await deleteDocument(`/heart/${user.uid}/like/${likeId}`);
+
+        setLikes((prev) => prev.filter((like) => like.id !== likeId));
+
+        const newTotal = likes.length - 1;
+        const maxPage = Math.ceil(newTotal / itemsPerPage);
+        if (currentPage > maxPage) {
+          setCurrentPage(maxPage > 0 ? maxPage : 1);
+        }
+        console.log('글이 삭제 되었습니다.');
+      } catch (error) {
+        console.log(error);
+      }
+    }
+
+    return;
+  };
+
+  const onMoveToDocument = (likeId: string) => {
+    navigate(`/community/detail/${likeId}`);
+  };
+
+  return (
+    <div style={{ height: '100%' }}>
+      <div className={styles.myactive__posts__title}>
+        <span>좋아요한 게시물</span>
+      </div>
+      {likes.length === 0 ? (
+        <>
+          <div className={styles.myactive__posts__box__none}>
+            좋아요한 게시물이 없습니다.
+          </div>
+        </>
+      ) : (
+        <>
+          <div className={styles.myactive__posts__box}>
+            {currentItems.map((like) => (
+              <RenderLikedPosts
+                key={like.id}
+                like={like}
+                onCancleLikedPost={onCancleLikedPost}
+                onMoveToDocument={onMoveToDocument}
+              />
+            ))}
+          </div>
+        </>
+      )}
+
+      <div className={styles.pagination}>
+        <Pagination
+          defaultCurrent={currentPage}
+          total={likes.length}
+          pageSize={itemsPerPage}
+          onChange={handlePageChange}
+          hideOnSinglePage={true}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default MyPosts;

src/components/mypage/MyActive.tsx

@@ -1,3 +1,4 @@
+import LikedPosts from './LikedPosts';
 import MyLikedPokemon from './MyLikedPokemon';
 import MyPosts from './MyPosts';
 import styles from './Mypage.module.scss';
@@ -9,7 +10,9 @@ const MyActive = () => {
           <div className={styles.myactive__posts}>
             <MyPosts />
           </div>
-          <div className={styles.myactive__posts__favorite}></div>
+          <div className={styles.myactive__posts__favorite}>
+            <LikedPosts />
+          </div>
         </div>
         <MyLikedPokemon />
       </div>

src/components/mypage/MyPosts.tsx

@@ -76,12 +76,18 @@ const MyPosts = () => {
         console.error(error);
       }
     }
+
+    return;
   };
 
   const handlePageChange = (pageNumber: number) => {
     setCurrentPage(pageNumber);
   };
 
+  const onMovetoDocument = (postId: string) => {
+    navigate(`/community/detail/${postId}`);
+  };
+
   return (
     <div style={{ height: '100%' }}>
       <div className={styles.myactive__posts__title}>
@@ -102,6 +108,7 @@ const MyPosts = () => {
                 post={post}
                 onEdit={onEdit}
                 onDelete={onDelete}
+                onMovetoDocument={onMovetoDocument}
               />
             ))}
           </div>

src/components/mypage/Mypage.module.scss

@@ -293,7 +293,7 @@
       span {
         color: #000;
         font-family: Gmarket Sans;
-        font-size: 28px;
+        font-size: 24px;
         font-style: normal;
         font-weight: 600;
         line-height: normal;
@@ -306,6 +306,7 @@
       display: flex;
       flex-direction: column;
       align-items: center;
+      cursor: pointer;
 
       &__none {
         display: flex;
@@ -316,6 +317,7 @@
 
       &__item {
         width: 549px;
+        height: 52px;
         display: flex;
         align-items: center;
         justify-content: space-between;

src/components/mypage/RenderLikedPosts.tsx

@@ -0,0 +1,36 @@
+import { MouseEvent, memo } from 'react';
+
+import styles from './Mypage.module.scss';
+import { Liked } from './LikedPosts';
+import { IoIosHeart } from '@react-icons/all-files/io/IoIosHeart';
+
+interface RenderLikedPostsProps {
+  like: Liked;
+  onCancleLikedPost: (likeId: string) => void;
+  onMoveToDocument: (likeId: string) => void;
+}
+
+const RenderLikedPosts = memo(
+  ({ like, onCancleLikedPost, onMoveToDocument }: RenderLikedPostsProps) => {
+    return (
+      <div
+        className={styles.myactive__posts__box__item}
+        onClick={() => onMoveToDocument(like.id)}
+      >
+        <span>{like.data.title}</span>
+        <div>
+          <button
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              onCancleLikedPost(like.id);
+            }}
+          >
+            <IoIosHeart color={'#fd0000'} size={20} />
+          </button>
+        </div>
+      </div>
+    );
+  },
+);
+
+export default RenderLikedPosts;

src/components/mypage/RenderPost.tsx

@@ -1,29 +1,36 @@
-import { memo } from 'react';
+import { MouseEvent, memo } from 'react';
 import { PostData, Posts } from './MyPosts';
 import styles from './Mypage.module.scss';
 
 interface RenderPostProps {
   post: Posts;
   onDelete: (postId: string) => void;
   onEdit: (data: PostData, id: string) => void;
+  onMovetoDocument: (postId: string) => void;
 }
 
-const RenderPost = memo(({ post, onDelete, onEdit }: RenderPostProps) => {
-  return (
-    <div className={styles.myactive__posts__box__item}>
-      <span>{post.data.title}</span>
-      <div className={styles.myactive__posts__box__btn__group}>
-        <button
-          onClick={() => {
-            onEdit(post.data, post.id);
-          }}
-        >
-          수정
-        </button>
-        <button onClick={() => onDelete(post.id)}>삭제</button>
+const RenderPost = memo(
+  ({ post, onDelete, onEdit, onMovetoDocument }: RenderPostProps) => {
+    return (
+      <div
+        className={styles.myactive__posts__box__item}
+        onClick={() => onMovetoDocument(post.id)}
+      >
+        <span>{post.data.title}</span>
+        <div className={styles.myactive__posts__box__btn__group}>
+          <button
+            onClick={(e: MouseEvent<HTMLButtonElement>) => {
+              e.stopPropagation();
+              onEdit(post.data, post.id);
+            }}
+          >
+            수정
+          </button>
+          <button onClick={() => onDelete(post.id)}>삭제</button>
+        </div>
       </div>
-    </div>
-  );
-});
+    );
+  },
+);
 
 export default RenderPost;

src/hook/useCommunityDataList.tsx

@@ -28,6 +28,7 @@ const useCommunityDataList = (val: string) => {
     };
 
     fetchData();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []); // 빈 배열을 전달하여 컴포넌트가 마운트될 때 한 번만 실행되도록 함
 
   return { dataList, commentsList, repliesList, setDataList };

src/pages/mypage/myPage.tsx

@@ -6,7 +6,7 @@ import Mycard from '@/components/mypage/Mycard';
 const myPage = () => {
   return (
     <>
-      <Inner>
+      <Inner style={{ marginBottom: '100px' }}>
         <Introduce />
         <Mycard />
         <MyActive />

src/styles/global.scss

@@ -145,4 +145,6 @@ body {
 
 button {
   cursor: pointer;
+  border: none;
+  background-color: inherit;
 }