Merge branch 'dev' of github.com:side-project-cdmnkh/my-pokemon into Hun

side-project-pokehub · Jan 11, 2024 · a202816 · a202816
2 parents 30aadf8 + 4db1329
commit a202816
Show file tree

Hide file tree

Showing 18 changed files with 1,503 additions and 557 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,17 +12,19 @@
   },
   "dependencies": {
     "@react-icons/all-files": "^4.1.0",
-    "@toast-ui/react-editor": "^3.2.3",
     "@types/dom-to-image": "^2.6.7",
+    "@types/dompurify": "^3.0.5",
     "@types/file-saver": "^2.0.7",
     "antd": "^5.12.4",
     "axios": "^1.6.0",
     "dom-to-image": "^2.6.0",
+    "dompurify": "^3.0.6",
     "file-saver": "^2.0.5",
     "firebase": "^10.5.2",
     "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-query": "^3.39.3",
+    "react-quill": "^2.0.0",
     "react-router-dom": "^6.17.0",
     "sass": "^1.69.5",
     "uuid": "^9.0.1",

diff --git a/src/components/community/CommunityCardItem.tsx b/src/components/community/CommunityCardItem.tsx
@@ -1,12 +1,27 @@
-import styles from './CommunityCardItem.module.scss';
-import { MdRemoveRedEye } from '@react-icons/all-files/md/MdRemoveRedEye';
-import { IoIosHeart } from '@react-icons/all-files/io/IoIosHeart';
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { storage } from '@/firebase';
+import { useQuery } from 'react-query';
 import { useNavigate } from 'react-router-dom';
+import styles from './CommunityCardItem.module.scss';
 import { ConvertTime } from '@/lib/util/convertTime';
+import { ref, listAll, getDownloadURL } from 'firebase/storage';
+import { IoIosHeart } from '@react-icons/all-files/io/IoIosHeart';
+import { MdRemoveRedEye } from '@react-icons/all-files/md/MdRemoveRedEye';
+
+// eslint-disable-next-line react-refresh/only-export-components
+export const fetchProfileImages = async (userId: any) => {
+  const fileRef = ref(storage, `${userId}`);
+  const result = await listAll(fileRef);
+  const valData = await Promise.all(result.items.map(async (item) => await getDownloadURL(item)));
+  return valData;
+};
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const CommunityCardItem = ({ data }: any) => {
   const navigate = useNavigate();
+  const { data: imageUrl }: any = useQuery(['profileImages', data.userId], () => fetchProfileImages(data.userId));
+
+  const likeCount = data.likes ? data.likes.length : 0;
+
   const handleToDetail = () => {
     navigate(`/community/detail/${data.id}`);
   };
@@ -20,7 +35,7 @@ const CommunityCardItem = ({ data }: any) => {
         <div className={styles.titleItem}>{data.title}</div>
         <div className={styles.userBox}>
           <div className={styles.usersImg}>
-            {/* <img src={data.userImg} /> */}
+            <img src={imageUrl} />
           </div>
           <div>{data.userName}</div>
         </div>
@@ -29,7 +44,7 @@ const CommunityCardItem = ({ data }: any) => {
           <div className={styles.likesViewsBox}>
             <div className={styles.like}>
               <IoIosHeart />
-              {data.likes}
+              {likeCount}
             </div>
             <div className={styles.view}>
               <MdRemoveRedEye />

diff --git a/src/components/community/CommunityCardList.tsx b/src/components/community/CommunityCardList.tsx
@@ -1,12 +1,12 @@
-import { useState, useEffect } from 'react';
+import { Pagination } from 'antd';
+import Search from 'antd/es/input/Search';
 import { Button } from '../button/Button';
+import { useState, useEffect } from 'react';
+import useUserStore from '@/store/useUsersStore';
 import CommunityCardItem from './CommunityCardItem';
 import styles from './CommunityCardList.module.scss';
 import { Link, useNavigate } from 'react-router-dom';
-import { Pagination } from 'antd';
 import useCommunityDataList from '@/hook/useCommunityDataList';
-import useUserStore from '@/store/useUsersStore';
-import Search from 'antd/es/input/Search';
 
 interface CommunityData {
   id: string;
@@ -33,6 +33,7 @@ const CommunityCardList = () => {
   }, [dataList]);
 
   const CategoryList = [
+    '전체',
     '자유게시판',
     '공지사항',
     '질문/답변',
@@ -44,9 +45,16 @@ const CommunityCardList = () => {
   const setTabHandler = (index: number) => {
     setCurrentTab(index);
     const selectedCategory = CategoryList[index];
-    const filteredData = communityList.filter(
-      (item) => item.category === selectedCategory,
-    );
+    let filteredData;
+
+    if (selectedCategory === '전체') {
+      filteredData = communityList;
+    } else {
+      filteredData = communityList.filter(
+        (item) => item.category === selectedCategory,
+      );
+    }
+
     setFilteredItems(filteredData);
     setCurrentPage(1);
   };

diff --git a/src/components/community/CommunityComment.module.scss b/src/components/community/CommunityComment.module.scss
@@ -1,3 +1,40 @@
+.border {
+  margin-top: 30px;
+  border-top: 1px solid #cfcfcf;
+}
+
+.heartButton {
+  width: 100px;
+  height: 30px;
+  display: flex;
+  cursor: pointer;
+  color: #ffffff;
+  margin: 50px auto;
+  align-items: center;
+  border-radius: 50px;
+  justify-content: center;
+  border: 1px solid #ff5050;
+  svg {
+    font-size: 18px;
+    color: #ff5050;
+  }
+  .heartText {
+    margin-left: 4px;
+    font-size: 14px;
+    padding-top: 3px;
+    color: #ff5050;
+  }
+}
+.Outline {
+  background-color: #ff5050;
+  svg {
+    color: #ffffff;
+  }
+  .heartText {
+    color: #ffffff;
+  }
+}
+
 .container {
   margin: 40px 34px;
 }
@@ -99,3 +136,8 @@
     height: 100%;
   }
 }
+
+.ButtonStyleBox {
+  display: flex;
+  justify-content: end;
+}