![]()
회원가입 시 기능들을 소개해 주는 팝업창을 추가했다. 요구사항 1) 팝업 형식으로 배경 처리 2) 좌우로 스와이프 3) 마지막 페이지 넘길 시 홈화면 오늘하날의 회원이 되신걸 환영합니다! 여러가지 기능들을 알려드릴게요. { dispatch(offJoin()) } } > 다른 회원님들의 오늘 하날을 볼 수 있어요! 마음에 드는 하날에 좋아요를 누르고 댓글도 달아보세요. 홈 화면에 사용법 팝업을 위한 background와 swiper를 추가했다. 회원가입 시 onJoin변수가 true로 바뀌게 되고 todays로 navigate 됨과 동시에 팝업이 뜨게 된다. { dispatch(offJoin()) } } > swiper 옵션에 onReachEnd(마지막 페이지 swiper시) onJoin변수를 false로..
![]()
오늘은 어제 테스트했던 현재 위치, 날씨를 작업 중인 프로젝트에 이식했다. 1) 현재 위치 현재 위치가 적용되어야 할 부분은 업로드, 내주변, 궁금해요 총 세 곳이다. 먼저 어제와 마찬가지로 hook을 만들었다. import { useEffect, useState } from "react"; import axios from "axios"; import { useDispatch } from "react-redux"; import { getLocation } from "../store/modules/acountSlice"; const useLocationHook = () => { const dispatch = useDispatch() const [address, setAddress] = useState(''..
![]()
게시글, 궁금해요 질문/답변을 업로드할 때 현재 위치와 날씨가 같이 저장된다. 오늘은 해당 기능을 구현해보기 위해 여러 가지 방법을 알아보았다. 1) 현재 위치 현재 위치는 geolocation을 사용하여 비교적 쉽게 구현할 수 있었다. https://developer.mozilla.org/en-US/docs/Web/API/Geolocation_API/Using_the_Geolocation_API Using the Geolocation API - Web APIs | MDN The Geolocation API is used to retrieve the user's location, so that it can for example be used to display their position using a m..
![]()
1) 댓글 해당 게시글에 맞는 댓글들이 출력되도록 했다. 만약 댓글이 없을 시 아래와 같이 출력된다. { boardId: 6, date: '2023-07-17', time: '09시 20분', dateTime: 230717092000, authorAcountId: 3, loactionCity: '인천광역시', loactionGu: '남동구', weather: 'rain', temperatures: '20', yesterday: true, likesAcountId: [1, 2, 3], images: './images/sky/sky6.jpg', authorLike: 70, comment: [ { commentId: 1, commentAuthorId: 1, text: '하늘이 넘오넘오 예뻐용 쿠쿠', date..
![]()
1) Todays Detailswiper 플러그인을 사용해서 유튜브 쇼츠처럼 위아래로 넘길 수 있다. 오늘 날짜에 해당하는 게시글들만 출력된다. likesAcountId의 length로 좋아요 수를 표시하며, 댓글 기능 구현을 위해 데이터에 추가해 놓았다. commentAuthorId와 acountId가 같은 객체를 찾아 닉네임, treeLevel을 가져와야 하고 닉네임 혹은 나무의 레벨이 변할 때 댓글의 내용도 바뀌어야 하므로 고려해야 할 부분이다. const { date, images, time, authorLike, authorAcountId, loactionCity, loactionGu, yesterday, likesAcountId, temperatures, comment } = item cons..
![]()
1) 내 질문, 내 답변 모아 보기 로그인을 한 후 궁금해요 페이지로 가면 내 질문 수와 답변수를 확인할 수 있다. 클릭을 하면 해당 게시글이 출력된다. 내 질문과 내 답변은 지역에 상관없이 모두 출력된다. 2) Todays Detail home 페이지에서 todays에 올라온 이미지를 클릭하면 정보와 이미지를 크게 볼 수 있고 좋아요와 댓글을 확인할 수 있다. 댓글 모두 보기를 클릭하면 해당 게시글의 댓글이 있는 페이지로 넘어가며 모든 댓글을 확인 가능하고 추가도 할 수 있다.
![]()
앞으로 작업해야 할 부분 정리 1) 기능 궁금해요 업로드 궁금해요 내 질문, 내 답변 모아 보기 Todays detail 페이지 Todays detail 좋아요, 댓글 기능 + 삭제 기능 닉네임 수정 Todays 게시글 삭제 2) 기능 외 나무 레벨 별 사진 수집 날씨별 GIF 이미지 3) 궁금해요 업로드 궁금해요에 업로드를 하기 위해 두 가지 조건이 있다. 첫 번째는 로그인, 두 번째는 궁금한 지역 선택 { localOnLogin === 'true' ? uploadWonder()}>궁금해요 : navigator('/login')}>궁금해요 } const uploadWonder = item => { if (selectedSido && selectedGugun) { setOnWonderUpload(true..
![]()
1) 궁금해요 답변 궁금해요 게시글에 답변을 다는 popup을 작업했다. 상단에 질문 정보가 나오고 하단엔 답변을 달 수 있는 폼이 나온다. 2) 궁금해요 답변완료 답변 완료 시 답변을 올릴 때 사용했던 사진이 썸네일로 출력된다. 답변이 완료된 게시글을 클릭하면 답변 정보와 함께 사진과 날씨 정보가 출력된다. 3) 궁금해요 삭제 궁금해요 게시글 글쓴이와 현재 로그인 한 계정이 동일하면 삭제 버튼이 활성화된다.
![]()
1) 최신순 sort const currentDate = new Date(); const year = currentDate.getFullYear(); const month = String(currentDate.getMonth() + 1).padStart(2, '0'); const day = String(currentDate.getDate()).padStart(2, '0'); const formattedDate2 = `${year}-${month}-${day}`; const formattedDate3 = `${month}월 ${day}일` const formattedDate = '2023-07-17' const todaysList = board.filter(item => item.date === forma..
