Merge pull request #108 from tempfiles-Team/103-각종-편의-개선-사항

103 각종 편의 개선 사항

Author: ananjaemin

src/assets/Eye.svg

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { ReactComponent as EyeIcon } from '../../../assets/Eye.svg';
+import { ReactComponent as EyeHiddenIcon } from '../../../assets/EyeHidden.svg';
+import * as S from './styled';
+
+interface PasswordInputProps {
+  type: string;
+  isFillter: boolean;
+  setPassword: any;
+  setPasswordFilter: any;
+  placeholder: string;
+}
+
+export const PasswordInput: React.FC<PasswordInputProps> = ({
+  type,
+  setPassword,
+  placeholder,
+  setPasswordFilter,
+  isFillter,
+}) => (
+  <S.PasswordInputContainer>
+    <S.Input
+      type={type}
+      onChange={(text) => {
+        setPassword(text.target.value.replace(/(\s*)/g, ''));
+      }}
+      placeholder={placeholder}
+    />
+    <div
+      onClick={() => setPasswordFilter(!isFillter)}
+      style={{
+        zIndex: 10,
+        width: '3rem',
+        height: '3rem',
+        marginRight: '1.2rem',
+      }}
+    >
+      {isFillter ? <EyeHiddenIcon /> : <EyeIcon />}
+    </div>
+  </S.PasswordInputContainer>
+);

src/assets/EyeHidden.svg

@@ -1,17 +1,29 @@
 import styled from '@emotion/styled';
 
-export const PasswordInput = styled.input`
+export const PasswordInputContainer = styled.div`
+  width: 100%;
+  height: 5rem;
+  margin-top: 2rem;
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+`;
+
+export const Input = styled.input`
+  position: absolute;
+  z-index: 1;
   border: 0.4rem solid var(--color-border);
   background-color: var(--color-backgorund-black);
   color: var(--color-text-placeholder);
   border-radius: 1rem;
   outline: none;
   width: 100%;
-  height: 5rem;
+  height: 100%;
   padding-left: 1.2rem;
   font-size: 1.8rem;
   font-weight: 700;
-  margin-top: 2rem;
+
   &::-webkit-input-placeholder {
     color: var(--color-text-placeholder);
   }

src/components/common/PasswordInput/index.tsx

@@ -50,6 +50,7 @@ export const CheckPasswordPage: React.FC = () => {
         })
         .catch((err) => {
           console.log(err);
+          setPassword('');
           toast.error('비밀번호를 다시 확인해주세요...', {
             autoClose: 1000,
             position: toast.POSITION.BOTTOM_RIGHT,
@@ -93,6 +94,7 @@ export const CheckPasswordPage: React.FC = () => {
           </FileBox>
           <S.PasswordInputSection>
             <S.CheckPasswordInput
+              value={password}
               onKeyPress={(e: any) => {
                 if (e.key === 'Enter') {
                   passwordCheck();

src/components/common/PasswordInput/index.ts renamed to src/components/common/PasswordInput/styled.ts

@@ -28,6 +28,7 @@ export const MainPage: React.FC = () => {
   const [expireTimeBoolean, setExpireTimeBoolean] = useState(false);
   const [downloadCountBoolean, setDownloadCountBoolean] = useState(false);
   const [passwordBoolean, setPasswordBoolean] = useState(false);
+  const [passwordFilter, setPasswordFilter] = useState(true);
 
   const [expireTime, setExpireTime] = useState(1);
   const [downloadCount, setDownloadCount] = useState(100);
@@ -98,6 +99,7 @@ export const MainPage: React.FC = () => {
             autoClose: 3000,
             position: toast.POSITION.BOTTOM_RIGHT,
           });
+          setUploading(true);
         });
     } else {
       toast.error('파일을 선택해주세요!', {
@@ -159,9 +161,10 @@ export const MainPage: React.FC = () => {
           )}
           {passwordBoolean && (
             <PasswordInput
-              onChange={(text) => {
-                setPassword(text.target.value.replace(/(\s*)/g, ''));
-              }}
+              type={passwordFilter ? 'password' : 'text'}
+              isFillter={passwordFilter}
+              setPassword={setPassword}
+              setPasswordFilter={setPasswordFilter}
               placeholder="비밀번호를 입력해주세요."
             />
           )}