diff --git a/src/components/common/TagItem.tsx b/src/components/common/TagItem.tsx index 8efe9539..2d6a5791 100644 --- a/src/components/common/TagItem.tsx +++ b/src/components/common/TagItem.tsx @@ -34,7 +34,7 @@ const tagStyle = css` ${media.small} { height: 1.5rem; font-size: 0.75rem; - border-radius: 0.625rem; + border-radius: 0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; margin-right: 0.5rem; diff --git a/src/components/velog/UserTagHorizontalList.tsx b/src/components/velog/UserTagHorizontalList.tsx new file mode 100644 index 00000000..7678d73f --- /dev/null +++ b/src/components/velog/UserTagHorizontalList.tsx @@ -0,0 +1,95 @@ +import React from 'react'; +import styled, { css } from 'styled-components'; +import media from '../../lib/styles/media'; +import { Tag } from '../../lib/graphql/tags'; +import palette from '../../lib/styles/palette'; +import { Link } from 'react-router-dom'; +import { escapeForUrl } from '../../lib/utils'; + +export type UserTagHorizontalListProps = { + active: string | null; + tags: Tag[]; + postsCount: number; + username: string; +}; + +function UserTagHorizontalList({ + active, + tags, + postsCount, + username, +}: UserTagHorizontalListProps) { + return ( + + + 전체보기 ({postsCount}) + + {tags.map(tag => ( + + {tag.name} + ({tag.posts_count}) + + ))} + + ); +} + +const Block = styled.div` + display: none; + ${media.large} { + display: flex; + } + overflow-x: auto; + margin-top: -1.5rem; + padding-top: 1rem; + padding-bottom: 1rem; + + ${media.small} { + padding-left: 1rem; + padding-right: 1rem; + } + margin-bottom: 0.5rem; +`; + +const TagItem = styled(Link)<{ active?: boolean }>` + flex-shrink: 0; + height: 1.5rem; + font-size: 0.75rem; + border-radius: 0.75rem; + padding-left: 0.75rem; + padding-right: 0.75rem; + background: ${palette.gray1}; + color: ${palette.gray8}; + display: flex; + align-items: center; + line-height: 1.5; + + span { + margin-left: 0.25rem; + color: ${palette.gray6}; + font-size: 0.75rem; + } + + ${props => + props.active && + css` + background: ${palette.teal6}; + color: white; + span { + color: white; + opacity: 0.8; + } + `} + + text-decoration: none; + + & + & { + margin-left: 0.5rem; + } +`; + +export default UserTagHorizontalList; diff --git a/src/components/velog/UserTags.tsx b/src/components/velog/UserTags.tsx index 14cad9e0..03ed7ffe 100644 --- a/src/components/velog/UserTags.tsx +++ b/src/components/velog/UserTags.tsx @@ -2,6 +2,7 @@ import React from 'react'; import UserTagVerticalList from './UserTagVerticalList'; import useUserTags from './hooks/useUserTags'; +import UserTagHorizontalList from './UserTagHorizontalList'; export type UserTagsProps = { username: string; @@ -20,6 +21,12 @@ function UserTags({ username, tag }: UserTagsProps) { postsCount={data.postsCount} username={username} /> + ); } diff --git a/src/pages/velog/tabs/UserPostsTab.tsx b/src/pages/velog/tabs/UserPostsTab.tsx index f5854d66..5a738b2b 100644 --- a/src/pages/velog/tabs/UserPostsTab.tsx +++ b/src/pages/velog/tabs/UserPostsTab.tsx @@ -10,6 +10,7 @@ import usePreserveScroll from '../../../lib/hooks/usePreserveScroll'; import { Helmet } from 'react-helmet-async'; import { usePrevious } from 'react-use'; import UserTags from '../../../components/velog/UserTags'; +import { getScrollTop } from '../../../lib/utils'; export interface UserPostsTabProps extends RouteComponentProps<{ username: string }> { @@ -36,7 +37,11 @@ const UserPostsTab: React.FC = ({ const prevTag = usePrevious(tag); useEffect(() => { - if (prevTag !== tag) { + if ( + prevTag !== tag && + window.screen.width > 768 && + getScrollTop() > window.screen.height * 0.6 + ) { window.scrollTo(0, 0); } }, [prevTag, tag]);