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;