feat: 태그 줄바꿈 안되게 수정

astorverse · Feb 2, 2025 · d516da8 · d516da8
1 parent eaf36ed
commit d516da8
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 9 deletions.
diff --git a/src/components/Card/ProjectCard.tsx b/src/components/Card/ProjectCard.tsx
@@ -20,6 +20,12 @@ const ProjectCard: React.FC<ProjectEntry> = props => {
   };
 
   const handleClick = (e: React.MouseEvent) => {
+    // 태그 영역 클릭 시 이벤트 중단
+    if ((e.target as HTMLElement).closest(".tags-scroll")) {
+      e.preventDefault();
+      return;
+    }
+
     // 데스크톱에서는 바로 이동
     if (window.matchMedia("(min-width: 768px)").matches) {
       return;
@@ -152,15 +158,17 @@ const ProjectCard: React.FC<ProjectEntry> = props => {
           <p className="line-clamp-2 text-sm font-medium uppercase tracking-wider text-black-base">
             {isLoading ? <Skeleton count={2} /> : props.data.shortDescription}
           </p>
-          <div className="flex flex-wrap gap-2">
-            {props.data.roles.map((role, idx) => (
-              <span
-                key={idx}
-                className="inline-flex items-center rounded-full bg-skin-accent/10 px-2.5 py-0.5 text-xs font-medium text-skin-accent"
-              >
-                {isLoading ? <Skeleton width={40} height={16} /> : role}
-              </span>
-            ))}
+          <div className="tags-scroll relative -mx-4 px-4 lg:-mx-5 lg:px-5">
+            <div className="hide-scrollbar flex overflow-x-scroll">
+              {props.data.roles.map((role, idx) => (
+                <span
+                  key={idx}
+                  className="mr-2 inline-flex shrink-0 items-center whitespace-nowrap rounded-full bg-skin-accent/10 px-2.5 py-0.5 text-xs font-medium text-skin-accent last:mr-0"
+                >
+                  {isLoading ? <Skeleton width={40} height={16} /> : role}
+                </span>
+              ))}
+            </div>
           </div>
         </div>
         <div

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -147,6 +147,16 @@ html[data-theme="light"] {
   table {
     @apply overflow-hidden rounded-lg;
   }
+
+  /* 스크롤바 숨기기 */
+  .hide-scrollbar {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  .hide-scrollbar::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
 }
 
 @layer components {