TIL > refactor: 피드 컨텐츠와 주간 TOP5 layout 사용성 개선 (#451)

* refactor: 비로그인 상태 시 content를 figma와 동일하게 수정

* refactor: post feed의 layout을 full-width로 수정

* refactor: 각 영역이 독립적으로 scroll 되도록 수정

* refactor: 주간 TOP5가 영역에 맞게 card style이 조정되도록 수정

* refactor: PostCard의 style 수정

* feat: Layout mobile 대응

* feat: hover 시 title color 변경

* refactor: 게시글 상세의 주간 sidebar layout 수정

Author: gorjs3540

fundamentals/today-i-learned/src/components/features/auth/UnauthenticatedState.tsx

@@ -1,25 +1,48 @@
 import { useAuth } from "@/contexts/AuthContext";
 import { Button } from "@/components/shared/ui/Button";
+import { css } from "@styled-system/css";
 
 export function UnauthenticatedState() {
   const { login } = useAuth();
 
   return (
-    <div className="flex flex-col items-center justify-center px-6 py-8 gap-4 w-full rounded-2xl bg-white">
-      {/* 메인 텍스트 */}
-      <h1 className="text-xl font-bold text-center text-black/80 tracking-tight leading-[130%]">
-        매일 한 줄, 오늘 배운 내용을 기록해봐요!
-      </h1>
+    <div className={container}>
+      <span className={title}>오늘 배운 내용을 기록하려면 로그인해 주세요</span>
 
-      {/* 버튼 */}
-      <Button
-        onClick={login}
-        variant="primary"
-        size="lg"
-        className="px-8 py-3 text-base font-bold"
-      >
+      <Button onClick={login} variant="primary" size="lg" className={button}>
         로그인하기
       </Button>
     </div>
   );
 }
+
+const container = css({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  justifyContent: "center",
+  paddingX: "2rem",
+  paddingY: "3rem",
+  gap: "1.5rem"
+});
+
+const title = css({
+  fontFamily: "Toss Product Sans OTF",
+  fontSize: "1.125rem",
+  fontWeight: "700",
+  fontStyle: "bold",
+  lineHeight: "130%",
+  letterSpacing: "-0.025em"
+});
+
+const button = css({
+  maxHeight: "2.5rem",
+  paddingX: "1rem",
+
+  fontFamily: "Toss Product Sans OTF",
+  fontSize: "1rem",
+  fontWeight: "700",
+  fontStyle: "bold",
+  lineHeight: "130%",
+  letterSpacing: "-0.025em"
+});

fundamentals/today-i-learned/src/components/features/discussions/PostCard.tsx

@@ -113,21 +113,15 @@ export function PostCard({
           )}
         </div>
 
-        {/* 본문 */}
-        <div className={contentSection}>
-          {/* 제목과 내용 */}
-          <div className={contentContainer}>
-            {/* 제목 */}
-            <h2 className={postTitle}>{discussion.title}</h2>
+        {/* 제목 */}
+        <h2 className={postTitle}>{discussion.title}</h2>
 
-            {/* 내용 미리보기 */}
-            <div className={contentPreview}>
-              <MarkdownRenderer
-                content={discussion.body}
-                className={markdownContent}
-              />
-            </div>
-          </div>
+        {/* 내용 미리보기 */}
+        <div className={contentPreview}>
+          <MarkdownRenderer
+            content={discussion.body}
+            className={markdownContent}
+          />
         </div>
 
         <InteractionButtons
@@ -141,6 +135,7 @@ export function PostCard({
           variant="card"
         />
       </div>
+
       {EditPostModal}
     </Card>
   );
@@ -162,14 +157,21 @@ const cardContent = css({
   display: "flex",
   flexDirection: "column",
   padding: "1.5rem",
-  gap: "1.5rem"
+  transition: "all 0.2s",
+  _hover: {
+    "& h2": {
+      color: "#0064FF",
+      opacity: 0.8
+    }
+  }
 });
 
 const headerSection = css({
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  height: "2.5rem"
+  height: "2.5rem",
+  marginBottom: "1rem"
 });
 
 const userInfoContainer = css({
@@ -231,35 +233,22 @@ const timeStamp = css({
   color: "#979797"
 });
 
-const contentSection = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1.25rem"
-});
-
-const contentContainer = css({
-  display: "flex",
-  flexDirection: "column",
-  gap: "1.25rem"
-});
-
 const postTitle = css({
+  marginBottom: "0.5rem",
   fontWeight: "700",
   fontSize: "22px",
   lineHeight: "130%",
   letterSpacing: "-0.4px",
   color: "#0F0F0F",
-  transition: "colors 0.15s ease-in-out",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-  _hover: {
-    color: "rgb(55, 65, 81)"
-  }
+  transition: "color 0.2s"
 });
 
 const contentPreview = css({
   display: "-webkit-box",
+  marginBottom: "1rem",
   WebkitLineClamp: "3",
   // @ts-ignore
   WebkitBoxOrient: "vertical",

fundamentals/today-i-learned/src/components/features/discussions/WeeklyTop5.tsx

@@ -54,13 +54,7 @@ function PopularPostItem({ post, rank }: { post: any; rank: number }) {
         </div>
 
         <h4 className={postTitle}>{post.title}</h4>
-
-        <div className={postPreview}>
-          <MarkdownRenderer
-            content={truncateMarkdown(post.body, 100)}
-            className={markdownContent}
-          />
-        </div>
+        <p className={contentPreview}>{post.body}</p>
       </button>
     </div>
   );
@@ -125,6 +119,7 @@ export function WeeklyTop5() {
 const weeklyTop5Container = css({
   display: "flex",
   flexDirection: "column",
+  padding: "1rem",
   gap: "1.5rem"
 });
 
@@ -176,23 +171,24 @@ const rankNumber = css({
 });
 
 const postButton = css({
-  flex: 1,
+  position: "relative",
   display: "flex",
   flexDirection: "column",
-  justifyContent: "flex-end",
+  justifyContent: "space-between",
+  width: "100%",
   paddingY: "1.25rem",
   paddingX: "1.5rem",
   backgroundColor: "white",
   border: "1px solid rgba(209, 213, 219, 0.5)",
   borderRadius: "1rem",
-  transition: "all 0.2s",
   textAlign: "left",
-  minHeight: "136px",
-  position: "relative",
+  transition: "all 0.2s",
+  overflow: "hidden",
   cursor: "pointer",
   _hover: {
     "& h4": {
-      color: "rgb(55, 65, 81)"
+      color: "#0064FF",
+      opacity: 0.8
     }
   }
 });
@@ -201,7 +197,7 @@ const authorSection = css({
   display: "flex",
   alignItems: "center",
   gap: "0.375rem",
-  marginBottom: "0.75rem"
+  marginBottom: "1rem"
 });
 
 const avatarStyle = css({
@@ -211,38 +207,41 @@ const avatarStyle = css({
 const authorName = css({
   fontSize: "16px",
   fontWeight: "bold",
-  color: "rgba(0, 0, 0, 0.6)",
+  color: "rgba(0, 0, 0, 0.8)",
   letterSpacing: "-0.025em",
   overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap"
 });
 
 const postTitle = css({
+  marginBottom: "0.5rem",
+  overflow: "hidden",
+
   fontWeight: "bold",
   fontSize: "18px",
   color: "#0F0F0F",
   lineHeight: "tight",
   letterSpacing: "-0.025em",
-  transition: "color 0.2s",
-  overflow: "hidden",
   textOverflow: "ellipsis",
   whiteSpace: "nowrap",
-  marginBottom: "0.75rem"
+
+  transition: "color 0.2s"
 });
 
-const postPreview = css({
+const contentPreview = css({
+  display: "-webkit-box",
   overflow: "hidden",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
-});
 
-const markdownContent = css({
   fontSize: "16px",
   fontWeight: "medium",
   color: "rgba(0, 0, 0, 0.8)",
   lineHeight: "relaxed",
-  letterSpacing: "-0.025em"
+  letterSpacing: "-0.025em",
+  WebkitLineClamp: 2,
+  // @ts-ignore
+  WebkitBoxOrient: "vertical",
+  whiteSpace: "normal"
 });
 
 // Loading and Empty States

fundamentals/today-i-learned/src/components/shared/ShareLinkButton.tsx

@@ -1,6 +1,7 @@
-import { Link } from "lucide-react";
+import { Check, Link } from "lucide-react";
 import { useToast } from "@/contexts/ToastContext";
 import { css, cx } from "@styled-system/css";
+import { useState } from "react";
 
 const shareButton = {
   display: "flex",
@@ -21,8 +22,6 @@ const shareIconContainer = {
 const shareIcon = {
   width: "100%",
   height: "100%",
-  stroke: "#979797",
-  strokeWidth: "1.67px",
   fill: "none"
 };
 
@@ -35,14 +34,25 @@ export function ShareLinkButton({
   discussionId,
   className = ""
 }: ShareLinkButtonProps) {
-  const { success: showSuccessToast } = useToast();
+  const [isCopied, setIsCopied] = useState(false);
+  const { addToast } = useToast();
 
   const handleCopyLink = (e: React.MouseEvent) => {
+    setIsCopied(true);
     e.stopPropagation();
+
     const origin = typeof window !== "undefined" ? window.location.origin : "";
     const url = `${origin}/today-i-learned/post/${discussionId}`;
     navigator.clipboard.writeText(url);
-    showSuccessToast("링크가 복사되었습니다!");
+    addToast({
+      type: "success",
+      title: "링크가 복사되었습니다!",
+      duration: 3000
+    });
+
+    setTimeout(() => {
+      setIsCopied(false);
+    }, 3000);
   };
 
   return (
@@ -52,7 +62,11 @@ export function ShareLinkButton({
       aria-label="링크 복사"
     >
       <div className={css(shareIconContainer)}>
-        <Link className={css(shareIcon)} />
+        {isCopied ? (
+          <Check className={css(shareIcon)} stroke="#10b981" />
+        ) : (
+          <Link className={css(shareIcon)} stroke="#979797" />
+        )}
       </div>
     </button>
   );

fundamentals/today-i-learned/src/components/shared/layout/Layout.tsx

@@ -17,15 +17,13 @@ const layoutContainer = css({
   minHeight: "100vh",
   backgroundColor: "white",
   fontFamily: "sans-serif",
-  fontSmoothing: "antialiased"
+  fontSmoothing: "antialiased",
+  overflow: "hidden"
 });
 
 const mainContent = css({
-  paddingTop: "81px",
-  marginX: "auto",
-  minWidth: "48rem",
-  maxWidth: "1440px",
-  "@media (min-width: 1024px)": {
-    paddingLeft: "50px"
-  }
+  height: "100vh",
+  paddingTop: "4.6875rem",
+  paddingLeft: { base: 0, lg: "3.125rem" },
+  overflow: "hidden"
 });