✨ feat(arts/ArtsSection): apply fav api

syakoo · Nov 12, 2023 · befa448 · befa448
1 parent c2f7b27
commit befa448
Show file tree

Hide file tree

Showing 4 changed files with 127 additions and 10 deletions.
diff --git a/src/features/arts/ArtsSection/ArtGalleryItem/ArtGalleryItem.css.ts b/src/features/arts/ArtsSection/ArtGalleryItem/ArtGalleryItem.css.ts
@@ -16,4 +16,7 @@ export const artGalleryItemStyles = {
     WebkitLineClamp: "1",
     WebkitBoxOrient: "vertical",
   }),
+  heartButtonWrapper: style({
+    width: 26,
+  }),
 };
diff --git a/src/features/arts/ArtsSection/ArtGalleryItem/ArtGalleryItem.tsx b/src/features/arts/ArtsSection/ArtGalleryItem/ArtGalleryItem.tsx
@@ -1,7 +1,11 @@
+"use client";
+
 import Image from "next/image";
 
+import { api } from "@/api";
 import { Col, Row } from "@/design-system/layout";
 import { H3, Link } from "@/design-system/ui";
+import { HeartButton } from "@/features/arts/_shared/HeartButton";
 import type { ArtMeta } from "@/features/arts/types";
 
 import { artGalleryItemStyles } from "./ArtGalleryItem.css";
@@ -11,8 +15,11 @@ type ArtGalleryItemProps = {
 };
 
 export const ArtGalleryItem: React.FC<ArtGalleryItemProps> = ({ meta }) => {
+  const handleClickHeartButton = () =>
+    void api.incrementArtFav({ id: meta.id });
+
   return (
-    <Col as="article">
+    <Col as="article" gap="50">
       <div>
         <Link display="block" href={`/arts/${meta.id}`}>
           <Image
@@ -24,10 +31,13 @@ export const ArtGalleryItem: React.FC<ArtGalleryItemProps> = ({ meta }) => {
           />
         </Link>
       </div>
-      <Row>
+      <Row align="center" justify="spaceBetween">
         <div className={artGalleryItemStyles.titleWrapper}>
           <H3 size="75">{meta.title}</H3>
         </div>
+        <div className={artGalleryItemStyles.heartButtonWrapper}>
+          <HeartButton onClick={handleClickHeartButton} />
+        </div>
       </Row>
     </Col>
   );

diff --git a/src/features/arts/ArtsSection/ArtGalleryItem/__snapshots__/ArtGalleryItem.test.tsx.snap b/src/features/arts/ArtsSection/ArtGalleryItem/__snapshots__/ArtGalleryItem.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`ArtGalleryItem renders Sample 1`] = `
       style="max-width: 500px;"
     >
       <article
-        class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+        class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_50__15ivi84x Flex_flexStyle_variants_gap_50__15ivi84c Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
       >
         <div>
           <a
@@ -29,7 +29,7 @@ exports[`ArtGalleryItem renders Sample 1`] = `
           </a>
         </div>
         <div
-          class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+          class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843"
         >
           <div
             class="ArtGalleryItem_artGalleryItemStyles_titleWrapper__ddg6rx1"
@@ -40,6 +40,32 @@ exports[`ArtGalleryItem renders Sample 1`] = `
               Sample Art Title
             </h3>
           </div>
+          <div
+            class="ArtGalleryItem_artGalleryItemStyles_heartButtonWrapper__ddg6rx2"
+          >
+            <button
+              class="HeartButton_heartButtonStyles_root__ap10oo3"
+              type="button"
+            >
+              <div
+                class="HeartButton_heartButtonStyles_iconWrapper__ap10oo4"
+              >
+                <svg
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="1.5"
+                  viewBox="0 0 24 24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+            </button>
+          </div>
         </div>
       </article>
     </div>

diff --git a/src/features/arts/ArtsSection/__snapshots__/ArtsSection.test.tsx.snap b/src/features/arts/ArtsSection/__snapshots__/ArtsSection.test.tsx.snap
@@ -22,7 +22,7 @@ exports[`ArtsSection renders Sample 1`] = `
             style="animation-duration: 0.5s; animation-delay: 0s;"
           >
             <article
-              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_50__15ivi84x Flex_flexStyle_variants_gap_50__15ivi84c Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
             >
               <div>
                 <a
@@ -44,7 +44,7 @@ exports[`ArtsSection renders Sample 1`] = `
                 </a>
               </div>
               <div
-                class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+                class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843"
               >
                 <div
                   class="ArtGalleryItem_artGalleryItemStyles_titleWrapper__ddg6rx1"
@@ -55,6 +55,32 @@ exports[`ArtsSection renders Sample 1`] = `
                     Sample Art Title
                   </h3>
                 </div>
+                <div
+                  class="ArtGalleryItem_artGalleryItemStyles_heartButtonWrapper__ddg6rx2"
+                >
+                  <button
+                    class="HeartButton_heartButtonStyles_root__ap10oo3"
+                    type="button"
+                  >
+                    <div
+                      class="HeartButton_heartButtonStyles_iconWrapper__ap10oo4"
+                    >
+                      <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
               </div>
             </article>
           </li>
@@ -63,7 +89,7 @@ exports[`ArtsSection renders Sample 1`] = `
             style="animation-duration: 0.5s; animation-delay: 0.05s;"
           >
             <article
-              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_50__15ivi84x Flex_flexStyle_variants_gap_50__15ivi84c Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
             >
               <div>
                 <a
@@ -85,7 +111,7 @@ exports[`ArtsSection renders Sample 1`] = `
                 </a>
               </div>
               <div
-                class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+                class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843"
               >
                 <div
                   class="ArtGalleryItem_artGalleryItemStyles_titleWrapper__ddg6rx1"
@@ -96,6 +122,32 @@ exports[`ArtsSection renders Sample 1`] = `
                     Sample Art Title 2
                   </h3>
                 </div>
+                <div
+                  class="ArtGalleryItem_artGalleryItemStyles_heartButtonWrapper__ddg6rx2"
+                >
+                  <button
+                    class="HeartButton_heartButtonStyles_root__ap10oo3"
+                    type="button"
+                  >
+                    <div
+                      class="HeartButton_heartButtonStyles_iconWrapper__ap10oo4"
+                    >
+                      <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
               </div>
             </article>
           </li>
@@ -104,7 +156,7 @@ exports[`ArtsSection renders Sample 1`] = `
             style="animation-duration: 0.5s; animation-delay: 0.1s;"
           >
             <article
-              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+              class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_column__15ivi84k Flex_flexStyle_gap_50__15ivi84x Flex_flexStyle_variants_gap_50__15ivi84c Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
             >
               <div>
                 <a
@@ -126,7 +178,7 @@ exports[`ArtsSection renders Sample 1`] = `
                 </a>
               </div>
               <div
-                class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_stretch__15ivi84u Flex_flexStyle_variants_align_stretch__15ivi849 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_flexStart__15ivi84l Flex_flexStyle_variants_justify_flexStart__15ivi840"
+                class="Flex_flexStyle__15ivi84i Flex_flexStyle_align_center__15ivi84s Flex_flexStyle_variants_align_center__15ivi847 Flex_flexStyle_direction_row__15ivi84j Flex_flexStyle_gap_100__15ivi84y Flex_flexStyle_variants_gap_100__15ivi84d Flex_flexStyle_justify_spaceBetween__15ivi84o Flex_flexStyle_variants_justify_spaceBetween__15ivi843"
               >
                 <div
                   class="ArtGalleryItem_artGalleryItemStyles_titleWrapper__ddg6rx1"
@@ -137,6 +189,32 @@ exports[`ArtsSection renders Sample 1`] = `
                     Sample Art Title 3
                   </h3>
                 </div>
+                <div
+                  class="ArtGalleryItem_artGalleryItemStyles_heartButtonWrapper__ddg6rx2"
+                >
+                  <button
+                    class="HeartButton_heartButtonStyles_root__ap10oo3"
+                    type="button"
+                  >
+                    <div
+                      class="HeartButton_heartButtonStyles_iconWrapper__ap10oo4"
+                    >
+                      <svg
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-width="1.5"
+                        viewBox="0 0 24 24"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z"
+                          stroke-linecap="round"
+                          stroke-linejoin="round"
+                        />
+                      </svg>
+                    </div>
+                  </button>
+                </div>
               </div>
             </article>
           </li>