diff --git a/src/assets/icons/icon-heart3.svg b/src/assets/icons/icon-heart3.svg new file mode 100644 index 00000000..0332bcd3 --- /dev/null +++ b/src/assets/icons/icon-heart3.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/icon-save3.svg b/src/assets/icons/icon-save3.svg new file mode 100644 index 00000000..16fe64b9 --- /dev/null +++ b/src/assets/icons/icon-save3.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Common/TabA1.tsx b/src/components/Common/TabA1.tsx index e4218ad1..579673e6 100644 --- a/src/components/Common/TabA1.tsx +++ b/src/components/Common/TabA1.tsx @@ -71,7 +71,7 @@ export const TabA1 = ({ isBuyer, initState }: TabA1Props) => { if (isBuyer) { navigate('/open-consult'); } else { - navigate('/minder/consult'); + navigate('/minder/open-consult'); } }} > diff --git a/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx b/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx index ba6fd518..10d1063c 100644 --- a/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx +++ b/src/components/Seller/SellerConsult/SellerOpenConsultList.tsx @@ -4,7 +4,9 @@ import { Green, Grey1, Grey2, Grey3, Grey6, Red, White } from 'styles/color'; import { Body1, Caption1, Caption2 } from 'styles/font'; import { ReactComponent as LockIcon } from 'assets/icons/icon-lock.svg'; import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart2.svg'; -import { ReactComponent as SaveIcon } from 'assets/icons/icon-save2.svg'; +import { ReactComponent as HeartEmptyIcon } from 'assets/icons/icon-heart3.svg'; +import { ReactComponent as SaveIcon } from 'assets/icons/icon-save1.svg'; +import { ReactComponent as SaveEmptyIcon } from 'assets/icons/icon-save3.svg'; import { ReactComponent as CommentIcon } from 'assets/icons/icon-comment.svg'; import { ReactComponent as CheckIcon } from 'assets/icons/icon-check2.svg'; import { Space } from 'components/Common/Space'; @@ -68,7 +70,6 @@ function SellerOpenConsultList() { 28 - 셰어 Pick diff --git a/src/components/Seller/SellerOpenConsult/MainQuestionSection.tsx b/src/components/Seller/SellerOpenConsult/MainQuestionSection.tsx new file mode 100644 index 00000000..bfb26528 --- /dev/null +++ b/src/components/Seller/SellerOpenConsult/MainQuestionSection.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import styled from 'styled-components'; +import { Grey1, Grey2, Grey3, Grey6 } from 'styles/color'; +import { ReactComponent as LockIcon } from 'assets/icons/icon-lock.svg'; +import { ReactComponent as HeartIcon } from 'assets/icons/icon-heart1.svg'; +import { ReactComponent as SaveIcon } from 'assets/icons/icon-save2.svg'; +import { ReactComponent as HeartEmptyIcon } from 'assets/icons/icon-heart3.svg'; +import { ReactComponent as CommentIcon } from 'assets/icons/icon-comment.svg'; +import { ReactComponent as SaveEmptyIcon } from 'assets/icons/icon-save3.svg'; +import { ReactComponent as CheckIcon } from 'assets/icons/icon-check2.svg'; +import { Body1, Caption1, Caption2 } from 'styles/font'; +import { Space } from 'components/Common/Space'; +function MainQuestionSection() { + return ( + + +
+ 이거 권태기 증상 맞나요? + + + 비공개 + +
+ +
+ 요즘따라 여자친구가 먼저 만나자고 이야기도 안 하고 만나면 피곤하다고만 + 해요. 스킨십도 하려고 하지 않고 인생이 재미가 없다네요.. 그런데 + 여자친구가 다른 남자 인스타 피드에는 좋아요를 눌러요... 이거 + 여자친구가 권태기가 맞는 걸까요? 맞다면 어떻게 이야기를 꺼내면 + 좋을까요? 너무 힘듭니다.. +
+ +
+ 2024.12.13 + + 연애갈등 +
+ + + + + + 11 + + + + 0 + + + + ); +} +const MainQuestionWrapper = styled.section` + display: flex; + padding: 1.2rem 2rem; + flex-direction: column; + gap: 1.2rem; + border-bottom: 1px solid ${Grey6}; +`; + +const MainQuestionText = styled.div` + width: 100%; + position: relative; + background-color: ${Grey6}; + padding: 1.6rem; + box-sizing: border-box; + border-radius: 1.2rem; + .row2 { + align-self: flex-end; + margin-bottom: 0.4rem; + color: ${Grey1}; + font-family: Pretendard; + font-size: 1.4rem; + font-style: normal; + font-weight: 400; + line-height: 155%; + } + .row3 { + display: flex; + gap: 0.8rem; + align-items: center; + } +`; +const PrivateSign = styled.div` + display: flex; + position: absolute; + top: 1.95rem; + right: 1.6rem; +`; +const Circle = styled.div` + width: 0.2rem; + height: 0.2rem; + border-radius: 100%; + background-color: ${Grey3}; +`; + +const ButtonList = styled.div` + display: flex; + gap: 1.2rem; +`; + +const ButtonItem = styled.div` + border-radius: 0.8rem; + background: ${Grey6}; + display: flex; + padding: 0.6rem 1.2rem 0.6rem 0.6rem; + align-items: center; + gap: 0.4rem; +`; + +export default MainQuestionSection; diff --git a/src/components/Seller/SellerOpenConsult/OpenConsultHeader.tsx b/src/components/Seller/SellerOpenConsult/OpenConsultHeader.tsx new file mode 100644 index 00000000..cc3c1468 --- /dev/null +++ b/src/components/Seller/SellerOpenConsult/OpenConsultHeader.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import styled from 'styled-components'; +import { White } from 'styles/color'; +import { ReactComponent as LeftArrowIcon } from 'assets/icons/left-arrow.svg'; +import { ReactComponent as OptionIcon } from 'assets/icons/icon-option.svg'; +import { Heading } from 'styles/font'; +import { useNavigate } from 'react-router-dom'; + +function OpenConsultHeader() { + const navigate = useNavigate(); + return ( + + { + navigate('/minder'); + }} + /> + 공개상담 + + ); +} + +const OpenConsultHeaderWrapper = styled.div` + display: flex; + align-items: center; + height: 5.2rem; + box-sizing: border-box; + padding: 1.2rem 2rem; + background-color: ${White}; + justify-content: center; + position: sticky; + border-bottom: 1px solid rgba(242, 241, 248, 0.95); + top: 0; +`; + +const LeftArrow = styled(LeftArrowIcon)` + cursor: pointer; + position: absolute; + top: 1.2rem; + left: 2rem; +`; + +export default OpenConsultHeader; diff --git a/src/pages/Seller/SellerOpenConsult.tsx b/src/pages/Seller/SellerOpenConsult.tsx index 667532df..2b3af7f1 100644 --- a/src/pages/Seller/SellerOpenConsult.tsx +++ b/src/pages/Seller/SellerOpenConsult.tsx @@ -1,9 +1,15 @@ -import React from 'react' +import MainQuestionSection from 'components/Seller/SellerOpenConsult/MainQuestionSection'; +import MainQuestion from 'components/Seller/SellerOpenConsult/MainQuestionSection'; +import OpenConsultHeader from 'components/Seller/SellerOpenConsult/OpenConsultHeader'; +import React from 'react'; function SellerOpenConsult() { return ( -
SellerOpenConsult
- ) + <> + + + + ); } -export default SellerOpenConsult \ No newline at end of file +export default SellerOpenConsult;