[FEAT] [9] 마이페이지 및 편집 디자인

src/App.tsx

@@ -4,6 +4,8 @@ import GlobalStyles from "./styles/global-styles";
 import { HomePage } from "./pages/home-page";
 import { LoginPage } from "./pages/login-page";
 import { RegisterPage } from "./pages/register-page";
+import { MyPage } from "./pages/my-page";
+import { MyPageEdit } from "./pages/my-page-edit";
 import { Toaster } from "sonner";
 import { BuddyPage } from "./pages/buddy-page";
 
@@ -23,7 +25,15 @@ const router = createBrowserRouter([
   {
     path: "/buddy",
     element: <BuddyPage />,
-  }
+  },
+  {
+    path: "/my-page",
+    element: <MyPage />,
+  },
+  {
+    path: "/my-page/edit",
+    element: <MyPageEdit />,
+  },
 ]);
 
 export const App = () => {

src/components/header.tsx

@@ -4,11 +4,14 @@ import { COLORS } from "../theme";
 
 import logo from "../assets/images/peerLogo.png";
 import userIcon from "../assets/images/user.png";
+import { useLocation } from "react-router-dom";
 
 export const Header = () => {
   const token = localStorage.getItem("accessToken"); // localStorage에서 토큰 가져오기
   const navigate = useNavigate();
+  const location = useLocation();
 
+  console.log("location:", location);
   const handleLoginClick = () => {
     if (token) {
       navigate("/my-page"); // 유저 아이콘 클릭 시 /my-page로 이동

src/components/mypage/editInform/edit-inform.tsx

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import { COLORS } from "../../../theme";
+
+interface EditInformProps {
+  disabledProps?: boolean;
+  title: string;
+  cont: string;
+}
+
+export const EditInform: React.FC<EditInformProps> = ({
+  disabledProps,
+  title,
+  cont,
+}) => {
+  return (
+    <InformBox disabledProps={disabledProps}>
+      <Title>{title}</Title>
+      <Content disabled={disabledProps} placeholder={cont} />
+    </InformBox>
+  );
+};
+
+const InformBox = styled.div<{ disabledProps?: boolean }>`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid ${COLORS.regular};
+  border-radius: 35px;
+  padding: 0 20px;
+  margin-bottom: 8px;
+  font-size: 15px;
+  height: 48px;
+  background-color: ${(props) =>
+    props.disabledProps ? `${COLORS.light}` : `${COLORS.white}`};
+
+  color: ${(props) =>
+    props.disabledProps ? `${COLORS.font4}` : `${COLORS.font1}`};
+`;
+
+const Title = styled.span`
+  font-weight: 600;
+`;
+
+const Content = styled.input<{ disabled?: boolean }>`
+  border: none;
+  text-align: right;
+  width: 30%;
+`;

src/components/mypage/guide.tsx

@@ -0,0 +1,34 @@
+import styled from "styled-components";
+import { COLORS } from "../../theme";
+interface GuideInfo {
+  title: string;
+  addCon: string;
+}
+export const Guide: React.FC<GuideInfo> = ({ title, addCon }) => {
+  return (
+    <Box>
+      <Title>{title}</Title>
+      <AddCon>{addCon}</AddCon>
+    </Box>
+  );
+};
+
+const Box = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border: 1px solid ${COLORS.regular};
+  width: 30%;
+  height: 72px;
+  border-radius: 16px;
+  padding: 14px 16px;
+`;
+const Title = styled.span`
+  color: ${COLORS.font1};
+  font-size: 16px;
+  font-weight: 600;
+`;
+const AddCon = styled.span`
+  color: ${COLORS.font1};
+  font-size: 14px;
+`;

src/components/mypage/matching-info.tsx

@@ -0,0 +1,54 @@
+import styled from "styled-components";
+import { COLORS } from "../../theme";
+interface MatchingInfoProps {
+  title: string;
+  explain: string;
+  img?: string;
+}
+
+export const MatchingInfo: React.FC<MatchingInfoProps> = ({
+  title,
+  explain,
+  img,
+}) => {
+  return (
+    <Box>
+      <ContBox>
+        <Title>{title}</Title>
+        <Explain>{explain}</Explain>
+      </ContBox>
+      {img && <Img src={img} alt={title} />}
+    </Box>
+  );
+};
+const Box = styled.div`
+  width: 100%;
+  height: 76px;
+  border-radius: 16px;
+  border: 1px solid ${COLORS.regular};
+  padding: 14px 16px;
+  margin-bottom: 8px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+`;
+const ContBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+`;
+const Title = styled.h2`
+  color: ${COLORS.main};
+  font-size: 18px;
+`;
+const Explain = styled.p`
+  margin: 0;
+  padding: 0;
+  color: ${COLORS.font1};
+  font-size: 14px;
+`;
+
+const Img = styled.img`
+  width: 64px;
+  height: 48px;
+`;

src/pages/my-page-edit.tsx

@@ -0,0 +1,109 @@
+import styled from "styled-components";
+
+import { Header } from "../components/header";
+import { EditInform } from "../components/mypage/editInform/edit-inform";
+import { COLORS } from "../theme";
+
+export const MyPageEdit = () => {
+  return (
+    <Container>
+      <Header />
+      <InnerContainer>
+        <Section>
+          <Title>
+            정보 수정<Notice>*각 정보 클릭 시, 수정 가능</Notice>
+          </Title>
+          <EditInform title="닉네임" cont="세종냥이" />
+          <EditInform title="아이디" cont="jesse823" disabledProps={true} />
+          <EditInform title="카카오톡 아이디" cont="sejongsejong" />
+          <EditInform title="전화번호" cont="01012345678" />
+        </Section>
+        <Section>
+          <Title>정보 수정</Title>
+          <Label>현재 비밀번호 입력</Label>
+          <PWInput
+            placeholder="비밀번호 입력"
+            style={{ marginBottom: "16px" }}
+          />
+          <Label>
+            새 비밀번호 입력<span>(10-16자의 영문,숫자)</span>
+          </Label>
+          <PWInput placeholder="비밀번호 입력" />
+          <PWInput placeholder="비밀번호 입력" />
+        </Section>
+        <Section>
+          <Title>
+            내 학과 <Notice>*학과 정보는 새로운 학기에 수정 가능합니다.</Notice>
+          </Title>
+          <Cont>소프트웨어학과 • 3학년</Cont>
+        </Section>
+        <EditBtn>수정하기</EditBtn>
+      </InnerContainer>
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  background-color: ${COLORS.sub2};
+`;
+const InnerContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+const Section = styled.section`
+  width: 100%;
+  padding: 20px 16px;
+  background-color: white;
+`;
+const Title = styled.h2`
+  font-size: 18px;
+  font-weight: 600;
+  color: ${COLORS.font1};
+  margin-bottom: 12px;
+`;
+const Notice = styled.span`
+  color: ${COLORS.sub1};
+  font-size: 14px;
+  margin-left: 4px;
+  font-weight: 500;
+`;
+const Label = styled.div`
+  color: ${COLORS.font1};
+  font-size: 15px;
+  font-weight: 600;
+  margin-bottom: 4px;
+  span {
+    color: ${COLORS.font2};
+  }
+`;
+const PWInput = styled.input`
+  width: 100%;
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border: 1px solid ${COLORS.regular};
+  border-radius: 35px;
+  padding: 0 20px;
+  font-size: 15px;
+  color: ${COLORS.font1};
+  margin-bottom: 8px;
+`;
+const Cont = styled.div`
+  color: ${COLORS.font2};
+  font-size: 16px;
+`;
+const EditBtn = styled.button`
+  width: 90%;
+  height: 52px;
+  background-color: ${COLORS.main};
+  color: ${COLORS.white};
+  font-size: 16px;
+  border-radius: 28px;
+  margin: 60px 16px 20px 16px;
+`;