Merge pull request #309 from boostcampwm-2024/feat/#306/ui-layout

[Feat] 자잘한 UI 개선사항 반영
boostcampwm-2024 · Nov 28, 2024 · 5280db6 · 5280db6
2 parents 38781ad + 252058a
commit 5280db6
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 21 deletions.
diff --git 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
@@ -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>

diff --git 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">

diff --git 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
@@ -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;
 }