fix: 요청 현황 페이지 내에서 강아지 이름이 길 경우 5글자 이상부터는 ..으로 표시

peauty · Dec 19, 2024 · 3c970ed · 3c970ed
1 parent a648e47
commit 3c970ed
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/src/pages/customer/status/components/DogProfile/index.styles.ts b/src/pages/customer/status/components/DogProfile/index.styles.ts
@@ -7,6 +7,18 @@ export const DogListWrapper = styled.div`
   display: flex;
   gap: 30px;
   padding: 10px 30px;
+  overflow-x: auto; // 가로 스크롤 추가
+  white-space: nowrap; // 줄 바꿈 방지하여 가로 스크롤 유지
+  &::-webkit-scrollbar {
+    height: 8px; // 스크롤바 높이
+  }
+  &::-webkit-scrollbar-thumb {
+    background-color: ${colors.gray200}; // 스크롤바 색상
+    border-radius: 4px;
+  }
+  &::-webkit-scrollbar-track {
+    background-color: transparent; // 스크롤 트랙 (배경) 색상
+  }
 `;
 
 // DogProfileWrapper 스타일
@@ -15,6 +27,7 @@ export const DogProfileWrapper = styled.div`
   flex-direction: column;
   align-items: center;
   cursor: pointer;
+  width: 100px;
 `;
 
 // RoundImg 스타일
@@ -35,4 +48,5 @@ export const DogName = styled.p<{ active: boolean }>`
   font-weight: ${({ active }) => (active ? "600" : "400")};
   color: ${({ active }) => (active ? "#000000" : "#A0A0A0")};
   text-align: center;
+  width: 50px;
 `;
diff --git a/src/pages/customer/status/components/DogProfile/index.tsx b/src/pages/customer/status/components/DogProfile/index.tsx
@@ -9,8 +9,6 @@ import {
   DogName,
 } from "./index.styles";
 import Basic from "../../../../../assets/images/basic.png";
-import { Text } from "../../../../../components";
-import NotFoundPuppy from "../NotFoundPuppy"; // NotFoundPuppy 컴포넌트 추가
 
 interface DogProfileProps {
   src: string;
@@ -19,24 +17,27 @@ interface DogProfileProps {
   onClick: () => void;
   active: boolean;
 }
-
 const DogProfile = ({
   src,
   name,
   borderRadius = "50%",
   onClick,
   active,
-}: DogProfileProps) => (
-  <DogProfileWrapper onClick={onClick}>
-    <RoundImg
-      src={src}
-      alt={name}
-      borderRadius={borderRadius}
-      active={active}
-    />
-    <DogName active={active}>{name}</DogName>
-  </DogProfileWrapper>
-);
+}: DogProfileProps) => {
+  const shortenedName = name.length > 5 ? `${name.slice(0, 4)}..` : name;
+
+  return (
+    <DogProfileWrapper onClick={onClick}>
+      <RoundImg
+        src={src}
+        alt={name}
+        borderRadius={borderRadius}
+        active={active}
+      />
+      <DogName active={active}>{shortenedName}</DogName>
+    </DogProfileWrapper>
+  );
+};
 
 interface DogListProps {
   setPuppyId: (puppyId: number | null) => void;