아웃소싱 프로젝트(2)

사소한 fix

헤더의 폰트 사이즈가 작다고 팀원이 말해서 크게 하고,
카드리스트의 주소를 가운데 정렬하고, 상단의 로고를 클릭하면 홈으로 돌아가도록 했다.

Detail 페이지

Detail 페이지는 사실, 오랜만에 해서 깜빡했었다.

1. 버튼에 링크를 걸었다

<button onClick={() => navigate(`/places/${id}`)}>상세 보기</button>

2. Detail.jsx에서 const selectedPlace = data.find((item) => item.id === id);를 만들어서 Detail에서 사용할 수 있도록 했다.

import { useQuery } from '@tanstack/react-query';
import React from 'react';
import { useParams } from 'react-router-dom';
import { getPlaces } from '../api/places';

function Detail() {
  const { id } = useParams();

  const { isLoading, isError, data, error } = useQuery(['places'], getPlaces);
  if (isLoading) {
    // console.log(isLoading);
    return <h1> 로딩 중... </h1>;
  }

  if (isError) {
    // console.log(error);
    return <h1>에러 발생</h1>;
  }

  // id에 해당하는 것 찾기
  const selectedPlace = data.find((item) => item.id === id);

  if (!selectedPlace) {
    return <p>페이지를 찾을수 없습니다.</p>;
  }
  console.log(selectedPlace);

  // menus 안에  price와 name 출력하기
  console.log('Menus:');
  selectedPlace.menus.forEach((menu) => {
    console.log(`Name: ${menu.name}, Price: ${menu.price}`);
  });

  return (
    <div>
      <h1>{selectedPlace.place_name}</h1>
      <p>주소: {selectedPlace.address}</p>
      <p>전화번호: {selectedPlace.number}</p>
      <p>별점: {selectedPlace.vote}</p>
      <ul>
        {selectedPlace.menus.map((menu, index) => (
          <li key={index}>
            {menu.name} {menu.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

3. 지도를 삽입했다.

    <StaticMap // 지도를 표시할 Container
        center={{
          // 지도의 중심좌표
          lat: yLoc,
          lng: xLoc
        }}
        style={{
          // 지도의 크기
          width: '800px',
          height: '350px'
        }}
        marker={{
          lat: yLoc,
          lng: xLoc
        }}
        level={3} // 지도의 확대 레벨
      />

Detail 페이지 스타일링

디테일 페이지도 마찬가지로 스타일링을 했다.

react-icon 라이브러리

용승님이 아이콘 라이브러리가 있다고 하셨다.
사용법은 컴포넌트처럼 import하고 지정된걸 넣으면 된다.

1. 설치

yarn add react-icons --save

2. 사용법

import { ImEnlarge2 } from 'react-icons/im';
 <Enlarge onClick={onGotoDetailBtnClickHandler} />

react-icon 라이브러리 문제점

hover하려고 css로 display:none을 했었는데, 초기화 되기 전에 액세스 할수 없다고 해서 최상위로 올리니까 해결 되었다.

로고제작

로고가 있으면 번듯하게 이쁠 거 같아서 고민하다가
Everyday Coffe(https://everyday-coffee.com/)의 영감을 받고 로고를 만들었다.

총 3개의 시안이 나왔었는데 그중 세번째가 이쁜 거같아서 적용해보았고, 팀원들에게도 물어보니 제일 깔끔하고 좋다고 해서 기분이 좋았다.

없는거 예외 처리하기

현재 웹으로 불러오는건 firebase기반과 kakao api 기반 두가지다. kakao 데이터가 있으면 그게 최우선이고 없으면 firebase 그 다음 빈 []으로 설정되어있는데, 메인화면에서 별만 뜨는 경우가 있어서 console.log를 해보니 underfined가 나와서 underfined인 경우에는 평점이 없다는 메세지로 했다

    {vote !== undefined ? (
            <span>
              <img src={star} alt="" />
              {vote}
            </span>
          ) : (
            <p>
              <img src={star} alt="" />
              평점정보가 없습니다.
            </p>
          )}

마찬가지로 Detail에서도 동일하게 처리해줬다.

 {selectedMarker.vote !== undefined ? (
              <p>
                <img src={star} alt="" />
                {selectedMarker?.vote}
              </p>
            ) : (
              <p>
                <img src={star} alt="" />
                평점정보가 없습니다.
              </p>
            )}
            <hr />
            <MenuTitle>
              <img src={menu2} />
              메뉴
            </MenuTitle>
            <ul>
              {selectedMarker.menus ? (
                selectedMarker.menus.map((menu, index) => (
                  <li key={index}>
                    <table>
                      <tbody>
                        <tr>
                          <td>{menu?.name}</td>
                          <td>{menu?.price}원</td>
                        </tr>
                      </tbody>
                    </table>
                  </li>
                ))
              ) : (
                <li>메뉴정보가 없습니다.</li>
              )}
	     </ul>