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

src/App.tsx

@@ -13,8 +13,8 @@ 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 IdChange from 'pages/Setting/UserSetting/IdChange';
+import Setting from 'pages/Setting';
+import IdChange from 'pages/Setting/Mobile/IdChange';
 import AuthRoute from 'components/common/AuthRoute';
 import Withdrawal from 'pages/Setting/Withdrawal';
 import Inquiry from 'pages/Inquiry';
@@ -40,11 +40,11 @@ export default function App(): JSX.Element {
           <Route path="/notice" element={<Notice />} />
         </Route>
         <Route element={<AuthRoute needAuth redirectRoute="/login" />}>
-          <Route path="/setting" element={<Setting />} />
-          <Route path="/setting/id-change" element={<IdChange />} />
           <Route path="/" element={<DefaultLayout />}>
             <Route path="/friend-list" element={<FollowPage />} />
             <Route path="/friend-list/:id" element={<FollowProfile />} />
+            <Route path="/setting" element={<Setting />} />
+            <Route path="/setting/id-change" element={<IdChange />} />
           </Route>
           <Route path="/withdrawal" element={<Withdrawal />} />
           <Route path="/profile" element={<MyPage />} />

src/api/follow/entity.ts

@@ -1,4 +1,4 @@
-import { User } from 'api/user/entity';
+import { EmailUser } from 'api/user/entity';
 import { FollowerInfo } from 'pages/Follow/static/entity';
 
 export interface FollowListParams {
@@ -27,8 +27,8 @@ export interface SentOrReceivedFollowParams {
 export interface SentOrReceivedFollowResponse {
   content: {
     id: number;
-    follower: User;
-    user: User;
+    follower: EmailUser;
+    user: EmailUser;
   }[];
   empty: boolean;
   last: boolean;

src/api/user/entity.ts

@@ -25,7 +25,7 @@ export interface ModifyParams {
   email?: string;
 }
 
-export interface User {
+export interface EmailUser {
   account: string;
   nickname: string;
   email: string;
@@ -42,6 +42,14 @@ export interface User {
   };
 }
 
+export interface SNSUser {
+  id: number,
+  nickname: string,
+  email: string,
+}
+
+export type User = EmailUser | 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

@@ -5,15 +5,17 @@ import {
   LoginResponse,
   ModifyParams,
   RegisterParams,
-  User,
+  EmailUser,
   SendRegisterEmailParams,
   SendFindEmailParams,
   GetAccountParams,
   FindPasswordParams,
+  User,
+  CheckPasswordParams,
 } from './entity';
 import userApi from './userApiClient';
 
-export const register = (param: RegisterParams) => userApi.post<User>('/', param);
+export const register = (param: RegisterParams) => userApi.post<EmailUser>('/', param);
 
 export const checkIdDuplicate = (param: CheckIdDuplicateParams) => userApi.get<User>(`/exists?account=${param.account}`);
 
@@ -39,3 +41,5 @@ 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}`);

src/pages/Follow/components/SearchPage.tsx

@@ -5,12 +5,18 @@ import FollowList from './FollowList';
 export default function SearchPage({ data }: SearchPageInfo) {
   const auth = useAuth();
   const myFriends: FollowerInfo[] = data.filter((follower) => follower.followedType === 'FOLLOWED');
-  const newFriends: FollowerInfo[] = data.filter((follower) => follower.followedType === 'NONE').filter((follower) => follower.account !== auth?.account);
+  let newFriends: FollowerInfo[];
 
+  if (auth && 'account' in auth) {
+    newFriends = data.filter((follower) => follower.followedType === 'NONE').filter((follower) => follower.account !== auth?.account);
+    return (
+      <div>
+        <FollowList title="나의 친구" data={myFriends} />
+        <FollowList title="새 친구" data={newFriends} />
+      </div>
+    );
+  }
   return (
-    <div>
-      <FollowList title="나의 친구" data={myFriends} />
-      <FollowList title="새 친구" data={newFriends} />
-    </div>
+    <div>오류입니다.</div>
   );
 }

src/pages/Setting/Mobile/IdChage.module.scss

@@ -0,0 +1,125 @@
+@use "src/utils/styles/mediaQuery" as media;
+
+.blindBox {
+  align-items: center;
+  justify-content: center;
+
+  &__button {
+    position: absolute;
+    background-color: transparent;
+    border: none;
+    margin-top: 5px;
+    margin-left: -35px;
+    width: 16px;
+    height: 16px;
+    cursor: pointer;
+  }
+}
+
+.layout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 5vh;
+  width: 100vw;
+  min-height: 100vh;
+}
+
+.back {
+  width: 270px;
+  padding-bottom: 30px;
+  padding-top: 16px;
+  padding-left: 50px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 20px;
+  margin-right: 120px;
+}
+
+.page {
+  display: flex;
+  flex-direction: column;
+
+  &__quote {
+    font-size: 18px;
+    font-weight: 500;
+    width: 240px;
+    line-height: 22px;
+  }
+
+  &__image {
+    padding-right: 5px;
+  }
+
+  &__error {
+    display: flex;
+    align-items: center;
+    color: #ff7f23;
+    height: 50px;
+    font-size: 12px;
+  }
+
+  &__caution {
+    display: flex;
+    align-items: center;
+  }
+}
+
+.form {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+
+  &__space {
+    gap: 80px !important;
+  }
+
+  &__center {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    padding-bottom: 23px;
+  }
+
+  &__label {
+    padding-left: 10px;
+    padding-bottom: 5px;
+
+    &--paddingTop {
+      padding-left: 10px;
+      padding-bottom: 5px;
+      padding-top: 5px;
+    }
+  }
+
+  &__input {
+    border: 1px solid #eeeeee;
+    border-radius: 100px;
+    width: 220px;
+    height: 30px;
+    padding-left: 15px;
+    padding-right: 15px;
+    margin-bottom: 10px;
+    background-color: #eeeeee;
+
+    &--error {
+      border-radius: 18px;
+      border: 1px solid #ff7f23;
+    }
+  }
+
+  &__submit {
+    border: none;
+    border-radius: 100px;
+    width: 250px;
+    height: 40px;
+    color: white;
+    background-color: #c4c4c4;
+
+    &--active {
+      background-color: #ff7f23;
+      cursor: pointer;
+    }
+  }
+}