feat :: 조건부핸들링 #15

src/components/home/profile/index.tsx

@@ -0,0 +1,23 @@
+import React, { useState } from "react";
+import Profile from "src/components/home/profile/profile";
+import ProfileEdit from "src/components/home/profile/profileEdit";
+
+const MainProfile: React.FC = () => {
+    const [isEditing, setIsEditing] = useState(false);
+
+    const handleEditToggle = () => {
+        setIsEditing(!isEditing);
+    };
+
+    return (
+        <div>
+            {isEditing ? (
+                <ProfileEdit onCancel={handleEditToggle} />
+            ) : (
+                <Profile onEdit={handleEditToggle} />
+            )}
+        </div>
+    );
+};
+
+export default MainProfile;

src/components/home/profile/profile/index.tsx

@@ -1,10 +1,14 @@
-import React, {useState} from "react";
+import React, { useState } from "react";
 import * as S from "./style";
 import AvatarImg from "src/assets/imgs/header/AvatarImg.svg";
 import Pencil from "src/assets/imgs/profile/write.svg";
 import Empty from "src/assets/imgs/profile/Empty.svg";
 
-const Profile = () => {
+interface ProfileProps {
+    onEdit: () => void;
+}
+
+const Profile: React.FC<ProfileProps> = ({ onEdit }) => {
     const [selected, setSelected] = useState(0);
 
     const handleSelect = (index: number) => {
@@ -39,7 +43,7 @@ const Profile = () => {
                     <S.ProfileInfo>
                         <S.UserName>이해준</S.UserName>
                         <S.ButtonContainer>
-                            <S.EditButton>프로필 수정</S.EditButton>
+                            <S.EditButton onClick={onEdit}>프로필 수정</S.EditButton>
                             <S.SettingsButton>프로필 설정</S.SettingsButton>
                         </S.ButtonContainer>
                     </S.ProfileInfo>

src/components/home/profile/profileEdit/index.tsx

@@ -0,0 +1,19 @@
+import React from "react";
+import * as S from "src/components/home/profile/profileEdit/style";
+interface ProfileEditProps {
+    onCancel: () => void;
+}
+
+const ProfileEdit: React.FC<ProfileEditProps> = ({ onCancel }) => {
+    return (
+        <S.profileWrap>
+            <S.mainWrap>
+                <h1>프로필 수정</h1>
+                <button onClick={onCancel}>취소</button>
+            </S.mainWrap>
+        </S.profileWrap>
+    )
+        ;
+};
+
+export default ProfileEdit;

src/components/home/profile/profileEdit/style.ts

@@ -0,0 +1,23 @@
+import styled from 'styled-components';
+
+export const profileWrap = styled.main`
+    display: flex;
+    flex-direction: column;
+    margin-top: 4.44vh;
+    width: 100%;
+    height: calc(100% - 4.44vh);
+    align-items: center;
+    justify-content: center;
+`;
+
+export const mainWrap = styled.main`
+    width: 72vw;
+    height: 80vh;
+    border-radius: 13px;
+    background: #fff;
+    box-shadow: 0px 3px 9px 0px rgba(0, 0, 0, 0.12);
+    display: flex;
+    flex-direction: column; 
+    align-items: center; 
+    padding: 15px;
+`;

src/components/home/profile/style.ts

@@ -0,0 +1 @@
+import styled from 'styled-components';

src/pages/profile/page.tsx

@@ -1,7 +1,8 @@
 import React from "react";
-import Profile from "src/components/home/profile/profile";
+import MainProfile from "src/components/home/profile/index";
 
-const ProfilePage=()=>{
-return <Profile/>
-}
-export default ProfilePage;
+const ProfilePage: React.FC = () => {
+    return <MainProfile />;
+};
+
+export default ProfilePage;