Fix size

Author: velopert

src/containers/post/RelatedPostsForGuest.tsx

@@ -80,27 +80,32 @@ function RelatedPostsForGuest({
         <h4>관심 있을 만한 포스트</h4>
         {postsWithAds.map((post, index) => {
           return post ? (
-            <Row key={post.id ?? index}>
-              <div className="fourty">
-                <div className="thumbnail-wrapper">
-                  <img
-                    src={optimizeImage(
-                      post.thumbnail ??
-                        post.user.profile.thumbnail ??
-                        userThumbnail,
-                      640,
-                    )}
-                    alt={post.title}
-                  />
+            <Row>
+              <StyledRowLink
+                to={`/@${post.user.username}/${post.url_slug}`}
+                key={post.id ?? index}
+              >
+                <div className="fourty">
+                  <div className="thumbnail-wrapper">
+                    <img
+                      src={optimizeImage(
+                        post.thumbnail ??
+                          post.user.profile.thumbnail ??
+                          userThumbnail,
+                        640,
+                      )}
+                      alt={post.title}
+                    />
+                  </div>
                 </div>
-              </div>
-              <div className="content">
-                <h5>{post.title}</h5>
-                <p>
-                  {post.short_description.replace(/&#x3A;/g, ':')}
-                  {post.short_description.length === 150 && '...'}
-                </p>
-              </div>
+                <div className="content">
+                  <h5>{post.title}</h5>
+                  <p>
+                    {post.short_description.replace(/&#x3A;/g, ':')}
+                    {post.short_description.length === 150 && '...'}
+                  </p>
+                </div>
+              </StyledRowLink>
             </Row>
           ) : (
             <Row>
@@ -170,12 +175,17 @@ const Grid = styled.div`
   margin-top: 1.5rem;
 `;
 
-const Row = styled.div`
-  display: flex;
-  .fourty {
-    width: 40%;
-    margin-right: 0.75rem;
+const Item = styled.div`
+  position: relative;
+  width: 33.333%;
+  padding-left: 0.25rem;
+  padding-right: 0.25rem;
+  padding-bottom: 2rem;
+  ${media.medium} {
+    width: 50%;
+    padding-bottom: 1rem;
   }
+
   .thumbnail-wrapper {
     width: 100%;
     padding-top: 52.35%;
@@ -191,45 +201,37 @@ const Row = styled.div`
       display: block;
     }
   }
-  & + & {
-    margin-top: 0.5rem;
-  }
-  .content {
-    width: 60%;
-  }
   h5 {
-    margin-top: 0;
-    margin-bottom: 0.625rem;
-    font-size: 0.875rem;
-    color: ${palette.gray8};
-    ${ellipsis}
-  }
-
-  p {
-    margin: 0;
-    font-size: 0.75rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 3;
+    font-size: 1rem;
     line-height: 1.5;
-    height: 3.375rem;
-    overflow: hidden;
-    word-break: keep-all;
-    color: ${palette.gray6};
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-decoration: none;
+    color: inherit;
+    color: ${palette.gray8};
   }
 `;
 
-const Item = styled.div`
-  position: relative;
-  width: 33.333%;
-  padding-left: 0.25rem;
-  padding-right: 0.25rem;
-  padding-bottom: 2rem;
-  ${media.medium} {
-    width: 50%;
-    padding-bottom: 1rem;
+const Row = styled.div`
+  & + & {
+    margin-top: 0.5rem;
+  }
+`;
+const StyledRowLink = styled(Link)`
+  width: 100%;
+  display: flex;
+  text-decoration: none;
+  color: inherit;
+  display: flex;
+  .fourty {
+    width: 40%;
+    margin-right: 0.75rem;
   }
-
   .thumbnail-wrapper {
     width: 100%;
     padding-top: 52.35%;
@@ -245,19 +247,30 @@ const Item = styled.div`
       display: block;
     }
   }
+
+  .content {
+    flex: 1;
+    min-width: 0;
+  }
   h5 {
-    font-size: 1rem;
-    line-height: 1.5;
-    margin-top: 0.5rem;
-    margin-bottom: 0;
+    margin-top: 0;
+    margin-bottom: 0.5rem;
+    font-size: 0.875rem;
+    color: ${palette.gray8};
+    ${ellipsis}
+  }
+
+  p {
+    margin: 0;
+    font-size: 0.75rem;
     display: -webkit-box;
     -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
+    line-height: 1.5;
+    height: 2.25rem;
     overflow: hidden;
-    text-overflow: ellipsis;
-    text-decoration: none;
-    color: inherit;
-    color: ${palette.gray8};
+    word-break: keep-all;
+    color: ${palette.gray6};
+    -webkit-box-orient: vertical;
   }
 `;