Tag, TagMenu 컴포넌트 구현

packages/blog/components/Tag/Tag.stories.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import Tag from './Tag'
+
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+} as ComponentMeta<typeof Tag>
+
+const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />
+
+export const MenuType = Template.bind({})
+MenuType.args = {
+  name: 'ALL',
+  onClick: () => {},
+  view: 'menu',
+}
+
+export const CardType = Template.bind({})
+CardType.args = {
+  name: 'Javascript',
+  onClick: () => {},
+  view: 'card',
+}
+
+export const ContentType = Template.bind({})
+ContentType.args = {
+  name: 'content',
+  onClick: () => {},
+  view: 'content',
+}

packages/blog/components/Tag/Tag.styled.tsx

@@ -0,0 +1,70 @@
+import { theme } from '../../styles/theme'
+import styled, { css } from 'styled-components'
+import { TagProps } from './Tag'
+
+const tagTheme = {
+  menu: {
+    padding: '4px 18px',
+
+    color: theme.color.black,
+    fontSize: '14px',
+    fontWeight: 'bold',
+
+    backgroundColor: theme.color.white,
+    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.15)',
+    borderRadius: '29px',
+  },
+  card: {
+    padding: '4px 7px',
+
+    color: theme.color.white,
+    fontSize: '10px',
+    fontWeight: 'normal',
+
+    backgroundColor: theme.color.grey300,
+    boxShadow: '',
+    borderRadius: '24px',
+  },
+  content: {
+    padding: '4px 26px',
+
+    color: theme.color.black,
+    fontSize: '14px',
+    fontWeight: 500,
+
+    backgroundColor: theme.color.grey200,
+    boxShadow: '0px 1px 1px rgba(0, 0, 0, 0.15)',
+    borderRadius: '29px',
+  },
+}
+
+export interface SProps {
+  view: 'menu' | 'card' | 'content'
+}
+
+const Styled = {
+  tag: styled.button`
+    display: inline-block;
+    align-items: center;
+    justify-content: center;
+
+    cursor: pointer;
+
+    transition: all 0.2s ease-in;
+
+    ${({ view }: SProps) =>
+      css`
+        padding: ${tagTheme[view]['padding']};
+
+        color: ${tagTheme[view]['color']};
+        font-size: ${tagTheme[view]['fontSize']};
+        font-weight: ${tagTheme[view]['fontWeight']};
+
+        background-color: ${tagTheme[view]['backgroundColor']};
+        box-shadow: ${tagTheme[view]['boxShadow']};
+        border-radius: ${tagTheme[view]['borderRadius']};
+      `}
+  `,
+}
+
+export default Styled

packages/blog/components/Tag/Tag.tsx

@@ -0,0 +1,16 @@
+import { MouseEventHandler } from 'react'
+import Styled, { SProps } from './Tag.styled'
+
+export interface TagProps extends SProps {
+  name: string
+  onClick: React.MouseEventHandler<HTMLButtonElement>
+  style?: React.CSSProperties
+}
+
+const Tag: React.FC<TagProps> = ({ name, onClick, view, style }) => (
+  <Styled.tag view={view} onClick={onClick} style={style}>
+    {name}
+  </Styled.tag>
+)
+
+export default Tag

packages/blog/components/Tag/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './Tag'
+export type { TagProps } from './Tag'

packages/blog/components/TagMenu/TagMenu.stories.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import { ComponentMeta, ComponentStory } from '@storybook/react'
+import TagMenu from './TagMenu'
+
+export default {
+  title: 'Components/TagMenu',
+  component: TagMenu,
+} as ComponentMeta<typeof TagMenu>
+
+const Template: ComponentStory<typeof TagMenu> = (args) => (
+  <div style={{ padding: '20px 30px' }}>
+    <TagMenu {...args} />
+  </div>
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  tags: [
+    'ALL',
+    'javascript',
+    'typescript',
+    'react',
+    'vue',
+    'Angular',
+    'Node',
+    'Express',
+    'MongoDB',
+    'MySQL',
+    'PostgreSQL',
+    'SQL',
+    'NoSQL',
+    'GraphQL',
+    'Apollo',
+    'Gatsby',
+    'Next',
+    'Git',
+    'GitHub',
+    'GitLab',
+  ],
+}

packages/blog/components/TagMenu/TagMenu.styled.tsx

@@ -0,0 +1,71 @@
+import styled from 'styled-components'
+
+const Styled = {
+  container: styled.div`
+    position: relative;
+
+    width: 100%;
+
+    background-color: ${({ theme }) => theme.color.grey200};
+    border-radius: 7px;
+  `,
+  scrollbar: styled.div`
+    display: block;
+    width: 100%;
+    padding: 8px 12px;
+
+    overflow-x: auto;
+    overflow-y: hidden;
+
+    white-space: nowrap;
+    overscroll-behavior: none;
+
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+    &::-ms-scrollbar {
+      display: none;
+    }
+    &::-o-scrollbar {
+      display: none;
+    }
+
+    & > button {
+      margin-right: 8px;
+    }
+    & > :last-child {
+      margin-right: 0;
+    }
+  `,
+  leftShadow: styled.div`
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: 7px 0 0 7px;
+    box-shadow: inset 7px 0 9px -7px rgba(0, 0, 0, 0.4);
+
+    pointer-events: none;
+  `,
+  rightShadow: styled.div`
+    position: absolute;
+    top: 0;
+    right: 0;
+
+    width: 100%;
+    height: 100%;
+
+    border-radius: 0px 7px 7px 0;
+    box-shadow: inset -7px 0 9px -7px rgba(0, 0, 0, 0.4);
+
+    pointer-events: none;
+  `,
+}
+
+export default Styled

packages/blog/components/TagMenu/TagMenu.tsx

@@ -0,0 +1,55 @@
+import React, { useRef, useState } from 'react'
+import { useConveyer } from '@egjs/react-conveyer'
+import { theme } from '../../styles/theme'
+import Tag from '../Tag'
+import Styled from './TagMenu.styled'
+
+export interface TagMenuProps {
+  tags: string[]
+}
+
+const TagMenu: React.FC<TagMenuProps> = ({ tags }) => {
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const { isReachEnd, isReachStart, scrollIntoView } = useConveyer(scrollRef, {
+    horizontal: true,
+  })
+  const [selectedTag, setSelectedTag] = useState('all')
+
+  const activeStyle = {
+    color: theme.color.white,
+    backgroundColor: theme.color.main,
+  }
+
+  return (
+    <Styled.container>
+      {!isReachStart && <Styled.leftShadow />}
+      {!isReachEnd && <Styled.rightShadow />}
+      <Styled.scrollbar ref={scrollRef}>
+        <Tag
+          name={'all'}
+          onClick={() => setSelectedTag('all')}
+          view={'menu'}
+          style={selectedTag === 'all' ? activeStyle : {}}
+        />
+        {tags.map((tag) => (
+          <Tag
+            key={tag}
+            name={tag}
+            onClick={(e) => {
+              scrollIntoView(e.currentTarget, {
+                duration: 500,
+                align: 'center',
+                excludeStand: true,
+              })
+              setSelectedTag(tag)
+            }}
+            view={'menu'}
+            style={selectedTag === tag ? activeStyle : {}}
+          />
+        ))}
+      </Styled.scrollbar>
+    </Styled.container>
+  )
+}
+
+export default TagMenu

packages/blog/components/TagMenu/index.tsx

@@ -0,0 +1,2 @@
+export { default } from './TagMenu'
+export type { TagMenuProps } from './TagMenu'

packages/blog/package.json

@@ -12,6 +12,7 @@
     "build-storybook": "build-storybook"
   },
   "dependencies": {
+    "@egjs/react-conveyer": "^1.1.0",
     "body-scroll-lock": "^4.0.0-beta.0",
     "framer-motion": "^6.3.1",
     "next": "12.1.5",

packages/blog/styles/glolbal-style.tsx

@@ -52,6 +52,7 @@ const GlobalStyle = createGlobalStyle`
     background-color: inherit;
     border: none;
     padding: 0;
+    margin: 0;
   }
   button:focus{
     outline-color: ${({ theme }) => theme.color.main};

yarn.lock

@@ -1871,6 +1871,66 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@egjs/agent@npm:^2.2.1":
+  version: 2.4.0
+  resolution: "@egjs/agent@npm:2.4.0"
+  checksum: f1439379768800ec820927c5ed48d931c3db24361bd67db041d040bcf3643cdb1ad73958f24feb63fb82649301a48d41a2f9b3823205f9864fa08e13c3735204
+  languageName: node
+  linkType: hard
+
+"@egjs/axes@npm:^2.8.0":
+  version: 2.8.0
+  resolution: "@egjs/axes@npm:2.8.0"
+  dependencies:
+    "@egjs/agent": ^2.2.1
+    "@egjs/component": ^2.2.2
+    "@egjs/hammerjs": ^2.0.15
+  checksum: 883a0207883796168d0fa09e50e9a61038b8da59129caa6b1fb6fb73dc2d0521c4962cc31005ffeeaf11453a2673d5c0167bb6c8c41e60e6e69667847d69c0ce
+  languageName: node
+  linkType: hard
+
+"@egjs/component@npm:^2.2.2":
+  version: 2.2.2
+  resolution: "@egjs/component@npm:2.2.2"
+  checksum: d5caa05f1bf018db87953138b2a0858539ee37982cc41a989aa1424d8706ef6d5bbb8e7b56f7234f0394e5daa5fdc8d3e247503c48190c11dd0721f07efcb3af
+  languageName: node
+  linkType: hard
+
+"@egjs/component@npm:^3.0.1":
+  version: 3.0.2
+  resolution: "@egjs/component@npm:3.0.2"
+  checksum: 4fd8854192e52f47b5cec5bad4952448b0df3b36f65bc1adae0f933164877d33fc705e9533af27a02b6faa0a4fddcaf101cce7c8f156de6202ad174b1df61e81
+  languageName: node
+  linkType: hard
+
+"@egjs/conveyer@npm:~1.1.0":
+  version: 1.1.0
+  resolution: "@egjs/conveyer@npm:1.1.0"
+  dependencies:
+    "@egjs/axes": ^2.8.0
+    "@egjs/component": ^3.0.1
+  checksum: b87b45d15a1a5971354a38c035d21b6adbfc4ef6a4ba3e969ee9f7e654fa96aeaf44c005463e2ff75c7e69072358a893eb40af89c1161966640a5f9f4a46d9c9
+  languageName: node
+  linkType: hard
+
+"@egjs/hammerjs@npm:^2.0.15":
+  version: 2.0.17
+  resolution: "@egjs/hammerjs@npm:2.0.17"
+  dependencies:
+    "@types/hammerjs": ^2.0.36
+  checksum: 8945137cec5837edd70af3f2e0ea621543eb0aa3b667e6269ec6485350f4d120c2434b37c7c30b1cf42a65275dd61c1f24626749c616696d3956ac0c008c4766
+  languageName: node
+  linkType: hard
+
+"@egjs/react-conveyer@npm:^1.1.0":
+  version: 1.1.0
+  resolution: "@egjs/react-conveyer@npm:1.1.0"
+  dependencies:
+    "@egjs/conveyer": ~1.1.0
+  checksum: 9128b7c697316f7ac77e53cc2426c0d97e354c412b8fe61649f8ad4a39502e4cd6f649a1ec5f08e106ea545cef86c596324eb24321229ec7ca1eb8df738e44fc
+  languageName: node
+  linkType: hard
+
 "@emotion/cache@npm:^10.0.27":
   version: 10.0.29
   resolution: "@emotion/cache@npm:10.0.29"
@@ -5427,6 +5487,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/hammerjs@npm:^2.0.36":
+  version: 2.0.41
+  resolution: "@types/hammerjs@npm:2.0.41"
+  checksum: d16fbd688fc9b18cc270abe8dea8d4c50ef7bd8375e593d92c233d299387933a6b003c8db69819344833052458bc5f9ef1b472001277a49f095928d184356006
+  languageName: node
+  linkType: hard
+
 "@types/hast@npm:^2.0.0":
   version: 2.3.4
   resolution: "@types/hast@npm:2.3.4"
@@ -14514,6 +14581,7 @@ __metadata:
   resolution: "nextjs-craft-blog-kit@workspace:packages/blog"
   dependencies:
     "@craftdocs/craft-extension-api": "*"
+    "@egjs/react-conveyer": ^1.1.0
     "@storybook/addon-a11y": "*"
     "@storybook/addon-actions": "*"
     "@storybook/addon-essentials": "*"