feat :: 프로필수정 기본뷰 #15

Sopo2023 · Aug 1, 2024 · 59bb632 · 59bb632
1 parent c5c7d94
commit 59bb632
Show file tree

Hide file tree

Showing 4 changed files with 193 additions and 13 deletions.
diff --git a/src/assets/imgs/profile/Lock.svg b/src/assets/imgs/profile/Lock.svg
diff --git a/src/assets/imgs/profile/delete.svg b/src/assets/imgs/profile/delete.svg
diff --git a/src/components/home/profile/profileEdit/index.tsx b/src/components/home/profile/profileEdit/index.tsx
@@ -1,19 +1,64 @@
 import React from "react";
 import * as S from "src/components/home/profile/profileEdit/style";
+import ReturnImg from "src/assets/imgs/profile/delete.svg";
+import AvatarImg from "src/assets/imgs/header/AvatarImg.svg";
+import Pencil from "src/assets/imgs/profile/write.svg";
+import Lock from "src/assets/imgs/profile/Lock.svg";
+
 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>
-    )
-        ;
+        <S.ProfileWrap>
+            <S.MainWrap>
+                <S.TitleWrap>
+                    <S.AvatarContainer>
+                        <S.Avatar src={AvatarImg} alt="프로필 이미지" />
+                        <S.PencilIconContainer>
+                            <S.PencilIcon src={Pencil} alt="편집 아이콘" />
+                        </S.PencilIconContainer>
+                    </S.AvatarContainer>
+                    <S.ProfileInfo>
+                        <S.UserName>hae_jun7388</S.UserName>
+                    </S.ProfileInfo>
+                    <S.ReturnIcon src={ReturnImg} alt="돌아가기 이미지" onClick={onCancel} />
+                </S.TitleWrap>
+                <S.DetailWrap>
+                    <S.SectionTitle>기본정보</S.SectionTitle>
+                    <S.Detail>
+                        <S.DetailLabel>학교</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>대구소프트웨어마이스터고등학교</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                    <S.Detail>
+                        <S.DetailLabel>이름</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>이해준</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                    <S.Detail>
+                        <S.DetailLabel>이메일</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>[email protected]</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                    <S.Detail>
+                        <S.DetailLabel>비밀번호</S.DetailLabel>
+                        <S.DetailContainer>
+                            <S.DetailValue>**********</S.DetailValue>
+                            <S.EditButton>수정</S.EditButton>
+                        </S.DetailContainer>
+                    </S.Detail>
+                </S.DetailWrap>
+            </S.MainWrap>
+        </S.ProfileWrap>
+    );
 };
 
-export default ProfileEdit;
+export default ProfileEdit;
diff --git a/src/components/home/profile/profileEdit/style.ts b/src/components/home/profile/profileEdit/style.ts
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const profileWrap = styled.main`
+export const ProfileWrap = styled.main`
     display: flex;
     flex-direction: column;
     margin-top: 4.44vh;
@@ -10,14 +10,140 @@ export const profileWrap = styled.main`
     justify-content: center;
 `;
 
-export const mainWrap = styled.main`
+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; 
+    flex-direction: column;
+    align-items: center;
     padding: 15px;
+`;
+
+export const TitleWrap = styled.div`
+    display: flex;
+    align-items: center;
+    width: 100%;
+    height: 10vh;
+    margin-top: 4vh;
+    padding-left: 5vw;
+    position: relative;
+`;
+
+export const AvatarContainer = styled.div`
+    position: relative;
+    margin-right: 1.25rem;
+`;
+
+export const Avatar = styled.img`
+    width: 5rem;
+    height: 5rem;
+    border-radius: 50%;
+`;
+
+export const PencilIconContainer = styled.div`
+    background-color: #178415;
+    width: 1.7rem;
+    height: 1.7rem;
+    border-radius: 50%;
+    position: absolute;
+    bottom: 0.18rem;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const PencilIcon = styled.img`
+    width: 1rem;
+    height: 1rem;
+    cursor: pointer;
+    z-index: 1;
+`;
+
+export const ProfileInfo = styled.div`
+    display: flex;
+    flex-direction: column;
+`;
+
+export const UserName = styled.h2`
+    font-size: 1.5em;
+    font-weight: bold;
+    margin: 0;
+`;
+
+export const ReturnIcon = styled.img`
+    position: fixed;
+    right: 0;
+    width: 1.5rem;
+    height: 1.5rem;
+    cursor: pointer;
+    margin-right: 10vw;
+`;
+
+export const DetailWrap = styled.div`
+    width: 63vw;
+    height: 50vh;
+    margin-top: 4vh;
+    background-color: #F7F7F7;
+    border-radius: 13px;
+    align-items: center;
+    justify-content: center;
+`;
+
+export const SectionTitle = styled.span`
+    font-size: 1em;
+    margin-top: 1.3rem;
+    margin-left: 1.3rem;
+    margin-bottom: 1rem;
+    display: block;
+    color: #5C5C5C;
+`;
+
+export const Detail = styled.div`
+    display: flex;
+    align-items: center;
+    padding: 0.5rem 1rem;
+    margin-left: 4vw;
+`;
+
+export const DetailLabel = styled.span`
+    font-size: 1em;
+    font-weight: bold;
+    color: #333;
+    width: 20%;
+`;
+
+export const DetailContainer = styled.div`
+    display: flex;
+    align-items: center;
+    width: 75%; 
+    justify-content: space-between;
+    border-bottom: 1px solid #ddd;
+    padding: 0.5rem 0; 
+    margin: 1rem 0; 
+    text-align: center; 
+`;
+
+export const DetailValue = styled.span`
+    font-size: 1em;
+    color: #666;
+    width: 70%;
+    display: flex;
+`;
+
+export const EditButton = styled.button`
+    background: none;
+    border: none;
+    color: #178415;
+    cursor: pointer;
+    font-size: 1em;
+    font-weight: bold;
+    width: 20%;
+    text-align: center; 
+    padding: 0.5rem 0; 
+    display: flex;
+    justify-content: center;
 `;