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]);