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
