Merge pull request #77 from SystemConsultantGroup/bug/76-EditVidPic

[FIX] 비디오카드 수정

src/components/common/VideoCard/VideoCard.story.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { Meta, StoryFn } from "@storybook/react";
 import { VideoCard } from "./VideoCard";
 
@@ -7,11 +7,22 @@ export default {
   component: VideoCard,
 } as Meta<typeof VideoCard>;
 
-const Template: StoryFn<typeof VideoCard> = (args) => <VideoCard {...args} />;
+const Template: StoryFn<typeof VideoCard> = (args) => {
+  // Use local state for the 'bookmarked' prop in the Storybook environment
+  const [bookmarked, setBookmarked] = useState(args.bookmarked);
+
+  // Handler for toggling bookmark state
+  const handleBookmarkToggle = () => {
+    setBookmarked((prev) => !prev);
+  };
+
+  return <VideoCard {...args} bookmarked={bookmarked} onBookmarkToggle={handleBookmarkToggle} />;
+};
 
 export const Default = Template.bind({});
 Default.args = {
   title: "뤼튼 테크놀로지스",
   subtitle: "현지웅 엔지니어님",
   videoUrl: "https://www.youtube.com/embed/OBsR6UumFdc",
+  bookmarked: false, // Default to not bookmarked
 };

src/components/common/VideoCard/VideoCard.test.tsx

@@ -3,11 +3,16 @@ import { render, screen, fireEvent } from "@testing-library/react";
 import "@testing-library/jest-dom/extend-expect";
 import { VideoCard } from "./VideoCard";
 
+// Mock function for onBookmarkToggle
+const mockOnBookmarkToggle = jest.fn();
+
 describe("VideoCard", () => {
   const defaultProps = {
     title: "뤼튼 테크놀로지스",
     subtitle: "현지웅 엔지니어님",
     videoUrl: "https://www.youtube.com/embed/OBsR6UumFdc",
+    bookmarked: false,
+    onBookmarkToggle: mockOnBookmarkToggle,
   };
 
   test("renders VideoCard component", () => {
@@ -16,13 +21,44 @@ describe("VideoCard", () => {
     expect(screen.getByText(defaultProps.subtitle)).toBeInTheDocument();
   });
 
-  test("toggles bookmark state on click", () => {
+  test("calls onBookmarkToggle when bookmark icon is clicked", () => {
     render(<VideoCard {...defaultProps} />);
-    const bookmarkIcon = screen.getByRole("button");
-    expect(bookmarkIcon).toBeInTheDocument();
+    const bookmarkIcon = screen.getByTestId("bookmark-icon");
     fireEvent.click(bookmarkIcon);
-    expect(screen.getByRole("button")).toContainHTML("#36618E");
-    fireEvent.click(bookmarkIcon);
-    expect(screen.getByRole("button")).toContainHTML("none");
+    expect(mockOnBookmarkToggle).toHaveBeenCalledTimes(1);
+  });
+
+  test("renders bookmarked icon when bookmarked prop is true", () => {
+    render(<VideoCard {...defaultProps} bookmarked={true} />);
+    const bookmarkIcon = screen.getByTestId("bookmark-icon");
+
+    // Ensure bookmarkIcon is found
+    expect(bookmarkIcon).toBeInTheDocument();
+
+    // Ensure the SVG path is found
+    const path = bookmarkIcon.querySelector("svg path");
+    expect(path).toBeInTheDocument();
+
+    // Ensure the fill attribute is as expected
+    if (path) {
+      expect(path.getAttribute("fill")).toBe("#36618E");
+    }
+  });
+
+  test("renders un-bookmarked icon when bookmarked prop is false", () => {
+    render(<VideoCard {...defaultProps} bookmarked={false} />);
+    const bookmarkIcon = screen.getByTestId("bookmark-icon");
+
+    // Ensure bookmarkIcon is found
+    expect(bookmarkIcon).toBeInTheDocument();
+
+    // Ensure the SVG path is found
+    const path = bookmarkIcon.querySelector("svg path");
+    expect(path).toBeInTheDocument();
+
+    // Ensure the fill attribute is as expected
+    if (path) {
+      expect(path.getAttribute("fill")).toBe("none");
+    }
   });
 });

src/components/common/VideoCard/VideoCard.tsx

@@ -1,30 +1,22 @@
-import React, { useState, useEffect } from "react";
+import React from "react";
 import { Group, Button } from "@mantine/core";
 import styles from "./VideoCard.module.css";
 
 export interface VideoCardProps {
   title: string;
   subtitle: string;
   videoUrl: string;
-  bookmarked?: boolean;
+  bookmarked: boolean;
+  onBookmarkToggle: () => void;
 }
 
 export const VideoCard: React.FC<VideoCardProps> = ({
   title,
   subtitle,
   videoUrl,
-  bookmarked: initialBookmarked = false,
+  bookmarked,
+  onBookmarkToggle,
 }) => {
-  const [bookmarked, setBookmarked] = useState(initialBookmarked);
-
-  useEffect(() => {
-    setBookmarked(initialBookmarked);
-  }, [initialBookmarked]);
-
-  const handleBookmarkClick = () => {
-    setBookmarked(!bookmarked);
-  };
-
   return (
     <div className={styles.container}>
       <div className={styles.videoFrame}>
@@ -43,7 +35,7 @@ export const VideoCard: React.FC<VideoCardProps> = ({
         <div className={styles.subtitle}>{subtitle}</div>
 
         <Group justify="space-between">
-          <div className={styles.bookmarkIcon} onClick={handleBookmarkClick}>
+          <div className={styles.bookmarkIcon} onClick={onBookmarkToggle}>
             {bookmarked ? (
               /* bookmarked icon */
               <svg