Merge pull request #34 from Team-Vivio/ci/1

토큰 테스트
Team-Vivio · May 20, 2024 · 3c1317c · 3c1317c
2 parents 9bdd6de + e796e1e
commit 3c1317c
Show file tree

Hide file tree

Showing 3 changed files with 70 additions and 55 deletions.
diff --git a/src/views/component/header.js b/src/views/component/header.js
@@ -25,18 +25,15 @@ function Header() {
 		const storedSocialToken = cookies.socialToken;
 		if (storedSocialToken && !cookies.token) {
 			setCookie("token", storedSocialToken, { path: "/", domain: "localhost" });
-			console.log("설정 후 토큰 쿠키:", cookies.token);
 		}
 		if (
 			!cookies.token ||
 			cookies.token === undefined ||
 			cookies.token === "undefined"
 		) {
 			setIsuser(false);
-			console.log("사용자가 로그인되지 않음");
 		} else {
 			setIsuser(true);
-			console.log("사용자가 로그인됨");
 		}
 	}, [cookies, setCookie]);
 

diff --git a/src/views/page/LoginPage/LoginPage.js b/src/views/page/LoginPage/LoginPage.js
@@ -79,7 +79,11 @@ function Home() {
 				})
 				.then((res) => {
 					if (res.data.isSuccess) {
-						setCookie("token", res.data.result.token);
+						const domain =
+							window.location.hostname === "localhost"
+								? "localhost"
+								: "vivi-o.site";
+						setCookie("token", res.data.result.token, { domain });
 						window.location.href = "/";
 					} else {
 						alert("로그인이 실패. 이메일과 비밀번호를 확인해주세요");

diff --git a/src/views/page/MyPage/MyPage.js b/src/views/page/MyPage/MyPage.js
@@ -17,10 +17,12 @@ function MyPage() {
 	const formattedPhoneNumber = formatPhoneNumber(phone);
 	const [showModalP, setShowModalP] = useState(false);
 	const outsideRef = useRef();
-	const [cookies] = useCookies(["token"]);
+	const [cookies] = useCookies(["token", "socialToken"]);
 	const token = cookies.token;
 	const [blur, setBlur] = useState(false);
 
+	const [isFindSocialToken, setIsFindSocialToken] = useState(false);
+
 	// 모달 띄우고, 배경 블러
 	useEffect(() => {
 		if (showModalP === false) {
@@ -70,8 +72,6 @@ function MyPage() {
 		window.location.reload();
 	};
 
-	// 아우터 이미지 등록하기
-
 	// 상의 이미지 불러오기
 	function TopImg() {
 		return top.map((TopImg, idx) => (
@@ -130,26 +130,31 @@ function MyPage() {
 
 	// 마이페이지 불러올 때, 토큰 값 넘겨 정보 받아오기
 	useEffect(() => {
-		axios
-			.get("https://backend.vivi-o.site/users/userInfo", {
-				headers: {
-					Authorization: token,
-				},
-			})
-			.then((res) => {
-				if (res.data.isSuccess) {
-					setName(res.data.result.name);
-					setEmail(res.data.result.email);
-					setPhone(res.data.result.phoneNumber);
-					setBirthDate(res.data.result.birthDate);
-					if (res.data.result.gender === "male") {
-						setGender("남성");
-					} else {
-						setGender("여성");
+		console.log(cookies.socialToken);
+		if (!cookies.socialToken || cookies.socialToken === "undefined") {
+			axios
+				.get("https://backend.vivi-o.site/users/userInfo", {
+					headers: {
+						Authorization: token,
+					},
+				})
+				.then((res) => {
+					if (res.data.isSuccess) {
+						setName(res.data.result.name);
+						setEmail(res.data.result.email);
+						setPhone(res.data.result.phoneNumber);
+						setBirthDate(res.data.result.birthDate);
+						if (res.data.result.gender === "male") {
+							setGender("남성");
+						} else {
+							setGender("여성");
+						}
 					}
-				}
-			});
-	});
+				});
+		} else {
+			setIsFindSocialToken(true);
+		}
+	}, [cookies.socialToken]);
 
 	// 전화번호 받아 온 값에 자동으로 하이픈 넣기
 	function formatPhoneNumber(phone) {
@@ -379,35 +384,44 @@ function MyPage() {
 						생생한 패션 생활, ViViO에서 시작하세요
 					</div>
 					<div className={styles.infoDiv}>
-						<div className={styles.nameDiv}>
-							<div className={styles.nameTitle}>이름</div>
-							<div className={styles.nameResult}>{name}</div>
-						</div>
-						<div className={styles.phoneDiv}>
-							<div className={styles.phoneTitle}>전화번호</div>
-							<div className={styles.phoneResult}>{formattedPhoneNumber}</div>
-						</div>
-						<div className={styles.birthDiv}>
-							<div className={styles.birthTitle}>생년월일</div>
-							<div className={styles.birthResult}>{birthDate}</div>
-						</div>
-						<div className={styles.genderDiv}>
-							<div className={styles.genderTitle}>성별</div>
-							<div className={styles.genderResult}>{gender}</div>
-						</div>
-						<div className={styles.emailDiv}>
-							<div className={styles.emailTitle}>이메일</div>
-							<div className={styles.emailResult}>{email}</div>
-						</div>
-						<div className={styles.passwordDiv}>
-							<div className={styles.passwordTitle}>비밀번호</div>
-							<button
-								onClick={showPasswordChangeModalHandler}
-								className={styles.passwordChangeBtn}
-							>
-								변경
-							</button>
-						</div>
+						{!isFindSocialToken && (
+							<>
+								<div className={styles.nameDiv}>
+									<div className={styles.nameTitle}>이름</div>
+									<div className={styles.nameResult}>{name}</div>
+								</div>
+								<div className={styles.phoneDiv}>
+									<div className={styles.phoneTitle}>전화번호</div>
+									<div className={styles.phoneResult}>
+										{formattedPhoneNumber}
+									</div>
+								</div>
+								<div className={styles.birthDiv}>
+									<div className={styles.birthTitle}>생년월일</div>
+									<div className={styles.birthResult}>{birthDate}</div>
+								</div>
+								<div className={styles.genderDiv}>
+									<div className={styles.genderTitle}>성별</div>
+									<div className={styles.genderResult}>{gender}</div>
+								</div>
+								<div className={styles.emailDiv}>
+									<div className={styles.emailTitle}>이메일</div>
+									<div className={styles.emailResult}>{email}</div>
+								</div>
+								<div className={styles.passwordDiv}>
+									<div className={styles.passwordTitle}>비밀번호</div>
+									<button
+										onClick={showPasswordChangeModalHandler}
+										className={styles.passwordChangeBtn}
+									>
+										변경
+									</button>
+								</div>
+							</>
+						)}
+						{isFindSocialToken && (
+							<div>소셜 로그인은 개인정보를 이용할 수 없습니다.</div>
+						)}
 					</div>
 				</div>
 			</div>