fix : videolist css 변경

#2
PopFilterBubble · May 11, 2023 · 31d0ea4 · 31d0ea4
1 parent b458b7a
commit 31d0ea4
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 34 deletions.
diff --git a/src/content/index.tsx b/src/content/index.tsx
@@ -80,9 +80,10 @@ function insertCustomComponent() {
   // Create a container for your custom layout
   const container = document.createElement('div');
   container.id = 'my-custom-container'; // Assign an ID to the container
-  container.style.backgroundColor = 'white';
-  container.style.padding = '10px';
-  container.style.border = '1px solid black';
+  container.style.backgroundColor = '#FFFFEE';
+  //container.style.paddingLeft = '24px'
+  //container.style.paddingRight = '24px';
+  //container.style.border = '1px solid black';
 
   const nextElement = document.getElementById('contents'); // replace 'next-element-id' with the actual ID
 

diff --git a/src/popup/components/VideoList.tsx b/src/popup/components/VideoList.tsx
@@ -1,13 +1,18 @@
-import  { useState } from 'react';
+import { useState } from 'react';
 import { sampleVideoList } from './sample';
 
 export const VideoList = () => {
   return (
-    <div className="mx-6">
+    <div className="w-[1197px] p-4 flex overflow-x-auto mx-8 ">
       {sampleVideoList.map((video, index) => (
-        <VideoRow key={index} {...video} />
+        <div className='flex mx-3  '>
+          <VideoComponent key={index} {...video} />
+
+        </div>
+
       ))}
     </div>
+    //<VideoComponent {...sampleVideoList[0]} />
   );
 };
 
@@ -20,7 +25,14 @@ type VideoRowProps = {
   uploadedAt: string;
 };
 
-const VideoRow = ({ thumbnail, preview, title, channelName, views, uploadedAt }: VideoRowProps) => {
+const VideoComponent = ({
+  thumbnail,
+  preview,
+  title,
+  channelName,
+  views,
+  uploadedAt,
+}: VideoRowProps) => {
   const [isHovered, setIsHovered] = useState(false);
   const [hoverTimeout, setHoverTimeout] = useState<NodeJS.Timeout | null>(null);
 
@@ -39,37 +51,52 @@ const VideoRow = ({ thumbnail, preview, title, channelName, views, uploadedAt }:
   };
 
   return (
-    <div className="flex mb-2 gap-2" onMouseOver={handleMouseOver} onMouseOut={handleMouseOut}>
-      <a href="https://www.youtube.com" className="w-[168px] h-[94px] flex-shrink-0 relative">
+    <div
+      className="w-[360px] h-[332px] mb-2 gap-2 "
+      onMouseOver={handleMouseOver}
+      onMouseOut={handleMouseOut}
+    >
+      <a href="https://www.youtube.com" className="w-[356px]  flex-shrink-0 relative">
         <img
           src={thumbnail}
           alt="video thumbnail"
-          className="object-fill rounded-md transition-opacity duration-500"
+          className="object-fill rounded-[12px] transition-opacity duration-500"
         />
         <img
           src={preview}
           alt="video preview"
-          className={`object-fill rounded-md absolute top-0 left-0 transition-opacity duration-500 ${
+          className={`object-fill rounded-[12px] absolute top-0 left-0 transition-opacity duration-500 ${
             isHovered ? 'opacity-100' : 'opacity-0'
           }`}
         />
       </a>
-      <div>
-        <h3 className="text-sm font-semibold overflow-hidden line-clamp-2 mb-1 cursor-pointer">
-          {title}
-        </h3>
+
+      <div className="flex mt-3">
         <div>
-          <p className="text-xs text-[#aaaaaa] cursor-pointer">{channelName}</p>
-          <p className="text-xs text-[#aaaaaa] cursor-pointer">
-            조회수 {views} · {uploadedAt}
-          </p>
+          <img
+            id="img"
+            draggable="false"
+            className="style-scope rounded-full  mr-3"
+            alt=""
+            width="36"
+            src="https://yt3.ggpht.com/ytc/AGIKgqNY9zCJ9lqPfMA6kAvHkse3yAXIAv2pZrFQqdgK5A=s68-c-k-c0x00ffffff-no-rj"
+          />
         </div>
-      </div>
+        <div>
+          <h2 className="mb-[4px] w-[286px] text-[16px] overflow-hidden line-clamp-2 cursor-pointer">
+            {title}
+          </h2>
+          <div>
+            <p className="text-[#606060] text-[14px] cursor-pointer leading-6 mb-2" >{channelName}</p>
+            <p className="text-[#606060] text-[14px] cursor-pointer leading-5">
+              조회수 {views} · {uploadedAt}
+            </p>
+          </div>
+          </div>
+
+    </div>
     </div>
   );
 };
 
-
 export default VideoList;
-
-
diff --git a/src/popup/components/sample.ts b/src/popup/components/sample.ts
@@ -1,7 +1,7 @@
 export const sampleVideoList = [
   {
     thumbnail:
-      'https://i.ytimg.com/vi/W1CkYuJxNjo/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDKKjeISeGXM5NtFExyHwO7ezuCpQ',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/W1CkYuJxNjo/mqdefault_6s.webp?du=3000&sqp=CKTM6qEG&rs=AOn4CLA8QPimAoBpk8wrkp9P9Qhx3tDTkw',
     title:
@@ -12,7 +12,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/6njA6ncIRlk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDjcpkpUKHVI3L6ggFzQTRH_Qzp_g',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/el603TbcEiU/mqdefault_6s.webp?du=3000&sqp=CICr6qEG&rs=AOn4CLAQv51LdMbmJgWo0UDNZbo2OfUN6g',
     title: '이재명-유동규 첫 대면…유동규 “친한 사람 데려오라 했다” | 토요랭킹쇼',
@@ -22,7 +22,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/W1CkYuJxNjo/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDKKjeISeGXM5NtFExyHwO7ezuCpQ',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/W1CkYuJxNjo/mqdefault_6s.webp?du=3000&sqp=CKTM6qEG&rs=AOn4CLA8QPimAoBpk8wrkp9P9Qhx3tDTkw',
     title:
@@ -33,7 +33,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/6njA6ncIRlk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDjcpkpUKHVI3L6ggFzQTRH_Qzp_g',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/el603TbcEiU/mqdefault_6s.webp?du=3000&sqp=CICr6qEG&rs=AOn4CLAQv51LdMbmJgWo0UDNZbo2OfUN6g',
     title: '이재명-유동규 첫 대면…유동규 “친한 사람 데려오라 했다” | 토요랭킹쇼',
@@ -43,7 +43,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/W1CkYuJxNjo/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDKKjeISeGXM5NtFExyHwO7ezuCpQ',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/W1CkYuJxNjo/mqdefault_6s.webp?du=3000&sqp=CKTM6qEG&rs=AOn4CLA8QPimAoBpk8wrkp9P9Qhx3tDTkw',
     title:
@@ -54,7 +54,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/6njA6ncIRlk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDjcpkpUKHVI3L6ggFzQTRH_Qzp_g',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/el603TbcEiU/mqdefault_6s.webp?du=3000&sqp=CICr6qEG&rs=AOn4CLAQv51LdMbmJgWo0UDNZbo2OfUN6g',
     title: '이재명-유동규 첫 대면…유동규 “친한 사람 데려오라 했다” | 토요랭킹쇼',
@@ -64,7 +64,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/W1CkYuJxNjo/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDKKjeISeGXM5NtFExyHwO7ezuCpQ',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/W1CkYuJxNjo/mqdefault_6s.webp?du=3000&sqp=CKTM6qEG&rs=AOn4CLA8QPimAoBpk8wrkp9P9Qhx3tDTkw',
     title:
@@ -75,7 +75,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/6njA6ncIRlk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDjcpkpUKHVI3L6ggFzQTRH_Qzp_g',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/el603TbcEiU/mqdefault_6s.webp?du=3000&sqp=CICr6qEG&rs=AOn4CLAQv51LdMbmJgWo0UDNZbo2OfUN6g',
     title: '이재명-유동규 첫 대면…유동규 “친한 사람 데려오라 했다” | 토요랭킹쇼',
@@ -96,7 +96,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/6njA6ncIRlk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDjcpkpUKHVI3L6ggFzQTRH_Qzp_g',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/el603TbcEiU/mqdefault_6s.webp?du=3000&sqp=CICr6qEG&rs=AOn4CLAQv51LdMbmJgWo0UDNZbo2OfUN6g',
     title: '이재명-유동규 첫 대면…유동규 “친한 사람 데려오라 했다” | 토요랭킹쇼',
@@ -106,7 +106,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/W1CkYuJxNjo/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDKKjeISeGXM5NtFExyHwO7ezuCpQ',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/W1CkYuJxNjo/mqdefault_6s.webp?du=3000&sqp=CKTM6qEG&rs=AOn4CLA8QPimAoBpk8wrkp9P9Qhx3tDTkw',
     title:
@@ -117,7 +117,7 @@ export const sampleVideoList = [
   },
   {
     thumbnail:
-      'https://i.ytimg.com/vi/6njA6ncIRlk/hqdefault.jpg?sqp=-oaymwEbCKgBEF5IVfKriqkDDggBFQAAiEIYAXABwAEG&rs=AOn4CLDjcpkpUKHVI3L6ggFzQTRH_Qzp_g',
+    'https://i.ytimg.com/vi/FqPcXa_tA20/hq720.jpg?sqp=-…AFwAcABBg==&rs=AOn4CLDEt1mQT44E5yJE6f7bF5s4erOQmg',
     preview:
       'https://i.ytimg.com/an_webp/el603TbcEiU/mqdefault_6s.webp?du=3000&sqp=CICr6qEG&rs=AOn4CLAQv51LdMbmJgWo0UDNZbo2OfUN6g',
     title: '이재명-유동규 첫 대면…유동규 “친한 사람 데려오라 했다” | 토요랭킹쇼',