diff --git a/src/pages/customer/status/components/DogProfile/index.styles.ts b/src/pages/customer/status/components/DogProfile/index.styles.ts
index 85f6f70f..40d01b0d 100644
--- 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
index f99f6c03..23741404 100644
--- 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) => (
-
-
- {name}
-
-);
+}: DogProfileProps) => {
+ const shortenedName = name.length > 5 ? `${name.slice(0, 4)}..` : name;
+
+ return (
+
+
+ {shortenedName}
+
+ );
+};
interface DogListProps {
setPuppyId: (puppyId: number | null) => void;