Merge pull request #251 from 2023WinterBootCamp-Team-L/design/#248-애니메이션

design:비밀번호*표시
2023WinterBootCamp-Team-L · Jan 31, 2024 · 50475e8 · 50475e8
2 parents 479f44c + ec15afa
commit 50475e8
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 6 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -22,6 +22,7 @@
     "d3": "^7.8.5",
     "d3-cloud": "^1.2.7",
     "esbuild": "0.19.11",
+    "framer-motion": "^11.0.3",
     "gsap": "^3.12.5",
     "msw": "^2.1.1",
     "react": "^18.2.0",

diff --git a/frontend/src/components/SignupAnswer.tsx b/frontend/src/components/SignupAnswer.tsx
@@ -1,13 +1,18 @@
 interface SignupAnswerProps {
+  type: string;
   value: string;
   onChange: React.ChangeEventHandler<HTMLInputElement>;
 }
 
-const SignupAnswer: React.FC<SignupAnswerProps> = ({ value, onChange }) => {
+const SignupAnswer: React.FC<SignupAnswerProps> = ({
+  type,
+  value,
+  onChange,
+}) => {
   return (
     <div className="relative">
       <input
-        type="text"
+        type={type}
         value={value}
         onChange={onChange}
         disabled={false}

diff --git a/frontend/src/pages/Gosignup.tsx b/frontend/src/pages/Gosignup.tsx
@@ -103,24 +103,34 @@ function Gosignup() {
         <div className="flex flex-col items-start mb-4">
           <p className="font-pre text-[14px] font-bold">Email입력</p>
           <SignupAnswer
+            type="text"
             value={emailanswerInputs}
             onChange={onInputChangeemail}
           />
         </div>
 
         <div className="flex flex-col items-start mb-4">
           <p className="font-pre text-[14px] font-bold">이름(또는 닉네임)</p>
-          <SignupAnswer value={nameanswerInputs} onChange={onInputChangename} />
+          <SignupAnswer
+            type="text"
+            value={nameanswerInputs}
+            onChange={onInputChangename}
+          />
         </div>
 
         <div className="flex flex-col items-start mb-4">
           <p className="font-pre text-[14px] font-bold">비밀번호 입력</p>
-          <SignupAnswer value={pwanswerInputs} onChange={onInputChangepw} />
+          <SignupAnswer
+            type="password"
+            value={pwanswerInputs}
+            onChange={onInputChangepw}
+          />
         </div>
 
         <div className="flex flex-col items-start mb-8">
           <p className="font-pre text-[14px] font-bold">비밀번호 확인</p>
           <SignupAnswer
+            type="password"
             value={pwcheckanswerInputs}
             onChange={onInputChangepwcheck}
           />

diff --git a/frontend/src/pages/Mainpage.tsx b/frontend/src/pages/Mainpage.tsx
@@ -109,7 +109,7 @@ function Mainpage() {
           </p>
 
           <button
-            className="bg-c-indigo text-white w-full p-2 rounded-lg mt-4 font-pre text-[16px]"
+            className="bg-c-indigo text-white w-full p-2 rounded-lg mt-4 font-pre text-[16px]  transition ease-in-out delay-150 hover:-translate-y-1  hover:bg-indigo-900 duration-300"
             onClick={handleMakeQuesttion}
           >
             새 질문 폼 생성하러 가기

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -253,6 +253,18 @@
   dependencies:
     statuses "^2.0.1"
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/[email protected]":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@esbuild/[email protected]":
   version "0.19.11"
   resolved "https://registry.yarnpkg.com/@esbuild/aix-ppc64/-/aix-ppc64-0.19.11.tgz#2acd20be6d4f0458bc8c784103495ff24f13b1d3"
@@ -2403,6 +2415,15 @@ fraction.js@^4.3.6:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@^11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-11.0.3.tgz#b2a87e7ae166a9e27da33da9cfb50a0db5f94fa7"
+  integrity sha512-6x2poQpIWBdbZwLd73w6cKZ1I9IEPIU94C6/Swp1Zt3LJ+sB5bPe1E2wC6EH5hSISXNkMJ4afH7AdwS7MrtkWw==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -4095,7 +4116,7 @@ tsconfig-paths@^3.15.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^2.1.0:
+tslib@^2.1.0, tslib@^2.4.0:
   version "2.6.2"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==