[20240530-20240531] 게시판 또 수정 .../ 로그인 구현....

[aranlll]

게시판 또 수정 ..

어제 이상했던 글자 설정 수정 완료 했습니다 !!

.className:focus{}

이게 클릭했을 때의 css를 조정하는 거였습니닷 !!

.input{
  position:absolute;
  left: 290px;
  top:40px;
  width: 1050px;
  padding: 30px;
  height: 90px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  font-size: 30px;
  font-family: "Nanum Pen Script", cursive;
  border-top: 2px solid grey;
  border-left: 2px solid grey;
  border-right: 2px solid grey;
  border-bottom: none;
}

.input:focus{
  outline: none;
}

.userdata {
  position:relative;
  top:100px;
  left:15px;
  border: black;
  background-color: white;
  border-top: 2px solid grey;
  border-bottom: 2px solid grey;
  padding-left: 15px;
  width: 1090px;
  margin-left: 260px;
  text-align: left;
  height:120px;
}

.input1{
  position: absolute;
  font-size: 25px;
  font-family: "Nanum Pen Script", cursive;
  padding-top: 20px;

}
.bar{
  padding-top: 10px;
  padding-bottom: 10px;
  /* display:inline-block; */
  /* float: right; */
  border-bottom: 2px solid grey;
  width:1070px;

}

.title {
  display:inline-block;
  color:#282c34;
  font-weight: bold;
}

.writetime{
  display:inline-block;
  /* text-align: right;  */
  float: right;
  color:gray;

}

.line1{
  width: 1090px;
  display: flex;
  flex-direction: column;
  align-items:right;
  padding-top: 20px;
  margin-bottom: 20px;
  margin-left: 250px;
}

.noticeContent{
  position: absolute;
  font-size: 25px;
  font-family: "Nanum Pen Script", cursive;
  padding-top: 20px;
  font-weight: lighter;
  display:inline-block;
}

.inputLength{
  position:absolute;
  font-family: "Nanum Pen Script", cursive;
  left: 290px;
  top:190px;
  width: 1085px;
  padding-top: 15px;
  padding-left: 25px;
  height: 50px;
  font-size: 25px;
  font-family: "Nanum Pen Script", cursive;
  border: 2px solid grey;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  background-color: white;
}

로그인 구현

아마도 ...프론트의 문제가 아니었을까 하는 생각.... 이... 스멀스멀 들기 시작했습니댯....

일단 토큰이 뭔지 모르겠어서 바아로 서치 ... 해봤는데요?!

인증에 필요한 정보들을 암호화시킨 ? 거라고 합니다...

길이가 되게 길기 때문에 인증요청을 많이 할수록 자원의 낭비가 심해진다나 뭐라나요 ...?

뭐 대충 어느정도 이해만 하구 넘어갓습니닷 ...! 구현이 먼저라고 생각했기 때문에.... !!!!

그리고 로그인 관련해서 나는 API 사용해서 요청 코드만 작성하면 된다고 생각했는데

토큰이 프론트로 넘어오는 거라 내가 토큰 값을 저장해서 백으로 보내줘야한다!!! 는 것을 알앗습니댯.. 🥲

그래서 바로 코드작성 슈슝 !! 했으나 ...

 const NAVER_CLIENT_ID = "o72MtePRXsbwlztUtJoj";
  const NAVER_CALLBACK_URL = "http://localhost:8080/oauth2/authorization/naver";

  const initializeNaverLogin = () => {
    if (!window.naver) {
      console.error("Naver SDK not loaded");
      return;
    }

    const naverLogin = new window.naver.LoginWithNaverId({
      clientId: NAVER_CLIENT_ID,
      callbackUrl: NAVER_CALLBACK_URL,
      isPopup: false,
      loginButton: { color: "green", type: 2, height: 0 },
      callbackHandle: true,
    });
    naverLogin.init();

    naverLogin.getLoginStatus(async function (status) {
      if (status) {
        const user = {
          id: naverLogin.user.getEmail(),
          name: naverLogin.user.getName(),
        };
        setUserInfo(user);
      }
    });
  };

  const handleTreeClick = () => {
    initializeNaverLogin();
    document.getElementById("naverIdLogin").firstChild.click();
  };

  const userAccessToken = () => {
    const url = new URL(window.location.href);
    const token = url.searchParams.get("access_token");
    if (token) {
      getToken(token);
    }
  };

  const getToken = (token) => {
    console.log(token);
    localStorage.setItem("access_token", token);
    setGetToken(token);
    sendTokenToBackend(token);
  };

  const sendTokenToBackend = (token) => {
    axios
      .post("http://localhost:3000/auth/naver", { token })
      .then((response) => {
        console.log("Token sent to backend successfully:", response.data);
      })
      .catch((error) => {
        console.error("Error sending token to backend:", error);
      });
  };

  useEffect(() => {
    const loadNaverSDK = () => {
      if (window.naver) {
        initializeNaverLogin();
      } else {
        setTimeout(loadNaverSDK, 100);
      }
    };

    loadNaverSDK();
    userAccessToken();
  }, []);

그치만 실패 .....

또 막해보다가 갑자기 home.js에서 토큰을 받아와야하는데 왜 Xlog.js에 토큰을 받는 코드를 넣어놨는지 의문이 들엇습니다..

그래서 다시 수정 ?! (기대 만빵이엇습니다 ..?!)

일단 토큰 추출에는 성공했습니다 !!!!!!!!!!! 😍❤️😍🥰❤️

그리구 혜원언니 컴퓨터에서 실행시켰는데 왜 서버에 데이터 전송이 안될까요 ..?ㅜ....

다시 시작 ..... 이슈 ...