From 83a41b05faee46ce2170367f2861d7039c554a4e Mon Sep 17 00:00:00 2001 From: nebulaBdj Date: Sat, 2 Dec 2023 12:23:57 +0900 Subject: [PATCH] =?UTF-8?q?[Feat]=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=A0=84=EC=97=AD=20=EA=B4=80=EB=A6=AC=20=EC=99=84=EB=A3=8C,?= =?UTF-8?q?=20=ED=94=BC=EB=93=9C=20=EC=95=84=EC=9D=B4=EC=BD=98=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80,=20=EC=97=85=EB=A1=9C=EB=93=9C=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EB=B3=B4=EB=82=B4=EA=B8=B0(#10)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- next.config.js | 2 +- src/app/detail/page.tsx | 31 ++++-- src/app/register/page.tsx | 183 ++++++++++++++++++++++++++------ src/app/socialregister/page.tsx | 2 +- src/app/upload/page.tsx | 9 ++ src/component/FeedContents.tsx | 17 +-- src/component/LoginForm.tsx | 2 +- src/component/WeatherBar.tsx | 6 +- src/recoilAtom/FeedBoardId.ts | 6 ++ src/recoilAtom/FeedContents.ts | 1 + src/style/register.scss | 15 +++ 11 files changed, 227 insertions(+), 47 deletions(-) create mode 100644 src/recoilAtom/FeedBoardId.ts diff --git a/next.config.js b/next.config.js index 56d8325..f1d7f31 100644 --- a/next.config.js +++ b/next.config.js @@ -2,7 +2,7 @@ module.exports = { images: { - domains: ["weatherfit-board-image.s3.amazonaws.com"], + domains: ['weatherfit-board-image.s3.amazonaws.com'], }, }; diff --git a/src/app/detail/page.tsx b/src/app/detail/page.tsx index 168a9eb..98bfc06 100644 --- a/src/app/detail/page.tsx +++ b/src/app/detail/page.tsx @@ -12,15 +12,18 @@ import axios from "axios"; import ContentDetail from "@/component/ContentDetail"; import jwt from "jsonwebtoken"; import Cookies from "js-cookie"; -import { useRecoilState } from "recoil"; +import { useRecoilState, useRecoilValue } from "recoil"; import CommentIcon from "@/component/CommentIcon"; import CategoryDetail from "@/component/CategoryDetail"; import { useRouter } from "next/navigation"; import { editBoardIdState } from "@/recoilAtom/EditDetail"; + + export default function Detail(): JSX.Element { const [boardDetail, setBoardDetail] = useState(null); - const [dropdownVisible, setDropdownVisible] = useState(false); + const [dropdownVisible, setDropdownVisible] = useState(false); + const [localBoardId, setLocalBoardId] = useState(0); const [editBoardId, setEditBoardId] = useRecoilState(editBoardIdState); const router = useRouter(); @@ -35,19 +38,35 @@ export default function Detail(): JSX.Element { console.log("디코딩", decodedToken); useEffect(() => { + + //여기서 localStorae의 값을 가져와 정수로 바꾸기 + const boardId_in = localStorage.getItem("getBoardId_local"); + const boardIdNumber = boardId_in ? parseInt(boardId_in) : null; + setLocalBoardId(boardIdNumber); + + console.log("정수 변환", boardIdNumber); + console.log("로컬에서 불러온 아이읻", localBoardId); + + + + }, []); + + useEffect(()=>{ const fetchData = async () => { try { const response = await axios.get( - `https://www.jerneithe.site/board/detail/${boardDetail.boardId}`, + `https://www.jerneithe.site/board/detail/${localBoardId}`, ); setBoardDetail(response.data); + console.log(response); + } catch (error) { console.error("Error fetching data:", error); } - }; - + }; + fetchData(); - }, []); + },[localBoardId, setLocalBoardId]) const toggleDropdown = () => { setDropdownVisible(!dropdownVisible); diff --git a/src/app/register/page.tsx b/src/app/register/page.tsx index 12aebca..2ade589 100644 --- a/src/app/register/page.tsx +++ b/src/app/register/page.tsx @@ -5,6 +5,7 @@ import { useEffect, useState } from "react"; import InputBar from "@/component/InputBar"; import Menubar from "@/component/MenuBar"; import axios from "axios"; +import { METHODS } from "http"; ///////////////////////////해야하는 작업///////////////////////////// @@ -17,14 +18,22 @@ import axios from "axios"; /////////////////////////////////////////////////////////////////// export default function Register(): JSX.Element { const [email, setEmail] = useState(""); + const [email_code, setEmail_code] = useState(""); const [name, setName] = useState(""); const [nickname, setNickname] = useState(""); const [password, setPassword] = useState(""); const [repassword, setRepassword] = useState(""); //중복검사 - const [emailcheck, setEmailCheck] = useState("이메일을 입력하세요"); - const [nickname_check, setNickCHeck] = useState("닉네임을 입력하세요"); + const [emailcheck, setEmailCheck] = useState(""); + const [nickname_check, setNickCHeck] = useState(""); + + //이메일 인증 인풋바 생성 + const [emailCertified, setCertified] = useState(false); + + //이메일 인증이 되어야만 회원가입 데이터 전송 가능 + const [permission, setPermission] = useState(false); + const [permission_status, setPstatus] = useState(""); const validateEmail = (inputValue: string) => { const emailFormat = @@ -42,32 +51,110 @@ export default function Register(): JSX.Element { }; //이메일 중복 검사 - const check_email = () => { - console.log("onBlur 잘돌아가는지 확인", email); + const check_email = async() => { + try { + const duplication_email = await axios({ + method: "POST", + url: "https://www.jerneithe.site/user/signup/email", + data: { + email : email + }, + }); + + console.log(duplication_email.data.result); + + if(duplication_email.data.result) { + setEmailCheck(""); + } else { + setEmailCheck("사용할 수 없는 이메일입니다. 다시 입력해주세요."); + } + + } catch (error) { + console.log("이메일 데이터를 보내지 못했습니다", error); + } + + console.log("onBlur 동작", email); } //닉네임 중복 검사 + const check_nickname = async() => { + console.log("잘 동작하는지 확인", nickname); + try { + + const duplication_nickname = await axios({ + method: "POST", + url: "https://www.jerneithe.site/user/signup/nickname", + data: { + nickname: nickname, + }, + }); + + + if(duplication_nickname.data.result) { + setNickCHeck(""); + } else { + setNickCHeck("사용할 수 없는 닉네임입니다. 다시 입력해주세요."); + } + + } catch (error) { + console.log("닉네임 데이터를 보내지 못했습니다", nickname,error); + } + } + + //이메일 전송 const verify_btn = async () => { console.log("Verify 버튼이 클릭되었습니다."); - const verify_email = await axios({ - method: "POST", - url: "https://www.jerneithe.site/user/profile", - data: email, - }); + try { + const verify_email = await axios({ + method: "POST", + url: "https://www.jerneithe.site/user/signup/email/send", + data: {email}, + }); + + console.log(verify_email.data); + + if(verify_email.data.result){ + setCertified(true); + }else{ + setCertified(false); + } + + } catch (error) { + console.log("이메일 인증 코드 전송 실패", error); + } }; - const caster_register = async () => { - // const req_regdata = { - // email : email, - // name : name, - // nickname : nickname, - // password : password, - // }; + //이메일 인증 코드 수신 후 전송 + const code_btn = async() => { + try { + const send_code = await axios({ + method: "POST", + url: "https://www.jerneithe.site/user/signup/email/verify", + data: { + email: email, + code: email_code, + } + }); + console.log(send_code.data); + if(send_code.data.result){ + setPstatus("인증 성공!"); + setPermission(true); + }else{ + setPstatus("인증코드가 일치하지 않습니다."); + setPermission(false); + } + + console.log("permission", permission); + } catch (error) { + console.log("이메일 인증 실패", error); + } + } + - // console.log("데이터 확인", req_regdata); + const caster_register = async () => { console.log( email, @@ -76,18 +163,26 @@ export default function Register(): JSX.Element { password ) - const register_data = await axios({ - method: "POST", - url: "https://www.jerneithe.site/user/api/signup", - data : { - email : email, - name : name, - nickname : nickname, - password : password + if(permission){ + try { + const register_data = await axios({ + method: "POST", + url: "https://www.jerneithe.site/user/api/signup", + data : { + email : email, + name : name, + nickname : nickname, + password : password + } + }); + + console.log("회원가입 됐는지 확인", register_data); + + } catch (error) { + console.log("이메일 인증에 실패했기 떄문에 회원가입 불가",error); } - }); - - console.log("회원가입 됐는지 확인", register_data); + } + }; return ( @@ -107,7 +202,7 @@ export default function Register(): JSX.Element { label="이메일" id="email" type="email" - placeholder={emailcheck} + placeholder="이메일을 입력하세요" value={email} onChange={(value: string) => setEmail(value)} onBlur={check_email} @@ -117,17 +212,45 @@ export default function Register(): JSX.Element { onButtonClick={verify_btn} autoFocus /> +
+ {emailcheck} +
+ + {/* 이메일 인증 코드 입력 인풋바 */} + {emailCertified ? + setEmail_code(value)} + button // 버튼을 사용한다고 명시 + buttonId="btn_code" + buttonText="전송" + onButtonClick={code_btn} + autoFocus + /> : +
+ } +
+ {permission_status} +
{/* 닉네임 👉🏻 중복검사*/} setNickname(value)} + onBlur={check_nickname} autoFocus /> +
+ {nickname_check} +
{/* 이름*/} { const url = new URL(window.location.href); const hashParams = new URLSearchParams(url.hash.substring(1)); - const callback_token = hashParams.get("access_token"); + const callback_token = hashParams.get("state"); setGoogle(callback_token); },[]); diff --git a/src/app/upload/page.tsx b/src/app/upload/page.tsx index 95bc8aa..15d39b1 100644 --- a/src/app/upload/page.tsx +++ b/src/app/upload/page.tsx @@ -11,6 +11,8 @@ import Cookies from "js-cookie"; import { categories } from "@/component/category"; import axios from "axios"; import { Login_token } from "@/recoilAtom/Login_token"; +import { WeatherIcons } from "@/recoilAtom/WeatherIcon"; +import { TemNowControl } from "@/recoilAtom/TemNow"; import { useRecoilState } from "recoil"; import Image from "next/image"; import Link from "next/link"; @@ -26,6 +28,9 @@ export default function Upload(): JSX.Element { Record >({}); const [token, setToken] = useRecoilState(Login_token); + //openweathermap에서 제공하는 icon과 현재 온도 + const [icon, setIcon] = useRecoilState(WeatherIcons); + const [usetemp, setTemp] = useRecoilState(TemNowControl); // 로그인 확인 후 페이지 로드 const [logincheck, setCheck] = useState(false); @@ -88,6 +93,8 @@ export default function Upload(): JSX.Element { hashTag: hashtags, category: allSelectedSubCategories, content: content, + temperature: usetemp, + weatherIcon: `https://openweathermap.org/img/wn/${icon}.png`, }; formData.append("board", JSON.stringify(boardData)); @@ -115,6 +122,8 @@ export default function Upload(): JSX.Element { console.log("로그인 토큰 존재 확인", logincheck); console.log("로그인 토큰 값", logintoken); + console.log("icon", icon); + console.log("온도", usetemp); return (<> {logincheck ? diff --git a/src/component/FeedContents.tsx b/src/component/FeedContents.tsx index 5d1bb35..d707d79 100644 --- a/src/component/FeedContents.tsx +++ b/src/component/FeedContents.tsx @@ -23,6 +23,7 @@ interface FEEDATA { nickName: string; temperature: number; weather: string; + weatherIcon?: string; } export default function FeedContents() { @@ -103,6 +104,8 @@ export default function FeedContents() { const goDetail = async (board_id: number) => { console.log("게시글 아이디", board_id); + localStorage.setItem("getBoardId_local", JSON.stringify(board_id)); + router.push('/detail'); }; @@ -133,7 +136,7 @@ export default function FeedContents() {

@{arr.nickName}

-