From 29887d8b4d13890bfe3d30359729770ce3022863 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 28 Nov 2024 01:22:23 +0900
Subject: [PATCH 1/3] =?UTF-8?q?design:=20=EC=A0=9C=EB=AA=A9=EC=9D=B4=20?=
 =?UTF-8?q?=EA=B8=B8=EC=96=B4=EB=8F=84=20=EB=A0=88=EC=9D=B4=EC=95=84?=
 =?UTF-8?q?=EC=9B=83=EC=9D=B4=20=EC=9D=BC=EA=B4=80=EB=90=98=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/ticle/list/TicleCard.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/apps/web/src/components/ticle/list/TicleCard.tsx b/apps/web/src/components/ticle/list/TicleCard.tsx
index e53b5920..c6bedd55 100644
--- a/apps/web/src/components/ticle/list/TicleCard.tsx
+++ b/apps/web/src/components/ticle/list/TicleCard.tsx
@@ -22,12 +22,14 @@ const TicleCard = ({
 }: TicleCardProps) => {
   return (
     <article className="flex h-full w-[19rem] cursor-pointer flex-col justify-between gap-14 rounded-lg border border-main bg-white px-6 py-8 shadow-normal transition-transform duration-500 ease-in-out hover:-translate-y-3 hover:border-primary hover:shadow-up">
-      <div className="flex flex-col gap-4">
-        <h3 className="text-head3 text-main">{title}</h3>
-        <div className="flex h-20 flex-wrap gap-2">
-          {tags.map((tag) => (
-            <Badge key={tag}>{tag}</Badge>
-          ))}
+      <div className="flex h-52 flex-col justify-between gap-4">
+        <div className="flex flex-col gap-4">
+          <h3 className="text-head3 text-main">{title}</h3>
+          <div className="flex flex-wrap gap-2">
+            {tags.map((tag) => (
+              <Badge key={tag}>{tag}</Badge>
+            ))}
+          </div>
         </div>
         <div className="flex flex-col gap-2.5">
           <div className="flex gap-1.5">

From 7240a845208875c372c868cf3ddb6646e12a52a2 Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 28 Nov 2024 01:25:48 +0900
Subject: [PATCH 2/3] =?UTF-8?q?design:=20=EB=8C=80=EC=8B=9C=EB=B3=B4?=
 =?UTF-8?q?=EB=93=9C=EC=97=90=EC=84=9C=20=ED=8B=B0=ED=81=B4=EB=AA=85?=
 =?UTF-8?q?=EC=9D=B4=20=EA=B8=B8=20=EB=95=8C=20ellipsis=20=EC=B2=98?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/src/components/dashboard/apply/TicleInfoCard.tsx | 4 +++-
 apps/web/src/components/dashboard/open/TicleInfoCard.tsx  | 4 +++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
index cd6e75a5..b87ea007 100644
--- a/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/apply/TicleInfoCard.tsx
@@ -39,7 +39,9 @@ function TicleInfoCard({
           </div>
           <div className="flex items-center gap-3">
             <h3 className="text-title2 text-main">티클명</h3>
-            <span className="w-80 text-body1 text-main">{ticleTitle}</span>
+            <span className="w-80 overflow-hidden text-ellipsis whitespace-pre text-body1 text-main">
+              {ticleTitle}
+            </span>
           </div>
           <div className="flex items-center gap-3">
             <h3 className="text-title2 text-main">진행 일시</h3>
diff --git a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
index 702a941e..336d753c 100644
--- a/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
+++ b/apps/web/src/components/dashboard/open/TicleInfoCard.tsx
@@ -43,7 +43,9 @@ function TicleInfoCard({ ticleId, ticleTitle, startTime, endTime, status }: Ticl
         <div className="flex gap-5">
           <div className="flex items-center gap-3">
             <h3 className="text-title2 text-main">티클명</h3>
-            <span className="w-80 text-body1 text-main">{ticleTitle}</span>
+            <span className="w-80 overflow-hidden text-ellipsis whitespace-pre text-body1 text-main">
+              {ticleTitle}
+            </span>
           </div>
           <div className="flex items-center gap-3">
             <h3 className="text-title2 text-main">진행 일시</h3>

From 252058a87fbd52ed1ffb1fadbc69fba74ace6e2b Mon Sep 17 00:00:00 2001
From: Eunseo Sim <55528304+simeunseo@users.noreply.github.com>
Date: Thu, 28 Nov 2024 04:09:37 +0900
Subject: [PATCH 3/3] =?UTF-8?q?design:=20=EC=BB=A4=EC=8A=A4=ED=85=80=20?=
 =?UTF-8?q?=EC=8A=A4=ED=81=AC=EB=A1=A4=EB=B0=94=EB=A5=BC=20=ED=95=84?=
 =?UTF-8?q?=EC=9A=94=ED=95=9C=20=EA=B3=B3=EC=97=90=EC=84=9C=EB=A7=8C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9A=A9=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?=
 =?UTF-8?q?=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/user/UserProfileDialog.tsx |  2 +-
 apps/web/src/styles/global.css                | 22 +++++++++----------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/apps/web/src/components/user/UserProfileDialog.tsx b/apps/web/src/components/user/UserProfileDialog.tsx
index 85411fdc..831c7e42 100644
--- a/apps/web/src/components/user/UserProfileDialog.tsx
+++ b/apps/web/src/components/user/UserProfileDialog.tsx
@@ -34,7 +34,7 @@ function UserProfileDialog({ isOpen, onClose, speakerId, nickname }: UserProfile
           <UserInfo {...data} loginType={loginType} />
           <div className="flex flex-col gap-2.5">
             <h3 className="text-title2 text-main">개설한 티클 목록</h3>
-            <div className="flex h-28 flex-col gap-2 overflow-y-scroll">
+            <div className="custom-scrollbar flex h-28 flex-col gap-2 overflow-y-scroll">
               {data.ticleInfo.map((info) => (
                 <button
                   type="button"
diff --git a/apps/web/src/styles/global.css b/apps/web/src/styles/global.css
index d7104c0d..67811eb4 100644
--- a/apps/web/src/styles/global.css
+++ b/apps/web/src/styles/global.css
@@ -103,18 +103,16 @@
   border: 3px dashed var(--grey-300);
 }
 
-@layer utilities {
-  *::-webkit-scrollbar {
-    @apply w-2;
-  }
+.custom-scrollbar::-webkit-scrollbar {
+  @apply w-2;
+}
 
-  *::-webkit-scrollbar-track {
-    background: var(--grey-200);
-  }
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: var(--grey-200);
+}
 
-  *::-webkit-scrollbar-thumb {
-    @apply rounded-full;
-    background: var(--purple-200);
-    cursor: pointer;
-  }
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  @apply rounded-full;
+  background: var(--purple-200);
+  cursor: pointer;
 }