diff --git a/src/components/display/Booth.styled.ts b/src/components/display/Booth.styled.ts index 49bf073..9db499c 100644 --- a/src/components/display/Booth.styled.ts +++ b/src/components/display/Booth.styled.ts @@ -25,11 +25,12 @@ export const BoothLink = styled(Link)` span { display: flex; - align-items: center; + flex-direction: column; width: 100%; - padding-left: 20px; + padding-left: 10px; + gap: 1px; } `; diff --git a/src/components/display/Booth.tsx b/src/components/display/Booth.tsx index 99f89b3..5588a5b 100644 --- a/src/components/display/Booth.tsx +++ b/src/components/display/Booth.tsx @@ -10,6 +10,7 @@ import { Heart } from "./Heart"; export interface IBooth { index: number; name: string; + host: string; num: number; likeable: boolean; category: string; @@ -20,7 +21,7 @@ const itemVariants: Variants = { visible: { opacity: 1, y: 0 }, }; -export const Booth: React.FC = ({ index, name, num, likeable, category, isNavigatable }) => { +export const Booth: React.FC = ({ index, host, name, num, likeable, category, isNavigatable }) => { const { likeable: likeAble, handleLikeBtnClick } = useLikes(likeable, category, index); return ( @@ -40,7 +41,14 @@ export const Booth: React.FC = ({ index, name, num, likeable, category, {isNavigatable && {category !== "it" ? index : `IT-${index}`}} - {name} + {host && ( + + {`[ ${host} ]`} + + )} + + {name} + diff --git a/src/components/display/BoothInfo.tsx b/src/components/display/BoothInfo.tsx index bb1ec77..6bca1b8 100644 --- a/src/components/display/BoothInfo.tsx +++ b/src/components/display/BoothInfo.tsx @@ -62,6 +62,7 @@ const BoothInfo: React.FC = ({ boothDetail }) => { isNavigatable={false} index={boothDetail.boothnum} name={boothDetail.boothName} + host={boothDetail.host} num={boothDetail.likes} likeable={!boothDetail.likable} category={boothDetail.categori} diff --git a/src/pages/BoothListPage.tsx b/src/pages/BoothListPage.tsx index a01eb8f..0e4d009 100644 --- a/src/pages/BoothListPage.tsx +++ b/src/pages/BoothListPage.tsx @@ -61,7 +61,10 @@ const BoothListPage: React.FC = () => { boothList && boothList .filter((booth) => { - return booth.boothnum === parseInt(input) || booth.boothName.includes(input); + return ( + (booth.boothnum === parseInt(input) || booth.boothName.includes(input)) && + (!booth.host || booth.host.includes(input)) + ); }) .map((booth) => { return ( @@ -69,6 +72,7 @@ const BoothListPage: React.FC = () => { isNavigatable={true} index={booth.boothnum} name={booth.boothName} + host={booth.host} num={booth.likes} likeable={!booth.likable} category={booth.categori} diff --git a/src/services/booth/booth.types.ts b/src/services/booth/booth.types.ts index eaf177b..3ea49d2 100644 --- a/src/services/booth/booth.types.ts +++ b/src/services/booth/booth.types.ts @@ -1,6 +1,7 @@ export interface IBoothItem { id: number; boothName: string; + host: string; likes: number; categori: string; boothnum: number; @@ -15,6 +16,7 @@ export interface IReadAllBoothResponse { export interface IReadBoothByIdResponse { id: number; boothName: string; + host: string; likes: number; categori: string; boothnum: number;