Moostock(9) - next js 모달, 해외주식 종목 검색 기능 만들기

이 전까지는 이렇게 내가 미리 입력해놓은 이 9종목만 시세 조회가 가능했다

 

 이 종목들은 다 나스닥에 있는 종목들인데

 

나는 우리나라의 코스피처럼 나스닥에 대기업들이 다 있을줄 알았는데

 

뉴욕증시? 에 있는것도 있고 해서 나스닥으로는 역부족이겠다는걸 느끼고

 

검색 기능이 있으면 좋겠다고 생각했다

 

시세를 보여주는 페이지에 URL에

 

종목코드를 파라미터로 보내고 있었는데

 

이제 종목코드 말고 거래소 코드도 보내야 겠다고 생각했다

 

근데 파라미터로 보내기보단 이번엔 쿼리스트링 으로 보내고 싶다는 생각이 들었다

쿼리 파라미터라고도 하고 용어가 아직은 정확히 뭔지 모르겠다 ㅎ..

url 파라미터는 그냥 url에 붙은 단어이고

 

쿼리스트링은 키,밸류 값을 가진

 

url에 '?' 이 물음표 뒤에 붙은 것들이다

 

그래서 원래는 테슬라 차트를 보려면

 

/chart/TSLA 이렇게만 보내면 됐지만

 

테슬라는 나스닥 종목임으로

 

/chart/TSLA/?excd=NAS

 

이런식으로 Url을 바꾸려 한다

 

client쪽에서 쿼리파라미터? 를 받아오려면  

useSearchParams를 이용하면 된다

Import를 해주고

 const searchParams =useSearchParams()
 const excd = searchParams.get('excd')

이런식으로 가져와서 쓰면 된다

 

근데 나는 시세 정보를 받아오는 api를 만들어서 사용하고 있으므로

 

그쪽도 수정해줘야한다

 

똑같이 useSearchParams를 이용하면 될거같았지만

 

서버에서 받아오는 방법은 다르다

 const excd = request.nextUrl.searchParams.get('excd')

서버에서는 이런식으로 받아와서 사용하면 된다

 

아무튼 여기까지 해서 일단 거래소 코드까지는 받아오는데 성공했다

 

그래서 이제 검색창을 만들어야 했는데

 

사실 그냥 한 페이지에 넣어도 됐지만 

 

공부도 할겸 모달 혹은 다이어로그? 를 만들어 보기로 했다.

 

vue로 프로젝트를 할때 vuetify를 아주 잘 활용했기때문에

 

Next 프로젝트를 하면서도 UI 프레임워크를 사용하면 좋겠다 해서 이것저것 찾아봤따

 

꽤나 많은 시간을 해서 찾아보고 적용해보려 했는데

 

생각보다 적용하기가 복잡하고 리엑트 프로젝트에서는 잘 되지만

 

넥스트 프로젝트에서는 잘 안되는 것들도 있어서 

 

공부도 할겸 그냥 직접 구현하기로 마음을 먹었다

 

물론 다른분의 블로그를 참고했다

https://velog.io/@cloud_oort/Next.js-%EB%AA%A8%EB%8B%AC%EC%B0%BD-%EC%A0%95%EB%A7%90-%EC%89%BD%EA%B2%8C-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

[Next.js] 모달창 정말 쉽게 구현하기

 

그래서 저렇게 검색하기 버튼을 만들고

 

 

버튼을 누르면 이렇게 거래소와 종목코드를 입력하는 모달이 보이게 만들었다

근데 진짜 멍청하게도 나는 저 거래소 선택하는게 dropdown이 필요할줄알고

 

또 검색 엄청하고 만들려 하다가

 

아 select라는게 있었지... 했다..

 

이런 멍청이!!! 

 

멍청하면 몸이 고생한다 ㅎ

 

아무튼 select를 이용해서 만들고 그 값을 받아오는건

 

react의 useState를 활용했다

 

이것도 근데 리액트를 안한지 하도 오래되서 검색을 통해서 했다

"use client";
import styles from "../src/styles/search-modal.module.scss";
import { IoMdCloseCircleOutline } from "react-icons/io";
import React, { useState, ChangeEvent } from "react";
import { useRouter } from "next/navigation";
export default function SearchModal(props: any) {
  const router = useRouter()
  const { clickModal } = props;
  const [selectedValue, setSelectedValue] = useState<string>("NAS");
  const [inputValue, setInputValue] = useState<string>("");

  const handleSelectChange = (event: ChangeEvent<HTMLSelectElement>) => {
    setSelectedValue(event.target.value);
  };
  const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => {
    setInputValue(event.target.value);
  };

  const goChart = (excd : string, symb:string) => {
    if (symb.length <1) {
      alert('종목코드를 입력해주세요')
    } else {
      router.push(`/chart/${symb}?excd=${excd}`)
    }
    console.log(excd, symb)
  }
  return (
    <div className={styles.modal_box}>
      <div className={styles.content}>
        <div className={styles.close_btn}>
          <IoMdCloseCircleOutline onClick={clickModal} size={40} />
        </div>
        <label>
          거래소
          <select value={selectedValue} onChange={handleSelectChange}>
            <option value="NAS">나스닥</option>
            <option value="NYS">뉴욕</option>
            <option value="AMS">아멕스</option>
            <option value="TSE">도쿄</option>
            <option value="HKS">홍콩</option>
            <option value="SHS">상해</option>
          </select>
        </label>
        <div className={styles.wrap_input}>
          <h3>종목코드</h3>
          <input
            type="text"
            value={inputValue}
            onChange={handleInputChange}
          ></input>
        </div>
        <button className={styles.search_btn} onClick={() => goChart(selectedValue, inputValue)}>시세 확인</button>
      </div>
    </div>
  );
}

뭐 모달 컴포넌트는 대충 이렇게 생겼는데

 

input의 값을 받아오는게 vue에서는 그냥 v-model로 아주 쉽게 받아올수 있었는데

 

리액트에서도 많이 복잡하진 않지만 맨날 vue만 하다가 오니까 상대적으로 더 복잡하다는 생각이 들었다

 

무튼 예를들어 뉴욕 거래소에 있는 TSMC 종목 그래프를 보기위해

다음과 같이 입력하고 시세확인 버튼을 누르면

 

다음과 같이 그래프가 잘 나오는것을 확인할 수 있다

 

---

이제 다음에 하고싶은거는 현재가도 보여주고

그래프 말고도 여러가지 정보를 보여주는것을 해보겠다!!