feat: CssTextField component remove

uswLectureEvaluation · Sep 9, 2024 · 4d8c45a · 4d8c45a
1 parent 9b5cfa7
commit 4d8c45a
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 60 deletions.
diff --git a/src/components/Etc/CssTextField.ts b/src/components/Etc/CssTextField.ts
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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,15 +88,15 @@ const SignUp = () => {
         </InputWrapper>
         {errors.loginId && <Checking>{errors.loginId.message}</Checking>}
 
-        <CssTextField
+        <TextField
           variant="standard"
           type="password"
           margin="normal"
           label="비밀번호"
           {...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"