인프런 커뮤니티 질문&답변

회원가입이나 로그인 후 주소가
http://localhost:3000/login? 이나http://localhost:3000/signUp? 으로 이동해지며, url 뒤에 물음표가 붙습니다.

가끔 Failed to fetch 메시지가 뜨는것은 너무 많이 요청을 보내서 그런것같습니다만, 그것과 무관하게 아래의 이슈가 사라지지 않습니다.

지금 학습단계에서 임시로 사용하기로한 로컬스토리지때문에 발생한 이슈일까요?

import React, { useEffect } from 'react';
import { ApolloLink, ApolloClient, ApolloProvider, InMemoryCache } from '@apollo/client';
import {
	createUploadLink
} from 'apollo-upload-client'
import { useRecoilState } from 'recoil';
import { accessTokenState } from '@/src/commons/store';

interface Props {
	children: JSX.Element;
}

const GLOBAL_STATE = new InMemoryCache()

const ApolloSetting = (props: Props) => {
	const [accessToken, setAccessToken] = useRecoilState(accessTokenState)

	useEffect(() => {
		if (localStorage.getItem("accessToken")) {
			setAccessToken(localStorage.getItem("accessToken") ?? "")
		}
	}, [])



	const uplodLink = createUploadLink({
		uri: "http://backendonline.codebootcamp.co.kr/graphql",
		headers: { Authorization: `Bearer ${accessToken}` }
	})

	const client = new ApolloClient({
		link: ApolloLink.from([uplodLink as unknown as ApolloLink]),
		cache: GLOBAL_STATE
	});

	return <ApolloProvider client={client}>{props.children}</ApolloProvider>;
};

export default ApolloSetting;

import { Title } from '@/src/commons/styles/emotion'
import * as S from './Login_styles'
import React, { useEffect, useState } from 'react'
import { useMutation } from '@apollo/client'
import { type IMutation, type IMutationLoginUserArgs } from '@/src/commons/types/generated/types'
import { LOGIN_USER } from './Login_query'
import { Modal } from 'antd'
import { useRouter } from 'next/router'
import { useRecoilState } from 'recoil'
import { accessTokenState } from '@/src/commons/store'

const Login_presenter = () => {
    const [accessToken, setAccessToken] = useRecoilState(accessTokenState)
    const router = useRouter()

    const [input, setInput] = useState({
        email: '',
        password: '',
    })

    const onChangeInput = (e: React.ChangeEvent<HTMLInputElement>) => {
        setInput({ ...input, [e.currentTarget.id]: e.currentTarget.value })
    }

    const [loginUser] = useMutation<Pick<IMutation, 'loginUser'>, IMutationLoginUserArgs>(LOGIN_USER);

    const onSubmitSignUp = async () => {

        if (!input.email.includes("@") || !input.email.includes(".")) { Modal.error({ content: "이메일이 유효하지 않습니다." }); return }

        if (input.email && input.password) {
            try {
                const result = await loginUser({
                    variables: {
                        email: input.email,
                        password: input.password
                    }
                });

                if (!result.data) { Modal.error({ content: "로그인에 실패하였습니다." }); return }

                const accessToken = result.data?.loginUser.accessToken
                if (setAccessToken) {
                    setAccessToken(accessToken || "")

                    // 3. 로그인 성공페이지로 이동하기
                    void router.push('/')
                    localStorage.setItem("accessToken", accessToken) // 임시로 사용 나중에 지울예정
                }

            } catch (error) {
                if (error instanceof Error) { alert(error.message) }
            }
        }
    }

    return (
        <S.LoginForm>
            <Title style={{ color: '#fff', "textAlign": "center", "marginBottom": "20px" }}>로그인</Title>
            <S.InputContainer>
                <S.Label htmlFor='email'>이메일</S.Label>
                <S.Input id='email' placeholder='이메일을 입력해주세요.' onChange={onChangeInput} />
            </S.InputContainer>
            <S.InputContainer>
                <S.Label htmlFor='password'>비밀번호</S.Label>
                <S.Input id='password' placeholder='비밀번호를 입력해주세요.' onChange={onChangeInput} autoComplete="on" type='password' />
            </S.InputContainer>
            <S.SubmitButton onClick={onSubmitSignUp}>로그인</S.SubmitButton>
        </S.LoginForm>
    )
}

export default Login_presenter

import { accessTokenState } from '@/src/commons/store';
import { type IQuery } from '@/src/commons/types/generated/types';
import { gql, useQuery } from '@apollo/client';
import * as S from './Header_style'
import { useRouter } from 'next/router';
import { useRecoilState } from 'recoil';
import { useEffect, useState } from 'react';

const FETCH_USER_LOGGED_IN = gql`
	query fetchUserLoggedIn {
		fetchUserLoggedIn{_id picture email name}
	}
`;

const Header = () => {
	const [accessToken] = useRecoilState(accessTokenState)
	const [isMounted, setIsMounted] = useState(false)
	const router = useRouter();

	useEffect(() => {
		setIsMounted(true)
	}, [])


	const { data } = useQuery<Pick<IQuery, 'fetchUserLoggedIn'>>(FETCH_USER_LOGGED_IN);

	const onClickLogout = () => {
		if (localStorage) {
			localStorage.removeItem("accessToken")
			router.reload()
		}
	}

	return (
		<S.Header>
			<S.Logo onClick={async () => await router.push(`/boards`)}>
				🚢 FREE BOARD
			</S.Logo>
			{isMounted && <S.HeaderButtons>
				{!accessToken && <S.Login onClick={() => { void router.push(`/login`) }}>로그인</S.Login>}
				{!accessToken && <S.Signup onClick={async () => await router.push(`/signUp`)}>회원가입</S.Signup>}
				{accessToken && <S.Login onClick={onClickLogout}>로그아웃</S.Login>}
				{accessToken && <div>{data?.fetchUserLoggedIn.name}</div>}
				{accessToken && <div>{data?.fetchUserLoggedIn.email}</div>}
				{data?.fetchUserLoggedIn.picture && <img src={data?.fetchUserLoggedIn.picture}></img>}
			</S.HeaderButtons>}
		</S.Header>
	);
};

export default Header;