🎨 Design: myprofile thunder / board swiper로 구현

OZ-Coding-School · Sep 7, 2024 · e71daf1 · e71daf1
1 parent 8329986
commit e71daf1
Show file tree

Hide file tree

Showing 5 changed files with 214 additions and 120 deletions.
diff --git a/src/components/myprofile/BoardList.tsx b/src/components/myprofile/BoardList.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import BoardCard from '../../components/board/BoardCard.tsx';
+
+interface BoardItem {
+  uuid: string;
+  category_name: string;
+  title: string;
+  content: string;
+  hits: number;
+  review_image_url: string;
+  created_at: string;
+  comment_count: number;
+}
+
+interface BoardListProps {
+  boardItems: BoardItem[];
+  type: string;
+}
+
+const BoardList = ({ boardItems, type }: BoardListProps) => {
+  return boardItems.length === 0 ? (
+    <div className="flex h-full w-full flex-col items-center justify-center py-8">
+      <p className="mt-10 text-[24px] text-[#666666] xs:text-[20px]">{`선택된 글 목록(${type})이 없어요`}</p>
+      <img src="/images/CryingEgg.svg" className="inline-block h-[40vh]" alt="Crying Egg" />
+      {type === '작성한 글' && (
+        <Link
+          to={'/board/boardpost'}
+          className="flex h-[42px] w-[90%] items-center justify-center rounded-[8px] bg-primary font-bold text-white">
+          게시글 만들기
+        </Link>
+      )}
+    </div>
+  ) : (
+    boardItems.map((item) => (
+      <BoardCard
+        key={item.uuid}
+        id={item.uuid}
+        category={item.category_name}
+        title={item.title}
+        content={item.content}
+        hits={item.hits}
+        review_image_url={item.review_image_url}
+        createdAt={item.created_at}
+        commentLength={item.comment_count}
+      />
+    ))
+  );
+};
+
+export default BoardList;
diff --git a/src/components/myprofile/PostNav.tsx b/src/components/myprofile/PostNav.tsx
@@ -1,12 +1,12 @@
-import { useState, useRef, useEffect } from 'react';
+import { useRef, useEffect } from 'react';
 
 interface List {
   list: string[];
-  setSelectedItem: (value: string) => void;
+  setSelectedItem: (index: number) => void;
+  selectedIndex: number; // Add this prop
 }
 
-const PostNav: React.FC<List> = ({ list, setSelectedItem }) => {
-  const [selectedIndex, setSelectedIndex] = useState(0);
+const PostNav: React.FC<List> = ({ list, setSelectedItem, selectedIndex }) => {
   const indicatorRef = useRef<HTMLSpanElement | null>(null);
   const buttonRefs = useRef<(HTMLSpanElement | null)[]>([]);
 
@@ -21,25 +21,24 @@ const PostNav: React.FC<List> = ({ list, setSelectedItem }) => {
     }
   }, [selectedIndex]);
 
-  const handleClick = (item: string, index: number) => {
-    setSelectedIndex(index);
-    setSelectedItem(item);
+  const handleClick = (index: number) => {
+    setSelectedItem(index);
   };
 
   return (
-    <div className="sticky top-[72px] z-10 mx-[16px] flex justify-evenly border-b-[1px] border-solid border-[#DBDBDB] bg-white xs:top-[52px]">
+    <div className="sticky top-[72px] z-10 flex justify-evenly border-b-[1px] border-solid border-[#DBDBDB] bg-white xs:top-[52px]">
       {list.map((item, index) => (
         <span
           key={item}
           ref={(el) => (buttonRefs.current[index] = el)}
           className={`relative flex h-[63px] w-[130px] grow cursor-pointer items-center justify-center text-[18px] duration-300 xs:h-[53px] xs:w-[120px] xs:text-[16px] ${
             selectedIndex === index ? 'font-bold text-black' : 'text-gray-600'
           } `}
-          onClick={() => handleClick(item, index)}>
+          onClick={() => handleClick(index)}>
           {item}
         </span>
       ))}
-      <span ref={indicatorRef} className="absolute bottom-0 h-[3px] duration-300" />
+      <span ref={indicatorRef} className="absolute bottom-0 h-[3px] transition-all duration-500 ease-in-out" />
     </div>
   );
 };

diff --git a/src/components/myprofile/ThunderList.tsx b/src/components/myprofile/ThunderList.tsx
@@ -0,0 +1,50 @@
+import { Link } from 'react-router-dom';
+import ThunderCard from '../../components/thunder/ThunderCard';
+
+interface ThunderItem {
+  uuid: string;
+  title: string;
+  payment_method_name: string;
+  age_group_name: string;
+  gender_group_name: string;
+  meeting_time: string;
+  meeting_image_url: string;
+  description: string;
+}
+
+interface ThunderListProps {
+  thunderItems: ThunderItem[];
+  type: string;
+}
+
+const ThunderList = ({ thunderItems, type }: ThunderListProps) => {
+  return thunderItems.length === 0 ? (
+    <div className="flex h-full w-full flex-col items-center justify-center py-8">
+      <p className="mt-10 text-[24px] text-[#666666] xs:text-[20px]">{`선택된 글 목록(${type})이 없어요`}</p>
+      <img src="/images/CryingEgg.svg" className="inline-block h-[40vh]" alt="Crying Egg" />
+      {type === '작성한 글' && (
+        <Link
+          to={'/thunder/thunderpost'}
+          className="flex h-[42px] w-[90%] items-center justify-center rounded-[8px] bg-primary font-bold text-white">
+          게시글 만들기
+        </Link>
+      )}
+    </div>
+  ) : (
+    thunderItems.map((item) => (
+      <ThunderCard
+        key={item.uuid}
+        id={item.uuid}
+        meeting_image_url={item.meeting_image_url}
+        description={item.description}
+        paymentMethod={item.payment_method_name}
+        appointmentTime={item.meeting_time}
+        title={item.title}
+        genderGroup={item.gender_group_name}
+        ageGroup={item.age_group_name}
+      />
+    ))
+  );
+};
+
+export default ThunderList;
diff --git a/src/pages/myprofile/MyProfileBoard.tsx b/src/pages/myprofile/MyProfileBoard.tsx
@@ -1,10 +1,11 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import { Swiper, SwiperSlide } from 'swiper/react';
 import PostNav from '../../components/myprofile/PostNav';
-import BoardCard from '../../components/board/BoardCard.tsx';
-import { Link, useNavigate } from 'react-router-dom';
 import { authInstance } from '../../api/util/instance.ts';
 import Loading from '../../components/common/Loading.tsx';
 import { getCookie } from '../../utils/cookie.ts';
+import { useNavigate } from 'react-router-dom';
+import BoardList from '../../components/myprofile/BoardList.tsx';
 
 interface BoardItem {
   uuid: string;
@@ -18,10 +19,15 @@ interface BoardItem {
 }
 
 const MyProfileBoard = () => {
-  const [selectedItem, setSelectedItem] = useState<string>('작성한 글');
-  const [boardList, setBoardList] = useState<BoardItem[]>([]);
+  const [swiperIndex, setSwiperIndex] = useState<number>(0);
+  const [boardData, setBoardData] = useState<{ hosted: BoardItem[]; commented: BoardItem[]; liked: BoardItem[] }>({
+    hosted: [],
+    commented: [],
+    liked: [],
+  });
   const [isLoading, setIsLoading] = useState(true);
   const navigate = useNavigate();
+  const swiperRef = useRef<any>(null);
 
   useEffect(() => {
     if (!getCookie('refresh')) {
@@ -31,61 +37,53 @@ const MyProfileBoard = () => {
 
   useEffect(() => {
     setIsLoading(true);
-    if (selectedItem === '작성한 글') {
-      authInstance.get('/api/profile/hosted/reviews').then((res) => {
-        setBoardList(res.data);
-        setIsLoading(false);
-      });
-    } else if (selectedItem === '댓글') {
-      authInstance.get('/api/profile/commented/reviews').then((res) => {
-        setBoardList(res.data);
-        setIsLoading(false);
-      });
-    } else {
-      authInstance.get('/api/profile/liked/reviews').then((res) => {
-        setBoardList(res.data);
-        setIsLoading(false);
+    Promise.all([
+      authInstance.get('/api/profile/hosted/reviews'),
+      authInstance.get('/api/profile/commented/reviews'),
+      authInstance.get('/api/profile/liked/reviews'),
+    ]).then(([hostedRes, commentedRes, likedRes]) => {
+      setBoardData({
+        hosted: hostedRes.data,
+        commented: commentedRes.data,
+        liked: likedRes.data,
       });
+      setIsLoading(false);
+    });
+  }, []);
+
+  const handleSlideChange = (swiper: any) => {
+    setSwiperIndex(swiper.activeIndex);
+  };
+
+  const handleNavClick = (index: number) => {
+    if (swiperRef.current && swiperRef.current.swiper) {
+      swiperRef.current.swiper.slideTo(index);
     }
-  }, [selectedItem]);
+    setSwiperIndex(index);
+  };
 
   return (
     <>
-      <PostNav list={['작성한 글', '댓글', '좋아요']} setSelectedItem={setSelectedItem} />
+      <PostNav list={['작성한 글', '댓글', '좋아요']} setSelectedItem={handleNavClick} selectedIndex={swiperIndex} />
       {isLoading ? (
         <Loading />
       ) : (
-        <div className="p-4 pt-0">
-          {boardList.length === 0 ? (
-            <div className="flex w-full flex-col items-center justify-evenly bg-[#EEEEEE] py-8">
-              <p className="mt-10 text-[24px] text-[#666666] xs:text-[20px]">
-                {`선택된 글 목록(${selectedItem})이 없어요`}
-              </p>
-              <img src="/images/CryingEgg.svg" className="inline-block h-[40vh]" alt="Crying Egg" />
-              {selectedItem === '작성한 글' ? (
-                <Link
-                  to={'/board/boardpost'}
-                  className="flex h-[42px] w-[90%] items-center justify-center rounded-[8px] bg-primary font-bold text-white">
-                  게시글 만들기
-                </Link>
-              ) : null}
-            </div>
-          ) : (
-            boardList?.map((item) => (
-              <BoardCard
-                key={item.uuid}
-                id={item.uuid}
-                category={item.category_name}
-                title={item.title}
-                content={item.content}
-                hits={item.hits}
-                review_image_url={item.review_image_url}
-                createdAt={item.created_at}
-                commentLength={item.comment_count}
-              />
-            ))
-          )}
-        </div>
+        <Swiper
+          className="h-[calc(100vh-136px)] xs:h-[calc(100vh-106px)]"
+          onSlideChange={handleSlideChange}
+          slidesPerView={1}
+          spaceBetween={50}
+          ref={swiperRef}>
+          <SwiperSlide>
+            <BoardList boardItems={boardData.hosted} type="작성한 글" />
+          </SwiperSlide>
+          <SwiperSlide>
+            <BoardList boardItems={boardData.commented} type="댓글" />
+          </SwiperSlide>
+          <SwiperSlide>
+            <BoardList boardItems={boardData.liked} type="좋아요" />
+          </SwiperSlide>
+        </Swiper>
       )}
     </>
   );