diff --git a/src/assets/svg/Search.tsx b/src/assets/svg/Search.tsx new file mode 100644 index 00000000..894f0618 --- /dev/null +++ b/src/assets/svg/Search.tsx @@ -0,0 +1,26 @@ +export default function Search() { + return ( + + + + + ); +} diff --git a/src/blocks.json b/src/blocks.json index b80ce830..a4490e2a 100644 --- a/src/blocks.json +++ b/src/blocks.json @@ -4,14 +4,14 @@ "nickname": "yoon", "title": "모여서 도란도란 코딩", "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.", - "tags": ["Front-End", "React"] + "tags": ["Front-End", "React", "TypeScript"] }, { "avatar": 8, "nickname": "juhyeong", "title": "모여서 도란도란 코딩", "detail": "상세설명입니다. 내용을 입력해주세요! 우리모두 모여서 도란도란 코딩해요.", - "tags": ["Back-End", "Next.js"] + "tags": ["Back-End", "Nest.js", "TypeScript"] }, { "avatar": 3, diff --git a/src/components/layout/Modal.tsx b/src/components/layout/Modal.tsx index a40bda20..101358b7 100644 --- a/src/components/layout/Modal.tsx +++ b/src/components/layout/Modal.tsx @@ -3,7 +3,7 @@ import axios from 'axios'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; -import UserStore from '../../stores/userstore'; +import UserStore from '../../stores/userStore'; import vectors from '../atoms/Vectors'; export default function Modal() { diff --git a/src/components/lobby/Block.tsx b/src/components/lobby/Block.tsx index a87a5ddf..59e78b2a 100644 --- a/src/components/lobby/Block.tsx +++ b/src/components/lobby/Block.tsx @@ -26,8 +26,8 @@ export default function Block({ {title} {detail} - {tags.map((tag) => ( - #{tag} + {tags.map((myTag) => ( + #{myTag} ))} diff --git a/src/components/lobby/Blocks.tsx b/src/components/lobby/Blocks.tsx index a3fa8cfe..cf4f9ec8 100644 --- a/src/components/lobby/Blocks.tsx +++ b/src/components/lobby/Blocks.tsx @@ -2,6 +2,7 @@ import styled from 'styled-components'; import Block from './Block'; import blockInterface from '../../interface/block.interface'; import blocksData from '../../blocks.json'; +import TagStore from '../../stores/tagStore'; export default function Blocks() { // useEffect(() => { @@ -14,9 +15,17 @@ export default function Blocks() { // method: 'GET', // }).then((res) => res.json().then((data) => setRooms(data))); // }, []); + const { tag } = TagStore(); + const filteredData = blocksData.filter((block) => + block.tags.some((blockTag) => + blockTag.toLowerCase().includes(tag.toLowerCase()), + ) + ? block + : null, + ); return ( - {blocksData.map( + {filteredData.map( ({ avatar, nickname, title, detail, tags }: blockInterface) => { return ( ) => { + setTag(event.target.value); + }; + return ( + + + + + + + ); +} + +const Input = styled.input` + width: 90%; + height: 100%; + color: #f9fafb; + background-color: transparent; + outline: none; + font-family: IBMPlexSansKRRegular; +`; + +const SearhIconContainer = styled.div` + display: flex; + justify-content: center; + align-items: center; + width: 10%; +`; + +const SearchContainer = styled.div` + overflow: hidden; + width: 52.6rem; + height: 5.6rem; + margin-top: 2.4rem; + background-color: transparent; + border-radius: 10rem; + border: solid 0.1rem #374151; + display: flex; + align-items: center; +`; diff --git a/src/components/login/InputNickname.tsx b/src/components/login/InputNickname.tsx index 692c99c2..b7cadf15 100644 --- a/src/components/login/InputNickname.tsx +++ b/src/components/login/InputNickname.tsx @@ -3,7 +3,7 @@ import axios from 'axios'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import { v4 as uuidv4 } from 'uuid'; -import UserStore from '../../stores/userstore'; +import UserStore from '../../stores/userStore'; export default function InputNickname() { const navigate = useNavigate(); diff --git a/src/pages/Lobby.tsx b/src/pages/Lobby.tsx index 4e1cc446..6e0ae939 100644 --- a/src/pages/Lobby.tsx +++ b/src/pages/Lobby.tsx @@ -2,7 +2,7 @@ import { useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import styled from 'styled-components'; import RoomBlocks from '../components/lobby/RoomBlocks'; -import UserStore from '../stores/userstore'; +import UserStore from '../stores/userStore'; export default function Lobby() { const navigate = useNavigate(); diff --git a/src/pages/Main.tsx b/src/pages/Main.tsx index 9f1a60b2..3c6bc6d6 100644 --- a/src/pages/Main.tsx +++ b/src/pages/Main.tsx @@ -1,9 +1,15 @@ import styled from 'styled-components'; +import { useNavigate } from 'react-router-dom'; import { ScrollMenu } from 'react-horizontal-scrolling-menu'; import vectors from '../components/atoms/Vectors'; import Blocks from '../components/lobby/Blocks'; +import Search from '../components/lobby/Search'; export default function Main() { + const navigate = useNavigate(); + const randomEnter = () => { + navigate(`/room/random`); + }; return (
@@ -16,12 +22,12 @@ export default function Main() { - 모여서 + 모여서 도란도란 - 코딩해요 + 코딩해요 - + 랜덤 입장 @@ -66,21 +72,17 @@ const ScrollContainer = styled.div` margin-left: 10rem; `; -const RandomEnter = styled.div` +const RandomEnter = styled.button` width: 16.1rem; height: 5.4rem; background-color: white; margin-top: 4rem; border-radius: 6.2rem; -`; - -const Search = styled.div` - width: 52.6rem; - height: 5.6rem; - margin-top: 2.4rem; - background-color: transparent; - border-radius: 10rem; - border: solid 0.1rem #374151; + cursor: pointer; + color: black; + font-size: 1.8rem; + font-family: JostRegular; + font-weight: 700; `; const TitleContainer = styled.div` diff --git a/src/stores/tagStore.ts b/src/stores/tagStore.ts new file mode 100644 index 00000000..608e8b21 --- /dev/null +++ b/src/stores/tagStore.ts @@ -0,0 +1,14 @@ +import create from 'zustand'; + +interface Tag { + tag: string; + setTag: (_by: string) => void; +} +const TagStore = create((set) => ({ + tag: '', + setTag: (by) => { + set(() => ({ tag: by })); + }, +})); + +export default TagStore; diff --git a/src/stores/userstore.ts b/src/stores/userStore.ts similarity index 100% rename from src/stores/userstore.ts rename to src/stores/userStore.ts