[DAY - 93] #3 개인프로젝트 '오늘 하날'

1) 사진에 장소 표시

오늘 하날 카테고리의 사진이 출력될 때 사진의 장소가 같이 출력되도록 추가했다.
 

    return (
        <li>
            <img src={images} alt={authorAcountId} />
            <div className='loaction'>
                <SlLocationPin />
                <div className='loactionCityGu'>
                    <span>{loactionCity}</span>
                    <span>{loactionGu}</span>
                </div>
            </div>
        </li>
    );

 

 

 

2) 업로드 날씨 이미지로 변경

 
날씨 창에 텍스트가 아닌 GIF로 현재 날씨가 출력되고 온도는 오른쪽에 출력된다.
아직 날씨 GIF들을 구하지 못 해서 비 만 출력된다.
 

        .weather {
            display: flex;
            font-size: 5vw;
            justify-content: flex-end;
            background: none;
            background-image: url('images/weather/rain.gif');
            background-repeat: no-repeat;
            background-position: 0 70%;
        }

 

3) 내 주면 CSS, select option 추가

 
상단에 현재 위치의 날씨와 온도, 그리고 현재 위치를 나타내 주고 현재 위치를 재설정할 수 있는 버튼을 추가했다.
또한 다른 지역의 사진을 보고 싶을 땐 select의 option을 변경하면 된다.
select의 value를 받아 날씨와 위치가 변하며 사진도 해당 위치의 사진이 출력된다.
 

                <div className='selectList'>
                    <select name="sido" value={selectedSido} onChange={handleSidoChange}>
                        {area0.map((sido, index) => (
                            <option key={index} value={sido}>{sido}</option>
                        ))}
                    </select>
                    <select name="gugun" value={selectedGugun} onChange={handleGugunChange} disabled={selectedSido === ''}>
                        <option value="">구/군 선택</option>
                        {selectedSido !== '' && eval(`area${area0.indexOf(selectedSido)}`).map((gugun, index) => (
                            <option key={index} value={gugun}>{gugun}</option>
                        ))}
                    </select>
                </div>

 

4) 로그인/회원가입 CSS

 

 

 

5) 회원가입 구현

 
회원가입 시 미입력 검증은 Join 컴포넌트에서 직접 하고 user에 담아 넘겨준다.
acountSlice에서 user를 받아 join함수를 실행하면 아이디와 닉네임의 중복검사를 하게 된다.
중복검사까지 성공하면 onJoin 상태변수가 true로 변경되고, navigate를 이용해 /info 페이지로 넘어가게 된다.
 

join(state, action) {
            const { loginId, loginPw, nickname } = action.payload;

            const isExistingId = state.acount.some((item) => item.loginId === loginId);
            const isExistingNickname = state.acount.some((item) => item.nickname === nickname);

            if (isExistingId) {
                alert('이미 존재하는 아이디입니다.');
                return;
            } else if (isExistingNickname) {
                alert('이미 존재하는 닉네임입니다.');
                return;
            } else {
                const newAccount = {
                    loginId,
                    loginPw,
                    nickname,
                    acountId: state.acount.length + 1,
                    treeType: '밤나무',
                    treeLevel: 1
                }
                state.acount.push(newAccount)
                state.onLogin = true;
                state.onJoin = true;
                state.currentAcount = newAccount;
                localStorage.setItem('localOnLogin', true);
                localStorage.setItem('localOnJoin', true);
                localStorage.setItem('localCurrentAcount', JSON.stringify(state.currentAcount));
            }
        },

const onSubmit = e => {
        e.preventDefault();
        localStorage.setItem('localOnJoin', false);
        if (!loginId) {
            alert('아이디를 입력하세요');
            return;
        } else if (!loginPw) {
            alert('비밀번호를 입력하세요');
            return;
        } else if (!nickname) {
            alert('닉네임을 입력하세요');
            return;
        } else if (loginPw === !loginPwCheck) {
            alert('비밀번호가 동일하지 않습니다')
            return;
        } else {
            dispatch(join(user));
        }
    }
    useEffect(() => {
        if (acount.onJoin) {
            navigate('/info');
        }
    }, [acount.onJoin, navigate]);

 
 

6) 내 정보 CSS