From eba90099d1e5e9ed8548d132e779b3575b5ced5b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Wed, 17 Jan 2024 17:47:12 +0900 Subject: [PATCH 1/8] =?UTF-8?q?chore:=20axios=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 95 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 1 + 2 files changed, 95 insertions(+), 1 deletion(-) diff --git a/package-lock.json b/package-lock.json index 6531b71d..d8fa7510 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^5.17.9", "@tanstack/react-query-devtools": "^5.17.9", + "axios": "^1.6.5", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", @@ -2020,7 +2021,8 @@ "node_modules/@kurkle/color": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", - "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==", + "peer": true }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", @@ -3158,6 +3160,21 @@ "node": ">=8" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==" + }, + "node_modules/axios": { + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.5.tgz", + "integrity": "sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==", + "dependencies": { + "follow-redirects": "^1.15.4", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/babel-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-29.7.0.tgz", @@ -3428,6 +3445,7 @@ "version": "4.4.1", "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.1.tgz", "integrity": "sha512-C74QN1bxwV1v2PEujhmKjOZ7iUM4w6BWs23Md/6aOZZSlwMzeCIDGuZay++rBgChYru7/+QFeoQW0fQoP534Dg==", + "peer": true, "dependencies": { "@kurkle/color": "^0.3.0" }, @@ -3504,6 +3522,17 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -3642,6 +3671,14 @@ "node": ">=0.10.0" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz", @@ -4161,6 +4198,38 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -5773,6 +5842,25 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/mimic-fn": { "version": "2.1.0", "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-2.1.0.tgz", @@ -6196,6 +6284,11 @@ "node": ">= 6" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index d16a5232..de44ddf7 100644 --- a/package.json +++ b/package.json @@ -15,6 +15,7 @@ "@emotion/styled": "^11.11.0", "@tanstack/react-query": "^5.17.9", "@tanstack/react-query-devtools": "^5.17.9", + "axios": "^1.6.5", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", From a80ac77879f7fa5d6d54e31f05292add78367e92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Wed, 17 Jan 2024 17:48:27 +0900 Subject: [PATCH 2/8] =?UTF-8?q?chore:=20.env=20=ED=8C=8C=EC=9D=BC=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .gitignore | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.gitignore b/.gitignore index a547bf36..3b0b4037 100644 --- a/.gitignore +++ b/.gitignore @@ -22,3 +22,5 @@ dist-ssr *.njsproj *.sln *.sw? + +.env \ No newline at end of file From 4e2551ecc1435b5bf9e1ac3afd5ad1f6231a7d8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Wed, 17 Jan 2024 17:49:01 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20axios=20instance=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/instance.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/src/api/lib/instance.ts b/src/api/lib/instance.ts index 2ccfed9e..34cfd912 100644 --- a/src/api/lib/instance.ts +++ b/src/api/lib/instance.ts @@ -1,5 +1,10 @@ -const instance = () => { - return 'instance'; -}; +import axios from 'axios'; + +const instance = axios.create({ + baseURL: import.meta.env.VITE_SERVER_URL, + headers: { + 'content-type': import.meta.env.VITE_CONTENT_TYPE + } +}); export default instance; From aab857ca2c8e6822f3ae7a429a8fb1f39fdcef42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Wed, 17 Jan 2024 17:51:15 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20postLogin=20API=20=ED=95=A8?= =?UTF-8?q?=EC=88=98=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/index.ts | 1 + src/api/lib/postLogin.ts | 9 +++++++++ src/types/auth.ts | 5 +++++ 3 files changed, 15 insertions(+) create mode 100644 src/api/lib/postLogin.ts diff --git a/src/api/index.ts b/src/api/index.ts index 7eded0d3..1eaf0d6d 100644 --- a/src/api/index.ts +++ b/src/api/index.ts @@ -1,2 +1,3 @@ export { default as instance } from './lib/instance'; export { default as getExample } from './lib/getExample'; +export { default as postLogin } from './lib/postLogin'; diff --git a/src/api/lib/postLogin.ts b/src/api/lib/postLogin.ts new file mode 100644 index 00000000..1879c6ef --- /dev/null +++ b/src/api/lib/postLogin.ts @@ -0,0 +1,9 @@ +import { LoginData } from '@/types/auth'; +import { instance } from '..'; + +const postLogin = async (loginData: LoginData) => { + const response = await instance.post('/v1/member/login', loginData); + return response.data; +}; + +export default postLogin; diff --git a/src/types/auth.ts b/src/types/auth.ts index 463f0f7e..7c156d75 100644 --- a/src/types/auth.ts +++ b/src/types/auth.ts @@ -29,3 +29,8 @@ export type AuthButton = { }; export type AuthButtonStyleProps = { $size: string; $variant: string }; + +export type LoginData = { + email: string; + password: string; +}; From 8b7c4e9fca62346171d65954d650604575125762 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Wed, 17 Jan 2024 17:58:18 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20setCookies,=20getCookies=20utils=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/auth.ts | 10 ++++++++++ src/utils/lib/cookies.ts | 28 ++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) create mode 100644 src/utils/lib/cookies.ts diff --git a/src/types/auth.ts b/src/types/auth.ts index 7c156d75..65678c83 100644 --- a/src/types/auth.ts +++ b/src/types/auth.ts @@ -34,3 +34,13 @@ export type LoginData = { email: string; password: string; }; + +export type SetCookies = ( + userName: string, + userEmail: string, + accessToken: string, + refreshToken: string, + expiresIn: number +) => void; + +export type GetCookies = (name: string) => string | undefined; diff --git a/src/utils/lib/cookies.ts b/src/utils/lib/cookies.ts new file mode 100644 index 00000000..9e992d04 --- /dev/null +++ b/src/utils/lib/cookies.ts @@ -0,0 +1,28 @@ +import { SetCookies, GetCookies } from '@/types/auth'; + +export const setCookies: SetCookies = ( + userName, + userEmail, + accessToken, + refreshToken, + expiresIn +) => { + try { + document.cookie = `userName=${userName};max-age=${expiresIn};path=/;secure`; + document.cookie = `userEmail=${userEmail};max-age=${expiresIn};path=/;secure`; + document.cookie = `accessToken=${accessToken};max-age=${expiresIn};path=/;secure`; + document.cookie = `refreshToken=${refreshToken};max-age=${expiresIn};path=/;secure`; + console.log('쿠키설정 성공'); + } catch (error) { + console.log(error); + alert('쿠키설정에 실패했습니다.'); + } +}; + +export const getCookies: GetCookies = name => { + const cookieValue = document.cookie + .split('; ') + .find(row => row.startsWith(`${name}=`)) + ?.split('=')[1]; + return cookieValue; +}; From 643d7239112ae0f779fcf75413f408909999e1b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Wed, 17 Jan 2024 18:01:54 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?= =?UTF-8?q?=EC=84=B1=EA=B3=B5=20=EB=A6=AC=ED=84=B4=EA=B0=92=20=EC=BF=A0?= =?UTF-8?q?=ED=82=A4=EC=97=90=20=EC=A0=80=EC=9E=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Login/LoginForm/index.tsx | 29 +++++++++++++++++++++--- 1 file changed, 26 insertions(+), 3 deletions(-) diff --git a/src/components/Login/LoginForm/index.tsx b/src/components/Login/LoginForm/index.tsx index 0fb86dcd..41c51058 100644 --- a/src/components/Login/LoginForm/index.tsx +++ b/src/components/Login/LoginForm/index.tsx @@ -7,9 +7,19 @@ import { AuthInputNormal, AuthInputPassword } from '@components/common/Auth'; +import { LoginData } from '@/types/auth'; +import { postLogin } from 'src/api'; +import { setCookies } from '@utils/lib/cookies'; const LoginForm = () => { const navigate = useNavigate(); + + // HACK : 추후 useState로 입력 데이터 관리할 예쩡 + const formData: LoginData = { + email: 'mary0393@naver.com', + password: 'qqqq1111!' + }; + // HACK: 유효성 검사 기능 구현 후 유효성 메세지 노출 여부 결정 const isInvalid = true; @@ -17,6 +27,21 @@ const LoginForm = () => { event.preventDefault(); navigate('/signup'); }; + + const handleLoginSubmit = async ( + event: React.FormEvent + ) => { + event.preventDefault(); + const response = await postLogin(formData); + setCookies( + response.name, + response.email, + response.access_token, + response.refresh_token, + response.expires_in + ); + }; + return (
@@ -44,9 +69,7 @@ const LoginForm = () => { size="large" variant="navy" text="로그인" - buttonFunc={() => { - // TODO : 로그인 API 요청 - }} + buttonFunc={handleLoginSubmit} /> Date: Wed, 17 Jan 2024 18:26:04 +0900 Subject: [PATCH 7/8] =?UTF-8?q?modify:=20content-type=20=EC=B2=AB=EA=B8=80?= =?UTF-8?q?=EC=9E=90=20=EB=8C=80=EB=AC=B8=EC=9E=90=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/instance.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/api/lib/instance.ts b/src/api/lib/instance.ts index 34cfd912..998e935e 100644 --- a/src/api/lib/instance.ts +++ b/src/api/lib/instance.ts @@ -3,7 +3,7 @@ import axios from 'axios'; const instance = axios.create({ baseURL: import.meta.env.VITE_SERVER_URL, headers: { - 'content-type': import.meta.env.VITE_CONTENT_TYPE + 'Content-Type': import.meta.env.VITE_CONTENT_TYPE } }); From 3fa1ec4a231f8567b3d3b07b2f6a43e076402f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EB=8B=A4=EB=B9=88?= <991012dabin@gmail.com> Date: Thu, 18 Jan 2024 15:50:25 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20axios=20request=20interceptor=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/instance.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/src/api/lib/instance.ts b/src/api/lib/instance.ts index 998e935e..91d77121 100644 --- a/src/api/lib/instance.ts +++ b/src/api/lib/instance.ts @@ -1,3 +1,4 @@ +import { getCookies } from '@utils/lib/cookies'; import axios from 'axios'; const instance = axios.create({ @@ -7,4 +8,23 @@ const instance = axios.create({ } }); +// 요청 인터셉터 추가 +instance.interceptors.request.use( + (config: any): any => { + const accessToken = getCookies('accessToken'); + + if (accessToken) { + config.headers['Authorization'] = `Bearer ${accessToken}`; + } + }, + error => { + return Promise.reject(error); + } +); + +// TODO : 응답 인터셉터 추가 +instance.interceptors.response.use((response: any): any => { + return response; +}); + export default instance;