[SETTING] 설정 페이지 추가 및 수정

src/App.tsx

@@ -13,7 +13,7 @@ import ChangePassword from 'pages/Auth/FindIDPassword/ChangePassword';
 import { Suspense } from 'react';
 import SearchDetails from 'pages/SearchDetails';
 import FollowPage from 'pages/Follow';
-import Setting from 'pages/Setting/UserSetting';
+import Setting from 'pages/Setting';
 import IdChange from 'pages/Setting/UserSetting/IdChange';
 import AuthRoute from 'components/common/AuthRoute';
 import Withdrawal from 'pages/Setting/Withdrawal';

src/api/user/entity.ts

@@ -42,6 +42,14 @@ export interface User {
   };
 }
 
+export interface SNSUser {
+  id: number,
+  nickname: string,
+  email: string,
+}
+
+export type Users = User | SNSUser;
+
 export interface SendRegisterEmailParams {
   email: string;
 }
@@ -62,3 +70,7 @@ export interface FindPasswordParams {
 export interface ChangePasswordParams {
   password: string
 }
+
+export interface CheckPasswordParams {
+  password: string
+}

src/api/user/index.ts

@@ -10,6 +10,8 @@ import {
   SendFindEmailParams,
   GetAccountParams,
   FindPasswordParams,
+  Users,
+  CheckPasswordParams,
 } from './entity';
 import userApi from './userApiClient';
 
@@ -22,7 +24,7 @@ export const login = async (param: LoginParams) => {
   return { data };
 };
 
-export const getMe = () => userApi.get<User>('/me');
+export const getMe = () => userApi.get<Users>('/me');
 
 export const withdrawUser = () => userApi.delete<User>('/me');
 
@@ -39,3 +41,7 @@ export const findPassowrd = (param: FindPasswordParams) => userApi.post('/passwo
   code: param.code,
   email: param.email,
 });
+
+export const checkPassword = (param: CheckPasswordParams) => userApi.post(`/check-password?password=${param.password}`);
+
+export const secession = () => userApi.delete('/me');

src/pages/Follow/components/SearchPage.tsx

@@ -1,9 +1,10 @@
 import { useAuth } from 'store/auth';
+import { User } from 'api/user/entity';
 import { FollowerInfo, SearchPageInfo } from '../static/entity';
 import FollowList from './FollowList';
 
 export default function SearchPage({ data }: SearchPageInfo) {
-  const auth = useAuth();
+  const auth = useAuth() as User;
   const myFriends: FollowerInfo[] = data.filter((follower) => follower.followedType === 'FOLLOWED');
   const newFriends: FollowerInfo[] = data.filter((follower) => follower.followedType === 'NONE').filter((follower) => follower.account !== auth?.account);
 

src/pages/Setting/PC/LogoutModal.tsx

@@ -0,0 +1,28 @@
+import { createPortal } from 'react-dom';
+import { Link } from 'react-router-dom';
+import { useClearAuth } from 'store/auth';
+import { ReactComponent as Favicon } from 'assets/svg/common/favicon.svg';
+import style from './PasswordSuccessModal.module.scss';
+
+interface Props {
+  children: React.ReactNode;
+}
+export default function LogoutModal({ children }: Props) {
+  const root = document.body;
+  const clearAuth = useClearAuth();
+  return createPortal(
+    <div className={style.container}>
+      <div className={style.overay} />
+      <div className={style.modal}>
+        <Favicon />
+        <button className={style.modal__close} type="button" onClick={clearAuth}>X</button>
+        <div className={style.modal__title}>
+          로그아웃을 진행하실건가요?
+        </div>
+        <div className={style.modal__content}>{children}</div>
+        <Link to="/login" onClick={clearAuth}><button type="button" className={style.modal__button}>확인</button></Link>
+      </div>
+    </div>,
+    root,
+  );
+}

src/pages/Setting/PC/ManageAccount.tsx

@@ -0,0 +1,140 @@
+import { ReactComponent as ShowIcon } from 'assets/svg/auth/pw-show.svg';
+import { ReactComponent as BlindIcon } from 'assets/svg/auth/pw-blind.svg';
+import { useAuth } from 'store/auth';
+import { ReactComponent as ErrorIcon } from 'assets/svg/auth/error.svg';
+import cn from 'utils/ts/classNames';
+import useTripleBlindCheck from './hook/useTripleBlindCheck';
+import style from './index.module.scss';
+import useModifyPassword, { ERROR_MESSAGE } from './hook/useModifyPassword';
+import PasswordSuccessModal from './PasswordSuccessModal';
+
+export default function ManageAccount() {
+  const {
+    isCurrentBlind,
+    changeCurrentBlind,
+    isNewBlind,
+    changeNewBlind,
+    isNewCheckBlind,
+    changeNewCheckBlind,
+  } = useTripleBlindCheck();
+  const {
+    current,
+    newPassword,
+    check,
+    handleCheck,
+    handleCurrent,
+    handleNewPassword,
+    modifyPassword,
+    isShowError,
+    message,
+    isShowModal,
+  } = useModifyPassword();
+  const auth = useAuth();
+  return (
+    <form className={style.formContainer}>
+
+      <div className={style.title}>계정</div>
+      <div className={style.account}>
+        <span>이메일</span>
+        <input className={style.account__input} value={auth ? auth.email : ''} disabled />
+      </div>
+      <div>
+        <span>아이디</span>
+        <input className={style.account__input} value={auth && 'account' in auth ? auth.account : 'SNSLogin'} disabled />
+      </div>
+
+      <div className={style.title}>비밀번호 변경</div>
+      <div>
+        <span>현재 비밀번호</span>
+        <span className={style.blindBox}>
+          <input
+            className={cn({
+              [style.password]: true,
+              [style.password__error]:
+                message === ERROR_MESSAGE.Current_Error || message === ERROR_MESSAGE.Type_Error,
+            })}
+            type={isCurrentBlind ? 'text' : 'password'}
+            disabled={!(auth && 'account' in auth)}
+            value={current}
+            onChange={handleCurrent}
+          />
+          <button
+            type="button"
+            onClick={() => (auth && 'account' in auth) && changeCurrentBlind()}
+            className={style.blindBox__button}
+          >
+            {isCurrentBlind ? (
+              <ShowIcon aria-hidden />
+            ) : (
+              <BlindIcon aria-hidden />
+            )}
+          </button>
+        </span>
+      </div>
+      <div>
+        <span>새 비밀번호</span>
+        <span className={style.blindBox}>
+          <input
+            className={cn({
+              [style.password]: true,
+              [style.password__error]:
+                message === ERROR_MESSAGE.Correct_Error,
+            })}
+            type={isNewBlind ? 'text' : 'password'}
+            disabled={!(auth && 'account' in auth)}
+            value={newPassword}
+            onChange={handleNewPassword}
+          />
+          <button
+            type="button"
+            onClick={() => (auth && 'account' in auth) && changeNewBlind()}
+            className={style.blindBox__button}
+          >
+            {isNewBlind ? (
+              <ShowIcon aria-hidden />
+            ) : (
+              <BlindIcon aria-hidden />
+            )}
+          </button>
+        </span>
+      </div>
+      <div>
+        <span>새 비밀번호 확인</span>
+        <span className={style.blindBox}>
+          <input
+            className={cn({
+              [style.password]: true,
+              [style.password__error]:
+                message === ERROR_MESSAGE.Correct_Error,
+            })}
+            type={isNewCheckBlind ? 'text' : 'password'}
+            disabled={!(auth && 'account' in auth)}
+            value={check}
+            onChange={handleCheck}
+          />
+          <button
+            type="button"
+            onClick={() => (auth && 'account' in auth) && changeNewCheckBlind()}
+            className={style.blindBox__button}
+          >
+            {isNewCheckBlind ? (
+              <ShowIcon aria-hidden />
+            ) : (
+              <BlindIcon aria-hidden />
+            )}
+          </button>
+        </span>
+      </div>
+      {isShowError && (
+        <div>
+          <ErrorIcon />
+          <span className={style.errorMessage}>
+            {message}
+          </span>
+        </div>
+      )}
+      <button className={style.button} type="button" onClick={modifyPassword}>비밀번호 변경</button>
+      {isShowModal && <PasswordSuccessModal>변경된 비밀번호로 로그인 해주세요.</PasswordSuccessModal>}
+    </form>
+  );
+}

src/pages/Setting/PC/PasswordSuccessModal.module.scss

@@ -0,0 +1,90 @@
+.container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+  width: 100vw;
+}
+
+.overay {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background-color: rgb(0 0 0 / 35%);
+  height: 100vh;
+  width: 100vw;
+}
+
+.modal {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-around;
+  background-color: white;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 320px;
+  height: 200px;
+  border-radius: 20px;
+  padding: 15px;
+  padding-bottom: 0.5px;
+
+  &__container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+  }
+
+  &__title {
+    font-size: 18px;
+    font-weight: 700;
+    color: #ff7f23;
+  }
+
+  &__content {
+    text-align: center;
+    font-size: 12px;
+    padding-bottom: 10px;
+  }
+
+  &__button {
+    border: none;
+    border-radius: 20px;
+    background-color: #ff7f23;
+    text-align: center;
+    width: 146px;
+    height: 44px;
+    color: white;
+    cursor: pointer;
+    margin-bottom: 15px;
+
+    &--cancel {
+      background-color: #c4c4c4;
+      color: white;
+      border: none;
+      border-radius: 20px;
+      width: 146px;
+      height: 44px;
+      margin-bottom: 15px;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    top: 16px;
+    right: 22px;
+    font-size: 15px;
+    color: #c4c4c4;
+    background-color: transparent;
+    border: none;
+
+    &:hover {
+      cursor: pointer;
+    }
+  }
+}

src/pages/Setting/PC/PasswordSuccessModal.tsx

@@ -0,0 +1,28 @@
+import { createPortal } from 'react-dom';
+import { Link } from 'react-router-dom';
+import { useClearAuth } from 'store/auth';
+import { ReactComponent as Favicon } from 'assets/svg/common/favicon.svg';
+import style from './PasswordSuccessModal.module.scss';
+
+interface Props {
+  children: React.ReactNode;
+}
+export default function PasswordSuccessModal({ children }: Props) {
+  const root = document.body;
+  const clearAuth = useClearAuth();
+  return createPortal(
+    <div className={style.container}>
+      <div className={style.overay} />
+      <div className={style.modal}>
+        <Favicon />
+        <button className={style.modal__close} type="button" onClick={clearAuth}>X</button>
+        <div className={style.modal__title}>
+          비밀번호 변경을 완료했습니다.
+        </div>
+        <div className={style.modal__content}>{children}</div>
+        <Link to="/login" onClick={clearAuth}><button type="button" className={style.modal__button}>로그인</button></Link>
+      </div>
+    </div>,
+    root,
+  );
+}