Merge branch 'develop'

PICK-PLE · Sep 13, 2024 · 799acdd · 799acdd
2 parents f129463 + ac4bfc1
commit 799acdd
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 7 deletions.
diff --git a/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts b/src/pages/class/components/HostInfoCard/HostInfoCard.style.ts
@@ -10,20 +10,21 @@ export const hostInfoWrapper = (theme: Theme) => css`
   border: 1px solid ${theme.color.lightgray0};
   border-radius: 10px;
   width: 100%;
-  height: 9.7rem;
-  padding: 1rem;
-  border-radius: 10px;
-  background-color: ${theme.color.bg_white0};
+  height: 10.4rem;
+
+  cursor: pointer;
 `;
 
 export const hostProfileWrapper = css`
+  height: 100%;
   ${flexGenerator('column', 'center', 'flex-start')};
   gap: 0.2rem;
 `;
 
 export const hostNameMarkWrapper = css`
   ${flexGenerator()}
   gap: 0.8rem;
+  margin: 0.1rem 0;
 `;
 
 export const hostNameWrapper = css`
@@ -46,7 +47,7 @@ export const hostMarkMessageWrapper = (theme: Theme) => css`
 
 export const hostMarkMessageStyle = (theme: Theme) => css`
   color: ${theme.color.purple1};
-  ${theme.font['body03-r-12']}
+  ${theme.font['body03-r-12']};
 `;
 
 export const hostNameStyle = (theme: Theme) => css`
@@ -56,10 +57,18 @@ export const hostNameStyle = (theme: Theme) => css`
 
 export const hostKeywordStyle = (theme: Theme) => css`
   color: ${theme.color.purple2};
-  ${theme.font['body03-r-12']}
+  ${theme.font['body03-r-12']};
+  line-height: 140%;
 `;
 
 export const hostDescriptionWrapper = (theme: Theme) => css`
   color: ${theme.color.midgray2};
   ${theme.font['body03-r-12']};
+  line-height: 140%;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 `;
diff --git a/src/pages/class/components/HostInfoCard/HostInfoCard.tsx b/src/pages/class/components/HostInfoCard/HostInfoCard.tsx
@@ -1,3 +1,5 @@
+import { useNavigate } from 'react-router-dom';
+
 import { useFetchMoimHost } from '@apis/domains/host';
 
 import { Image } from '@components';
@@ -25,9 +27,13 @@ const HostInfoCard = ({ hostId }: HostInfoCardProps) => {
   const { data: moimHostData } = useFetchMoimHost(hostId);
 
   const { hostNickName, hostImageUrl, count, keyword, description } = moimHostData ?? {};
+  const navigate = useNavigate();
 
+  const handleHostInfoClick = () => {
+    navigate(`/host/info/${hostId}`);
+  };
   return (
-    <article css={hostInfoWrapper}>
+    <article css={hostInfoWrapper} onClick={handleHostInfoClick}>
       <Image variant="round" width="6rem" src={images.HostProfileImage || hostImageUrl} />
 
       <section css={hostProfileWrapper}>