Merge pull request #7 from team-nerd-planet/feature/woowon

feat: thumbnail 작업

components/bottomSheet/index.tsx

@@ -147,12 +147,13 @@ const BottomSheet = () => {
             {open ? "괜찮아요" : "구독하기"}
           </button>
           <div className="absolute w-full h-full flex justify-center items-center transition-all">
-            <svg
+            <Svg
               width="24"
               height="24"
               viewBox="0 0 24 24"
               fill="none"
               xmlns="http://www.w3.org/2000/svg"
+              onClick={() => setOpen(!open)}
             >
               {open ? (
                 <path
@@ -165,7 +166,7 @@ const BottomSheet = () => {
                   fill="#F8F9FE"
                 />
               )}
-            </svg>
+            </Svg>
           </div>
         </div>
         <Box
@@ -385,3 +386,12 @@ const Content = styled.div`
   color: #f8f9fe;
   position: relative;
 `;
+
+const Svg = styled.svg`
+  cursor: pointer;
+  transition: all 0.3s ease-in-out;
+
+  &:hover {
+    opacity: 0.8;
+  }
+`;

components/feed/feed-item/feed-thumbnail.tsx

@@ -13,7 +13,7 @@ type FeedThumbnailProps = {
 const FeedThumbnail = ({ thumbnail, title }: FeedThumbnailProps) => {
   const [isError, setIsError] = useState(false);
 
-  const src = isError || !thumbnail ? "/images/feed-thumbnail.png" : thumbnail;
+  const src = isError || !thumbnail ? null : thumbnail;
 
   useEffect(() => {
     document.getElementById("hovering")?.addEventListener("mouseenter", () => {
@@ -26,17 +26,23 @@ const FeedThumbnail = ({ thumbnail, title }: FeedThumbnailProps) => {
 
   return (
     <div id="hovering" className="relative w-[310px] h-[180px]">
-      <Image
-        className="rounded-[10px] object-cover"
-        src={src}
-        alt={`Thumbnail for ${title}`}
-        width={310}
-        height={180}
-        onError={() => {
-          setIsError(true);
-        }}
-        unoptimized
-      />
+      {src !== null ? (
+        <Image
+          className="rounded-[10px] object-cover"
+          src={src}
+          alt={`Thumbnail for ${title}`}
+          width={310}
+          height={180}
+          onError={() => {
+            setIsError(true);
+          }}
+          unoptimized
+        />
+      ) : (
+        <BlackBox className="rounded-[10px] text-3xl bg-black w-[310px] h-[180px] text-white text-wrap font-bold p-[10px]">
+          {title}
+        </BlackBox>
+      )}
       <div className="absolute -bottom-8 right-[66px] tra w-16 h-16 rounded-full bg-background flex center">
         <div
           id="target"
@@ -74,3 +80,42 @@ const FeedThumbnail = ({ thumbnail, title }: FeedThumbnailProps) => {
 };
 
 export default FeedThumbnail;
+
+const BlackBox = styled.div`
+  border-radius: 10px;
+  font-size: 28px;
+  background-color: black;
+  width: 310px;
+  height: 180px;
+  color: white;
+  white-space: wrap;
+  font-weight: bold;
+  padding: 10px;
+  display: flex;
+  overflow: scroll;
+  scrollbar-width: none;
+  scrollbar-color: transparent transparent;
+  -ms-overflow-style: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+  box-shadow: 0 0 2px 1px #93ebff;
+
+  // &.glow {
+  //   box-shadow: 0 0 2px 1px #ff00ff;
+  // }
+
+  // @keyframes glow {
+  //   0% {
+  //     box-shadow: 0 0 2px 1px #ff00ff;
+  //   }
+  //   50% {
+  //     box-shadow: 0 0 2px 2px #ff00ff;
+  //   }
+  //   100% {
+  //     box-shadow: 0 0 2px 1px #ff00ff;
+  //   }
+  // }
+
+  // animation: glow 1s infinite;
+`;

public/sitemap-0.xml

@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1">
-<url><loc>https://nerdplanet.app/rush</loc><lastmod>2024-06-23T10:33:05.619Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
-<url><loc>https://nerdplanet.app/collection</loc><lastmod>2024-06-23T10:33:05.620Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
+<url><loc>https://nerdplanet.app/rush</loc><lastmod>2024-06-26T15:10:59.553Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
+<url><loc>https://nerdplanet.app/collection</loc><lastmod>2024-06-26T15:10:59.554Z</lastmod><changefreq>daily</changefreq><priority>1</priority></url>
 </urlset>