Merge branch 'main' into dev

jungle-FullStop · Feb 13, 2024 · b18ee87 · b18ee87
2 parents 27ee051 + 9d8d074
commit b18ee87
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 41 deletions.
diff --git a/src/components/Board/Slider.tsx b/src/components/Board/Slider.tsx
@@ -47,50 +47,70 @@ function SliderCard() {
       </div>
     );
   }
- 
+
   const settings = {
     dots: true,
     infinite: false,
     speed: 1000,
     slidesToShow: 3,
     slidesToScroll: 3,
     arrow: true,
-    touchThreshold : 100,
+    touchThreshold: 100,
     // rtl: true,
     beforeChange: handleBeforeChange,
     afterChange: handleAfterChange,
   };
   return (
-    <div className="slider-container">
-      <Slider {...settings}>
-        { data.boards.length > 0
-          ?  (data.boards.map((boards: any, items: number) => {
-              return (
-                <div
-                  className="TIL shadow-base"
-                  key={items}
-                  onClick={() => {
-                    navigate(`/board/${boards.id}`);
-                  }}
-                >
-                  <CardDefault
-                    cardTitle={boards.title}
-                    cardContents={boards.contents}
-                    cardDate={boards.timestamp}
-                    userImage={data.user.profileImage}
-                    userName={data.user.name}
-                  />
-                </div>
-              );
-            }))
-          :(
-            <div className="mx-auto flex h-[500px] flex-col justify-center gap-y-8">
-              <p className="text-5xl font-bold">작성하신 TIL이 없어요.</p>
-              <WriteTIL color={'yellow'} />
+    <>
+      {data.boards.length >= 3 ? (
+        <div className="slider-container">
+          <Slider {...settings}>
+            {data.boards.map((board: any, index: number) => (
+              <div
+                className="TIL shadow-base"
+                key={index}
+                onClick={() => {
+                  navigate(`/board/${board.id}`);
+                }}
+              >
+                <CardDefault
+                  cardTitle={board.title}
+                  cardContents={board.contents}
+                  cardDate={board.timestamp}
+                  userImage={data.user.profileImage}
+                  userName={data.user.name}
+                />
+              </div>
+            ))}
+          </Slider>
+        </div>
+      ) : data.boards.length > 0 ? (
+        <div className="mx-auto flex w-[80%] justify-evenly ">
+          {data.boards.map((board: any, index: number) => (
+            <div
+              className="TIL shadow-base"
+              key={index}
+              onClick={() => {
+                navigate(`/board/${board.id}`);
+              }}
+            >
+              <CardDefault
+                cardTitle={board.title}
+                cardContents={board.contents}
+                cardDate={board.timestamp}
+                userImage={data.user.profileImage}
+                userName={data.user.name}
+              />
             </div>
-          )}
-      </Slider>
-    </div>
+          ))}
+        </div>
+      ) : (
+        <div className="mx-auto flex h-[500px] flex-col justify-center gap-y-8">
+          <p className="text-5xl font-bold">작성하신 TIL이 없어요.</p>
+          <WriteTIL color={'yellow'} />
+        </div>
+      )}
+    </>
   );
 }
 

diff --git a/src/components/Grass/UserGrass.tsx b/src/components/Grass/UserGrass.tsx
@@ -1,19 +1,22 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 export const UserGrass = (props: any) => {
   const [showToolTip, setShowToolTip] = useState(false);
   const navigate = useNavigate();
 
+
   const grassType = (count: number) => {
     switch (count) {
       case 1:
-        return 'bg-grass bg-contain';
+        return 'bg-grass bg-contain ';
       default:
         return 'bg-noGrass bg-contain';
     }
   };
 
+
+
   return (
     <div
       className="flex cursor-pointer whitespace-pre  "
@@ -23,7 +26,7 @@ export const UserGrass = (props: any) => {
       onMouseLeave={() => setShowToolTip(false)}
     >
       <div
-        className={`flex-grow rounded ${props.date !== '0' ? grassType(props.count) : 'bg-grassColor'} ${props.iter % 2 == 0 && 'scale-x-[-1]'}`}
+        className={`flex-grow rounded  ${props.date !== '0' ? grassType(props.count) : 'bg-grassColor'} ${props.iter % 2 == 0 && 'scale-x-[-1]'}`}
         onClick={() => {
           if (props.count >= 1) {
             navigate(`/board/${props.pageId}`);

diff --git a/src/globals.css b/src/globals.css
@@ -164,6 +164,7 @@
   }
 }
 
+
 .card {
   position: relative;
   transition: transform 1.2s;

diff --git a/src/hooks/useGetUserGrass.ts b/src/hooks/useGetUserGrass.ts
@@ -10,7 +10,7 @@ const today = new Date();
 export const useGetUserGrass = () => {
   const [, setTodayWrite] = useRecoilState(todayState);
 
-  const [TilData, setTilDta] = useState<TIL[]>(() => {
+  const [TilData, setTilData] = useState<TIL[]>(() => {
     return dateRange.map((item) => {
       return {
         date: item,
@@ -56,7 +56,7 @@ export const useGetUserGrass = () => {
           }
         }
       }
-      setTilDta(newTILData);
+      setTilData(newTILData);
       console.log(TilData);
     } catch (error) {
       console.log('Error fetching data:', error);

diff --git a/src/pages/Board.tsx b/src/pages/Board.tsx
@@ -7,7 +7,7 @@ export const Board = () => {
     <>
       <div className="main-container">
         <NavBar></NavBar>
-        <div className="flex h-full items-center">
+        <div className="flex w-full h-full mx-auto items-center">
           <SliderCard />
         </div>
       <Footer></Footer>

diff --git a/src/pages/BoardDeTail.tsx b/src/pages/BoardDeTail.tsx
@@ -5,6 +5,7 @@ import { useFindBoardDetail } from '@hooks/Board/useFindBoardDetail.tsx';
 import teamspartaAd from '@assets/image/teamspartaAd.png';
 import { Footer } from '@/components/Common/Footer';
 import { useParams } from 'react-router-dom';
+import { Setting } from '@/components/Common/Setting';
 
 export const BoardDetail = () => {
   const { boardId } = useParams();
@@ -67,20 +68,28 @@ export const BoardDetail = () => {
             />
           </div>
           <div>
-            <p className='text-lg'> 2024년 2월 11일 </p>
+            <p className="text-lg"> 2024년 2월 11일 </p>
           </div>
           <div className="ml-auto font-bold">
-            <p className='text-lg'>  작성 {beforeTime}</p>    
+            <p className="text-lg"> 작성 {beforeTime}</p>
           </div>
         </div>
-        <img src={teamspartaAd} className='mt-10 mb-20'></img>
+        <img
+          src={teamspartaAd}
+          alt={'광고'}
+          className={'mb-10 mt-10 cursor-pointer rounded-lg w-full'}
+          onClick={() => {
+            window.open('https://spartacodingclub.kr/');
+          }}
+        ></img>
       </div>
       <div className="mx-auto w-[60%]">
         <div data-color-mode="light ">
           <MDEditor.Markdown source={data.board.contents} style={{ fontSize: '23px' }} />
         </div>
       </div>
-      <div className='mb-10 mt-10'></div>
+      <div className="mb-10 mt-10"></div>
+      <Setting />
       <Footer></Footer>
     </div>
   );
-Original file line number
+Diff line change
@@ Expand Up / @@ -164,6 +164,7 @@ @@
       }
     }
     .card {
       position: relative;
       transition: transform 1.2s;
@@ Expand Down @@