Skip to content

Feature/grid home #102

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
Mar 2, 2020
Merged

Feature/grid home #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
8ac0aa8
Initialize UI for PostCard
velopert Feb 25, 2020
ecd41df
Implement post loading
velopert Feb 27, 2020
c63f99a
Implement responsive design to grid
velopert Mar 1, 2020
5a47cc6
Implement search on home header
velopert Mar 1, 2020
32419a6
Implement prefetch
velopert Mar 1, 2020
99c39c7
Fix className omit mistake at RoundButton
velopert Mar 1, 2020
9251d1f
Better responsive design
velopert Mar 1, 2020
9bb783b
Resize user thumbnail in PostCard
velopert Mar 1, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"@types/react-router-dom": "^5.1.3",
"@types/react-textarea-autosize": "^4.3.5",
"@types/react-toastify": "^4.1.0",
"@types/react-virtualized": "^9.21.8",
"@types/sanitize-html": "^1.20.2",
"@types/styled-components": "^4.4.1",
"@types/throttle-debounce": "^2.1.0",
Expand Down Expand Up @@ -120,6 +121,7 @@
"react-textarea-autosize": "^7.1.2",
"react-toastify": "^5.5.0",
"react-use": "^13.12.2",
"react-virtualized": "^9.21.2",
"redux": "^4.0.4",
"redux-devtools-extension": "^2.13.8",
"remark": "^11.0.2",
Expand Down
8 changes: 5 additions & 3 deletions src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import VelogPageFallback from './containers/velog/VelogPageFallback';
import ErrorBoundary from './components/error/ErrorBoundary';
import NotFoundPage from './pages/NotFoundPage';
import { Helmet } from 'react-helmet-async';
import HomePage from './pages/home/HomePage';

const loadableConfig = {
fallback: <PageTemplate />,
Expand Down Expand Up @@ -57,12 +58,13 @@ const App: React.FC<AppProps> = props => {
</Helmet>
<ErrorBoundary>
<Switch>
<Route path="/" component={MainPage} exact />
<Route path="/register" component={RegisterPage} />
<Route path="/" component={HomePage} exact />
<Route
path="/:mode(trending|recent|following)"
component={MainPage}
component={HomePage}
/>

<Route path="/register" component={RegisterPage} />
<Route path="/@:username" component={VelogPage} />
{/* <Route path="/@:username/:urlSlug" component={PostPage} /> */}
<Route path="/email-login" component={EmailLoginPage} />
Expand Down
109 changes: 56 additions & 53 deletions src/components/base/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,15 +12,16 @@ import HeaderLogo from './HeaderLogo';
import media from '../../lib/styles/media';
import { SearchIcon2 } from '../../static/svg';
import { Link } from 'react-router-dom';
import HomeResponsive from '../home/HomeResponsive';

const HeaderBlock = styled.div<{ floating: boolean }>`
width: 100%;
> .wrapper {
width: 1200px;
.wrapper {
/* width: 1200px; */
width: 100%;
height: 4rem;
margin: 0 auto;
padding-left: 1rem;
padding-right: 1rem;
/* padding-left: 1rem;
padding-right: 1rem; */
display: flex;
justify-content: space-between;
align-items: center;
Expand All @@ -36,10 +37,10 @@ const HeaderBlock = styled.div<{ floating: boolean }>`
}

${media.large} {
width: 1024px;
/* width: 1024px; */
}
${media.medium} {
width: 100%;
/* width: 100%; */
.write-button {
display: none;
}
Expand Down Expand Up @@ -122,63 +123,65 @@ const Header: React.FC<HeaderProps> = ({
style={{ marginTop: floating ? floatingMargin : 0 }}
data-testid="Header"
>
<div className="wrapper">
<div className="brand">
<HeaderLogo
custom={custom}
userLogo={userLogo}
velogUsername={velogUsername}
/>
</div>
<div className="right">
{/* {velogUsername ? (
<HomeResponsive>
<div className="wrapper">
<div className="brand">
<HeaderLogo
custom={custom}
userLogo={userLogo}
velogUsername={velogUsername}
/>
</div>
<div className="right">
{/* {velogUsername ? (
<SearchIcon2 className="search" />
) : (
<Link to="/search">
<SearchIcon2 className="search" />
</Link>
)} */}
{!isSearch && (
<Link
to={
velogUsername
? `/search?username=${velogUsername}`
: '/search'
}
>
<SearchIcon2 className="search" />
</Link>
)}
{user ? (
<div className="logged-in">
{!isSearch && (
<Link
to={
velogUsername
? `/search?username=${velogUsername}`
: '/search'
}
>
<SearchIcon2 className="search" />
</Link>
)}
{user ? (
<div className="logged-in">
<RoundButton
border
color="darkGray"
style={{ marginRight: '1.25rem' }}
to="/write"
className="write-button"
>
새 글 작성
</RoundButton>
<HeaderUserIcon user={user} onClick={toggleUserMenu} />
<HeaderUserMenu
onClose={toggleUserMenu}
username={user.username}
onLogout={onLogout}
visible={userMenu}
/>
</div>
) : (
<RoundButton
border
color="darkGray"
style={{ marginRight: '1.25rem' }}
to="/write"
className="write-button"
onClick={onLoginClick}
className="login-button"
>
새 글 작성
로그인
</RoundButton>
<HeaderUserIcon user={user} onClick={toggleUserMenu} />
<HeaderUserMenu
onClose={toggleUserMenu}
username={user.username}
onLogout={onLogout}
visible={userMenu}
/>
</div>
) : (
<RoundButton
color="darkGray"
onClick={onLoginClick}
className="login-button"
>
로그인
</RoundButton>
)}
)}
</div>
</div>
</div>
</HomeResponsive>
</HeaderBlock>
{floating && <Placeholder />}
</>
Expand Down
Loading