4번째 팀 프로젝트 (6) 썸네일형 리스트형 2024/06/19 팀프로젝트(Festiall) : 찜 기능 특정 행사에 찜 버튼을 누르면 찜이되고, 찜이 되어있는 상태에서 찜 버튼을 누르면 찜이 취소되게 구현하기결과부터화면에 나오지는 않지만 현재 로그인 상태네트워크 탭을 통해서 확인해보면찜 하기 버튼 클릭 => POST 요청을 보내고 성공 => 찜 취소 버튼으로 변경찜 취소 버튼 클릭 => DELETE 요청을 보내고 성공 => 찜 하기 버튼으로 변경실제 DB를 확인했을 때도 결과가 잘 나왔다! 테이블 구조Hearts (테이블 명)created_at (자동생성)hearts_id (자동생성, uuid)post_id (uuid)user_id (uuid) Hearts 테이블에 새로운 데이터가 들어가면 특정 id의 유저가 찜한 테이블의 id를 확인할 수 있고 이를 통해 마이페이지에서 찜한 행사 데이터를 불러올 수 있.. 2024/06/18 팀프로젝트(Festiall) : 공통 컴포넌트 - 버튼 모든 컴포넌트에서 재사용 가능한 버튼 컴포넌트기존에는 컴포넌트 마다 버튼 컴포넌트, 인풋 컴포넌트 등 많이 사용되는 컴포넌트들을 일일이 새로 만들어서 사용했었다.결국 페이지가 나타내는 이미지에 따라 일관성있게 버튼, 인풋 등은 디자인을 비슷하게 해서 기존에 썼던 스타일 코드를 ctrl C + ctrl V 하는 경우가 많았었고, 이 부분으로 피드백도 한 번 받았어서 이번 프로젝트에서하나 만들어봤다. 굉장히 간단버튼의 레이블을 children으로 받고,onClick 이벤트, 배경 색상도 props로 받는다.props로 받은 배경색상이 없으면 기본 배경색은 흰 색, 글자 색은 검은 색, 보더도 검은 색으로 나타나고배경색상을 받으면 그 배경 색상으로 버튼 색이 바뀌면서 보더도 같은 색으로 바뀐다.레이블이 눈에.. 2024/06/18 팀프로젝트(Festiall) : 공통 레이아웃 - 헤더 모든 페이지에 들어갈 헤더 컴포넌트 만들기헤더는 모든 페이지에서 나와야해서 라우트부터 설정src/routers/MainRouter.jsximport { RouterProvider, createBrowserRouter } from "react-router-dom";import Home from "../page/Home";import SignUp from "../components/authentication/SignUp";import Login from "../components/authentication/Login";import DetailPage from "../page/DetailPage";import DefaultLayout from "../layouts/DefaultLayout";const rout.. 2024/06/18 팀프로젝트(Festiall) : 상세페이지 - 3 카카오 맵 API 이번에는 카카오 맵 API를 이용해서 행사 장소를 지도로 보여주기일단 결과카카오 맵 API를 이용하기 위해서는 먼저 https://apis.map.kakao.com/web/guide/여기에 나와있는대로 그대로 잘 따라해주면 API 키를 발급받을 수 있다.(공식문서라 기본적인 사용법도 나와있음)발급받은 API키를 토대로 자바스크립트 API를 가져오기(참고로 나의 경우에는 리액트로 작업해서 루트 index.html에 삽입해줬다.) 이제 카카오 맵을 import하고 사용해주기import { Map, MapMarker } from 'react-kakao-maps-sdk';... return (... 행사장소 .. 2024/06/18 팀프로젝트(Festiall) : 상세페이지 - 2 실제 팀 DB에 연동 및 데이터 잘 가져오는 지 확인하기오늘 DB 셋업이 끝나서 상세 페이지에 연결해보기먼저 불러오는 함수와 커스텀 훅을 작성// api/api.js// 어제 작성한 함수를 기반으로 작성// 데이터를 가져오는 함수export const getAnEvent = async ({ queryKey }) => { try { const { data: place } = await supabase .from("places") .select() .eq("post_id", queryKey[1]); return place[0]; } catch (error) { console.error(error); }}; // 커스텀 훅// src/hooks/useGetPla.. 2024/06/17 팀프로젝트(Festiall) : 상세페이지 - 1 오늘 새로운 팀프로젝트 발제주제는 지도 API를 이용해서 전국 행사 및 축제를 알려주는 웹 사이트사이트 이름은 Festiall내가 맡은 부분은 행사별 상세페이지메인 페이지에서 행사 목록을 보여줄꺼고 특정 행사를 클릭했을 때,해당하는 행사의 상세 내용을 저 와이어프레임과 같은 UI로 보여주기 페이지랑 컴포넌트 생성 및 UI더보기src/page/DetailPage.jsxconst DetailPage = () => { return ( )} src/page/Details.styled.jsx (단순 스타일 파일, 아직 미완성인 부분 존재)import styled from "styled-components";export const Section = sty.. 이전 1 다음
