From 34d1991bf2e96d5a12dfa31131fcc6379a7c514a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 28 Oct 2024 18:42:30 +0900 Subject: [PATCH 1/9] Add Portal --- src/components/Portal/index.tsx | 44 +++++++++++++++++++++++++++++++++ src/components/Portal/style.ts | 14 +++++++++++ 2 files changed, 58 insertions(+) create mode 100644 src/components/Portal/index.tsx create mode 100644 src/components/Portal/style.ts diff --git a/src/components/Portal/index.tsx b/src/components/Portal/index.tsx new file mode 100644 index 0000000..24bc186 --- /dev/null +++ b/src/components/Portal/index.tsx @@ -0,0 +1,44 @@ +import ReactDOM from 'react-dom'; +import React, { + MouseEvent, + useState, + cloneElement, + useEffect, + ReactElement, +} from 'react'; +import * as S from './style'; + +interface Props { + children: ReactElement; + onClose?: () => void; +} + +const Portal = ({ children, onClose }: Props) => { + const [mounted, setMounted] = useState(false); + + const portal = document.getElementById('modal'); + if (!portal) throw new Error('not found modal'); + + const onClick = (e: MouseEvent) => { + e.stopPropagation(); + }; + + useEffect(() => { + setMounted(true); + }, []); + + if (typeof window === 'undefined') return <>; + + return mounted ? ( + ReactDOM.createPortal( + + {cloneElement(children, { onClick })} + , + portal, + ) + ) : ( + <> + ); +}; + +export default Portal; diff --git a/src/components/Portal/style.ts b/src/components/Portal/style.ts new file mode 100644 index 0000000..df9647c --- /dev/null +++ b/src/components/Portal/style.ts @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + position: fixed; + z-index: 9999; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(51, 51, 51, 0.4); + display: flex; + justify-content: center; + align-items: center; +`; From 79c438fe22aaf83af27dde2471f6435a05ae2253 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 28 Oct 2024 18:42:58 +0900 Subject: [PATCH 2/9] Update font --- src/style/emotion.d.ts | 96 +++++++++++++++++++++++++++++++++++------- src/style/theme.ts | 40 +++++++++++------- 2 files changed, 104 insertions(+), 32 deletions(-) diff --git a/src/style/emotion.d.ts b/src/style/emotion.d.ts index 9c2f72c..b9d1db4 100644 --- a/src/style/emotion.d.ts +++ b/src/style/emotion.d.ts @@ -21,36 +21,100 @@ declare module '@emotion/react' { }; fontStyle: { h1: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; h2: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; h3: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; h4: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; m1: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; m2: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; m3: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; label: { - fontSize: string; - lineHeight: string; + semi:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + }, + reg:{ + fontSize: string; + fontWeight: string, + lineHeight: string; + } }; }; } diff --git a/src/style/theme.ts b/src/style/theme.ts index 67e18e5..268f533 100644 --- a/src/style/theme.ts +++ b/src/style/theme.ts @@ -18,36 +18,44 @@ const theme = { }, fontStyle: { h1: { - fontSize: '36px', - lineHeight: '120%', + semi: { + fontSize: '36px', + fontWeight: '600', + lineHeight: '120%', + }, + reg: { + fontSize: '36px', + fontWeight: '400', + lineHeight: '120%', + }, }, h2: { - fontSize: '32px', - lineHeight: '120%', + semi: { fontSize: '32px', fontWeight: '600', lineHeight: '120%' }, + reg: { fontSize: '32px', fontWeight: '400', lineHeight: '120%' }, }, h3: { - fontSize: '28px', - lineHeight: '130%', + semi: { fontSize: '28px', fontWeight: '600', lineHeight: '130%' }, + reg: { fontSize: '28px', fontWeight: '400', lineHeight: '130%' }, }, h4: { - fontSize: '24px', - lineHeight: '130%', + semi: { fontSize: '24px', fontWeight: '600', lineHeight: '130%' }, + reg: { fontSize: '24px', fontWeight: '400', lineHeight: '130%' }, }, m1: { - fontSize: '20px', - lineHeight: '150%', + semi: { fontSize: '20px', fontWeight: '600', lineHeight: '150%' }, + reg: { fontSize: '20px', fontWeight: '400', lineHeight: '150%' }, }, m2: { - fontSize: '18px', - lineHeight: '150%', + semi: { fontSize: '18px', fontWeight: '600', lineHeight: '150%' }, + reg: { fontSize: '18px', fontWeight: '400', lineHeight: '150%' }, }, m3: { - fontSize: '16px', - lineHeight: '165%', + semi: { fontSize: '16px', fontWeight: '600', lineHeight: '165%' }, + reg: { fontSize: '16px', fontWeight: '400', lineHeight: '165%' }, }, label: { - fontSize: '14px', - lineHeight: '150%', + semi: { fontSize: '14px', fontWeight: '600', lineHeight: '150%' }, + reg: { fontSize: '14px', fontWeight: '400', lineHeight: '150%' }, }, }, }; From 59b65ef5cc44f6eded6f1535155211378e4184d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 28 Oct 2024 18:43:29 +0900 Subject: [PATCH 3/9] Add PostPage --- public/index.html | 1 + src/App.tsx | 2 + src/components/MateList/MateItem/index.tsx | 5 +- src/components/MateList/index.tsx | 5 +- src/components/Modal/Declaration/index.tsx | 70 ++++++++------- .../Post/DetailPost/PostHeader/index.tsx | 20 +++++ .../Post/DetailPost/PostHeader/style.ts | 24 ++++++ .../Post/DetailPost/PostProfile/index.tsx | 22 +++++ .../Post/DetailPost/PostProfile/style.ts | 42 +++++++++ src/components/Post/DetailPost/index.tsx | 53 ++++++++++++ src/components/Post/DetailPost/style.ts | 86 +++++++++++++++++++ src/components/Post/PostCard/style.ts | 11 ++- src/pages/post/index.tsx | 19 ++++ src/pages/post/style.ts | 7 ++ src/svg/LeftArrow.tsx | 22 +++++ src/svg/ReportIcon.tsx | 38 ++++++++ src/svg/index.ts | 2 + 17 files changed, 389 insertions(+), 40 deletions(-) create mode 100644 src/components/Post/DetailPost/PostHeader/index.tsx create mode 100644 src/components/Post/DetailPost/PostHeader/style.ts create mode 100644 src/components/Post/DetailPost/PostProfile/index.tsx create mode 100644 src/components/Post/DetailPost/PostProfile/style.ts create mode 100644 src/components/Post/DetailPost/index.tsx create mode 100644 src/components/Post/DetailPost/style.ts create mode 100644 src/pages/post/index.tsx create mode 100644 src/pages/post/style.ts create mode 100644 src/svg/LeftArrow.tsx create mode 100644 src/svg/ReportIcon.tsx diff --git a/public/index.html b/public/index.html index a149979..f57f488 100644 --- a/public/index.html +++ b/public/index.html @@ -12,6 +12,7 @@ 산책 할래? +
diff --git a/src/App.tsx b/src/App.tsx index 51aa9a2..e7907ab 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Route, Routes } from 'react-router-dom'; import { Home, Write, InputPage, Temp, NoPage } from 'pages'; +import Post from 'pages/post'; function App() { return ( @@ -10,6 +11,7 @@ function App() { } /> } /> } /> + } /> ); } diff --git a/src/components/MateList/MateItem/index.tsx b/src/components/MateList/MateItem/index.tsx index c1f183b..ff8cf65 100644 --- a/src/components/MateList/MateItem/index.tsx +++ b/src/components/MateList/MateItem/index.tsx @@ -3,10 +3,11 @@ import * as S from './style'; import { genderType, gradeType } from 'types/Card'; interface Props { + label: string; data: genderType | gradeType; } -const MateItem = ({ data }: Props) => { +const MateItem = ({ label, data }: Props) => { const text = { ONE: '1학년', TWO: '2학년', @@ -16,7 +17,7 @@ const MateItem = ({ data }: Props) => { SIX: '6학년', MALE: '남자', FEMALE: '여자', - ANY: '성별무관', + ANY: label === '성별' ? '성별무관' : '학년무관', }; return ( diff --git a/src/components/MateList/index.tsx b/src/components/MateList/index.tsx index 638fb2a..a5f1fcf 100644 --- a/src/components/MateList/index.tsx +++ b/src/components/MateList/index.tsx @@ -4,12 +4,13 @@ import { Card } from 'types/Card'; import MateItem from './MateItem'; const MateList = ({ grade, gender }: Pick) => { - const list = [...grade, gender]; + const list = [...grade]; return ( {list.map((item, index) => ( - + ))} + ); }; diff --git a/src/components/Modal/Declaration/index.tsx b/src/components/Modal/Declaration/index.tsx index b2c2eef..cc47d95 100644 --- a/src/components/Modal/Declaration/index.tsx +++ b/src/components/Modal/Declaration/index.tsx @@ -3,6 +3,7 @@ import Container from '../container'; import * as S from './style'; import { XIcon, SelectButton } from 'svg'; import { ReportType } from 'types'; +import Portal from 'components/Portal'; // import { useNavigate } from 'react-router-dom'; interface Props { @@ -83,38 +84,43 @@ const DeclarationModal: React.FC = ({ }; return ( - - - - 신고 사유 - - - - - - - {report.map((el, idx) => ( - - - {el.name} - - ))} - - {isSelect[3] && ( - setReason(e.target.value)} - /> - )} - - 신고 - - + + + + + 신고 사유 + + + + + + + {report.map((el, idx) => ( + + + {el.name} + + ))} + + {isSelect[3] && ( + setReason(e.target.value)} + /> + )} + + 신고 + + + ); }; diff --git a/src/components/Post/DetailPost/PostHeader/index.tsx b/src/components/Post/DetailPost/PostHeader/index.tsx new file mode 100644 index 0000000..5381d3d --- /dev/null +++ b/src/components/Post/DetailPost/PostHeader/index.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import * as S from './style'; +import LeftArrow from 'svg/LeftArrow'; +import { useNavigate } from 'react-router-dom'; + +const PostHeader = () => { + const navigate = useNavigate(); + + return ( + + navigate(`/`)}> + + + 글쓰기 + + + ); +}; + +export default PostHeader; diff --git a/src/components/Post/DetailPost/PostHeader/style.ts b/src/components/Post/DetailPost/PostHeader/style.ts new file mode 100644 index 0000000..8f1cf5a --- /dev/null +++ b/src/components/Post/DetailPost/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; +`; diff --git a/src/components/Post/DetailPost/PostProfile/index.tsx b/src/components/Post/DetailPost/PostProfile/index.tsx new file mode 100644 index 0000000..0dfd087 --- /dev/null +++ b/src/components/Post/DetailPost/PostProfile/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import * as S from './style'; + +const PostProfile = () => { + return ( + + + + 한재형 + + 광주소프트웨어마이스터고등학교 + + 1학년 + + 여자 + + + + ); +}; + +export default PostProfile; diff --git a/src/components/Post/DetailPost/PostProfile/style.ts b/src/components/Post/DetailPost/PostProfile/style.ts new file mode 100644 index 0000000..94d24de --- /dev/null +++ b/src/components/Post/DetailPost/PostProfile/style.ts @@ -0,0 +1,42 @@ +import styled from '@emotion/styled'; + +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; +`; diff --git a/src/components/Post/DetailPost/index.tsx b/src/components/Post/DetailPost/index.tsx new file mode 100644 index 0000000..7754610 --- /dev/null +++ b/src/components/Post/DetailPost/index.tsx @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import * as S from './style'; +import Profile from './PostProfile'; +import MateList from 'components/MateList'; +import TagList from '../PostCard/TagList'; +import ReportIcon from 'svg/ReportIcon'; +import { DeclarationModal } from 'components/Modal'; + +const DetailPost = () => { + const [modal, setModal] = useState(false); + return ( + <> + + + + + + 같이 산책 하실 분 구해요 + + 토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 사람 + + + + 카톡 : wjdtjffl55 + 디스코드 : hye_2417 + 인스타그램 : hye_2417 + + 마감일 : 2024년 06월 17일 + + 2자리 남음 + + + + setModal(true)}> + + + + + + + 신청 + + {modal && setModal(false)} postId={1} />} + + ); +}; + +export default DetailPost; diff --git a/src/components/Post/DetailPost/style.ts b/src/components/Post/DetailPost/style.ts new file mode 100644 index 0000000..1d98b14 --- /dev/null +++ b/src/components/Post/DetailPost/style.ts @@ -0,0 +1,86 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + padding: 1.75rem 1.5rem; + max-width: 37.5rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 2.5rem; + border: 1px solid ${({ theme }) => theme.color.gray[100]}; + border-radius: 0.5rem; +`; + +export const PostContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1.75rem; +`; + +export const ApplyContainer = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +export const PostText = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const Title = styled.div` + ${({ theme }) => theme.fontStyle.h4.semi} + color: ${({ theme }) => theme.color.black}; +`; + +export const Content = styled.div` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.black}; +`; + +export const SNSContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; +`; + +export const SNSText = styled(Content)``; + +export const Deadline = styled(Content)``; + +export const PostData = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +`; + +export const Remain = styled.span` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[500]}; +`; + +export const TagReportContainer = styled.div` + display: flex; + justify-content: space-between; +`; + +export const ReportButton = styled.div` + cursor: pointer; +`; + +export const ApplyButton = styled.button` + ${({ theme }) => theme.fontStyle.m3.reg}; + color: ${({ theme }) => theme.color.white}; + border: none; + border-radius: 0.5rem; + background: ${({ theme }) => theme.color.main}; + display: flex; + padding: 0.75rem 1.75rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + cursor: pointer; +`; diff --git a/src/components/Post/PostCard/style.ts b/src/components/Post/PostCard/style.ts index 6ead730..35914b9 100644 --- a/src/components/Post/PostCard/style.ts +++ b/src/components/Post/PostCard/style.ts @@ -18,7 +18,8 @@ export const AuthorDataBox = styled.div` `; export const Author = styled.div` - color: #8f9094; + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[600]}; `; export const Contour = styled.div` @@ -33,7 +34,8 @@ export const AuthorData = styled.div` align-items: center; gap: 0.25rem; span { - color: #b4b5b7; + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[400]}; } `; @@ -41,9 +43,10 @@ export const Dot = styled.div` width: 4px; height: 4px; border-radius: 2px; - background-color: #b4b5b7; + background-color: ${({ theme }) => theme.color.gray[400]}; `; export const Title = styled.div` - color: #333; + ${({ theme }) => theme.fontStyle.m1.semi} + color: ${({ theme }) => theme.color.black}; `; diff --git a/src/pages/post/index.tsx b/src/pages/post/index.tsx new file mode 100644 index 0000000..515b12c --- /dev/null +++ b/src/pages/post/index.tsx @@ -0,0 +1,19 @@ +import DetailPost from 'components/Post/DetailPost'; +import PostHeader from 'components/Post/DetailPost/PostHeader'; +import React from 'react'; +import * as S from './style'; +import Header from 'components/Header'; + +const Post = () => { + return ( + <> +
+ + + + + + ); +}; + +export default Post; diff --git a/src/pages/post/style.ts b/src/pages/post/style.ts new file mode 100644 index 0000000..2a2d738 --- /dev/null +++ b/src/pages/post/style.ts @@ -0,0 +1,7 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; diff --git a/src/svg/LeftArrow.tsx b/src/svg/LeftArrow.tsx new file mode 100644 index 0000000..1abaa9f --- /dev/null +++ b/src/svg/LeftArrow.tsx @@ -0,0 +1,22 @@ +import React from 'react'; + +const LeftArrow = () => { + return ( + + + + ); +}; + +export default LeftArrow; diff --git a/src/svg/ReportIcon.tsx b/src/svg/ReportIcon.tsx new file mode 100644 index 0000000..809c843 --- /dev/null +++ b/src/svg/ReportIcon.tsx @@ -0,0 +1,38 @@ +import React from 'react'; + +const ReportIcon = () => { + return ( + + + + + + ); +}; + +export default ReportIcon; diff --git a/src/svg/index.ts b/src/svg/index.ts index 28fce4b..72f6cbc 100644 --- a/src/svg/index.ts +++ b/src/svg/index.ts @@ -13,3 +13,5 @@ export { default as SearchIcon } from './SearchIcon'; export { default as SelectButton } from './SelectButton'; export { default as XIcon } from './XIcon'; export { default as DownArrow } from './DownArrow'; +export { default as LeftArrow } from './LeftArrow'; +export { default as ReportIcon } from './ReportIcon'; From 82299e4ddb3d76b9e8a79c712e10ab2e89fc98bb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Tue, 29 Oct 2024 16:48:26 +0900 Subject: [PATCH 4/9] Add index export --- src/components/Post/DetailPost/PostHeader/index.tsx | 2 +- src/components/Post/DetailPost/index.tsx | 2 +- src/components/Post/index.ts | 1 + src/components/index.ts | 1 + 4 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/Post/DetailPost/PostHeader/index.tsx b/src/components/Post/DetailPost/PostHeader/index.tsx index 5381d3d..2ac9a54 100644 --- a/src/components/Post/DetailPost/PostHeader/index.tsx +++ b/src/components/Post/DetailPost/PostHeader/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import * as S from './style'; -import LeftArrow from 'svg/LeftArrow'; +import { LeftArrow } from 'svg'; import { useNavigate } from 'react-router-dom'; const PostHeader = () => { diff --git a/src/components/Post/DetailPost/index.tsx b/src/components/Post/DetailPost/index.tsx index 7754610..b5ec4e0 100644 --- a/src/components/Post/DetailPost/index.tsx +++ b/src/components/Post/DetailPost/index.tsx @@ -3,7 +3,7 @@ import * as S from './style'; import Profile from './PostProfile'; import MateList from 'components/MateList'; import TagList from '../PostCard/TagList'; -import ReportIcon from 'svg/ReportIcon'; +import { ReportIcon } from 'svg'; import { DeclarationModal } from 'components/Modal'; const DetailPost = () => { diff --git a/src/components/Post/index.ts b/src/components/Post/index.ts index 3feba4e..83edd0d 100644 --- a/src/components/Post/index.ts +++ b/src/components/Post/index.ts @@ -1,2 +1,3 @@ // export { default as PostCard } from './PostCard' export { default as PostList } from './PostList'; +export { default as DetailPost } from './DetailPost'; diff --git a/src/components/index.ts b/src/components/index.ts index fca55fa..5fe6276 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -3,3 +3,4 @@ export * from './Post'; export * from './Input'; export { default as Profile } from './Profile'; export { default as MateList } from './MateList'; +export { default as Portal } from './Portal'; From 45a9ae19595adf53b9506a059ba229f613c62813 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 11 Nov 2024 19:31:14 +0900 Subject: [PATCH 5/9] Fix input --- src/components/Header/SearchList/index.tsx | 5 +- src/components/Header/SearchList/style.ts | 20 ++++++-- src/components/Header/index.tsx | 54 +++++++++++----------- src/components/Header/style.ts | 28 +++++++---- src/components/Post/PostCard/style.ts | 5 +- src/pages/home/index.tsx | 30 ++++++------ src/pages/home/style.ts | 7 ++- 7 files changed, 90 insertions(+), 59 deletions(-) diff --git a/src/components/Header/SearchList/index.tsx b/src/components/Header/SearchList/index.tsx index adca78c..e49131b 100644 --- a/src/components/Header/SearchList/index.tsx +++ b/src/components/Header/SearchList/index.tsx @@ -4,9 +4,10 @@ import SearchItem from './SearchItem'; interface Props { word: string; + focus: boolean; } -const SearchList = ({ word }: Props) => { +const SearchList = ({ word, focus }: Props) => { const temp = [ { id: 1, @@ -26,7 +27,7 @@ const SearchList = ({ word }: Props) => { ]; return ( - + 검색{word ? '결과' : '기록'} {temp diff --git a/src/components/Header/SearchList/style.ts b/src/components/Header/SearchList/style.ts index d9b348c..5dd10a3 100644 --- a/src/components/Header/SearchList/style.ts +++ b/src/components/Header/SearchList/style.ts @@ -1,18 +1,28 @@ import styled from '@emotion/styled'; -export const Wrapper = styled.div` - display: flex; +export const Wrapper = styled.div<{ focus: boolean }>` + width: 100%; + max-width: 33.75rem; + align-self: stretch; + display: ${({ focus }) => (focus ? 'flex' : 'none')}; + padding: 3rem 1.25rem 0.75rem; + position: absolute; + top: 0; + left: -0.5px; + border: 1px solid #eff0f2; + background: #fff; + border-radius: 0.75rem; flex-direction: column; gap: 0.5rem; `; export const HeaderText = styled.p` - ${({ theme }) => theme.fontStyle.label} - color: ${({ theme }) => theme.color.gray[400]} + ${({ theme }) => theme.fontStyle.label}; + color: ${({ theme }) => theme.color.gray[400]}; `; export const List = styled.div` display: flex; flex-direction: column; - gap: 0.5rem; + gap: 1rem; `; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index f152779..70b8ffa 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -15,32 +15,34 @@ const Header = () => { const [keyword, setKeyword] = useState(''); return ( - - - - - - - setKeyword(e.target.value)} - onFocus={() => setFocus(true)} - onBlur={() => setFocus(false)} - /> - - - - - {focus && } - - - - - - - - + + + + + + + + setKeyword(e.target.value)} + onFocus={() => setFocus(true)} + onBlur={() => setFocus(false)} + /> + + + + + + + + + + + + + + ); }; diff --git a/src/components/Header/style.ts b/src/components/Header/style.ts index 4eb7758..9864bd9 100644 --- a/src/components/Header/style.ts +++ b/src/components/Header/style.ts @@ -1,10 +1,19 @@ import styled from '@emotion/styled'; +export const Positioner = styled.div` + display: flex; + justify-content: center; + padding: 1rem 0; +`; + export const Container = styled.header` + width: 68.75rem; display: flex; - padding: 1rem 21%; justify-content: space-between; align-items: center; + @media (max-width: 1100px) { + width: 100%; + } `; export const LogoBox = styled.div` @@ -17,18 +26,17 @@ export const Input = styled.input` outline: none; background: transparent; padding-right: 2rem; + z-index: 99; `; -export const SearchBox = styled.div` - position: absolute; - top: 0.75rem; - left: 50%; - transform: translateX(-50%); - width: 33.75rem; +export const SearchBox = styled.div<{ focus: boolean }>` + position: relative; + width: 100%; + max-width: 33.75rem; padding: 0.75rem 1.25rem; - border: 1px solid #eff0f2; + border: ${({ focus }) => (focus ? '0' : '1px solid #eff0f2')}; background: #fff; - border-radius: 0.75rem; + border-radius: ${({ focus }) => (focus ? '0.75rem 0.75rem 0 0' : '0.75rem')}; display: flex; flex-direction: column; gap: 1.75rem; @@ -36,9 +44,9 @@ export const SearchBox = styled.div` `; export const InputBox = styled.div` - position: relative; display: flex; align-items: center; + z-index: 99; `; export const SearchIcon = styled.div` diff --git a/src/components/Post/PostCard/style.ts b/src/components/Post/PostCard/style.ts index 35914b9..6d6a480 100644 --- a/src/components/Post/PostCard/style.ts +++ b/src/components/Post/PostCard/style.ts @@ -1,7 +1,7 @@ import styled from '@emotion/styled'; export const Container = styled.div` - width: 27rem; + width: 30.5rem; padding: 1.25rem 1.5rem; border-radius: 0.5rem; border: 1px solid #f5f6f8; @@ -9,6 +9,9 @@ export const Container = styled.div` flex-direction: column; gap: 1rem; background-color: white; + @media (max-width: 1100px) { + width: 100%; + } `; export const AuthorDataBox = styled.div` diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index c32966c..9315204 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -13,20 +13,22 @@ const Home = () => { return ( <>
- - - - - - setModal(true)}> - - 필터 - - {modal && setModal(false)} />} - - - - + + + + + + + setModal(true)}> + + 필터 + + {modal && setModal(false)} />} + + + + + ); }; diff --git a/src/pages/home/style.ts b/src/pages/home/style.ts index 974fae5..c3ad62a 100644 --- a/src/pages/home/style.ts +++ b/src/pages/home/style.ts @@ -1,7 +1,12 @@ import styled from '@emotion/styled'; +export const Positioner = styled.div` + display: flex; + justify-content: center; +` + export const Container = styled.div` - padding: 1.63rem 21% 0; + width: 68.75rem; display: flex; flex-direction: column; gap: 2.88rem; From 51eed51bc05cd04be9785ed3109c16e1afa1670e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 11 Nov 2024 19:37:29 +0900 Subject: [PATCH 6/9] Solve cd error --- src/pages/home/style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/style.ts b/src/pages/home/style.ts index c3ad62a..38d4fbd 100644 --- a/src/pages/home/style.ts +++ b/src/pages/home/style.ts @@ -3,7 +3,7 @@ import styled from '@emotion/styled'; export const Positioner = styled.div` display: flex; justify-content: center; -` +`; export const Container = styled.div` width: 68.75rem; From 86c426373d6c161dd73d1201832fa3dcea453492 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 25 Nov 2024 18:35:30 +0900 Subject: [PATCH 7/9] Add mypage --- src/App.tsx | 6 + src/components/Modal/ImageChange/index.tsx | 28 ++++ src/components/Modal/ImageChange/style.ts | 61 ++++++++ .../My/CanclePage/PostHeader/index.tsx | 20 +++ .../My/CanclePage/PostHeader/style.ts | 24 +++ .../My/CanclePage/PostProfile/index.tsx | 36 +++++ .../My/CanclePage/PostProfile/style.ts | 75 +++++++++ src/components/My/CanclePage/index.tsx | 55 +++++++ src/components/My/CanclePage/style.ts | 142 ++++++++++++++++++ .../My/DetailPost/PostHeader/index.tsx | 20 +++ .../My/DetailPost/PostHeader/style.ts | 24 +++ .../My/DetailPost/PostProfile/index.tsx | 36 +++++ .../My/DetailPost/PostProfile/style.ts | 75 +++++++++ src/components/My/DetailPost/index.tsx | 75 +++++++++ src/components/My/DetailPost/style.ts | 142 ++++++++++++++++++ .../PostCard/TagList/TagItem/index.tsx | 21 +++ .../PostCard/TagList/TagItem/style.ts | 15 ++ .../My/PostList/PostCard/TagList/index.tsx | 16 ++ .../My/PostList/PostCard/TagList/style.ts | 6 + src/components/My/PostList/PostCard/index.tsx | 49 ++++++ src/components/My/PostList/PostCard/style.ts | 52 +++++++ .../My/PostList/PostHeader/index.tsx | 13 ++ .../My/PostList/PostHeader/style.ts | 17 +++ src/components/My/PostList/index.tsx | 35 +++++ src/components/My/PostList/style.ts | 15 ++ src/components/My/Profile/Detail/index.tsx | 33 ++++ src/components/My/Profile/Detail/style.ts | 29 ++++ src/components/My/Profile/UserData/index.tsx | 22 +++ src/components/My/Profile/UserData/style.ts | 43 ++++++ src/components/My/Profile/index.tsx | 15 ++ src/components/My/Profile/style.ts | 8 + src/pages/my/cancle/index.tsx | 17 +++ src/pages/my/cancle/style.ts | 14 ++ src/pages/my/edit/index.tsx | 17 +++ src/pages/my/edit/style.ts | 14 ++ src/pages/my/index.tsx | 19 +++ src/pages/my/style.ts | 15 ++ src/svg/ChangeIcon.tsx | 37 +++++ src/svg/KebabIcon.tsx | 18 +++ 39 files changed, 1359 insertions(+) create mode 100644 src/components/Modal/ImageChange/index.tsx create mode 100644 src/components/Modal/ImageChange/style.ts create mode 100644 src/components/My/CanclePage/PostHeader/index.tsx create mode 100644 src/components/My/CanclePage/PostHeader/style.ts create mode 100644 src/components/My/CanclePage/PostProfile/index.tsx create mode 100644 src/components/My/CanclePage/PostProfile/style.ts create mode 100644 src/components/My/CanclePage/index.tsx create mode 100644 src/components/My/CanclePage/style.ts create mode 100644 src/components/My/DetailPost/PostHeader/index.tsx create mode 100644 src/components/My/DetailPost/PostHeader/style.ts create mode 100644 src/components/My/DetailPost/PostProfile/index.tsx create mode 100644 src/components/My/DetailPost/PostProfile/style.ts create mode 100644 src/components/My/DetailPost/index.tsx create mode 100644 src/components/My/DetailPost/style.ts create mode 100644 src/components/My/PostList/PostCard/TagList/TagItem/index.tsx create mode 100644 src/components/My/PostList/PostCard/TagList/TagItem/style.ts create mode 100644 src/components/My/PostList/PostCard/TagList/index.tsx create mode 100644 src/components/My/PostList/PostCard/TagList/style.ts create mode 100644 src/components/My/PostList/PostCard/index.tsx create mode 100644 src/components/My/PostList/PostCard/style.ts create mode 100644 src/components/My/PostList/PostHeader/index.tsx create mode 100644 src/components/My/PostList/PostHeader/style.ts create mode 100644 src/components/My/PostList/index.tsx create mode 100644 src/components/My/PostList/style.ts create mode 100644 src/components/My/Profile/Detail/index.tsx create mode 100644 src/components/My/Profile/Detail/style.ts create mode 100644 src/components/My/Profile/UserData/index.tsx create mode 100644 src/components/My/Profile/UserData/style.ts create mode 100644 src/components/My/Profile/index.tsx create mode 100644 src/components/My/Profile/style.ts create mode 100644 src/pages/my/cancle/index.tsx create mode 100644 src/pages/my/cancle/style.ts create mode 100644 src/pages/my/edit/index.tsx create mode 100644 src/pages/my/edit/style.ts create mode 100644 src/pages/my/index.tsx create mode 100644 src/pages/my/style.ts create mode 100644 src/svg/ChangeIcon.tsx create mode 100644 src/svg/KebabIcon.tsx diff --git a/src/App.tsx b/src/App.tsx index e7907ab..8cff189 100644 --- a/src/App.tsx +++ b/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() { } /> } /> } /> + } /> + } /> + } /> ); } diff --git a/src/components/Modal/ImageChange/index.tsx b/src/components/Modal/ImageChange/index.tsx new file mode 100644 index 0000000..18ddb9f --- /dev/null +++ b/src/components/Modal/ImageChange/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import * as S from './style'; +import XIcon from 'svg/XIcon'; + +interface Props { + onClose: () => void; +} + +const ImageChange = ({ onClose }: Props) => { + return ( + + + + 프로필 변경 +
+ +
+ + + + + + + + ); +}; + +export default ImageChange; diff --git a/src/components/Modal/ImageChange/style.ts b/src/components/Modal/ImageChange/style.ts new file mode 100644 index 0000000..8441204 --- /dev/null +++ b/src/components/Modal/ImageChange/style.ts @@ -0,0 +1,61 @@ +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; +`; + +export const Header = styled.div` + display: flex; + justify-content: space-between; + align-items: flex-start; + align-self: stretch; +`; + +export const CloseButton = styled.div``; + +export const Title = styled.div` + ${({ theme }) => theme.fontStyle.m1.semi}; + color: ${({ theme }) => theme.color.black}; +`; + +export const ChangeButton = styled.input` + position: absolute; + top: 0; + right: 0; + width: 40px; + height: 40px; + border-radius: 0px 8px; + background: ${({ theme }) => theme.color.gray[400]}; +`; + +export const ImageBack = styled.div` + position: relative; + width: 352px; + height: 345px; + border-radius: 8px; + background-color: ${({ theme }) => theme.color.gray[300]}; +`; + +export const CheckButton = styled.div` + display: flex; + justify-content: center; + align-items: center; + 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; +`; diff --git a/src/components/My/CanclePage/PostHeader/index.tsx b/src/components/My/CanclePage/PostHeader/index.tsx new file mode 100644 index 0000000..f8e5444 --- /dev/null +++ b/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 ( + + navigate(`/my`)}> + + + 글보기 + + + ); +}; + +export default PostHeader; diff --git a/src/components/My/CanclePage/PostHeader/style.ts b/src/components/My/CanclePage/PostHeader/style.ts new file mode 100644 index 0000000..8f1cf5a --- /dev/null +++ b/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; +`; diff --git a/src/components/My/CanclePage/PostProfile/index.tsx b/src/components/My/CanclePage/PostProfile/index.tsx new file mode 100644 index 0000000..f8bb444 --- /dev/null +++ b/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(false); + return ( + + + + + 한재형 + + 광주소프트웨어마이스터고등학교 + + 1학년 + + 여자 + + + + + setModal(!modal)}> + + + {modal && ( + + 글 삭제 + + )} + + + ); +}; + +export default PostProfile; diff --git a/src/components/My/CanclePage/PostProfile/style.ts b/src/components/My/CanclePage/PostProfile/style.ts new file mode 100644 index 0000000..98ced9e --- /dev/null +++ b/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}; +`; diff --git a/src/components/My/CanclePage/index.tsx b/src/components/My/CanclePage/index.tsx new file mode 100644 index 0000000..be0ac3b --- /dev/null +++ b/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(false); + return ( + <> + + + + + + + 같이 산책 하실 분 구해요 + + 토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 사람 + + + + 카톡 : wjdtjffl55 + 디스코드 : hye_2417 + 인스타그램 : hye_2417 + + 마감일 : 2024년 06월 17일 + + 2자리 남음 + + + + setModal(true)}> + + + + + + + 신청 취소 + + {modal && setModal(false)} postId={1} />} + + ); +}; + +export default CanclePage; diff --git a/src/components/My/CanclePage/style.ts b/src/components/My/CanclePage/style.ts new file mode 100644 index 0000000..285833a --- /dev/null +++ b/src/components/My/CanclePage/style.ts @@ -0,0 +1,142 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + padding: 1.75rem 1.5rem; + max-width: 37.5rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 2.5rem; + border: 1px solid ${({ theme }) => theme.color.gray[100]}; + border-radius: 0.5rem; +`; + +export const PostContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1.75rem; +`; + +export const ApplyContainer = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +export const PostText = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const Title = styled.div` + ${({ theme }) => theme.fontStyle.h4.semi} + color: ${({ theme }) => theme.color.black}; +`; + +export const Content = styled.div` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.black}; +`; + +export const SNSContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; +`; + +export const SNSText = styled(Content)``; + +export const Deadline = styled(Content)``; + +export const PostData = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +`; + +export const Remain = styled.span` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[500]}; +`; + +export const TagReportContainer = styled.div` + display: flex; + justify-content: space-between; +`; + +export const ReportButton = styled.div` + cursor: pointer; +`; + +export const CancleButton = styled.button` + ${({ theme }) => theme.fontStyle.m3.semi}; + color: ${({ theme }) => theme.color.white}; + border: none; + border-radius: 0.5rem; + background: ${({ theme }) => theme.color.system}; + display: flex; + padding: 0.75rem 1.75rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + cursor: pointer; +`; + +export const Line = styled.div` + background: ${({ theme }) => theme.color.gray[200]}; +`; + +export const ApplicantList = styled.div` + display: flex; + width: 600px; + flex-direction: column; + gap: 28px; +`; + +export const ApplicantContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const ProfileText = styled.div` + display: flex; + gap: 8px; +`; + +export const Name = styled.span` + ${({ theme }) => theme.fontStyle.m2.semi}; + color: ${({ theme }) => theme.color.black}; +`; + +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 OutButton = styled.div` + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 8px; + background: ${({ theme }) => theme.color.system}; + color: ${({ theme }) => theme.color.white}; +`; diff --git a/src/components/My/DetailPost/PostHeader/index.tsx b/src/components/My/DetailPost/PostHeader/index.tsx new file mode 100644 index 0000000..f8e5444 --- /dev/null +++ b/src/components/My/DetailPost/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 ( + + navigate(`/my`)}> + + + 글보기 + + + ); +}; + +export default PostHeader; diff --git a/src/components/My/DetailPost/PostHeader/style.ts b/src/components/My/DetailPost/PostHeader/style.ts new file mode 100644 index 0000000..8f1cf5a --- /dev/null +++ b/src/components/My/DetailPost/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; +`; diff --git a/src/components/My/DetailPost/PostProfile/index.tsx b/src/components/My/DetailPost/PostProfile/index.tsx new file mode 100644 index 0000000..f8bb444 --- /dev/null +++ b/src/components/My/DetailPost/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(false); + return ( + + + + + 한재형 + + 광주소프트웨어마이스터고등학교 + + 1학년 + + 여자 + + + + + setModal(!modal)}> + + + {modal && ( + + 글 삭제 + + )} + + + ); +}; + +export default PostProfile; diff --git a/src/components/My/DetailPost/PostProfile/style.ts b/src/components/My/DetailPost/PostProfile/style.ts new file mode 100644 index 0000000..98ced9e --- /dev/null +++ b/src/components/My/DetailPost/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}; +`; diff --git a/src/components/My/DetailPost/index.tsx b/src/components/My/DetailPost/index.tsx new file mode 100644 index 0000000..2eb3888 --- /dev/null +++ b/src/components/My/DetailPost/index.tsx @@ -0,0 +1,75 @@ +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 DetailPost = () => { + const [modal, setModal] = useState(false); + return ( + <> + + + + + + + 같이 산책 하실 분 구해요 + + 토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 + 사람토요일에 호수공원 산책할 사람토요일에 호수공원 산책할 사람 + + + + 카톡 : wjdtjffl55 + 디스코드 : hye_2417 + 인스타그램 : hye_2417 + + 마감일 : 2024년 06월 17일 + + 2자리 남음 + + + + setModal(true)}> + + + + + + + 글 수정 + { + + + {[...Array(3)].map((_, idx) => ( + + + 한재형 + + 광주소프트웨어마이스터고등학교 + + 1학년 + + 여자 + + + 내보내기 + + ))} + + } + + {modal && setModal(false)} postId={1} />} + + ); +}; + +export default DetailPost; diff --git a/src/components/My/DetailPost/style.ts b/src/components/My/DetailPost/style.ts new file mode 100644 index 0000000..9eb5e50 --- /dev/null +++ b/src/components/My/DetailPost/style.ts @@ -0,0 +1,142 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + padding: 1.75rem 1.5rem; + max-width: 37.5rem; + width: 100%; + display: flex; + flex-direction: column; + gap: 2.5rem; + border: 1px solid ${({ theme }) => theme.color.gray[100]}; + border-radius: 0.5rem; +`; + +export const PostContainer = styled.div` + width: 100%; + display: flex; + flex-direction: column; + gap: 1.75rem; +`; + +export const ApplyContainer = styled.div` + display: flex; + flex-direction: column; + gap: 20px; +`; + +export const PostText = styled.div` + display: flex; + flex-direction: column; + gap: 8px; +`; + +export const Title = styled.div` + ${({ theme }) => theme.fontStyle.h4.semi} + color: ${({ theme }) => theme.color.black}; +`; + +export const Content = styled.div` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.black}; +`; + +export const SNSContainer = styled.div` + display: flex; + flex-direction: column; + gap: 0.25rem; +`; + +export const SNSText = styled(Content)``; + +export const Deadline = styled(Content)``; + +export const PostData = styled.div` + display: flex; + flex-direction: column; + justify-content: center; + gap: 1rem; +`; + +export const Remain = styled.span` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[500]}; +`; + +export const TagReportContainer = styled.div` + display: flex; + justify-content: space-between; +`; + +export const ReportButton = styled.div` + cursor: pointer; +`; + +export const EditButton = styled.button` + ${({ theme }) => theme.fontStyle.m3.semi}; + color: ${({ theme }) => theme.color.white}; + border: none; + border-radius: 0.5rem; + background: ${({ theme }) => theme.color.gray[600]}; + display: flex; + padding: 0.75rem 1.75rem; + justify-content: center; + align-items: center; + gap: 0.625rem; + cursor: pointer; +`; + +export const Line = styled.div` + background: ${({ theme }) => theme.color.gray[200]}; +`; + +export const ApplicantList = styled.div` + display: flex; + width: 600px; + flex-direction: column; + gap: 28px; +`; + +export const ApplicantContainer = styled.div` + display: flex; + justify-content: space-between; + align-items: center; +`; + +export const ProfileText = styled.div` + display: flex; + gap: 8px; +`; + +export const Name = styled.span` + ${({ theme }) => theme.fontStyle.m2.semi}; + color: ${({ theme }) => theme.color.black}; +`; + +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 OutButton = styled.div` + display: flex; + padding: 8px 12px; + justify-content: center; + align-items: center; + gap: 10px; + border-radius: 8px; + background: ${({ theme }) => theme.color.system}; + color: ${({ theme }) => theme.color.white}; +`; diff --git a/src/components/My/PostList/PostCard/TagList/TagItem/index.tsx b/src/components/My/PostList/PostCard/TagList/TagItem/index.tsx new file mode 100644 index 0000000..dd77ba1 --- /dev/null +++ b/src/components/My/PostList/PostCard/TagList/TagItem/index.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import * as S from './style'; +import { tagType } from 'types/Card'; + +const TagItem = ({ tag }: { tag: tagType }) => { + const text = { + WALK: '산책', + WORRY: '고민', + CHAT: '잡담', + EXERCISE: '운동', + STUDY: '공부', + GO_OUT: '외출', + }; + return ( + + #{text[tag]} + + ); +}; + +export default TagItem; diff --git a/src/components/My/PostList/PostCard/TagList/TagItem/style.ts b/src/components/My/PostList/PostCard/TagList/TagItem/style.ts new file mode 100644 index 0000000..4330a1a --- /dev/null +++ b/src/components/My/PostList/PostCard/TagList/TagItem/style.ts @@ -0,0 +1,15 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + border: 1px solid #eff0f2; + border-radius: 8px; + display: flex; + padding: 4px 12px; + justify-content: center; + align-items: center; + gap: 10px; +`; + +export const Tag = styled.div` + color: #a5a6a9; +`; diff --git a/src/components/My/PostList/PostCard/TagList/index.tsx b/src/components/My/PostList/PostCard/TagList/index.tsx new file mode 100644 index 0000000..95f5af0 --- /dev/null +++ b/src/components/My/PostList/PostCard/TagList/index.tsx @@ -0,0 +1,16 @@ +import React from 'react'; +import * as S from './style'; +import { Card } from 'types/Card'; +import TagItem from './TagItem'; + +const TagList = ({ tag }: Pick) => { + return ( + + {tag.map((item, index) => ( + + ))} + + ); +}; + +export default TagList; diff --git a/src/components/My/PostList/PostCard/TagList/style.ts b/src/components/My/PostList/PostCard/TagList/style.ts new file mode 100644 index 0000000..92be720 --- /dev/null +++ b/src/components/My/PostList/PostCard/TagList/style.ts @@ -0,0 +1,6 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + display: flex; + gap: 12px; +`; diff --git a/src/components/My/PostList/PostCard/index.tsx b/src/components/My/PostList/PostCard/index.tsx new file mode 100644 index 0000000..ad38836 --- /dev/null +++ b/src/components/My/PostList/PostCard/index.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import * as S from './style'; +import { Card } from 'types/Card'; +import TagList from './TagList'; +import MateList from 'components/MateList'; + +const PostCard = ({ + author, + author_gender, + author_grade, + author_school, + gender, + grade, + tag, + title, +}: Card) => { + const text: { [key: string]: string } = { + ONE: '1학년', + TWO: '2학년', + THREE: '3학년', + FOUR: '4학년', + FIVE: '5학년', + SIX: '6학년', + MALE: '남자', + FEMALE: '여자', + ANY: '성별무관', + }; + + return ( + + + + {author} + + + {author_school} + + {text[author_grade]} + + {text[author_gender]} + + + {title} + + + ); +}; + +export default PostCard; diff --git a/src/components/My/PostList/PostCard/style.ts b/src/components/My/PostList/PostCard/style.ts new file mode 100644 index 0000000..201e9a8 --- /dev/null +++ b/src/components/My/PostList/PostCard/style.ts @@ -0,0 +1,52 @@ +import styled from '@emotion/styled'; + +export const Container = styled.div` + width: 550px; + padding: 1.25rem 1.5rem; + border-radius: 0.5rem; + border: 1px solid #f5f6f8; + display: flex; + flex-direction: column; + gap: 1rem; + background-color: white; +`; + +export const AuthorDataBox = styled.div` + display: flex; + align-items: center; + gap: 0.5rem; +`; + +export const Author = styled.div` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[600]}; +`; + +export const Contour = styled.div` + width: 0.0625rem; + height: 1.25rem; + border-radius: 0.3125rem; + background: #d9d9d9; +`; + +export const AuthorData = styled.div` + display: flex; + align-items: center; + gap: 0.25rem; + span { + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.gray[400]}; + } +`; + +export const Dot = styled.div` + width: 4px; + height: 4px; + border-radius: 2px; + background-color: ${({ theme }) => theme.color.gray[400]}; +`; + +export const Title = styled.div` + ${({ theme }) => theme.fontStyle.m1.semi} + color: ${({ theme }) => theme.color.black}; +`; diff --git a/src/components/My/PostList/PostHeader/index.tsx b/src/components/My/PostList/PostHeader/index.tsx new file mode 100644 index 0000000..8a57250 --- /dev/null +++ b/src/components/My/PostList/PostHeader/index.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import * as S from './style'; + +const PostHeader = () => { + return ( + + 내가 작성한 글 + 신청한 예약 + + ); +}; + +export default PostHeader; diff --git a/src/components/My/PostList/PostHeader/style.ts b/src/components/My/PostList/PostHeader/style.ts new file mode 100644 index 0000000..55f44e8 --- /dev/null +++ b/src/components/My/PostList/PostHeader/style.ts @@ -0,0 +1,17 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + align-self: flex-start; + gap: 20px; +`; + +export const Text = styled.div<{ selected: boolean }>` + ${({ theme }) => theme.fontStyle.m3.semi}; + color: ${({ selected, theme }) => + selected ? theme.color.main : theme.color.black}; + border-bottom: ${({ selected, theme }) => + selected ? `1px solid ${theme.color.main} ` : '0'}; +`; diff --git a/src/components/My/PostList/index.tsx b/src/components/My/PostList/index.tsx new file mode 100644 index 0000000..6e9d0d4 --- /dev/null +++ b/src/components/My/PostList/index.tsx @@ -0,0 +1,35 @@ +import React from 'react'; +import * as S from './style'; +import PostHeader from './PostHeader'; +import PostCard from './PostCard'; +import { useNavigate } from 'react-router-dom'; + +const PostList = () => { + const navigate = useNavigate(); + + return ( + + + + {[...Array(8)].map((_, idx) => ( +
navigate('edit/1')}> + +
+ ))} + + + ); +}; + +export default PostList; diff --git a/src/components/My/PostList/style.ts b/src/components/My/PostList/style.ts new file mode 100644 index 0000000..4a264fa --- /dev/null +++ b/src/components/My/PostList/style.ts @@ -0,0 +1,15 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + width: 600px; + display: inline-flex; + flex-direction: column; + gap: 20px; +`; + +export const List = styled.div` + width: 600px; + display: flex; + flex-direction: column; + gap: 16px; +`; diff --git a/src/components/My/Profile/Detail/index.tsx b/src/components/My/Profile/Detail/index.tsx new file mode 100644 index 0000000..5246b91 --- /dev/null +++ b/src/components/My/Profile/Detail/index.tsx @@ -0,0 +1,33 @@ +import React, { useState } from 'react'; +import * as S from './style'; +import KebabIcon from 'svg/KebabIcon'; +import Portal from 'components/Portal'; +import ImageChange from 'components/Modal/ImageChange'; + +const Detail = () => { + const [modal, setModal] = useState(false); + const [change, setChange] = useState(false); + + return ( + <> + + setModal(!modal)}> + + + {modal && ( + + setChange(true)}>프로필 변경 + 로그아웃 + + )} + + {change && ( + setChange(false)}> + setChange(false)} /> + + )} + + ); +}; + +export default Detail; diff --git a/src/components/My/Profile/Detail/style.ts b/src/components/My/Profile/Detail/style.ts new file mode 100644 index 0000000..a7d0313 --- /dev/null +++ b/src/components/My/Profile/Detail/style.ts @@ -0,0 +1,29 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + position: relative; +`; + +export const Button = styled.div``; + +export const DetailModal = styled.div` + position: absolute; + left: -118px; + 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 Text = styled.div` + ${({ theme }) => theme.fontStyle.m3.reg} + color: ${({ theme }) => theme.color.black}; +`; + +export const WarningText = styled(Text)` + color: ${({ theme }) => theme.color.system}; +`; diff --git a/src/components/My/Profile/UserData/index.tsx b/src/components/My/Profile/UserData/index.tsx new file mode 100644 index 0000000..eef489c --- /dev/null +++ b/src/components/My/Profile/UserData/index.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import * as S from './style'; + +const UserData = () => { + return ( + + + + 한재형 + + 광주소프트웨어마이스터고등학교 + + 1학년 + + 여자 + + + + ); +}; + +export default UserData; diff --git a/src/components/My/Profile/UserData/style.ts b/src/components/My/Profile/UserData/style.ts new file mode 100644 index 0000000..bcbdd96 --- /dev/null +++ b/src/components/My/Profile/UserData/style.ts @@ -0,0 +1,43 @@ +import styled from '@emotion/styled'; + +export const Wrapper = styled.div` + display: flex; + justify-content: center; + align-items: center; + gap: 12px; +`; + +export const Profile = styled.img` + width: 3rem; + height: 3rem; + border-radius: 100%; +`; + +export const Text = styled.div` + display: flex; + flex-direction: column; + justify-content: center; +`; + +export const Name = styled.span` + ${({ theme }) => theme.fontStyle.m3}; + color: ${({ theme }) => theme.color.black}; +`; + +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; +`; diff --git a/src/components/My/Profile/index.tsx b/src/components/My/Profile/index.tsx new file mode 100644 index 0000000..8c9be12 --- /dev/null +++ b/src/components/My/Profile/index.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import * as S from './style'; +import UserData from './UserData'; +import Detail from './Detail'; + +const Profile = () => { + return ( + + + + + ); +}; + +export default Profile; diff --git a/src/components/My/Profile/style.ts b/src/components/My/Profile/style.ts new file mode 100644 index 0000000..96f0a5e --- /dev/null +++ b/src/components/My/Profile/style.ts @@ -0,0 +1,8 @@ +import styled from '@emotion/styled'; + +export const Postioner = styled.div` + width: 600px; + display: flex; + justify-content: space-between; + align-items: center; +`; diff --git a/src/pages/my/cancle/index.tsx b/src/pages/my/cancle/index.tsx new file mode 100644 index 0000000..fc7d40c --- /dev/null +++ b/src/pages/my/cancle/index.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import * as S from './style'; +import Header from 'components/Header'; +import CanclePage from 'components/My/CanclePage'; + +const Cancle = () => { + return ( + +
+ + + + + ); +}; + +export default Cancle; diff --git a/src/pages/my/cancle/style.ts b/src/pages/my/cancle/style.ts new file mode 100644 index 0000000..9f6fa33 --- /dev/null +++ b/src/pages/my/cancle/style.ts @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +export const Postioner = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const Wrapper = styled.div` + padding-bottom: 57px; + display: flex; + flex-direction: column; + align-items: center; +`; diff --git a/src/pages/my/edit/index.tsx b/src/pages/my/edit/index.tsx new file mode 100644 index 0000000..db1ba17 --- /dev/null +++ b/src/pages/my/edit/index.tsx @@ -0,0 +1,17 @@ +import DetailPost from 'components/My/DetailPost'; +import React from 'react'; +import * as S from './style'; +import Header from 'components/Header'; + +const Edit = () => { + return ( + +
+ + + + + ); +}; + +export default Edit; diff --git a/src/pages/my/edit/style.ts b/src/pages/my/edit/style.ts new file mode 100644 index 0000000..9f6fa33 --- /dev/null +++ b/src/pages/my/edit/style.ts @@ -0,0 +1,14 @@ +import styled from '@emotion/styled'; + +export const Postioner = styled.div` + display: flex; + flex-direction: column; + align-items: center; +`; + +export const Wrapper = styled.div` + padding-bottom: 57px; + display: flex; + flex-direction: column; + align-items: center; +`; diff --git a/src/pages/my/index.tsx b/src/pages/my/index.tsx new file mode 100644 index 0000000..c2cacc6 --- /dev/null +++ b/src/pages/my/index.tsx @@ -0,0 +1,19 @@ +import Profile from 'components/My/Profile'; +import React from 'react'; +import * as S from './style'; +import Header from 'components/Header'; +import PostList from 'components/My/PostList'; + +const My = () => { + return ( + +
+ + + + + + ); +}; + +export default My; diff --git a/src/pages/my/style.ts b/src/pages/my/style.ts new file mode 100644 index 0000000..61251b1 --- /dev/null +++ b/src/pages/my/style.ts @@ -0,0 +1,15 @@ +import styled from '@emotion/styled'; + +export const Postioner = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 40px; +`; + +export const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 28px; +`; diff --git a/src/svg/ChangeIcon.tsx b/src/svg/ChangeIcon.tsx new file mode 100644 index 0000000..cf0fbd5 --- /dev/null +++ b/src/svg/ChangeIcon.tsx @@ -0,0 +1,37 @@ +import React from 'react'; + +const ChangeIcon = () => { + return ( + + + + + + + ); +}; + +export default ChangeIcon; diff --git a/src/svg/KebabIcon.tsx b/src/svg/KebabIcon.tsx new file mode 100644 index 0000000..d95c584 --- /dev/null +++ b/src/svg/KebabIcon.tsx @@ -0,0 +1,18 @@ +import React from 'react'; + +const KebabIcon = () => { + return ( + + + + + + ); +}; + +export default KebabIcon; From 569bc226d0a478804064848ab6a65103b1a47ff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Tue, 26 Nov 2024 23:04:24 +0900 Subject: [PATCH 8/9] Fix Change Button --- src/components/Modal/ImageChange/index.tsx | 10 ++++++++-- src/components/Modal/ImageChange/style.ts | 16 ++++++++++++++-- src/components/My/Profile/Detail/index.tsx | 10 ++++++++-- src/components/My/Profile/Detail/style.ts | 1 + src/components/Portal/index.tsx | 7 ++----- 5 files changed, 33 insertions(+), 11 deletions(-) diff --git a/src/components/Modal/ImageChange/index.tsx b/src/components/Modal/ImageChange/index.tsx index 18ddb9f..05a9f01 100644 --- a/src/components/Modal/ImageChange/index.tsx +++ b/src/components/Modal/ImageChange/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import * as S from './style'; import XIcon from 'svg/XIcon'; +import ChangeIcon from 'svg/ChangeIcon'; interface Props { onClose: () => void; @@ -17,10 +18,15 @@ const ImageChange = ({ onClose }: Props) => { - + - + 확인 ); }; diff --git a/src/components/Modal/ImageChange/style.ts b/src/components/Modal/ImageChange/style.ts index 8441204..5e498f0 100644 --- a/src/components/Modal/ImageChange/style.ts +++ b/src/components/Modal/ImageChange/style.ts @@ -8,6 +8,8 @@ export const Wrapper = styled.div` justify-content: center; align-items: center; gap: 28px; + background-color: ${({ theme }) => theme.color.white}; + border-radius: 8px; `; export const Header = styled.div` @@ -15,6 +17,7 @@ export const Header = styled.div` justify-content: space-between; align-items: flex-start; align-self: stretch; + background-color: ${({ theme }) => theme.color.white}; `; export const CloseButton = styled.div``; @@ -24,7 +27,11 @@ export const Title = styled.div` color: ${({ theme }) => theme.color.black}; `; -export const ChangeButton = styled.input` +export const Hidden = styled.input` + display: none; +`; + +export const ChangeButton = styled.div` position: absolute; top: 0; right: 0; @@ -32,6 +39,9 @@ export const ChangeButton = styled.input` 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` @@ -39,13 +49,15 @@ export const ImageBack = styled.div` width: 352px; height: 345px; border-radius: 8px; - background-color: ${({ theme }) => theme.color.gray[300]}; + 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}; diff --git a/src/components/My/Profile/Detail/index.tsx b/src/components/My/Profile/Detail/index.tsx index 5246b91..a021d4f 100644 --- a/src/components/My/Profile/Detail/index.tsx +++ b/src/components/My/Profile/Detail/index.tsx @@ -16,13 +16,19 @@ const Detail = () => { {modal && ( - setChange(true)}>프로필 변경 + { + setChange(true); + console.log(change); + }}> + 프로필 변경 + 로그아웃 )} {change && ( - setChange(false)}> + setChange(false)} /> )} diff --git a/src/components/My/Profile/Detail/style.ts b/src/components/My/Profile/Detail/style.ts index a7d0313..5d039d7 100644 --- a/src/components/My/Profile/Detail/style.ts +++ b/src/components/My/Profile/Detail/style.ts @@ -22,6 +22,7 @@ export const DetailModal = styled.div` export const Text = styled.div` ${({ theme }) => theme.fontStyle.m3.reg} color: ${({ theme }) => theme.color.black}; + cursor: pointer; `; export const WarningText = styled(Text)` diff --git a/src/components/Portal/index.tsx b/src/components/Portal/index.tsx index 24bc186..d89f298 100644 --- a/src/components/Portal/index.tsx +++ b/src/components/Portal/index.tsx @@ -10,10 +10,9 @@ import * as S from './style'; interface Props { children: ReactElement; - onClose?: () => void; } -const Portal = ({ children, onClose }: Props) => { +const Portal = ({ children }: Props) => { const [mounted, setMounted] = useState(false); const portal = document.getElementById('modal'); @@ -31,9 +30,7 @@ const Portal = ({ children, onClose }: Props) => { return mounted ? ( ReactDOM.createPortal( - - {cloneElement(children, { onClick })} - , + {cloneElement(children, { onClick })}, portal, ) ) : ( From a4132e4898fc1fcd6984eb7980a9cb87dca4c31f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EB=AF=BC=EC=9A=B0=EC=84=9D?= Date: Mon, 2 Dec 2024 17:56:06 +0900 Subject: [PATCH 9/9] update import --- .../My/PostList/PostCard/TagList/index.tsx | 2 +- src/components/My/PostList/PostCard/index.tsx | 2 +- src/pages/home/index.tsx | 32 +++++++++++-------- 3 files changed, 21 insertions(+), 15 deletions(-) diff --git a/src/components/My/PostList/PostCard/TagList/index.tsx b/src/components/My/PostList/PostCard/TagList/index.tsx index 95f5af0..9a17486 100644 --- a/src/components/My/PostList/PostCard/TagList/index.tsx +++ b/src/components/My/PostList/PostCard/TagList/index.tsx @@ -1,7 +1,7 @@ import React from 'react'; import * as S from './style'; -import { Card } from 'types/Card'; import TagItem from './TagItem'; +import Card from 'types/Card'; const TagList = ({ tag }: Pick) => { return ( diff --git a/src/components/My/PostList/PostCard/index.tsx b/src/components/My/PostList/PostCard/index.tsx index ad38836..50012f3 100644 --- a/src/components/My/PostList/PostCard/index.tsx +++ b/src/components/My/PostList/PostCard/index.tsx @@ -1,8 +1,8 @@ import React from 'react'; import * as S from './style'; -import { Card } from 'types/Card'; import TagList from './TagList'; import MateList from 'components/MateList'; +import Card from 'types/Card'; const PostCard = ({ author, diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 24baa89..a16f319 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -1,7 +1,11 @@ import React, { useState } from 'react'; -import { PostList, Filter, Location, Header, Banner } from 'components'; -import { FilterIcon } from 'svg'; +import PostList from 'components/Post/PostList'; +import { Filter } from 'components/Filter'; import * as S from './style'; +import Location from 'components/Location'; +import Header from 'components/Header'; +import Banner from 'components/Banner'; +import { FilterIcon } from 'svg/index'; const Home = () => { const [modal, setModal] = useState(false); @@ -12,17 +16,19 @@ const Home = () => { - - - - setModal(true)}> - - 필터 - - {modal && setModal(false)} />} - - - + + + + + setModal(true)}> + + 필터 + + {modal && setModal(false)} />} + + + +