Skip to content

Commit 87d86a9

Browse files
velopertvelopert
committed
Merge branch 'feature/grid-home' into develop
2 parents ea197c5 + 32419a6 commit 87d86a9

30 files changed

+1360
-311
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"@types/react-router-dom": "^5.1.3",
4545
"@types/react-textarea-autosize": "^4.3.5",
4646
"@types/react-toastify": "^4.1.0",
47+
"@types/react-virtualized": "^9.21.8",
4748
"@types/sanitize-html": "^1.20.2",
4849
"@types/styled-components": "^4.4.1",
4950
"@types/throttle-debounce": "^2.1.0",
@@ -120,6 +121,7 @@
120121
"react-textarea-autosize": "^7.1.2",
121122
"react-toastify": "^5.5.0",
122123
"react-use": "^13.12.2",
124+
"react-virtualized": "^9.21.2",
123125
"redux": "^4.0.4",
124126
"redux-devtools-extension": "^2.13.8",
125127
"remark": "^11.0.2",

‎src/App.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import VelogPageFallback from './containers/velog/VelogPageFallback';
1212
import ErrorBoundary from './components/error/ErrorBoundary';
1313
import NotFoundPage from './pages/NotFoundPage';
1414
import { Helmet } from 'react-helmet-async';
15+
import HomePage from './pages/home/HomePage';
1516

1617
const loadableConfig = {
1718
fallback: <PageTemplate />,
@@ -57,12 +58,13 @@ const App: React.FC<AppProps> = props => {
5758
</Helmet>
5859
<ErrorBoundary>
5960
<Switch>
60-
<Route path="/" component={MainPage} exact />
61-
<Route path="/register" component={RegisterPage} />
61+
<Route path="/" component={HomePage} exact />
6262
<Route
6363
path="/:mode(trending|recent|following)"
64-
component={MainPage}
64+
component={HomePage}
6565
/>
66+
67+
<Route path="/register" component={RegisterPage} />
6668
<Route path="/@:username" component={VelogPage} />
6769
{/* <Route path="/@:username/:urlSlug" component={PostPage} /> */}
6870
<Route path="/email-login" component={EmailLoginPage} />

‎src/components/base/Header.tsx

Lines changed: 56 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,16 @@ import HeaderLogo from './HeaderLogo';
1212
import media from '../../lib/styles/media';
1313
import { SearchIcon2 } from '../../static/svg';
1414
import { Link } from 'react-router-dom';
15+
import HomeResponsive from '../home/HomeResponsive';
1516

1617
const HeaderBlock = styled.div<{ floating: boolean }>`
1718
width: 100%;
18-
> .wrapper {
19-
width: 1200px;
19+
.wrapper {
20+
/* width: 1200px; */
21+
width: 100%;
2022
height: 4rem;
21-
margin: 0 auto;
22-
padding-left: 1rem;
23-
padding-right: 1rem;
23+
/* padding-left: 1rem;
24+
padding-right: 1rem; */
2425
display: flex;
2526
justify-content: space-between;
2627
align-items: center;
@@ -36,10 +37,10 @@ const HeaderBlock = styled.div<{ floating: boolean }>`
3637
}
3738
3839
${media.large} {
39-
width: 1024px;
40+
/* width: 1024px; */
4041
}
4142
${media.medium} {
42-
width: 100%;
43+
/* width: 100%; */
4344
.write-button {
4445
display: none;
4546
}
@@ -122,63 +123,65 @@ const Header: React.FC<HeaderProps> = ({
122123
style={{ marginTop: floating ? floatingMargin : 0 }}
123124
data-testid="Header"
124125
>
125-
<div className="wrapper">
126-
<div className="brand">
127-
<HeaderLogo
128-
custom={custom}
129-
userLogo={userLogo}
130-
velogUsername={velogUsername}
131-
/>
132-
</div>
133-
<div className="right">
134-
{/* {velogUsername ? (
126+
<HomeResponsive>
127+
<div className="wrapper">
128+
<div className="brand">
129+
<HeaderLogo
130+
custom={custom}
131+
userLogo={userLogo}
132+
velogUsername={velogUsername}
133+
/>
134+
</div>
135+
<div className="right">
136+
{/* {velogUsername ? (
135137
<SearchIcon2 className="search" />
136138
) : (
137139
<Link to="/search">
138140
<SearchIcon2 className="search" />
139141
</Link>
140142
)} */}
141-
{!isSearch && (
142-
<Link
143-
to={
144-
velogUsername
145-
? `/search?username=${velogUsername}`
146-
: '/search'
147-
}
148-
>
149-
<SearchIcon2 className="search" />
150-
</Link>
151-
)}
152-
{user ? (
153-
<div className="logged-in">
143+
{!isSearch && (
144+
<Link
145+
to={
146+
velogUsername
147+
? `/search?username=${velogUsername}`
148+
: '/search'
149+
}
150+
>
151+
<SearchIcon2 className="search" />
152+
</Link>
153+
)}
154+
{user ? (
155+
<div className="logged-in">
156+
<RoundButton
157+
border
158+
color="darkGray"
159+
style={{ marginRight: '1.25rem' }}
160+
to="/write"
161+
className="write-button"
162+
>
163+
새 글 작성
164+
</RoundButton>
165+
<HeaderUserIcon user={user} onClick={toggleUserMenu} />
166+
<HeaderUserMenu
167+
onClose={toggleUserMenu}
168+
username={user.username}
169+
onLogout={onLogout}
170+
visible={userMenu}
171+
/>
172+
</div>
173+
) : (
154174
<RoundButton
155-
border
156175
color="darkGray"
157-
style={{ marginRight: '1.25rem' }}
158-
to="/write"
159-
className="write-button"
176+
onClick={onLoginClick}
177+
className="login-button"
160178
>
161-
새 글 작성
179+
로그인
162180
</RoundButton>
163-
<HeaderUserIcon user={user} onClick={toggleUserMenu} />
164-
<HeaderUserMenu
165-
onClose={toggleUserMenu}
166-
username={user.username}
167-
onLogout={onLogout}
168-
visible={userMenu}
169-
/>
170-
</div>
171-
) : (
172-
<RoundButton
173-
color="darkGray"
174-
onClick={onLoginClick}
175-
className="login-button"
176-
>
177-
로그인
178-
</RoundButton>
179-
)}
181+
)}
182+
</div>
180183
</div>
181-
</div>
184+
</HomeResponsive>
182185
</HeaderBlock>
183186
{floating && <Placeholder />}
184187
</>

0 commit comments

Comments
 (0)