feature-064: 카드 컴포넌트 2차 리팩토링

teamViNO · Feb 13, 2024 · f20422f · f20422f
1 parent 4a97622
commit f20422f
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 56 deletions.
diff --git a/src/components/Home/InsightVideos.tsx b/src/components/Home/InsightVideos.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { InsightVideosContainer } from '@/styles/HomepageStyle';
 import Card from '../category/Card';
 import { IVideoProps } from 'types/videos';
+import { CardContainer } from '@/styles/category/Card.style';
 
 interface InsightVideosProps {
   username: string;
@@ -27,11 +28,16 @@ const InsightVideos: React.FC<InsightVideosProps> = ({
           </h4>
         </div>
         <div className="insight-videos">
-          <Card
-            videos={categoryItems}
-            checkedVideos={checkedItems}
-            setCheckedVideos={setCheckedItems}
-          />
+          <CardContainer>
+            {categoryItems.map((video) => (
+              <Card
+                mode="recommend"
+                video={video}
+                checkedVideos={checkedItems}
+                setCheckedVideos={setCheckedItems}
+              />
+            ))}
+          </CardContainer>
         </div>
       </div>
     </InsightVideosContainer>

diff --git a/src/components/category/Card.tsx b/src/components/category/Card.tsx
@@ -1,21 +1,23 @@
-import React, { useEffect } from 'react';
+import React, { useState } from 'react';
 import * as CardStyles from '@/styles/category/Card.style';
 import VideoTag from '../common/videoTag';
 import { IVideoProps } from 'types/videos';
 import { CategorySelectBox } from '../SummaryPage/SummaryDetailBox/CategorySelectBox';
 
 interface ICardProps {
-  videos: IVideoProps[];
+  mode: 'default' | 'category' | 'recommend';
+  video: IVideoProps;
   checkedVideos: number[];
   setCheckedVideos: (value: number[]) => void;
 }
 
 const Card: React.FC<ICardProps> = ({
-  videos,
+  mode = 'default',
+  video,
   checkedVideos,
   setCheckedVideos,
 }) => {
-  useEffect(() => {}, [checkedVideos]);
+  const [isOpen, setIsOpen] = useState(false);
 
   const handleCheckBox = (videoId: number) => {
     if (checkedVideos.includes(videoId)) {
@@ -25,48 +27,44 @@ const Card: React.FC<ICardProps> = ({
     }
   };
   return (
-    <CardStyles.Container>
-      {videos.map((video) => (
-        <CardStyles.Wrap key={`${video.title}-wrap`}>
-          <CardStyles.Image source={video.image}>
-            <CardStyles.CheckBoxWrap
-              className={checkedVideos.length > 0 ? 'activated' : ''}
-            >
-              <CardStyles.CheckBox
-                type="checkbox"
-                checked={checkedVideos.includes(video.video_id)}
-                onChange={() => handleCheckBox(video.video_id)}
-              />
-            </CardStyles.CheckBoxWrap>
-          </CardStyles.Image>
-
-          <CardStyles.Content
-            to={`/summary/${video.video_id}`}
-            key={`${video.title}-card-content`}
+    <CardStyles.Wrap
+      onMouseEnter={() => setIsOpen(true)}
+      onMouseLeave={() => setIsOpen(false)}
+    >
+      <CardStyles.Image source={video.image}>
+        {mode === 'category' && (
+          <CardStyles.CheckBoxWrap
+            className={checkedVideos.length > 0 ? 'activated' : ''}
           >
-            <CardStyles.Title key={`${video.title}`}>
-              {video.title}
-            </CardStyles.Title>
-            <CardStyles.Summary key={`${video.description}`}>
-              {video.description}
-            </CardStyles.Summary>
-            <CardStyles.ChipWrap key={`${video.title}-chip-wrap`}>
-              {video.tag.map((tag) => (
-                <VideoTag
-                  content={`# ${tag.name}`}
-                  color={'gray400'}
-                  typography="Caption1"
-                  key={`${video.title}-${tag.name}`}
-                />
-              ))}
-            </CardStyles.ChipWrap>
-          </CardStyles.Content>
-          <CardStyles.DropdownWrap>
-            <CategorySelectBox />
-          </CardStyles.DropdownWrap>
-        </CardStyles.Wrap>
-      ))}
-    </CardStyles.Container>
+            <CardStyles.CheckBox
+              type="checkbox"
+              checked={checkedVideos.includes(video.video_id)}
+              onChange={() => handleCheckBox(video.video_id)}
+            />
+          </CardStyles.CheckBoxWrap>
+        )}
+      </CardStyles.Image>
+
+      <CardStyles.Content to={`/summary/${video.video_id}`}>
+        <CardStyles.Title>{video.title}</CardStyles.Title>
+        <CardStyles.Summary>{video.description}</CardStyles.Summary>
+        <CardStyles.ChipWrap>
+          {video.tag.map((tag) => (
+            <VideoTag
+              content={`# ${tag.name}`}
+              color={'gray400'}
+              typography="Caption1"
+              key={tag.name}
+            />
+          ))}
+        </CardStyles.ChipWrap>
+      </CardStyles.Content>
+      {isOpen && (
+        <CardStyles.DropdownWrap>
+          <CategorySelectBox />
+        </CardStyles.DropdownWrap>
+      )}
+    </CardStyles.Wrap>
   );
 };
 

diff --git a/src/pages/CategoryPage.tsx b/src/pages/CategoryPage.tsx
@@ -15,6 +15,7 @@ import EmptyCard from '@/components/category/EmptyCard';
 import { deleteVideos, getRecentVideos, getVideoById } from '@/apis/videos';
 import { IVideoProps } from 'types/videos';
 import { sortVideos } from '@/utils/sortVideos';
+import { CardContainer } from '@/styles/category/Card.style';
 
 const CategoryPage = () => {
   const params = useParams();
@@ -151,11 +152,17 @@ const CategoryPage = () => {
         <EmptyCard />
       )}
       {sortedVideos.length > 0 && (
-        <Card
-          videos={sortedVideos}
-          checkedVideos={checkedVideos}
-          setCheckedVideos={setCheckedVideos}
-        />
+        <CardContainer>
+          {sortedVideos.map((video) => (
+            <Card
+              mode="category"
+              video={video}
+              checkedVideos={checkedVideos}
+              setCheckedVideos={setCheckedVideos}
+              key={video.category_id}
+            />
+          ))}
+        </CardContainer>
       )}
     </CategoryPageStyles.Container>
   );

diff --git a/src/styles/category/Card.style.ts b/src/styles/category/Card.style.ts
@@ -6,6 +6,8 @@ import { Link } from 'react-router-dom';
 
 export const CheckBoxWrap = styled.div`
   background-color: rgba(0, 0, 0, 0.5);
+  border-radius: 16px 16px 0 0;
+
   display: none;
 
   flex-direction: row-reverse;
@@ -42,7 +44,7 @@ export const CheckBox = styled.input`
   }
 `;
 
-export const Container = styled.div`
+export const CardContainer = styled.div`
   display: grid;
   grid-template-columns: repeat(3, auto);
   column-gap: 20px;
@@ -93,6 +95,7 @@ export const ChipWrap = styled.div`
 
 export const Image = styled.div<{ source: string }>`
   background-image: url(${(props) => props.source});
+  border-radius: 16px 16px 0 0;
   width: 290px;
   height: 163px;
   background-size: 100%;