Home 컴포넌트가 어느정도 끝났다. 네비게이션바도 일단 구현은 해놨는데 기능들 다 구현이 되면 모달창과 함께 수정해야겠다.

진행사항 정리

HOME

1. NavBar와 화면 상단

• NavBar는 화면 전환을 위한 달 아이콘, 모달로 이동하는 Info 아이콘이 있다.
  

• 달 아이콘을 누르면 다른 아이콘으로 전환 되며 색상이 변경된다.
  

• Info 아이콘을 누르면 모달창이 생긴다. 모션은 framer-motion의 layoutId로 구현했다.

• 아직 모달 정보는 생각 중이라 차차 구현할 예정이다.

2. 날씨 및 다음 화면 이동 버튼이 있는 컴포넌트

• 시작페이지가 심심할 거 같아 날씨 정보를 사용자들에게 제공해주기로 했다.
• api는 openweathermap을 활용했다.

2-1. 처음의 컴포넌트

	// api.ts
    
    export const weatherAPI = async (city:string) => {
        try {
            const res = await axios.get(city === '' ?  `https://api.openweathermap.org/data/2.5/weather?q=Seoul&appid=${appId}` :  `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${appId}`);
            return res.data;
        } catch(error) {
            console.log(error);
        }
    }

	// Home.tsx
    
    const [city, setCityState] = useState('');
	
    const handleOnKeyDown = (e:React.KeyboardEvent<HTMLInputElement>) => {
        if(e.key === 'Enter') {
            setCityState(e.currentTarget.value);
            setInputState(false);
        }
    }
    
    const {data:data} = useQuery<IWeatherInfo>(["api", "weather"], weatherAPIDefault(city));

• 원랜 사용자의 지역에 따라 다른 날씨를 보여주고 싶어 사용자에게 Input 창으로 입력을 요구한 후 해당 지역의 날씨를 보여주고 싶었다.
• 그래서 city의 값이 초기엔 빈 스트링이었다 사용자가 앤터키를 누르면 city의 state를 변경 후 weatherAPIDefault의 인자에 추가하여 사용자의 지역에 맞는 날씨를 보여주고 싶었다.

2-2. 문제점

• 사용자가 enter를 누르게 되면 처음의 default로 설정한 지역(서울)의 날씨가 보였다가 사용자 지역의 날씨가 보였다.
• API 측에서 제공하지 않는 지역들이 여럿 존재했다.

2-3. 타협

• 그냥 default 지역(서울)의 날씨만 제공해주기로 했다.