From 4d8c45a6138db4c3e7429837bd19f389cf0c7af8 Mon Sep 17 00:00:00 2001
From: Chung-il Jung <jungchungil7@gmail.com>
Date: Mon, 9 Sep 2024 21:51:53 +0900
Subject: [PATCH] feat: CssTextField component remove

---
 src/components/Etc/CssTextField.ts   | 14 --------------
 src/components/Major/MajorSearch.tsx | 24 ++----------------------
 src/pages/Exit.tsx                   |  8 ++++----
 src/pages/IdSearch.tsx               |  6 +++---
 src/pages/Login.tsx                  |  8 ++++----
 src/pages/PwSearch.tsx               |  8 ++++----
 src/pages/ResetPassword.tsx          |  8 ++++----
 src/pages/SignUp.tsx                 | 10 +++++-----
 8 files changed, 26 insertions(+), 60 deletions(-)
 delete mode 100644 src/components/Etc/CssTextField.ts

diff --git a/src/components/Etc/CssTextField.ts b/src/components/Etc/CssTextField.ts
deleted file mode 100644
index 1ad414c8..00000000
--- a/src/components/Etc/CssTextField.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { TextField } from '@mui/material';
-import * as styles from '@mui/material/styles';
-
-export const CssTextField = styles.styled(TextField)({
-  '& label.Mui-focused': {
-    color: '#336af8',
-  },
-  '& .MuiInput-underline:after': {
-    borderBottomColor: '#336af8',
-  },
-  '& .MuiInput-underline:before': {
-    borderBottomColor: '#336af8',
-  },
-});
diff --git a/src/components/Major/MajorSearch.tsx b/src/components/Major/MajorSearch.tsx
index 4efb8aaa..46431500 100644
--- a/src/components/Major/MajorSearch.tsx
+++ b/src/components/Major/MajorSearch.tsx
@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 import { TextField } from '@mui/material';
-import * as styles from '@mui/material/styles';
 import useFavoriteMajor from 'hooks/useFavoriteMajor';
 import { Fragment, useState } from 'react';
 
@@ -22,7 +21,8 @@ const MajorSearch = ({
       </TitleWrapper>
       <TitleLine />
       <InputWrapper>
-        <CssTextField
+        <TextField
+          fullWidth
           variant="standard"
           placeholder="개설학과를 검색하세요."
           value={searchMajor}
@@ -104,22 +104,6 @@ const InputWrapper = styled.div`
   margin-top: 40px;
 `;
 
-const CssTextField = styles.styled(TextField)({
-  width: '100%',
-  '& label.Mui-focused': {
-    color: '#336af8',
-  },
-  '& .MuiInput-underline:after': {
-    borderBottomColor: 'black',
-  },
-  '& .MuiInput-underline:before': {
-    borderBottomColor: 'black',
-  },
-  backgroundImage: `url('images/icon_search_24.svg')`,
-  backgroundRepeat: `no-repeat`,
-  backgroundPosition: `99% -10%`,
-});
-
 const TabWrapper = styled.div`
   display: flex;
   margin-top: 36px;
@@ -188,9 +172,5 @@ const SearchIcon = styled.img`
 `;
 
 const FormCheckLeft = styled.input`
-  &:checked + ${MajorSelect} {
-    color: #336af8;
-    background-color: #eeeeee;
-  }
   display: none;
 `;
diff --git a/src/pages/Exit.tsx b/src/pages/Exit.tsx
index 05c00655..dd9be17d 100644
--- a/src/pages/Exit.tsx
+++ b/src/pages/Exit.tsx
@@ -1,7 +1,7 @@
+import { TextField } from '@mui/material';
 import { Auth } from 'api';
 import { Button } from 'components';
-import { CssTextField } from 'components/Etc/CssTextField';
-import type { SubmitHandler} from 'react-hook-form';
+import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { AuthWrapper, Container, Img, Sub, Title } from 'styles/common';
 import type { UserLogin } from 'types/user';
@@ -28,14 +28,14 @@ const Exit = () => {
       <AuthWrapper onSubmit={handleSubmit(onSubmit)}>
         <Title>회원탈퇴</Title>
         <Sub>아이디를 입력하세요</Sub>
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           label="id"
           {...register('loginId', { required: true })}
         />
         <Sub>비밀번호를 입력하세요</Sub>
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           type="password"
diff --git a/src/pages/IdSearch.tsx b/src/pages/IdSearch.tsx
index 650cdbf7..76fe2e65 100644
--- a/src/pages/IdSearch.tsx
+++ b/src/pages/IdSearch.tsx
@@ -1,8 +1,8 @@
+import { TextField } from '@mui/material';
 import { Auth } from 'api';
 import { Button } from 'components';
-import { CssTextField } from 'components/Etc/CssTextField';
 import { Loader } from 'components/Etc/Spinner';
-import { type SubmitHandler,useForm } from 'react-hook-form';
+import { type SubmitHandler, useForm } from 'react-hook-form';
 import { AuthWrapper, Container, Img, Sub, Title } from 'styles/common';
 import type { UserEmail } from 'types/user';
 import { validateEmail } from 'utils/validate';
@@ -23,7 +23,7 @@ const IdSearch = () => {
       <AuthWrapper onSubmit={handleSubmit(onEmailSubmit)}>
         <Title>아이디 찾기</Title>
         <Sub>학교 계정을 입력하세요</Sub>
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           label="학교 이메일 입력(@suwon.ac.kr)"
diff --git a/src/pages/Login.tsx b/src/pages/Login.tsx
index 875056ce..2417be84 100644
--- a/src/pages/Login.tsx
+++ b/src/pages/Login.tsx
@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
+import { TextField } from '@mui/material';
 import { Auth } from 'api';
-import { CssTextField } from 'components/Etc/CssTextField';
-import type { FieldValues, SubmitHandler} from 'react-hook-form';
+import type { FieldValues, SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { AuthWrapper, Container, Img } from 'styles/common';
@@ -34,14 +34,14 @@ const Login = () => {
       </picture>
       <AuthWrapper onSubmit={handleSubmit(loginAttempt)}>
         <Title>로그인</Title>
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           required
           label="아이디"
           {...register('loginId')}
         />
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           required
diff --git a/src/pages/PwSearch.tsx b/src/pages/PwSearch.tsx
index d68786f3..507fb721 100644
--- a/src/pages/PwSearch.tsx
+++ b/src/pages/PwSearch.tsx
@@ -1,8 +1,8 @@
+import { TextField } from '@mui/material';
 import { Auth } from 'api';
 import { Button } from 'components';
-import { CssTextField } from 'components/Etc/CssTextField';
 import { Loader } from 'components/Etc/Spinner';
-import { type SubmitHandler,useForm } from 'react-hook-form';
+import { type SubmitHandler, useForm } from 'react-hook-form';
 import { AuthWrapper, Container, Img, Sub, Title } from 'styles/common';
 import type { UserFindPw } from 'types/user';
 import { validateEmail } from 'utils/validate';
@@ -23,13 +23,13 @@ const PwSearch = () => {
       <AuthWrapper onSubmit={handleSubmit(onSubmit)}>
         <Title>비밀번호 찾기</Title>
         <Sub>아이디에 해당하는 학교 이메일로 임시 비밀번호를 전송합니다</Sub>
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           label="아이디"
           {...register('loginId', { required: true })}
         />
-        <CssTextField
+        <TextField
           variant="standard"
           margin="normal"
           label="학교 이메일"
diff --git a/src/pages/ResetPassword.tsx b/src/pages/ResetPassword.tsx
index 8b1ff2ce..5dfd62b0 100644
--- a/src/pages/ResetPassword.tsx
+++ b/src/pages/ResetPassword.tsx
@@ -1,7 +1,7 @@
+import { TextField } from '@mui/material';
 import { Auth } from 'api';
 import { Button } from 'components';
-import { CssTextField } from 'components/Etc/CssTextField';
-import { type SubmitHandler,useForm } from 'react-hook-form';
+import { type SubmitHandler, useForm } from 'react-hook-form';
 import { AuthWrapper, Checking, Container, Img, Sub, Title } from 'styles/common';
 import type { ResetPassword as ResetPasswordType } from 'types/user';
 import { validatePassword } from 'utils/validate';
@@ -22,7 +22,7 @@ const ResetPassword = () => {
       <AuthWrapper onSubmit={handleSubmit(onResetPwSubmit)}>
         <Title>비밀번호 변경</Title>
         <Sub>기존 비밀번호를 입력하세요</Sub>
-        <CssTextField
+        <TextField
           variant="standard"
           type="password"
           margin="normal"
@@ -32,7 +32,7 @@ const ResetPassword = () => {
 
         <Sub>새로운 비밀번호를 입력하세요</Sub>
 
-        <CssTextField
+        <TextField
           variant="standard"
           type="password"
           margin="normal"
diff --git a/src/pages/SignUp.tsx b/src/pages/SignUp.tsx
index ee600f0e..bff438f2 100644
--- a/src/pages/SignUp.tsx
+++ b/src/pages/SignUp.tsx
@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
+import { TextField } from '@mui/material';
 import { Auth } from 'api';
-import { CssTextField } from 'components/Etc/CssTextField';
 import { useEffect, useState } from 'react';
 import { type SubmitHandler, useForm } from 'react-hook-form';
 import { AuthWrapper, Button, Checking, Container, Img } from 'styles/common';
@@ -69,7 +69,7 @@ const SignUp = () => {
       <AuthWrapper onSubmit={handleSubmit(onSubmit)}>
         <Title>회원가입</Title>
         <InputWrapper id="top">
-          <CssTextField
+          <TextField
             variant="standard"
             margin="normal"
             label="아이디"
@@ -88,7 +88,7 @@ const SignUp = () => {
         </InputWrapper>
         {errors.loginId && <Checking>{errors.loginId.message}</Checking>}
 
-        <CssTextField
+        <TextField
           variant="standard"
           type="password"
           margin="normal"
@@ -96,7 +96,7 @@ const SignUp = () => {
           {...register('password', validatePassword)}
         />
         {errors.password && <Checking>{errors.password.message}</Checking>}
-        <CssTextField
+        <TextField
           variant="standard"
           type="password"
           margin="normal"
@@ -105,7 +105,7 @@ const SignUp = () => {
         />
         {errors.passwordConfirm && <Checking>{errors.passwordConfirm.message}</Checking>}
         <InputWrapper id="top">
-          <CssTextField
+          <TextField
             variant="standard"
             type="email"
             margin="normal"