Merge pull request #435 from Hongjw030/refactor/social-password-edit

[#427] 소셜 로그인인 경우 비밀번호 변경 탭이 안보이게 수정

src/components/button/header/myPageButton.tsx

@@ -5,10 +5,13 @@ import useShowDropDown from '@/hooks/useShowDropDown';
 import { MutableRefObject, useRef } from 'react';
 import router from 'next/router';
 import { signOut } from 'next-auth/react';
+import { useAtom } from 'jotai';
+import { SigninMethodAtom } from '@/store/state';
 
 function MyPageButton() {
   const ref = useRef() as MutableRefObject<HTMLImageElement>;
   const [showOptions, setShowOptions] = useShowDropDown(ref, false);
+  const [_, setSigninMethod] = useAtom(SigninMethodAtom);
 
   const handleKebabClick = () => {
     setShowOptions(!showOptions);
@@ -19,7 +22,8 @@ function MyPageButton() {
   };
 
   const handleLogoutClick = () => {
-    signOut({callbackUrl:'/signin'})
+    setSigninMethod(null);
+    signOut({ callbackUrl: '/signin' });
   };
 
   return (

src/components/button/signOutButton.tsx

@@ -1,11 +1,20 @@
-import { signOut } from "next-auth/react";
+import { SigninMethodAtom } from '@/store/state';
+import { useAtom } from 'jotai';
+import { signOut } from 'next-auth/react';
 
 function SignOutButton() {
-   const handleLogoutClick = () => {
-     signOut({ callbackUrl: '/signin' });
-   };
-
-  return <button className="text-15 mobile:hidden" onClick={handleLogoutClick}>로그아웃</button>;
+  const [_, setSigninMethod] = useAtom(SigninMethodAtom);
+
+  const handleLogoutClick = () => {
+    setSigninMethod(null);
+    signOut({ callbackUrl: '/signin' });
+  };
+
+  return (
+    <button className="text-15 mobile:hidden" onClick={handleLogoutClick}>
+      로그아웃
+    </button>
+  );
 }
 
 export default SignOutButton;

src/components/header/settingTab.tsx

@@ -1,10 +1,13 @@
 import React, { useState, useEffect } from 'react';
 import { useRouter } from 'next/router';
 import TabButton from '@/components/button/header/TabButton';
+import { useAtom } from 'jotai';
+import { SigninMethodAtom } from '@/store/state';
 
 function SettingTab() {
   const [selectedTab, setSelectedTab] = useState('');
   const router = useRouter();
+  const [signinMethod] = useAtom(SigninMethodAtom);
 
   useEffect(() => {
     // 페이지 로드 시 URL 경로 파싱하여 선택된 탭 설정
@@ -33,12 +36,14 @@ function SettingTab() {
           title={'선호장르 선택'}
           isSmall={true}
         />
-        <TabButton
-          selected={selectedTab === 'editPassword'}
-          onClick={() => handleButtonClick('editPassword')}
-          title={'비밀번호 변경'}
-          isSmall={true}
-        />
+        {!signinMethod && (
+          <TabButton
+            selected={selectedTab === 'editPassword'}
+            onClick={() => handleButtonClick('editPassword')}
+            title={'비밀번호 변경'}
+            isSmall={true}
+          />
+        )}
       </div>
     </div>
   );

src/pages/signin/[socialType].tsx

@@ -2,12 +2,16 @@ import { useQuery } from '@tanstack/react-query';
 import { useEffect } from 'react';
 import { useRouter } from 'next/router';
 import { signIn } from 'next-auth/react';
+import { useAtom } from 'jotai';
 
 import { SocialType, getSocialLogin } from '@/api/social';
+import { SigninMethodAtom } from '@/store/state';
 
 function SocialPage() {
   const router = useRouter();
   const { socialType, code } = router.query;
+  const [_, setSigninMethod] = useAtom(SigninMethodAtom);
+
   const myType: SocialType =
     socialType === 'kakao'
       ? 'KAKAO'
@@ -25,6 +29,7 @@ function SocialPage() {
   const handleSocialLogin = async () => {
     if (data) {
       let token = data ? data?.data.Authentication.substr(7) : '';
+      setSigninMethod(myType);
       const result = await signIn('social-credentials', {
         email: data?.data.email,
         socialType: myType,

src/store/state.ts

@@ -1,6 +1,7 @@
 import { PayMentAtom } from '@/types/cartType';
 import { atom } from 'jotai';
 import { CategoryAtomType, CategoryType } from '@/types/api/category';
+import { SocialType } from '@/api/social';
 
 export const countAtom = atom(0);
 
@@ -25,3 +26,6 @@ export const CategoryListAtom = atom<CategoryAtomType>({
 export const LocatedCategoryAtom = atom<CategoryType>({
   mainId: 0,
 });
+
+// 사용자가 로그인했을 때 소셜로 한 건지, 일반으로 한 건지 체크하는 전역상태
+export const SigninMethodAtom = atom<SocialType | undefined | null>(null);