[LOLPAGO] 검색 창 구성(3)

🚗 타 사이트 참고

우선 한국의 유저들에 대해서만 검색이 되도록 하겠지만 다른 서버도 선택할 수 있도록 UI를 구성해놓도록 한다.

 

 

 

해당 사이트를 참고했을 때 클릭했을 때 화살표 방향이 바뀌면서 'KR', 'EUW', 'NA'가 보인다.

 

우리도 마찬가지로 클릭했을 때 서버를 선택할 수 있도록 해보자.

 

이를 위해서 SearchServer라는 파일을 생성해주도록 하겠다.

 

해당 컴포넌트에서는 클릭을 했을 때 다른 서버로 변경되어야 하므로 useState를 써야 한다는 것을 알 수 있다.

 

또한 화살표를 사용해야한다.

 

이전 Icon을 만들 때 방향을 설정해두었는데 여기서 사용된다.

 

 

 

🚓 contents

KR, EUW, NA를 콘텐츠로 설정하여 가지고 올 수 있도록 설정한다.

 

아래의 파일해 해당 코드를 추가한다.

 

 

이제 SearchServer를 사용할 떄 해당 내용이 들어가도록 설정해야한다.

 

이를 option이라고 하겠다.

 

 

 

 

일단... 하고 있는데 어렵다...

 

다음에 마저 작성하도록 하겠다...