url에 따라 이미지 변화주기

Louis·2023년 12월 7일

React

안녕하세요!

오늘은 어제 포스팅했던 내용의 연장선의 내용을 가져왔습니다

검색에 옵션을 선택하고 상세지역을 작성하면 위의 이미지처럼 url이 변경 되면서 페이지 이동을 했는데

이번에는 select로 선택한 지역에 대한 대표 이미지로 해당 페이지의 상단 이미지를 변경해주고자 이번 작업을 진행했고, 이렇게 결과를 포스팅으로 남겨보려고 합니다!

그럼 가보실까요?

후비고~~~

코드는 어떻게 되나요?

코드 소개에 앞서 저는 SearchResultPage.jsx 컴포넌트와 SearchResultPage.style.jsx, Search.jsx 파일로 나눠서 진행했습니다


// SearchResultPage.jsx
import React from 'react';
import { useSearchParams, useNavigate } from 'react-router-dom';
import { useState } from 'react';
import * as St from './Search.style';

function Search() {
  const regions = [
    { label: '', value: '지역을 선택해주세요' },
    { label: 'Seoul', value: '서울' },
    { label: 'Busan', value: '부산' },
    // 더 많은 option은 현재 코드에서 생략하겠습니다
  ];

  const [searchParams, setSearchParams] = useSearchParams();
  const navigate = useNavigate();

  const initKeyword = searchParams.get('keyword');
  const initSelectParam = searchParams.get('selectParam');

  const [keyword, setKeyword] = useState(initKeyword || '');
  const [selectParam, setSelectParam] = useState(initSelectParam || '');
  // const courses = getCourses(initKeyword);

  const handleKeywordChange = (e) => setKeyword(e.target.value);
  const handleSelectChange = (e) => setSelectParam(e.target.value);

  const handleSubmit = (e) => {
    e.preventDefault();
    // setSearchParams(keyword ? { keyword } : {});

    setSearchParams({
      keyword: keyword || undefined,
      selectParam: selectParam || undefined
    });

    // 새로운 URL 경로를 검색어와 함께 구성합니다.
    const newPath = keyword ? `/select/${encodeURIComponent(selectParam)}/search/${encodeURIComponent(keyword)}` : '/';
    const noSelect = keyword ? `/search/${encodeURIComponent(keyword)}` : `/`;
    const nokeyword = selectParam ? `/select/${encodeURIComponent(selectParam)}` : `/`;

    if (keyword !== '' && selectParam !== '') {
      navigate(newPath);
    } else if (keyword === '' && selectParam !== '') {
      navigate(nokeyword);
    } else if (keyword !== '' && selectParam === '') {
      navigate(noSelect);
    }

    // 히스토리 객체를 사용하여 새로운 위치로 이동합니다.
    // navigate(newPath);

    console.log({ keyword, selectParam });
  };

  return (
    <St.SearchWrapper onSubmit={handleSubmit}>
      <St.SearchIndex>
        <St.SelectStyle name="selectParam" value={selectParam} onChange={handleSelectChange}>
          {regions.map((region, index) => (
            <option key={index} value={region.value}>
              {region.value}
            </option>
          ))}
        </St.SelectStyle>
        <St.InputStyle
          name="keyword"
          value={keyword}
          onChange={handleKeywordChange}
          placeholder="산책하고 싶은 지역을 검색해주세요"
        ></St.InputStyle>
        <St.ButtonStyle type="submit">검색</St.ButtonStyle>
      </St.SearchIndex>
    </St.SearchWrapper>
  );
}

export default Search;

크게 어제와 다른 점은 option을 map 함수로 간단하게 표현하였고,
url 구성에서 select와 search 방향을 조금 달리 주었습니다

또한, select를 객체로 선언해준 이유는 실질적으로 보여주는 값은 한글이지만 전달해주는 데이터는 영문으로 전달해주고 싶기 때문이었습니다
하지만... 이 부분은 조금 더 공부가 필요할 것 같습니다..! (에헴..)

그리고!

import React from 'react';
import { useParams } from 'react-router-dom';
import Search from '../Search/Search';
import * as St from '../Search/SearchResultPage.style';

function SearchResultPage() {
  const { keyword, selectParam } = useParams();

  console.log('keyword form url: ', keyword);

  return (
    <>
      <St.HeaderImage city={selectParam}>
        <St.HeaderTitle>
          {selectParam}, {keyword}
        </St.HeaderTitle>
      </St.HeaderImage>
      <Search />
      <div>
        <h2>
          '{selectParam}'의 '{keyword}' 지역 주변 검색 결과입니다
        </h2>
        <div>
          여기는 '{selectParam}'의 '{keyword}' 지역에 관련한 내용이 들어갈 곳 입니다
        </div>
      </div>
    </>
  );
}

export default SearchResultPage;

<St.HeaderImage /> 태그 안에 city={selectParam}을 넣어주어 이미지를 변환해줄 준비를 해줍니다

그리고!

// SearchResultPage.style.jsx
import { styled } from 'styled-components';
import { colors } from 'styles/GlobalColors';

import Seoul from '../../assets/LocalImage/SeoulImage.jpeg';
import Busan from '../../assets/LocalImage/BusanImage.jpeg';
import Deagu from '../../assets/LocalImage/DaeguImage.jpg';
import Incheon from '../../assets/LocalImage/IncheonImage.jpeg';
import Gwangju from '../../assets/LocalImage/GwangjuImage.jpeg';
import Deajeon from '../../assets/LocalImage/DaejeonImage.jpeg';
import Ulsan from '../../assets/LocalImage/UlsanImage.jpeg';
import Sejong from '../../assets/LocalImage/SejongImage.jpeg';
import Gyeonggi from '../../assets/LocalImage/GyeonggiImage.jpeg';
import Chungbuk from '../../assets/LocalImage/ChungbukImage.jpeg';
import Chungnam from '../../assets/LocalImage/ChungnamImage.jpeg';
import Jeonbuk from '../../assets/LocalImage/JeonbukImage.jpeg';
import Jeonnam from '../../assets/LocalImage/JeonnamImage.jpeg';
import Gyeongbuk from '../../assets/LocalImage/GyeongbukImage.jpeg';
import Gyeongnam from '../../assets/LocalImage/GyeongnamImage.jpeg';
import Jeju from '../../assets/LocalImage/JejuImage.jpeg';
import Gwangwon from '../../assets/LocalImage/GwangwonImage.jpeg';

const regions = {
  서울: Seoul,
  부산: Busan,
  대구: Deagu,
  인천: Incheon,
  광주: Gwangju,
  대전: Deajeon,
  울산: Ulsan,
  세종: Sejong,
  경기: Gyeonggi,
  충북: Chungbuk,
  충남: Chungnam,
  전북: Jeonbuk,
  전남: Jeonnam,
  경북: Gyeongbuk,
  경남: Gyeongnam,
  제주: Jeju,
  강원: Gwangwon
};


export const HeaderImage = styled.div`
  background-image: url(${(props) => regions[props.city]});
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 500px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 100px;
`;

export const HeaderTitle = styled.h1`
  font-family: 'yg-jalnan';
  color: #fff;
  font-size: 82px;
  text-align: center;
`;