ksw_devlog

검색기능 const params = useParams(); const [searchData, setSearchData] = useState([]); // firestore에서 post 문서 받아오기 useEffect(() => { const postCollectionRef = collection(db, 'post'); const q = query(postCollectionRef); const getPost = onSnapshot(q, (snapshot) => { const newPost = snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data(), })); setSearchData(newPost.filter((item) => item.partyLocation.t..

파이어베이스에서 데이터 불러오기 import { collection, onSnapshot, query } from 'firebase/firestore'; import { db } from '../../common/firebase'; const Home = () => { const [testList, setTestList] = useState([]); useEffect(() => { const postCollectionRef = collection(db, 'post'); const q = query(postCollectionRef); const getPost = onSnapshot(q, (snapshot) => { const postData = snapshot.docs.map((doc) => ({ id: ..

오늘 home 페이지가 조금 수정돼서 UI 부분을 수정했다. [수정 된 UI ]

최종 프로젝트가 시작 된 한 주였다. 기획 부분에서 피드백을 받으면서 처음에 정했던 기획도 많은 수정 과정이 있었다. 기획과 초기 UI가 목요일 밤쯤에 정해져서 이번 주는 기본 UI틀만 잡고 다음주부터 기능 구현을 하기로 하였다.

[수정된 UI 초안] 스타일 부분은 파일을 따로 만들어서 작업하였다.

Home 화면 UI import styled from '@emotion/styled'; import { useState } from 'react'; import HomeBanner from '../../components/home/HomeBanner'; import HomeCategoryList from '../../components/home/HomeCategoryList'; import HomePlace from '../../components/home/HomePlace'; import ScrollTopBtn from '../../components/home/ScrollTopBtn'; const Home = () => { const [testList, setTestList] = useState([1,..

카테고리 만들기 const menulist = [ { id: 1, title: "아이스아메리카노", name: "americano", price: "3,200원", }, { id: 2, title: "핫아메리카노", name: "americano", price: "3,500원", }, { id: 3, title: "아이스초코", name: "choco", price: "3,000원", }, { id: 4, title: "핫초코", name: "choco", price: "4,000원", }, { id: 5, title: "카모마일", name: "tea", price: "3,900원", } ] export { menulist } import { useState } from "react"; import {..

[react-slick] carousel / 배너 만들기 설치 - npm i react-slick / yarn add react-slick - css import import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick.css"; 사용하기 import React from "react"; import Slider from "react-slick"; import "slick-carousel/slick/slick-theme.css"; import "slick-carousel/slick/slick.css"; function Home() { const settings = { dots: true, infinite: true, ..