Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[신민철] week16 #1063

Merged
merged 1 commit into from
May 2, 2024
Merged

[신민철] week16 #1063

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 27 additions & 0 deletions pages/api/api.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,3 +31,30 @@ export const getSelectLinksInfo = async (folderId: number) => {
const result = response.json();
return result;
};

export const signInUser = async (email: string, password: string) => {
const userInfo = {
email: email,
password: password,
};

try {
const response = await fetch('https://bootcamp-api.codeit.kr/api/sign-in', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userInfo),
});

if (response.status === 200) {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

200은 상수로 아래처럼 관리해주세요~

const SUCCESS_CODE = 200;
 if (response.status === SUCCESS_CODE) {

const result = await response.json();
localStorage.setItem('accessToken', result.data.accessToken);
return true;
Comment on lines +50 to +53
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

보통 localStorage.setItem 사용할 땐, 그럴일이 없겠지만, characters limit & 저장공간 5MB 제한이 있어서 초과하려고 할 때, QuotaExceededError 에러가 발생할 수 있어요. 그렇기 때문에 아래처럼 try / catch를 감싸서 사용해야합니다.
혹은 보안 설정으로 인하여 localStorage 접근이 안될 때도 저렇게 하게되면 에러가 발생하겠죠?

const saveToLocalStorage = (key, value) => {
  try {
    localStorage.setItem(key, value);
  } catch (e) {
    console.error(e)
  }
}

} else {
return false;
}
} catch (error) {
console.log(error);
}
};
45 changes: 18 additions & 27 deletions pages/signin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import React, { useState } from 'react';
import Link from 'next/link';
import styles from '@/styles/Signin.module.css';
import { emailRegex, passwordRegex } from '@/components/Regex';
import logo from '@/public/logo.svg';
import kakao from '@/public/kakao logo.svg';
import google from '@/public/google.svg';
import passwordOff from '@/public/passwordOff.svg';
import passwordOn from '@/public/passwordOn.svg';
import styles from '@styles/Signin.module.css';
import { emailRegex, passwordRegex } from '@components/Regex';
import logo from '@public/logo.svg';
import kakao from '@public/kakao logo.svg';
import google from '@public/google.svg';
import passwordOff from '@public/passwordOff.svg';
import passwordOn from '@public/passwordOn.svg';
import { signInUser } from './api/api';

export default function Signin() {
const [email, setEmail] = useState('');
Expand Down Expand Up @@ -59,27 +60,17 @@ export default function Signin() {
const handleSubmit = async (e: React.ChangeEvent<HTMLButtonElement>) => {
e.preventDefault();

const userInfo = {
email: email,
password: password,
};
try {
const signIn = await signInUser(email, password);

const response = await fetch('https://bootcamp-api.codeit.kr/api/sign-in', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(userInfo),
});

if (response.status === 200) {
const result = await response.json();
localStorage.setItem('accessToken', result.data.accessToken);
window.location.assign('folder.html');
return;
} else {
setEmailError('이메일을 확인해 주세요.');
setPasswordError('비밀번호를 확인해 주세요.');
if (signIn) {
window.location.assign('folder.html');
} else {
setEmailError('이메일을 확인해 주세요.');
setPasswordError('비밀번호를 확인해 주세요.');
}
} catch (error) {
console.log(error);
Comment on lines +72 to +73
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이렇게 catch에서 error 로그를 확인할 땐 console.error(); 를 활용하면 더 자세한 내용을 볼수 있어요~

}
};

Expand Down
14 changes: 7 additions & 7 deletions pages/signup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import React, { useState } from 'react';
import Link from 'next/link';
import styles from '@/styles/Signup.module.css';
import logo from '@/public/logo.svg';
import kakao from '@/public/kakao logo.svg';
import google from '@/public/google.svg';
import passwordOff from '@/public/passwordOff.svg';
import passwordOn from '@/public/passwordOn.svg';
import { emailRegex, passwordRegex } from '@/components/Regex';
import styles from '@styles/Signup.module.css';
import logo from '@public/logo.svg';
import kakao from '@public/kakao logo.svg';
import google from '@public/google.svg';
import passwordOff from '@public/passwordOff.svg';
import passwordOn from '@public/passwordOn.svg';
import { emailRegex, passwordRegex } from '@components/Regex';

export default function Signup() {
const [email, setEmail] = useState('');
Expand Down
5 changes: 4 additions & 1 deletion tsconfig.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@
"jsx": "preserve",
"incremental": true,
"paths": {
"@/*": ["./*"]
"@*": ["./*"],
"@components": ["./*/components"],
"@public": ["./*/public"],
"@styles": ["./*/styles"]
Comment on lines +17 to +20
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

지난번 리뷰 내용 반영해주셨군요! 👍

}
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
Expand Down
Loading