FIRE-292-fe-horizontal-arrow-생성

src/blocks.json

@@ -4,34 +4,47 @@
     "nickname": "yoon",
     "title": "모여서 도란도란 코딩",
     "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
-    "tags": ["Front-End", "React", "TypeScript"]
+    "tags": ["Front-End", "React", "TypeScript"],
+    "itemId": "1"
   },
   {
     "avatar": 8,
     "nickname": "juhyeong",
     "title": "모여서 도란도란 코딩",
     "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
-    "tags": ["Back-End", "Nest.js", "TypeScript"]
+    "tags": ["Back-End", "Nest.js", "TypeScript"],
+    "itemId": "2"
   },
   {
     "avatar": 3,
     "nickname": "halang",
     "title": "모여서 도란도란 코딩",
     "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
-    "tags": ["Algorithm", "C++"]
+    "tags": ["Algorithm", "C++"],
+    "itemId": "3"
   },
   {
     "avatar": 17,
     "nickname": "sukyeong",
     "title": "모여서 도란도란 코딩",
     "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
-    "tags": ["SWM", "Fire"]
+    "tags": ["SWM", "Fire"],
+    "itemId": "4"
   },
   {
     "avatar": 11,
     "nickname": "junseo",
     "title": "모여서 도란도란 코딩",
     "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
-    "tags": ["Algorithm", "42Seoul"]
+    "tags": ["Algorithm", "42Seoul"],
+    "itemId": "5"
+  },
+  {
+    "avatar": 13,
+    "nickname": "369",
+    "title": "모여서 도란도란 코딩",
+    "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.",
+    "tags": ["Algorithm", "SWM"],
+    "itemId": "6"
   }
 ]

src/components/main/Arrow.tsx

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import { VisibilityContext } from 'react-horizontal-scrolling-menu';
+
+function Left({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  const [show, setShow] = useState(false);
+  return show ? (
+    <Button
+      margin={10}
+      border={[2, 0, 0, 2]}
+      left
+      onClick={onClick}
+      onMouseLeave={() => {
+        setShow(false);
+      }}
+    >
+      {children}
+    </Button>
+  ) : (
+    <Transparent
+      margin={10}
+      border={[2, 0, 0, 2]}
+      left
+      onMouseEnter={() => {
+        setShow(true);
+      }}
+    />
+  );
+}
+function Right({
+  children,
+  onClick,
+}: {
+  children: React.ReactNode;
+  onClick: () => void;
+}) {
+  const [show, setShow] = useState(false);
+  return show ? (
+    <Button
+      margin={0}
+      border={[0, 2, 2, 0]}
+      left={false}
+      onClick={onClick}
+      onMouseLeave={() => {
+        setShow(false);
+      }}
+    >
+      {children}
+    </Button>
+  ) : (
+    <Transparent
+      margin={0}
+      border={[0, 2, 2, 0]}
+      left={false}
+      onMouseEnter={() => {
+        setShow(true);
+      }}
+    />
+  );
+}
+
+interface Props {
+  margin: number;
+  border: number[];
+  left?: boolean;
+}
+
+const Transparent = styled.div<Props>`
+  background-color: transparent;
+  ${(props) => props.color}
+  width: 10rem;
+  position: absolute;
+  z-index: 999;
+  height: 50rem;
+  ${(props) => {
+    if (props.left) {
+      return `left: 0;`;
+    }
+    return `right: 0;`;
+  }}
+  border-radius: ${(props) => props.border[0]}rem
+    ${(props) => props.border[1]}rem ${(props) => props.border[2]}rem
+    ${(props) => props.border[3]}rem;
+  margin-left: ${(props) => props.margin}rem;
+`;
+
+const Button = styled.button<Props>`
+  cursor: pointer;
+  color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(255, 255, 255, 0.3);
+  user-select: none;
+  width: 10rem;
+  position: absolute;
+  z-index: 999;
+  height: 50rem;
+  ${(props) => {
+    if (props.left) {
+      return `left: 0;`;
+    }
+    return `right: 0;`;
+  }}
+  border-radius: ${(props) => props.border[0]}rem
+    ${(props) => props.border[1]}rem ${(props) => props.border[2]}rem
+    ${(props) => props.border[3]}rem;
+  margin-left: ${(props) => props.margin}rem;
+`;
+
+export function LeftArrow() {
+  const { scrollPrev } = React.useContext(VisibilityContext);
+  return <Left onClick={() => scrollPrev()}>←</Left>;
+}
+
+export function RightArrow() {
+  const { scrollNext } = React.useContext(VisibilityContext);
+  return <Right onClick={() => scrollNext()}>→</Right>;
+}

src/components/main/Blocks.tsx

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+
 import Block from './Block';
 import blockInterface from '../../interface/block.interface';
 import blocksData from '../../blocks.json';
@@ -26,9 +27,10 @@ export default function Blocks() {
   return (
     <Component>
       {filteredData.map(
-        ({ avatar, nickname, title, detail, tags }: blockInterface) => {
+        ({ avatar, nickname, title, detail, tags, itemId }: blockInterface) => {
           return (
             <Block
+              itemId={itemId}
               key={nickname}
               nickname={nickname}
               avatar={avatar}

src/components/main/Card.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from 'styled-components';
+import { VisibilityContext } from 'react-horizontal-scrolling-menu';
+
+export function Card({ title, itemId }: { title: string; itemId: string }) {
+  const visibility = React.useContext(VisibilityContext);
+  const visible = visibility.isItemVisible(title);
+
+  return (
+    <CardContainer>
+      <div>
+        <div style={{ backgroundColor: 'white' }}>block{itemId}</div>
+        <div style={{ backgroundColor: visible ? 'transparent' : 'gray' }}>
+          visible: {JSON.stringify(visible)}
+        </div>
+      </div>
+      <div
+        style={{
+          backgroundColor: 'bisque',
+          height: '200px',
+        }}
+      />
+    </CardContainer>
+  );
+}
+
+const CardContainer = styled.div`
+  border: 1px solid;
+  display: inline-block;
+  margin: 0 10px;
+  width: 160px;
+`;

src/components/main/Scrolls.tsx

@@ -1,13 +1,46 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ScrollMenu } from 'react-horizontal-scrolling-menu';
-import Blocks from './Blocks';
+import { LeftArrow, RightArrow } from './Arrow';
+import Block from './Block';
+import blockInterface from '../../interface/block.interface';
+import blocksData from '../../blocks.json';
+import TagStore from '../../stores/tagStore';
 
 export default function Scrolls() {
+  const { tag } = TagStore();
+  const filteredData = blocksData.filter((block) =>
+    block.tags.some((blockTag) =>
+      blockTag.toLowerCase().includes(tag.toLowerCase()),
+    )
+      ? block
+      : null,
+  );
   return (
     <Container>
-      <ScrollMenu>
-        <Blocks />
+      <ScrollMenu LeftArrow={LeftArrow} RightArrow={RightArrow}>
+        {filteredData.map(
+          ({
+            avatar,
+            nickname,
+            title,
+            detail,
+            tags,
+            itemId,
+          }: blockInterface) => {
+            return (
+              <Block
+                itemId={itemId}
+                key={nickname}
+                nickname={nickname}
+                avatar={avatar}
+                title={title}
+                detail={detail}
+                tags={tags}
+              />
+            );
+          },
+        )}
       </ScrollMenu>
     </Container>
   );

src/interface/block.interface.ts

@@ -4,4 +4,5 @@ export default interface blockInterface {
   title: string;
   detail: string;
   tags: string[];
+  itemId: string;
 }