[Feat] 피드페이지 디자인 마무리, 소셜 로그인 페이지 구현 중 (#10)

kdt-8-4 · Dec 6, 2023 · 1c031d2 · 1c031d2
1 parent efccfd5
commit 1c031d2
Show file tree

Hide file tree

Showing 12 changed files with 259 additions and 112 deletions.
diff --git a/src/app/feed/page.tsx b/src/app/feed/page.tsx
@@ -31,7 +31,7 @@ export default function Feed(){
         : null;
         const decoded_nickName = decodedToken?.sub;
         // console.log("디코딩", decodedToken);
-        console.log("디코딩 닉네임", decoded_nickName);
+        // console.log("디코딩 닉네임", decoded_nickName);
 
         setFeedToken(accessToken);
         setNick(decoded_nickName);

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -12,19 +12,6 @@ interface MainPageProps {
 }
 
 export default function Mainpage() {
-  const send = async () => {
-    const send = await axios({
-      method: "POST",
-      url: "https://www.jerneithe.site/user/api/signup",
-      data: {
-        email: "dong123@test.com",
-        name: "황동",
-        nickname: "동준이이dong",
-        password: "1234",
-      },
-    });
-    console.log("rkdlq", send);
-  };
 
   // const accessToken = document.cookie.replace(/(?:(?:^|.*;\s*)accessToken\s*=\s*([^;]*).*$)|^.*$/, "$1");
   // console.log("accessToken: ", accessToken);

diff --git a/src/app/socialregister/page.tsx b/src/app/socialregister/page.tsx
@@ -3,29 +3,64 @@ import { useEffect, useState } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import axios from "axios";
 
-export default function CompleteProfile() {
+import InputBar from "@/component/InputBar";
+import "../../style/register.scss";
+interface GOOGLEDATA{
+  email: string;
+  id: string;
+  picture: string;
+  verified_email: boolean;
+}
 
-  // const parsedHash = new URLSearchParams(window.location.hash.substring(1));
-  // const googleToken = parsedHash.get("access_token");
+export default function CompleteProfile() {
 
   const [googleToken, setGoogle] = useState<string | null>("");
+  const [sendGoogle_data, setSendGoogle] = useState<GOOGLEDATA>();
+  const [nickname_check, setNickCHeck] = useState<string>("");
+  const [nickname, setNickname] = useState<string>("");
+  const [name, setName] = useState<string>("");
+
 
   useEffect(()=>{
-    const url = new URL(window.location.href);
-    const hashParams = new URLSearchParams(url.hash.substring(1));
-    const callback_token = hashParams.get("state");
-    setGoogle(callback_token);
+    // const url = new URL(window.location.href);
+    // const hashParams = new URLSearchParams(url.hash.substring(1));
+    // const callback_token = hashParams.get("state");
+
+    const parsedHash = new URLSearchParams(window.location.hash.substring(1));
+    const googleToken_url = parsedHash.get("access_token");
+
+    setGoogle(googleToken_url);
+
   },[]);
 
-  const send = async() => {
-    await axios({
-              method: "POST",
-              url: "https://www.jerneithe.site/user/login/google/token",
-              data: {
-                token: googleToken,
-              },
-            });
-  }
+  useEffect(()=>{
+    if(googleToken){
+      const send = async() => {
+        const res = await axios({
+          method: "GET",
+          url: `https://www.googleapis.com/userinfo/v2/me?access_token=${googleToken}`,
+        });
+        console.log("받은 데이터", res);
+        setSendGoogle(res.data);
+      }
+
+      send();
+    }
+  },[googleToken]);
+
+  useEffect(()=>{
+    if(sendGoogle_data){
+      const googlesenddata = async() => {
+        const sendGoogle = await axios({
+          method: "POST",
+          url: "https://www.jerneithe.site/user/login/google",
+          data: sendGoogle_data,
+        });
+        console.log("로그인 결과", sendGoogle);
+      }
+      googlesenddata();
+    }
+  },[sendGoogle_data])
 
   // useEffect(() => {
 
@@ -57,51 +92,77 @@ export default function CompleteProfile() {
   //   }
   // }
 
-  console.log("받아온 토큰:", googleToken);
+  // console.log("받아온 토큰:", googleToken);
+  console.log("보내려고 하는 데이터", sendGoogle_data);
 
 
-
+    //닉네임 중복 검사
+    const check_nickname = async() => {
+      console.log("잘 동작하는지 확인", nickname);
+      try {
 
-  // const [name, setName] = useState<string>("");
-  // const [nickname, setNickname] = useState<string>("");
-  // const router = useRouter();
-
-  // const handleNicknameSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-  //   e.preventDefault();
-  //   try {
-  //     const response = await axios({
-  //       method: "POST",
-  //       url: "",
-  //       data: {
-  //         name,
-  //         nickname,
-  //       },
-  //     });
-  //     router.push("/");
-  //   } catch (error) {
-  //     console.error("닉네임 저장 오류:", error);
-  //   }
-  // };
+        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);
+      }
+
+
+    }
 
   return (
-    <div>
-      <button onClick={send}>gd</button>
-      {/* <h1>닉네임 설정</h1>
-      <form onSubmit={handleNicknameSubmit}>
-        <input
-          type="text"
-          placeholder="이름을 입력하세요"
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-        />
-        <input
-          type="text"
-          placeholder="닉네임을 입력하세요"
-          value={nickname}
-          onChange={(e) => setNickname(e.target.value)}
-        />
-        <button type="submit">저장</button>
-      </form> */}
+    <>
+    <div className="container">  
+      <div className="title">
+          <p>Google 회원가입</p>
+      </div>
+      <section id="main">
+          <form>
+            {/* 닉네임 👉🏻 중복검사*/}
+            <InputBar
+              label="닉네임"
+              id="nickname"
+              type="text"
+              placeholder="닉네임을 입력하세요"
+              value={nickname}
+              onChange={(value: string) => setNickname(value)}
+              onBlur={check_nickname}
+              autoFocus
+            />
+            <div className="permission_msg">
+              {nickname_check}
+            </div>
+
+            {/* 이름*/}
+            <InputBar
+              label="이름"
+              id="name"
+              type="text"
+              placeholder="이름을 입력하세요"
+              value={name}
+              onChange={(value: string) => setName(value)}
+              autoFocus
+            />
+
+            <button id="btn_register" type="button">
+              옷늘 캐스터 등록
+            </button>
+          </form>
+        </section>
     </div>
+    </>
   );
 }
diff --git a/src/component/FeedCateDetail.tsx b/src/component/FeedCateDetail.tsx
@@ -12,6 +12,8 @@ import { FeedShoe } from "@/recoilAtom/Category_shoe";
 import { FeedBack } from "@/recoilAtom/Category_back";
 import { FeedHat } from "@/recoilAtom/Category_hat";
 
+import "@/style/feedCateDetail.scss";
+
 interface PROPS {
     categorytitle: string | undefined;
     setControl: Dispatch<SetStateAction<boolean>>;
@@ -180,36 +182,48 @@ export default function FeedcateDetail( { categorytitle, setControl } : PROPS) {
     // console.log("검색 데이터 배열",search);
     console.log("삭제할 카테고리", delData);
 
+    const close_cate = () => {
+        setControl(false);
+    }
 
     return(<>
-        <div id="tab_detail" style={{"display":"flex"}}>
+        <div className="tab_detail">
+            <div className="high_var">
+                <p id="cate_name">{categorytitle}</p>
+                <button id="cateclose_btn" onClick={close_cate}>X</button>
+            </div>
+            <hr />
             {/* 카테고리 목록 */}
-            <div>
-                {view_arr && view_arr.map((myarr, index)=>{
+            <div className="tab_flex_table">
+                <div className="tab_menu_box">
+                    {view_arr && view_arr.map((myarr, index)=>{
+                            return(<>
+                                <button key={index} className="cate_btn_dj" onClick={()=>cate_btn(myarr)}>{myarr}</button>
+                                <br />
+                            </>)
+                        }
+                    )}
+                </div>
+                <div className="choose_box">
+                    {/* 
+                    --선택한 카테고리 띄워주기--
+                    기억해야하는것
+                    - 앞에 chooseCa && 없이 그냥 쓴다면 chooseCa 배열에 값이 
+                    존재하지 않을때에 대해 오류가 뜨기 때문에 앞에 단축평가로
+                    오류 예방  
+                    */}
+                    <p style={{"fontWeight" : "bold"}}>선택한 카테고리</p>
+                    {chooseCa && chooseCa.map((myarr, index)=>{
                         return(<>
-                            <button key={index} className="cate_btn_dj" onClick={()=>cate_btn(myarr)}>{myarr}</button>
-                            <br />
+                            <div key={index} style={{"display":"flex"}} className="choose_small_box">
+                                <p className="chooseCa">{myarr} </p>
+                                <button className="catecancle_btn" onClick={() => del_choose(myarr)}> x</button> 
+                            </div>
+                            <hr />
                         </>)
-                    }
-                )}
-            </div>
-            <div id="choose">
-                {/* 
-                --선택한 카테고리 띄워주기--
-                기억해야하는것
-                - 앞에 chooseCa && 없이 그냥 쓴다면 chooseCa 배열에 값이 
-                존재하지 않을때에 대해 오류가 뜨기 때문에 앞에 단축평가로
-                오류 예방  
-                */}
-                {chooseCa && chooseCa.map((myarr, index)=>{
-                    return(<>
-                        <div key={index} style={{"display":"flex"}}>
-                            <p className="chooseCa">{myarr} </p>
-                            <button onClick={() => del_choose(myarr)}> x</button> 
-                        </div>
-                    </>)
-                })}
-                <button onClick={startSearch}>완료</button>
+                    })}
+                    <button onClick={startSearch} id="chooseDone">완료</button>
+                </div>
             </div>
         </div>
     </>)

diff --git a/src/component/FeedContents.tsx b/src/component/FeedContents.tsx
@@ -53,23 +53,23 @@ export default function FeedContents() {
         url: "https://www.jerneithe.site/board/list",
       });
 
-      console.log("받아온 데이터", req.data);
+      // console.log("받아온 데이터", req.data);
       setFulldata(req.data);
 
       //현재 로그인한 닉네임과 각 게시물의 likelist에 같은 닉네임이 있다면 
       const sortedData: FEEDATA[] = [...req.data].sort((a :FEEDATA, b: FEEDATA) => b.boardId - a.boardId);
 
       const copy: FEEDATA[] = sortedData;
 
-      console.log("카피", copy);
+      // console.log("카피", copy);
 
       const filter_of_tem = copy.filter(
         (item) =>
           item.temperature >= parseFloat(min) &&
           item.temperature <= parseFloat(max),
       );
 
-      console.log("필터 적용", filter_of_tem);
+      // console.log("필터 적용", filter_of_tem);
 
       // setFeedd(req.data);
       setFeedd(filter_of_tem);
@@ -102,7 +102,7 @@ export default function FeedContents() {
 
   const heart_plus = async (board_id: number, isLiked:boolean) => {
     console.log("하트 누른 피드의 boardId", board_id);
-    console.log("피드 상위에서 받아온 토큰", loginToken_feed);
+    // console.log("피드 상위에서 받아온 토큰", loginToken_feed);
 
     await updateLikeStatus(board_id);
 
@@ -157,7 +157,7 @@ export default function FeedContents() {
     return likelist.some((like) => like.nickName === userNickname);
   };
 
-  console.log("리코일스테이트로 잘 들어왔는지 확인", feedata);
+  // console.log("리코일스테이트로 잘 들어왔는지 확인", feedata);
 
   return (
     <>

diff --git a/src/component/FeedSearch.tsx b/src/component/FeedSearch.tsx
@@ -17,7 +17,7 @@ interface SEARCH {
 export default function FeedSearch(){
 
     const [catesearch, setCateSearch] = useRecoilState(FeedSearchdata);
-    console.log("검색할 카테고리 데이터", catesearch);
+    // console.log("검색할 카테고리 데이터", catesearch);
     const [feedata, setFeedd] = useRecoilState(FeedContent);
 
     const [hash_value, setHval] = useState<string>("");

diff --git a/src/component/FeedSort.tsx b/src/component/FeedSort.tsx
@@ -8,7 +8,7 @@ export default function FeedSort(){
 
     const [feedata, setFeedd] = useRecoilState(FeedContent);
     const fullfeeddata = useRecoilValue(FeedFullcontents);
-    console.log("정렬 컴포넌트로 넘어간 피드 데이터", feedata);
+    // console.log("정렬 컴포넌트로 넘어간 피드 데이터", feedata);
     const [sortType, setSortType] = useState<string>('');
 
     const allcontents = () => {

diff --git a/src/component/InputBar.tsx b/src/component/InputBar.tsx
@@ -30,12 +30,11 @@ const InputBar: React.FC<InputBarProps> = ({
   onButtonClick,
   autoFocus,
 }: InputBarProps) => {
-  const inputClass = `${type === "email" ? " email" : ""}`;
-
+  // const inputClass = `${type === "email" ? " email" : ""}`;
   return (
     <div className="input-wrapper">
       <label htmlFor={id}>{label}</label>
-      <div className={inputClass}>
+      <div className={id}>
         <input
           autoFocus={autoFocus}
           type={type}