[fix] kdt-8-4#22 kdt-8-4#36 로그인 관련 코드 수정

hyeiis · Mar 16, 2024 · 051251a · 051251a
1 parent 3df31bf
commit 051251a
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 39 deletions.
diff --git a/weatherfit_refactoring/package-lock.json b/weatherfit_refactoring/package-lock.json
diff --git a/weatherfit_refactoring/package.json b/weatherfit_refactoring/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^1.6.7",
+    "js-cookie": "^3.0.5",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
@@ -20,6 +21,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

diff --git a/weatherfit_refactoring/src/Components/Molecules/LoginForm.tsx b/weatherfit_refactoring/src/Components/Molecules/LoginForm.tsx
@@ -4,15 +4,13 @@ import InputStore, { InputStyle } from '@/Components/Atoms/Input/InputStore'
 import { confirmAlert } from '@/utils/function/utilFunction'
 import { useRouter } from 'next/navigation'
 import { FormEvent, useState } from 'react'
-import { useAuth } from '../../../contexts/AuthContext'
-import AuthUserEmailStore from '@/Store/AuthUserEmail'
+import { AuthUserStore } from '@/Store/AuthUser'
 
 export default function LoginForm() {
   const [email, setEmail] = useState<string>('')
   const [password, setPassword] = useState<string>('')
-  const { userEmail, setUserEmail } = AuthUserEmailStore()
+  const { setUserEmail } = AuthUserStore()
   const router = useRouter()
-  const { login } = useAuth()
 
   const handleLogin = async (e: FormEvent) => {
     e.preventDefault()
@@ -36,10 +34,9 @@ export default function LoginForm() {
       const loginRes = await res.json()
       console.log('로그인 loginRes: ', loginRes)
 
+      document.cookie = `accessToken=${loginRes.token}; path=/`
       setUserEmail(loginRes.email)
 
-      // login(loginRes.email, loginRes.token)
-
       confirmAlert(`${loginRes.nickname}님 환영합니다!`)
 
       router.push('/')

diff --git a/weatherfit_refactoring/src/Components/Molecules/NavBarBox.tsx b/weatherfit_refactoring/src/Components/Molecules/NavBarBox.tsx
@@ -17,10 +17,8 @@ export default function NavBarBox({ iconStyle, title, url }: Props) {
   const [isActive, setIsActive] = useState<boolean>(false)
 
   useEffect(() => {
-    console.log('pathname: ', pathname)
     setIsActive(pathname === url)
   }, [pathname])
-  console.log('isActive: ', isActive)
 
   const activeIconStyle = isActive
     ? IconStyle[`${iconStyle}_FILL` as keyof typeof IconStyle]

diff --git a/weatherfit_refactoring/src/Store/AuthToken.ts b/weatherfit_refactoring/src/Store/AuthToken.ts
@@ -0,0 +1,12 @@
+import { create } from 'zustand'
+import Cookies from 'js-cookie'
+
+interface AuthToken {
+  accesstoken: string | undefined
+  setAccessToken: () => void
+}
+
+export const AuthTokenStore = create<AuthToken>(set => ({
+  accesstoken: undefined,
+  setAccessToken: () => set({ accesstoken: Cookies.get('accessToken') }),
+}))
diff --git a/weatherfit_refactoring/src/Store/AuthUser.ts b/weatherfit_refactoring/src/Store/AuthUser.ts
@@ -0,0 +1,21 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+interface AuthUser {
+  userEmail: string | null
+  setUserEmail: (userEmail: string | null) => void
+}
+
+export const AuthUserStore = create(
+  persist<AuthUser>(
+    set => ({
+      userEmail: null,
+      setUserEmail: userEmail => {
+        set({ userEmail })
+      },
+    }),
+    {
+      name: 'user_email', // 로컬 스토리지 저장 이름
+    },
+  ),
+)
diff --git a/weatherfit_refactoring/src/Store/AuthUserEmail.ts b/weatherfit_refactoring/src/Store/AuthUserEmail.ts
diff --git a/weatherfit_refactoring/src/app/layout.tsx b/weatherfit_refactoring/src/app/layout.tsx
@@ -1,7 +1,6 @@
 import type { Metadata } from 'next'
 import ReactQueryProvider from '../utils/provider/ReactQueryProvider'
 import './globals.css'
-import { AuthProvider } from '../../contexts/AuthContext'
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -16,9 +15,7 @@ export default function RootLayout({
   return (
     <html>
       <body>
-        <AuthProvider>
-          <ReactQueryProvider>{children}</ReactQueryProvider>
-        </AuthProvider>
+        <ReactQueryProvider>{children}</ReactQueryProvider>
       </body>
     </html>
   )

diff --git a/weatherfit_refactoring/src/app/mypage/page.tsx b/weatherfit_refactoring/src/app/mypage/page.tsx
@@ -4,7 +4,6 @@ import React, { useEffect, useState } from 'react'
 import ProfileInfo from '@/Components/Molecules/ProfileInfo'
 import ProfileHeader from '@/Components/Organisms/ProfileHeader'
 import ProfileBoard from '@/Components/Organisms/ProfileBoard'
-import AuthUserEmailStore from '@/Store/AuthUserEmail'
 
 export default function Mypage() {
   // 회원 정보
@@ -13,9 +12,7 @@ export default function Mypage() {
   const [refreshProfile, setRefreshProfile] = useState<boolean>(false) // 회원 정보 변경했을 때
   const [myPostData, setMyPostData] = useState<FEEDDATA[]>([])
   const [myLikePostData, setMyLikePostData] = useState<FEEDDATA[]>([])
-  const { userEmail, setUserEmail } = AuthUserEmailStore()
 
-  console.log('user email: ', userEmail)
   // 회원 정보 불러오기
   // useEffect(() => {
   //   const fetchData = async () => {

diff --git a/weatherfit_refactoring/src/app/page.tsx b/weatherfit_refactoring/src/app/page.tsx
@@ -1,7 +1,5 @@
-
 import MainOrganism from '@/Components/Organisms/MainOrganism'
 import NavBar from '@/Components/Molecules/NavBar'
-import LikeAndComment from '@/Components/Molecules/LikeAndComment'
 import WeatherInfo from '@/Components/Molecules/WeatherInfo'
 import MainHeader from '@/Components/Molecules/MainHeader'
 

diff --git a/weatherfit_refactoring/src/utils/function/utilFunction.ts b/weatherfit_refactoring/src/utils/function/utilFunction.ts
@@ -30,6 +30,7 @@ export const handleNext = (
   })
 }
 
+// sweetalert 함수
 export const deleteAlert = () => {
   return Swal.fire({
     title: '게시물 삭제',