🔀마이페이지 제작

src/App.tsx

@@ -2,6 +2,9 @@ import React from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Home, Write, InputPage, Temp, NoPage } from 'pages';
 import Post from 'pages/post';
+import My from 'pages/my';
+import Edit from 'pages/my/edit';
+import Cancle from 'pages/my/cancle';
 
 function App() {
   return (
@@ -12,6 +15,9 @@ function App() {
       <Route path="/input" element={<InputPage />} />
       <Route path="/temp" element={<Temp />} />
       <Route path="/post/:id" element={<Post />} />
+      <Route path="/my" element={<My />} />
+      <Route path="/my/edit/:id" element={<Edit />} />
+      <Route path="/my/cancle/:id" element={<Cancle />} />
     </Routes>
   );
 }

src/components/Modal/ImageChange/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import * as S from './style';
+import XIcon from 'svg/XIcon';
+import ChangeIcon from 'svg/ChangeIcon';
+
+interface Props {
+  onClose: () => void;
+}
+
+const ImageChange = ({ onClose }: Props) => {
+  return (
+    <S.Wrapper>
+      <S.ProfileContainer>
+        <S.Header>
+          <S.Title>프로필 변경</S.Title>
+          <div onClick={onClose}>
+            <XIcon />
+          </div>
+        </S.Header>
+        <S.ImageBack>
+          <label>
+            <S.Hidden type="file" />
+            <S.ChangeButton>
+              <ChangeIcon />
+            </S.ChangeButton>
+          </label>
+        </S.ImageBack>
+      </S.ProfileContainer>
+      <S.CheckButton>확인</S.CheckButton>
+    </S.Wrapper>
+  );
+};
+
+export default ImageChange;

src/components/Modal/ImageChange/style.ts

@@ -0,0 +1,73 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  width: 400px;
+  padding: 24px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 28px;
+  background-color: ${({ theme }) => theme.color.white};
+  border-radius: 8px;
+`;
+
+export const Header = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+  background-color: ${({ theme }) => theme.color.white};
+`;
+
+export const CloseButton = styled.div``;
+
+export const Title = styled.div`
+  ${({ theme }) => theme.fontStyle.m1.semi};
+  color: ${({ theme }) => theme.color.black};
+`;
+
+export const Hidden = styled.input`
+  display: none;
+`;
+
+export const ChangeButton = styled.div`
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 40px;
+  height: 40px;
+  border-radius: 0px 8px;
+  background: ${({ theme }) => theme.color.gray[400]};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const ImageBack = styled.div`
+  position: relative;
+  width: 352px;
+  height: 345px;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.color.gray[300]};
+`;
+
+export const CheckButton = styled.div`
+  padding: 10px 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  gap: 10px;
+  border-radius: 8px;
+  background-color: ${({ theme }) => theme.color.main};
+  color: ${({ theme }) => theme.color.white};
+  ${({ theme }) => theme.fontStyle.m3.semi};
+`;
+
+export const ProfileContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 16px;
+`;

src/components/My/CanclePage/PostHeader/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import * as S from './style';
+import { LeftArrow } from 'svg';
+import { useNavigate } from 'react-router-dom';
+
+const PostHeader = () => {
+  const navigate = useNavigate();
+
+  return (
+    <S.Container>
+      <S.HomeButton onClick={() => navigate(`/my`)}>
+        <LeftArrow />
+      </S.HomeButton>
+      <S.Text>글보기</S.Text>
+      <S.Empty />
+    </S.Container>
+  );
+};
+
+export default PostHeader;

src/components/My/CanclePage/PostHeader/style.ts

@@ -0,0 +1,24 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+  max-width: 37.5rem;
+  width: 100%;
+  padding: 1rem 0.75rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+export const HomeButton = styled.div`
+  cursor: pointer;
+`;
+
+export const Text = styled.p`
+  ${({ theme }) => theme.fontStyle.m2}
+  color: ${({ theme }) => theme.color.gray[500]};
+`;
+
+export const Empty = styled.div`
+  width: 24px;
+  height: 25px;
+`;

src/components/My/CanclePage/PostProfile/index.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import * as S from './style';
+import KebabIcon from 'svg/KebabIcon';
+
+const PostProfile = () => {
+  const [modal, setModal] = useState<boolean>(false);
+  return (
+    <S.Wrapper>
+      <S.Profile>
+        <S.ProfileImg src={''} alt="" />
+        <S.ProfileText>
+          <S.Name>한재형</S.Name>
+          <S.Data>
+            <S.DataText>광주소프트웨어마이스터고등학교</S.DataText>
+            <S.Dot />
+            <S.DataText>1학년</S.DataText>
+            <S.Dot />
+            <S.DataText>여자</S.DataText>
+          </S.Data>
+        </S.ProfileText>
+      </S.Profile>
+      <S.ModalContainer>
+        <S.DetailButton onClick={() => setModal(!modal)}>
+          <KebabIcon />
+        </S.DetailButton>
+        {modal && (
+          <S.DetailModal>
+            <S.WarningText>글 삭제</S.WarningText>
+          </S.DetailModal>
+        )}
+      </S.ModalContainer>
+    </S.Wrapper>
+  );
+};
+
+export default PostProfile;

src/components/My/CanclePage/PostProfile/style.ts

@@ -0,0 +1,75 @@
+import styled from '@emotion/styled';
+
+export const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+`;
+
+export const Profile = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+`;
+
+export const ProfileImg = styled.img`
+  width: 3rem;
+  height: 3rem;
+  border-radius: 100%;
+`;
+
+export const ProfileText = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+`;
+
+export const Name = styled.span`
+  ${({ theme }) => theme.fontStyle.label};
+  color: ${({ theme }) => theme.color.gray[600]};
+`;
+
+export const Data = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+`;
+
+export const DataText = styled.span`
+  ${({ theme }) => theme.fontStyle.label};
+  color: ${({ theme }) => theme.color.gray[500]};
+`;
+
+export const Dot = styled.div`
+  width: 0.25rem;
+  height: 0.25rem;
+  border-radius: 0.125rem;
+  background-color: #b4b5b7;
+`;
+
+export const ModalContainer = styled.div`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
+export const DetailButton = styled.div``;
+
+export const DetailModal = styled.div`
+  position: absolute;
+  left: -78px;
+  top: 40px;
+  display: inline-flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 32px;
+  border-radius: 8px;
+  background: ${({ theme }) => theme.color.white};
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.08);
+`;
+
+export const WarningText = styled.div`
+  ${({ theme }) => theme.fontStyle.m3.reg}
+  color: ${({ theme }) => theme.color.system};
+`;

src/components/My/CanclePage/index.tsx

@@ -0,0 +1,55 @@
+import React, { useState } from 'react';
+import * as S from './style';
+import Profile from './PostProfile';
+import MateList from 'components/MateList';
+import { ReportIcon } from 'svg';
+import { DeclarationModal } from 'components/Modal';
+import TagList from '../PostList/PostCard/TagList';
+import PostHeader from './PostHeader';
+
+const CanclePage = () => {
+  const [modal, setModal] = useState<boolean>(false);
+  return (
+    <>
+      <PostHeader />
+      <S.Container>
+        <S.PostContainer>
+          <S.ApplyContainer>
+            <Profile />
+            <S.PostText>
+              <S.Title>같이 산책 하실 분 구해요</S.Title>
+              <S.Content>
+                토요일에 호수공원 산책할 사람토요일에 호수공원 산책할
+                사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할
+                사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할
+                사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할
+                사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할
+                사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 사람
+              </S.Content>
+            </S.PostText>
+            <S.SNSContainer>
+              <S.SNSText>카톡 : wjdtjffl55</S.SNSText>
+              <S.SNSText>디스코드 : hye_2417</S.SNSText>
+              <S.SNSText>인스타그램 : hye_2417</S.SNSText>
+            </S.SNSContainer>
+            <S.Deadline>마감일 : 2024년 06월 17일</S.Deadline>
+            <S.PostData>
+              <S.Remain>2자리 남음</S.Remain>
+              <MateList gender={'MALE'} grade={['ANY']} />
+              <S.TagReportContainer>
+                <TagList tag={['EXERCISE', 'STUDY']} />
+                <S.ReportButton onClick={() => setModal(true)}>
+                  <ReportIcon />
+                </S.ReportButton>
+              </S.TagReportContainer>
+            </S.PostData>
+          </S.ApplyContainer>
+        </S.PostContainer>
+        <S.CancleButton>신청 취소</S.CancleButton>
+      </S.Container>
+      {modal && <DeclarationModal onClose={() => setModal(false)} postId={1} />}
+    </>
+  );
+};
+
+export default CanclePage;