비밀번호 숨기기 기능 추가

package.json

@@ -30,7 +30,8 @@
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
-    "deploy": "gh-pages -d build"
+    "deploy": "gh-pages -d build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
   },
   "eslintConfig": {
     "extends": [

src/pages/checkpw/index.tsx

@@ -6,6 +6,8 @@ import { useParams } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import { bindActionCreators } from 'redux';
 
+import { ReactComponent as EyeIcon } from '../../assets/Eye.svg';
+import { ReactComponent as EyeHiddenIcon } from '../../assets/EyeHidden.svg';
 import { FileBox, Button, SkeletonUI } from '../../components';
 import { actionCreators } from '../../state';
 import { getDate, getFileSize } from '../../utils';
@@ -14,13 +16,14 @@ import * as S from './styled';
 export const CheckPasswordPage: React.FC = () => {
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(true);
+  const [passwordFilter, setPasswordFilter] = useState(true);
   const { checkfileid } = useParams<{ checkfileid: string }>();
   const [fileProps, setFileProps] = useState({
     filename: '',
     size: '',
     uploadDate: { year: 0, month: 0, day: 0 },
   });
-  // const { year, month, day } = getDate(checkPasswordFileProps.uploadDate);
+
   const dispatch = useDispatch();
   const { SetDownloadFileProps } = bindActionCreators(actionCreators, dispatch);
 
@@ -33,67 +36,63 @@ export const CheckPasswordPage: React.FC = () => {
         position: toast.POSITION.BOTTOM_RIGHT,
       });
     } else {
-      await axios({
-        method: 'get',
-        url: `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkfileid}?pw=${password}`,
-      })
-        .then((res) => {
-          SetDownloadFileProps({
-            isEncrypted: true,
-            token: res.data.token,
-          });
-          navigate(`/download/${checkfileid}`);
-          toast.success('통과!', {
-            autoClose: 1000,
-            position: toast.POSITION.BOTTOM_RIGHT,
-          });
-        })
-        .catch((err) => {
-          console.log(err);
-          setPassword('');
-          toast.error('비밀번호를 다시 확인해주세요...', {
-            autoClose: 1000,
-            position: toast.POSITION.BOTTOM_RIGHT,
-          });
+      try {
+        const res = await axios.get(
+          `${process.env.REACT_APP_BACKEND_BASEURL}/checkpw/${checkfileid}?pw=${password}`,
+        );
+        SetDownloadFileProps({
+          isEncrypted: true,
+          token: res.data.token,
+        });
+        navigate(`/download/${checkfileid}`);
+        toast.success('통과!', {
+          autoClose: 1000,
+          position: toast.POSITION.BOTTOM_RIGHT,
         });
+      } catch (err) {
+        console.log(err);
+        setPassword('');
+        toast.error('비밀번호를 다시 확인해주세요...', {
+          autoClose: 1000,
+          position: toast.POSITION.BOTTOM_RIGHT,
+        });
+      }
     }
   };
 
   useEffect(() => {
     const getFileProps = async () => {
-      await axios({
-        method: 'get',
-        url: `${process.env.REACT_APP_BACKEND_BASEURL}/file/${checkfileid}`,
-      })
-        .then((res) => {
-          setLoading(false);
-          setFileProps({
-            filename: res.data.filename,
-            size: getFileSize(res.data.size),
-            uploadDate: getDate(res.data.uploadDate),
-          });
-        })
-        .catch((err) => {
-          console.log(err);
-          navigate('/');
-          toast.error('error 문의해주세요...', {
-            autoClose: 1000,
-            position: toast.POSITION.BOTTOM_RIGHT,
-          });
+      try {
+        const res = await axios.get(`${process.env.REACT_APP_BACKEND_BASEURL}/file/${checkfileid}`);
+        setLoading(false);
+        setFileProps({
+          filename: res.data.filename,
+          size: getFileSize(res.data.size),
+          uploadDate: getDate(res.data.uploadDate),
+        });
+      } catch (err) {
+        console.log(err);
+        navigate('/');
+        toast.error('error 문의해주세요...', {
+          autoClose: 1000,
+          position: toast.POSITION.BOTTOM_RIGHT,
         });
+      }
     };
     getFileProps();
   }, [checkfileid, navigate]);
+
   return (
     <S.CheckPasswordPageContainer>
       {!loading ? (
         <>
           <FileBox>
-            파일이름:{fileProps.filename} / 크기:{fileProps.size} / 업로드된 날짜:{' '}
+            파일이름: {fileProps.filename} / 크기: {fileProps.size} / 업로드된 날짜:{' '}
             {fileProps.uploadDate.year}-{fileProps.uploadDate.month}-{fileProps.uploadDate.day}
           </FileBox>
           <S.PasswordInputSection>
             <S.CheckPasswordInput
+              type={passwordFilter ? 'password' : 'text'}
               value={password}
               onKeyPress={(e: any) => {
                 if (e.key === 'Enter') {
@@ -105,7 +104,20 @@ export const CheckPasswordPage: React.FC = () => {
               }}
               placeholder="비밀번호를 입력해주세요."
             />
-
+            <S.EyeIconWrapper
+              onClick={() => setPasswordFilter(!passwordFilter)}
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '3.5rem',
+                height: '3.5rem',
+                marginLeft: '44rem',
+                backgroundColor: 'var(--color-background-black)',
+              }}
+            >
+              {passwordFilter ? <EyeHiddenIcon /> : <EyeIcon />}
+            </S.EyeIconWrapper>
             <Button
               click={() => {
                 passwordCheck();

src/pages/checkpw/styled.ts

@@ -1,28 +1,55 @@
 import styled from '@emotion/styled';
 
+// CheckPasswordPageContainer 스타일 정의
 export const CheckPasswordPageContainer = styled.div`
   display: flex;
   align-items: center;
   flex-direction: column;
   width: 100%;
 `;
 
+// PasswordInputSection 스타일 정의
 export const PasswordInputSection = styled.div`
   display: flex;
   margin: 4rem;
+  position: relative; /* 아이콘 위치 조정을 위해 부모 요소에 position: relative 설정 */
+  justify-content: space-between; /* 비밀번호 입력칸과 버튼을 좌우로 정렬 */
 `;
 
+// CheckPasswordInput 스타일 정의
 export const CheckPasswordInput = styled.input`
   border: 0.4rem solid var(--color-border);
   background-color: var(--color-backgorund-black);
   color: var(--color-text-placeholder);
   border-radius: 1rem;
+  z-index: 1;
   outline: none;
   width: 50rem;
   height: 6rem;
   padding-left: 1.2rem;
   font-size: 1.8rem;
   font-weight: 700;
+
+  &::-webkit-input-placeholder {
+    color: var(--color-text-placeholder);
+  }
+`;
+
+// EyeIconWrapper 스타일 정의
+export const EyeIconWrapper = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 1rem; /* 아이콘을 왼쪽 끝으로 이동 */
+  transform: translateY(-50%);
+  z-index: 1;
+  border-radius: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 5rem;
+  height: 5rem;
+  background-color: var(--color-background-black);
+
   &::-webkit-input-placeholder {
     color: var(--color-text-placeholder);
   }