feat(blog): tag 디자인 일부 수정 및 tagMenu 스크롤 및 선택 로직 변경 #37

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

@@ -5,9 +5,6 @@ import Tag from './Tag'
 export default {
   title: 'Components/Tag',
   component: Tag,
-  parameters: {
-    layout: 'fullscreen',
-  },
 } as ComponentMeta<typeof Tag>
 
 const Template: ComponentStory<typeof Tag> = (args) => <Tag {...args} />

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

@@ -4,10 +4,10 @@ import { TagProps } from './Tag'
 
 const tagTheme = {
   menu: {
-    padding: '4px 26px',
+    padding: '4px 18px',
 
     color: theme.color.black,
-    fontSize: '21px',
+    fontSize: '14px',
     fontWeight: 'bold',
 
     backgroundColor: theme.color.white,
@@ -44,18 +44,15 @@ export interface SProps {
 
 const Styled = {
   tag: styled.button`
-    display: flex;
+    display: inline-block;
     align-items: center;
     justify-content: center;
-    width: fit-content;
-    height: fit-content;
 
     cursor: pointer;
 
     transition: all 0.2s ease-in;
 
     ${({ view }: SProps) =>
-      view &&
       css`
         padding: ${tagTheme[view]['padding']};
 

packages/blog/components/Tag/Tag.tsx

@@ -3,8 +3,7 @@ import Styled, { SProps } from './Tag.styled'
 
 export interface TagProps extends SProps {
   name: string
-  onClick: MouseEventHandler<HTMLButtonElement> &
-    ((event: React.MouseEventHandler<HTMLButtonElement>) => void | undefined)
+  onClick: React.MouseEventHandler<HTMLButtonElement>
   style?: React.CSSProperties
 }
 

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

@@ -5,9 +5,6 @@ import TagMenu from './TagMenu'
 export default {
   title: 'Components/TagMenu',
   component: TagMenu,
-  parameters: {
-    layout: 'fullscreen',
-  },
 } as ComponentMeta<typeof TagMenu>
 
 const Template: ComponentStory<typeof TagMenu> = (args) => (

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

@@ -5,36 +5,45 @@ const Styled = {
     position: relative;
 
     width: 100%;
-    height: 65px;
 
     background-color: ${({ theme }) => theme.color.grey200};
     border-radius: 7px;
   `,
   scrollbar: styled.div`
-    position: relative;
-    z-index: 1;
-
-    display: flex;
+    display: block;
     width: 100%;
-    height: 100%;
-    padding: 16px 20px;
+    padding: 8px 12px;
 
-    overflow-x: scroll;
+    overflow-x: auto;
+    overflow-y: hidden;
 
-    column-gap: 9px;
+    white-space: nowrap;
+    overscroll-behavior: none;
+
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
 
-    scroll-behavior: smooth;
-    -ms-overflow-style: none;
-    scrollbar-width: none;
     &::-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;
-    z-index: 2;
 
     width: 100%;
     height: 100%;
@@ -48,7 +57,6 @@ const Styled = {
     position: absolute;
     top: 0;
     right: 0;
-    z-index: 2;
 
     width: 100%;
     height: 100%;

packages/blog/components/TagMenu/TagMenu.tsx

@@ -1,55 +1,50 @@
-import React, { useEffect, useState, useRef, useCallback } from 'react'
+import React, { useRef, useState } from 'react'
+import { useConveyer } from '@egjs/react-conveyer'
 import { theme } from '../../styles/theme'
-import Tag from '../Tag/Tag'
+import Tag from '../Tag'
 import Styled from './TagMenu.styled'
 
 export interface TagMenuProps {
   tags: string[]
 }
 
-type edgeType = 'left' | 'right' | 'both' | 'none'
-
 const TagMenu: React.FC<TagMenuProps> = ({ tags }) => {
-  const scrollRef = useRef<any>()
-  const [edge, setEdge] = useState<edgeType>('none')
-  const [selectedTag, setSelectedTag] = useState(0)
+  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,
   }
 
-  const handleEdge = useCallback(
-    ({ scrollLeft, scrollWidth, clientWidth }: { scrollLeft: number; scrollWidth: number; clientWidth: number }) => {
-      const scrollRange = scrollWidth - clientWidth
-      if (scrollRange === 0) setEdge('none')
-      else if (scrollLeft === 0) setEdge('right')
-      else if (scrollLeft === scrollRange) setEdge('left')
-      else setEdge('both')
-    },
-    []
-  )
-
-  useEffect(() => {
-    handleEdge(scrollRef.current)
-  }, [handleEdge, scrollRef])
-
-  const onTagMenuScroll = (e: React.UIEvent<HTMLElement>) => {
-    handleEdge(e.currentTarget)
-    e.stopPropagation()
-  }
-
   return (
     <Styled.container>
-      {edge === 'left' || edge === 'both' ? <Styled.leftShadow /> : <></>}
-      {edge === 'right' || edge === 'both' ? <Styled.rightShadow /> : <></>}
-      <Styled.scrollbar ref={scrollRef} onScroll={onTagMenuScroll}>
-        {tags.map((tag, idx) => (
+      {!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={idx}
+            key={tag}
             name={tag}
-            onClick={(e) => setSelectedTag(idx)}
+            onClick={(e) => {
+              scrollIntoView(e.currentTarget, {
+                duration: 500,
+                align: 'center',
+                excludeStand: true,
+              })
+              setSelectedTag(tag)
+            }}
             view={'menu'}
-            style={selectedTag === idx ? activeStyle : {}}
+            style={selectedTag === tag ? activeStyle : {}}
           />
         ))}
       </Styled.scrollbar>

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": "*"