TIL > feat: TimelinePage 및 Layout 컴포넌트 리팩토링 및 스타일 개선 (#445)

* feat: TimelinePage 및 Layout 컴포넌트 리팩토링 및 스타일 개선

- sidebar fixed -> sticty 변경
- post-list 반응형 적용

* refactor: clean up Layout component styles by removing commented-out code

Author: raymondanythings

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

@@ -1,5 +1,5 @@
-import { LayoutNavigation } from "./LayoutNavigation";
 import { css } from "@styled-system/css";
+import { LayoutNavigation } from "./LayoutNavigation";
 
 export const Layout: React.FC<{ children: React.ReactNode }> = ({
   children

fundamentals/today-i-learned/src/pages/timeline/TimelinePage.tsx

@@ -1,17 +1,17 @@
+import { css } from "@styled-system/css";
 import * as React from "react";
 import { useNavigate } from "react-router-dom";
-import { PostInput } from "./components/PostInput";
+import { useCreateDiscussion } from "@/api/hooks/useDiscussions";
+import { UnauthenticatedState } from "@/components/features/auth/UnauthenticatedState";
+import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
+import { useAuth } from "@/contexts/AuthContext";
+import { useToast } from "@/contexts/ToastContext";
+import { useErrorHandler } from "@/hooks/useErrorHandler";
 import { FilterSection } from "./components/FilterSection";
+import { PostInput } from "./components/PostInput";
 import { PostList } from "./components/PostList";
-import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
 import { SprintChallenge } from "./components/SprintChallenge";
-import { UnauthenticatedState } from "@/components/features/auth/UnauthenticatedState";
-import { useAuth } from "@/contexts/AuthContext";
 import type { SortOption } from "./types";
-import { useCreateDiscussion } from "@/api/hooks/useDiscussions";
-import { useErrorHandler } from "@/hooks/useErrorHandler";
-import { useToast } from "@/contexts/ToastContext";
-import { css } from "@styled-system/css";
 
 export function TimelinePage() {
   const { user } = useAuth();
@@ -132,12 +132,11 @@ const mainContentColumn = css({
 });
 
 const sprintChallengeSection = css({
-  paddingTop: "12px",
-  paddingBottom: 0
+  paddingY: "1rem"
 });
 
 const postInputSection = css({
-  paddingX: { lg: "1.5rem" }
+  paddingX: "1rem"
 });
 
 const filterSection = css({

fundamentals/today-i-learned/src/pages/timeline/components/PostInput.tsx

@@ -205,6 +205,7 @@ const titleInputStyle = css({
   backgroundColor: "transparent",
   boxShadow: "none",
   paddingBottom: "0.5rem",
+  paddingLeft: 0,
   _focus: {
     outline: "none",
     ring: 0