[ Feat/#79 ] eye input 추가 구현

src/assets/svgs/IconEyeOn.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import type { SVGProps } from "react";
+const SvgIconEyeOn = (props: SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" {...props}>
+    <g clipPath="url(#icon_eye_on_svg__a)">
+      <path
+        fill="#F4F4F4"
+        fillRule="evenodd"
+        d="M4.8 12.299v.002a1 1 0 0 0 .086.25q.158.337.381.636c.358.498.894 1.073 1.57 1.619C8.2 15.904 10.03 16.8 12 16.8s3.802-.896 5.162-1.995c.677-.546 1.213-1.12 1.57-1.618q.222-.301.383-.638c.067-.149.081-.228.085-.247v-.005a1 1 0 0 0-.085-.247 3.8 3.8 0 0 0-.382-.637c-.358-.498-.894-1.073-1.57-1.619C15.8 8.696 13.968 7.8 12 7.8s-3.8.896-5.162 1.996c-.677.546-1.213 1.12-1.57 1.618-.18.25-.305.466-.382.638-.068.149-.082.228-.086.247m.908-3.906C7.277 7.13 9.495 6 12 6s4.723 1.129 6.292 2.393c.79.636 1.44 1.327 1.902 1.968q.328.447.563.95c.132.295.243.64.243.989 0 .35-.11.694-.244.99-.139.307-.331.628-.562.949-.462.641-1.113 1.332-1.902 1.968C16.723 17.47 14.505 18.6 12 18.6s-4.723-1.129-6.292-2.393c-.79-.636-1.44-1.327-1.902-1.968a5.6 5.6 0 0 1-.563-.95C3.111 12.994 3 12.65 3 12.3c0-.35.11-.693.244-.99q.232-.502.562-.949c.462-.641 1.113-1.333 1.902-1.968m4.383 1.998a2.7 2.7 0 1 1 3.818 3.818 2.7 2.7 0 0 1-3.818-3.818"
+        clipRule="evenodd"
+      />
+    </g>
+    <defs>
+      <clipPath id="icon_eye_on_svg__a">
+        <path fill="#fff" d="M0 0h24v24H0z" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+export default SvgIconEyeOn;

src/assets/svgs/index.tsx

@@ -8,6 +8,7 @@ export { default as IconBnk } from "./IconBnk";
 export { default as IconCalendar } from "./IconCalendar";
 export { default as IconCheck } from "./IconCheck";
 export { default as IconEyeOff } from "./IconEyeOff";
+export { default as IconEyeOn } from "./IconEyeOn";
 export { default as IconHanna } from "./IconHanna";
 export { default as IconIbk } from "./IconIbk";
 export { default as IconIm } from "./IconIm";

src/components/commons/input/textField/TextField.styled.ts

@@ -50,6 +50,13 @@ export const TextUnit = styled.p`
   ${({ theme }) => theme.fonts["body2-normal-medi"]};
 `;
 
+export const ToggleVisibilityIcon = styled.section`
+  position: absolute;
+  right: 1.6rem;
+
+  width: 2.4rem;
+`;
+
 export const TextCap = styled.p`
   ${Generators.flexGenerator("row", "center", "end")}
 

src/components/commons/input/textField/TextField.tsx

@@ -1,5 +1,6 @@
-import React, { ChangeEvent, InputHTMLAttributes, useRef } from "react";
+import React, { ChangeEvent, InputHTMLAttributes, useRef, useState } from "react";
 import * as S from "./TextField.styled";
+import { IconEyeOff, IconEyeOn } from "@assets/svgs";
 
 export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -9,9 +10,11 @@ export interface TextFieldProps extends InputHTMLAttributes<HTMLInputElement> {
   unit?: "time" | "ticket" | "amount"; // 단위 : "분", "매", "원"
   filter?: (value: string) => string;
   cap?: false | true;
+  onToggleClick?: () => void;
 }
 
 const TextField = ({
+  type = "input",
   name,
   value,
   onChange,
@@ -21,11 +24,13 @@ const TextField = ({
   unit,
   filter,
   cap,
+  onToggleClick,
   ...rest
 }: TextFieldProps) => {
   const label = unit === "time" ? "분" : unit === "ticket" ? "매" : "원";
 
   const inputRef = useRef<HTMLInputElement>(null);
+  const [isPasswordVisible, setIsPasswordVisible] = useState(type !== "password"); // 비밀번호 입력값 보이기/숨기기
 
   // 값 입력될 떄
   const handleOnInput = (e: ChangeEvent<HTMLInputElement>) => {
@@ -70,6 +75,11 @@ const TextField = ({
     }
   };
 
+  // 비밀번호 입력값 보이기 여부 관리
+  const handlePasswordVisibility = () => {
+    setIsPasswordVisible((prev) => !prev);
+  };
+
   return (
     <S.TextFieldLayout narrow={narrow}>
       <S.TextFieldWrapper>
@@ -80,10 +90,19 @@ const TextField = ({
           onChange={handleOnInput}
           maxLength={maxLength}
           placeholder={placeholder}
+          type={isPasswordVisible ? "text" : "password"} // 비밀번호 보이기 여부를 위해 타입에 조건을 걸음
           {...rest}
         />
-        {!narrow && !unit && value && <S.TextClear onClick={handleClearInput} />}
+        {!narrow && !unit && value && type !== "password" && (
+          <S.TextClear onClick={handleClearInput} />
+        )}
         {unit && <S.TextUnit>{label}</S.TextUnit>}
+        {type === "password" && (
+          <S.ToggleVisibilityIcon
+            onClick={handlePasswordVisibility}
+            as={isPasswordVisible ? IconEyeOn : IconEyeOff}
+          />
+        )}
       </S.TextFieldWrapper>
       {maxLength && cap && <S.TextCap>{`${(value as string).length}/${maxLength}`}</S.TextCap>}
     </S.TextFieldLayout>

src/pages/test/TestPage.tsx

@@ -18,6 +18,7 @@ const TestPage = () => {
   const [round, setRound] = useState(1);
   const [selectedDate, setSelectedDate] = useState<Dayjs | null>(null);
   const { showToast, isToastVisible } = useToast();
+  const [pwdStatus, setPwdStatus] = useState(false);
 
   const handleChangeInput = (e: ChangeEvent<HTMLInputElement>) => {
     setInputValue(e.target.value);
@@ -34,14 +35,16 @@ const TestPage = () => {
   const handleDateChange = (value: Dayjs | null) => {
     setSelectedDate(value);
   };
-  console.log(selectedDate);
+  console.log(inputValue);
   return (
     <div style={{ display: "flex", flexDirection: "column", gap: "3rem", alignItems: "center" }}>
       <div style={{ display: "flex", flexDirection: "column" }}>
         <TextField
+          type="password"
           value={inputValue}
           onChange={handleChangeInput}
-          maxLength={30}
+          filter={numericFilter}
+          maxLength={4}
           placeholder="입력해주세요"
         />
         <TextArea

yarn.lock

@@ -12001,4 +12001,4 @@ __metadata:
   resolution: "yocto-queue@npm:0.1.0"
   checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
   languageName: node
-  linkType: hard
+  linkType: hard