feat: TIL > 에디터 동적 높이계산, 마크다운 렌더러 스타일링 (#389)

* refactor: 불필요한 백업파일 삭제

* feat: 에디터 동적 높이계산

* feat: 마크다운 렌더러 스타일링

* feat: PostCard 컴포넌트 스타일 개선 및 텍스트 오버플로우 처리

* feat: PostCard 컴포넌트의 마크다운 요소 스타일 통일성 강화

* [autofix.ci] apply automated fixes

---------

Co-authored-by: yurim <[email protected]>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>

Author: 3 people

fundamentals/today-i-learned/src/api/hooks/useDiscussions.ts.bak

@@ -250,15 +250,21 @@ const postTitle = css({
   letterSpacing: "-0.4px",
   color: "#0F0F0F",
   transition: "colors 0.15s ease-in-out",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
   _hover: {
     color: "rgb(55, 65, 81)"
   }
 });
 
 const contentPreview = css({
   display: "-webkit-box",
-  WebkitLineClamp: "2",
+  WebkitLineClamp: "3",
+  // @ts-ignore
+  WebkitBoxOrient: "vertical",
   overflow: "hidden",
+  textOverflow: "ellipsis",
   transition: "colors 0.15s ease-in-out",
   _hover: {
     color: "rgba(0, 0, 0, 0.6)"
@@ -270,5 +276,58 @@ const markdownContent = css({
   fontSize: "16px",
   lineHeight: "160%",
   letterSpacing: "-0.4px",
-  color: "rgba(0, 0, 0, 0.8)"
+  color: "rgba(0, 0, 0, 0.8)",
+  // PostCard에서 모든 마크다운 요소의 텍스트 크기를 균일하게 만들기
+  "& h1, & h2, & h3, & h4, & h5, & h6": {
+    fontSize: "16px !important",
+    fontWeight: "500 !important",
+    lineHeight: "160% !important",
+    letterSpacing: "-0.4px !important",
+    color: "rgba(0, 0, 0, 0.8) !important",
+    margin: "0 !important"
+  },
+  "& p": {
+    fontSize: "16px !important",
+    fontWeight: "500 !important",
+    lineHeight: "160% !important",
+    letterSpacing: "-0.4px !important",
+    color: "rgba(0, 0, 0, 0.8) !important",
+    margin: "0 !important"
+  },
+  "& strong": {
+    fontSize: "16px !important",
+    fontWeight: "600 !important",
+    color: "rgba(0, 0, 0, 0.8) !important"
+  },
+  "& em": {
+    fontSize: "16px !important",
+    fontStyle: "italic !important",
+    color: "rgba(0, 0, 0, 0.8) !important"
+  },
+  "& ul, & ol": {
+    margin: "0 !important",
+    fontSize: "16px !important"
+  },
+  "& li": {
+    fontSize: "16px !important",
+    fontWeight: "500 !important",
+    lineHeight: "160% !important",
+    letterSpacing: "-0.4px !important",
+    color: "rgba(0, 0, 0, 0.8) !important"
+  },
+  "& code": {
+    fontSize: "14px !important",
+    fontFamily: "monospace !important",
+    backgroundColor: "#F5F5F5 !important",
+    padding: "2px 4px !important",
+    borderRadius: "4px !important"
+  },
+  "& blockquote": {
+    fontSize: "16px !important",
+    fontWeight: "500 !important",
+    color: "rgba(0, 0, 0, 0.7) !important",
+    margin: "0 !important",
+    paddingLeft: "8px !important",
+    borderLeft: "2px solid #D3D3D3 !important"
+  }
 });