[FEAT mypage 컴포넌트 수정

Readme-Monster · Apr 27, 2024 · f7d1f2e · f7d1f2e
1 parent db5ece1
commit f7d1f2e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 deletions.
diff --git a/src/components/MyPage/Input/index.tsx b/src/components/MyPage/Input/index.tsx
@@ -1,13 +1,13 @@
 import React from "react";
 import { InputProps } from "./types";
 
-const Input = ({ value, onChange }: InputProps) => {
+const Input = ({ value, id, placeholder, onChange }: InputProps) => {
   return (
     <input
-      className="w-1/5 h-10 bg-[#CCEEFF] text-center"
+      className="w-full h-10 bg-[#CCEEFF] text-center"
       value={value}
-      placeholder="아이디"
-      id="id"
+      placeholder={placeholder}
+      id={id}
       onChange={onChange}
     />
   );

diff --git a/src/components/MyPage/Input/types.ts b/src/components/MyPage/Input/types.ts
@@ -2,5 +2,7 @@ import { ChangeEvent } from "react";
 
 export interface InputProps {
   value: string | number;
+  id: string;
+  placeholder: string;
   onChange: (e: ChangeEvent<HTMLInputElement>) => void;
 }
diff --git a/src/components/MyPage/UserInfo/index.tsx b/src/components/MyPage/UserInfo/index.tsx
@@ -21,15 +21,20 @@ const UserInfo = () => {
   };
 
   return (
-    <>
+    <div className="w-96 flex-Center flex-col gap-2">
       <img className="w-28 h-28 bg-slate-400 rounded-full" src="" />
-      <Input value={userInfo.name} onChange={handleUpdateUserInfo} />
-      <Input value={userInfo.id} onChange={handleUpdateUserInfo} />
-      <Input value={userInfo.email} onChange={handleUpdateUserInfo} />
-      <Input value={userInfo.password} onChange={handleUpdateUserInfo} />
-      <Input value={userInfo.passwordCheck} onChange={handleUpdateUserInfo} />
-      <button className="w-1/5 h-10 bg-[#FF4A50] text-center text-cyan-50">탈퇴하기</button>
-    </>
+      <Input value={userInfo.name} placeholder="이름" id="name" onChange={handleUpdateUserInfo} />
+      <Input value={userInfo.id} placeholder="아이디" id="id" onChange={handleUpdateUserInfo} />
+      <Input value={userInfo.email} placeholder="이메일" id="email" onChange={handleUpdateUserInfo} />
+      <Input value={userInfo.password} placeholder="패스워드" id="password" onChange={handleUpdateUserInfo} />
+      <Input
+        value={userInfo.passwordCheck}
+        placeholder="패스워드 확인"
+        id="passwordCheck"
+        onChange={handleUpdateUserInfo}
+      />
+      <button className="w-full h-10 bg-[#FF4A50] text-center text-cyan-50">탈퇴하기</button>
+    </div>
   );
 };