카페추천 웹사이트(카카오맵 API 연동)

오늘은 카카오맵 API를 연동해서 카페위치를 알려주는 코드를 완성해보겠습니다.

 

CafeDetail.js코드

import React, { useEffect, useRef } from "react"

import styles from './CafeDetail.module.css';

import { Link, useParams } from "react-router-dom";

const { kakao } = window;

export default function CafeDetail() {

    const { id } = useParams();

    const container = useRef(null); // 지도 데이터 접근

    //카페 데이터 (예시 데이터)

    const cafes = [

        { id : 1, name: "그릿비", region: "울산", category: "뷰맛집", imageUrl: require('../img/view1.jpg') },

        { id : 2, name: "롤링커피", region: "울산", category: "커피맛집", imageUrl:  require('../img/coffe1.jpg') },

        { id : 3, name: "아베베베이커리", region: "서울", category: "빵맛집", imageUrl:  require('../img/bread1.jpg') },

        { id : 4, name: "델문도", region: "제주", category: "뷰맛집", imageUrl: require('../img/view2.jpg') },

    ];

    // 선택한 카페 정보 찾기

    const cafe = cafes.find(cafe => cafe.id === parseInt(id));

    useEffect(() => {

        const position = new kakao.maps.LatLng(33.450701, 126.570667)

        const options = {

            center: position,

            level: 3,

        };

        const map = new kakao.maps.Map(container.current, options);

    }, []);

    if(!cafe) {

        return <p>카페 정보를 찾을 수 없습니다.</p>

    }

    return (

        <div className={styles.bgImg}>

            <h1 className={styles.header}>

                <Link to="/"  className={styles.title}>CAFE 정보</Link>

            </h1>

            <div className={styles.container}>

                <div className={styles.cafeDetail}>

                    <img src={cafe.imageUrl} alt={cafe.name} className={styles.cafeImage} />

                    <h2 className={styles.cafeTitle}>{cafe.name}</h2>

                    <p className={styles.cafeInfo}>{cafe.region} | {cafe.category}</p>

                    <p className={styles.cafeDescription}>{cafe.description}</p>

                    <div style={{ width: "500px", height: "500px" }} ref={container}></div>

                   

                    <Link to="/" className={styles.backLink}>뒤로가기</Link>

                </div>

            </div>

        </div>

    );

}

 

CafeDetail.module.css코드

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

a {

    text-decoration: none;

    color: black;

}

li {

    list-style: none;

}

img {

    display: block;

    width: 100%;

}

.bgImg {

    display: flex;

    flex-direction: column;

    justify-content: flex-start; /* 수직 정렬을 상단으로 변경 */

    background-image: url('../img/main_bg.avif'); /* 배경 이미지 설정 */

    background-size: cover; /* 배경 이미지 크기 조정 */

    background-position: center; /* 배경 이미지 중앙 정렬 */

    background-repeat: no-repeat; /* 배경 이미지 반복 방지 */

    background-attachment: scroll; /* 스크롤 시 배경 이미지 이동 */

    min-height: 100vh; /* 최소 높이 설정 */

    width: 100%; /* 전체 너비 */

    position: relative;

}

.header {

    text-align: center;

    margin-top: 20px; /* 상단 여백 추가 */

    height: auto; /* 높이 자동 조정 */

}

.title{

    text-align: center;

    align-items: center;

    color: white;

}

.cafeDetail {

    padding: 20px;

    border-radius: 8px;

    transition: transform 0.2s; /* 호버 시 애니메이션 효과 */

}

.cafeDetail:hover {

    transform: translateY(-5px); /* 호버 시 카드 상승 효과 */

}

.cafeImage {

    max-width: 50%; /* 이미지 크기 줄이기 */

    height: auto; /* 비율에 맞게 높이 자동 조정 */

    border-radius: 8px; /* 모서리 둥글게 */

    margin: 0 auto; /* 중앙 정렬 */

}

.cafeTitle {

    font-size: 1.5em;

    margin: 10px 0;

    text-align: center; /* 제목 중앙 정렬 */

}

.cafeInfo {

    color: #555;

    text-align: center; /* 정보 중앙 정렬 */

    margin-bottom: 10px; /* 아래 여백 추가 */

}

.cafeDescription {

    margin: 10px 0;

    line-height: 1.6; /* 줄 간격 조정 */

}

.backLink {

    display: inline-block;

    margin-top: 20px;

    text-decoration: underline;

    color: blue;

    text-align: center; /* 중앙 정렬 */

}

 

결과 화면

 

일단 기능부터하고 디자인을 만지던가 해야겠습니다 ㅎ....
다음은, 주소로 좌표값을 알아내서 해당 값을 카페 위치에 맞게 적용해보겠습니다. 예상 소요시간 (한참 걸릴거같음)