From a4665fe7d21470ed2458165f6b012425d14a33b1 Mon Sep 17 00:00:00 2001
From: ghdtjgus76 <ghdtjgus76@naver.com>
Date: Tue, 20 Aug 2024 14:55:30 +0900
Subject: [PATCH] =?UTF-8?q?feat:=20=EC=98=A4=EB=8A=98=EC=9D=98=20=ED=95=A0?=
 =?UTF-8?q?=20=EC=9D=BC=20=EB=B2=84=ED=8A=BC=20=EC=A1=B0=EA=B1=B4=EB=B6=80?=
 =?UTF-8?q?=20=ED=99=9C=EC=84=B1=ED=99=94=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../_components/DailyTaskCarousel.tsx         | 45 +++++++++++++------
 1 file changed, 31 insertions(+), 14 deletions(-)

diff --git a/apps/client/app/(afterLogin)/my-study/_components/DailyTaskCarousel.tsx b/apps/client/app/(afterLogin)/my-study/_components/DailyTaskCarousel.tsx
index c970e90e..db437e81 100644
--- a/apps/client/app/(afterLogin)/my-study/_components/DailyTaskCarousel.tsx
+++ b/apps/client/app/(afterLogin)/my-study/_components/DailyTaskCarousel.tsx
@@ -4,13 +4,28 @@ import { css } from "@styled-system/css";
 import { Flex } from "@styled-system/jsx";
 import useHorizontalScroll from "hooks/useHorizontalScroll";
 import Image from "next/image";
-import { type PropsWithChildren } from "react";
+import { type PropsWithChildren, useEffect, useState } from "react";
 
 const DailyTaskCarousel = ({ children }: PropsWithChildren) => {
+  const [showRightButton, setShowRightButton] = useState(false);
+
   const itemWidth = 386;
 
   const { containerRef, handleScroll } = useHorizontalScroll();
 
+  useEffect(() => {
+    if (containerRef.current) {
+      const containerWidth = containerRef.current.offsetWidth;
+      const totalChildrenWidth = Array.from(containerRef.current.children)
+        .map((child) => (child as HTMLElement).offsetWidth)
+        .reduce((acc, width) => acc + width, 0);
+
+      if (totalChildrenWidth > containerWidth) {
+        setShowRightButton(true);
+      }
+    }
+  }, [containerRef]);
+
   const handleClickScrollRightButton = () => {
     if (containerRef.current) {
       const currentScrollPosition = containerRef.current.scrollLeft;
@@ -30,19 +45,21 @@ const DailyTaskCarousel = ({ children }: PropsWithChildren) => {
       >
         {children}
       </Flex>
-      <button
-        aria-label="scroll-right-button"
-        className={scrollRightButtonStyle}
-        tabIndex={0}
-        onClick={handleClickScrollRightButton}
-      >
-        <Image
-          alt="scroll-right-button"
-          height={52}
-          src="/images/arrow-button.svg"
-          width={52}
-        />
-      </button>
+      {showRightButton && (
+        <button
+          aria-label="scroll-right-button"
+          className={scrollRightButtonStyle}
+          tabIndex={0}
+          onClick={handleClickScrollRightButton}
+        >
+          <Image
+            alt="scroll-right-button"
+            height={52}
+            src="/images/arrow-button.svg"
+            width={52}
+          />
+        </button>
+      )}
     </>
   );
 };