Skip to content

Commit df7d5ee

Browse files
raymondanythingsraymondanythings
committed
feat: TimelinePage 및 Layout 컴포넌트 리팩토링 및 스타일 개선
- sidebar fixed -> sticty 변경 - post-list 반응형 적용
1 parent fe66d87 commit df7d5ee

File tree

3 files changed

+62
-76
lines changed

3 files changed

+62
-76
lines changed

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import { LayoutNavigation } from "./LayoutNavigation";
21
import { css } from "@styled-system/css";
2+
import { LayoutNavigation } from "./LayoutNavigation";
33

44
export const Layout: React.FC<{ children: React.ReactNode }> = ({
55
children
@@ -23,7 +23,6 @@ const layoutContainer = css({
2323
const mainContent = css({
2424
paddingTop: "81px",
2525
marginX: "auto",
26-
minWidth: "48rem",
2726
maxWidth: "1440px",
2827
"@media (min-width: 1024px)": {
2928
paddingLeft: "50px"

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

Lines changed: 57 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
1+
import { css } from "@styled-system/css";
12
import * as React from "react";
23
import { useNavigate } from "react-router-dom";
3-
import { PostInput } from "./components/PostInput";
4+
import { useCreateDiscussion } from "@/api/hooks/useDiscussions";
5+
import { UnauthenticatedState } from "@/components/features/auth/UnauthenticatedState";
6+
import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
7+
import { useAuth } from "@/contexts/AuthContext";
8+
import { useToast } from "@/contexts/ToastContext";
9+
import { useErrorHandler } from "@/hooks/useErrorHandler";
410
import { FilterSection } from "./components/FilterSection";
11+
import { PostInput } from "./components/PostInput";
512
import { PostList } from "./components/PostList";
6-
import { WeeklyTop5 } from "@/components/features/discussions/WeeklyTop5";
713
import { SprintChallenge } from "./components/SprintChallenge";
8-
import { UnauthenticatedState } from "@/components/features/auth/UnauthenticatedState";
9-
import { useAuth } from "@/contexts/AuthContext";
1014
import type { SortOption } from "./types";
11-
import { useCreateDiscussion } from "@/api/hooks/useDiscussions";
12-
import { useErrorHandler } from "@/hooks/useErrorHandler";
13-
import { useToast } from "@/contexts/ToastContext";
14-
import { css } from "@styled-system/css";
1515

1616
export function TimelinePage() {
1717
const { user } = useAuth();
@@ -69,54 +69,50 @@ export function TimelinePage() {
6969

7070
return (
7171
<div className={pageContainer}>
72-
<div className={contentWrapper}>
73-
<div className={mainGridLayout}>
74-
<div className={mainContentColumn}>
75-
{user ? (
76-
<>
77-
<div className={sprintChallengeSection}>
78-
<SprintChallenge />
79-
</div>
80-
<SectionDivider />
81-
<div className={postInputSection}>
82-
<PostInput
83-
user={{
84-
login: user.login,
85-
avatarUrl: user.avatar_url
86-
}}
87-
onSubmit={handlePostSubmit}
88-
isError={createPostMutation.isError}
89-
isLoading={createPostMutation.isPending}
90-
/>
91-
</div>
92-
<SectionDivider />
93-
</>
94-
) : (
95-
<>
96-
<div className={unauthenticatedSection}>
97-
<UnauthenticatedState />
98-
</div>
99-
<SectionDivider />
100-
</>
101-
)}
102-
103-
<div className={filterSection}>
104-
<FilterSection
105-
sortOption={sortOption}
106-
onSortChange={handleSortChange}
72+
<div className={mainContentColumn}>
73+
{user ? (
74+
<>
75+
<div className={sprintChallengeSection}>
76+
<SprintChallenge />
77+
</div>
78+
<SectionDivider />
79+
<div className={postInputSection}>
80+
<PostInput
81+
user={{
82+
login: user.login,
83+
avatarUrl: user.avatar_url
84+
}}
85+
onSubmit={handlePostSubmit}
86+
isError={createPostMutation.isError}
87+
isLoading={createPostMutation.isPending}
10788
/>
10889
</div>
109-
110-
<div className={postListSection}>
111-
<PostList {...getPostListProps()} />
90+
<SectionDivider />
91+
</>
92+
) : (
93+
<>
94+
<div className={unauthenticatedSection}>
95+
<UnauthenticatedState />
11296
</div>
113-
</div>
97+
<SectionDivider />
98+
</>
99+
)}
100+
101+
<div className={filterSection}>
102+
<FilterSection
103+
sortOption={sortOption}
104+
onSortChange={handleSortChange}
105+
/>
106+
</div>
114107

115-
<div className={sidebarColumn}>
116-
<div className={sidebarContent}>
117-
<WeeklyTop5 />
118-
</div>
119-
</div>
108+
<div className={postListSection}>
109+
<PostList {...getPostListProps()} />
110+
</div>
111+
</div>
112+
113+
<div className={sidebarColumn}>
114+
<div className={sidebarContent}>
115+
<WeeklyTop5 />
120116
</div>
121117
</div>
122118
</div>
@@ -125,19 +121,10 @@ export function TimelinePage() {
125121

126122
const pageContainer = css({
127123
minHeight: "100vh",
128-
backgroundColor: "white"
129-
});
130-
131-
const contentWrapper = css({
132124
maxWidth: "1440px",
133-
margin: "0 auto",
134-
paddingX: { base: 0, lg: "2rem" }
135-
});
136-
137-
const mainGridLayout = css({
138-
display: "grid",
139-
gridTemplateColumns: { base: "1fr", lg: "5fr 3fr" },
140-
gap: "2rem"
125+
backgroundColor: "white",
126+
display: "flex",
127+
gap: { base: "0", lg: "2rem" }
141128
});
142129

143130
const mainContentColumn = css({
@@ -149,12 +136,11 @@ const mainContentColumn = css({
149136
});
150137

151138
const sprintChallengeSection = css({
152-
paddingTop: "12px",
153-
paddingBottom: 0
139+
paddingY: "1rem"
154140
});
155141

156142
const postInputSection = css({
157-
paddingX: { lg: "1.5rem" }
143+
paddingX: "1rem"
158144
});
159145

160146
const unauthenticatedSection = css({
@@ -169,7 +155,8 @@ const filterSection = css({
169155
});
170156

171157
const postListSection = css({
172-
paddingX: { lg: "1.5rem" },
158+
paddingX: "1rem",
159+
width: { base: "100dvw", lg: "100%" },
173160
paddingBottom: 0
174161
});
175162

@@ -180,7 +167,7 @@ const sidebarColumn = css({
180167
});
181168

182169
const sidebarContent = css({
183-
position: "fixed",
170+
position: "sticky",
184171
top: "100px",
185172
bottom: "1rem",
186173
paddingRight: "2rem",
@@ -195,6 +182,5 @@ function SectionDivider() {
195182
const sectionDivider = css({
196183
width: "100%",
197184
height: 0,
198-
borderBottom: "1px solid rgba(201, 201, 201, 0.4)",
199-
marginTop: { base: 0, lg: "1rem" }
185+
borderBottom: "1px solid rgba(201, 201, 201, 0.4)"
200186
});

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

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1+
import { css } from "@styled-system/css";
2+
import MDEditor from "@uiw/react-md-editor";
13
import * as React from "react";
4+
import type { GitHubAuthor } from "@/api/remote/discussions";
25
import { Avatar } from "@/components/shared/ui/Avatar";
36
import { Button } from "@/components/shared/ui/Button";
47
import { Input } from "@/components/shared/ui/Input";
5-
import MDEditor from "@uiw/react-md-editor";
6-
import type { GitHubAuthor } from "@/api/remote/discussions";
7-
import { css } from "@styled-system/css";
88

99
interface PostInputProps {
1010
user: GitHubAuthor;
@@ -206,6 +206,7 @@ const titleInputStyle = css({
206206
backgroundColor: "transparent",
207207
boxShadow: "none",
208208
paddingBottom: "0.5rem",
209+
paddingLeft: 0,
209210
_focus: {
210211
outline: "none",
211212
ring: 0

0 commit comments

Comments
 (0)