Design: 분양신청내역 Label 수정, 그로인한 layout/MypageLayout에서 Label 부분 수정

next-petree · Sep 12, 2023 · 02f1248 · 02f1248
1 parent 87c25d0
commit 02f1248
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 12 deletions.
diff --git a/src/layout/MypageLayout.tsx b/src/layout/MypageLayout.tsx
@@ -148,22 +148,36 @@ const Gap = styled.div`
   flex: 1;
 `;
 
-MypageLayout.Label = function Label({ children }: { children: React.ReactNode }) {
-  return <LabelWrap>{children}</LabelWrap>;
+MypageLayout.Label = function Label({ subText, children }: { subText?: string; children: React.ReactNode }) {
+  return (
+    <LabelWrap>
+      <h4>{children}</h4>
+      {subText && <p className="sub-text">{subText}</p>}
+    </LabelWrap>
+  );
 };
 
-const LabelWrap = styled.h4`
-  font-size: 1.75rem;
-  font-style: normal;
-  font-family: ${({ theme }) => theme.fonts.NOTOSANSKR};
-  font-weight: 500;
-  line-height: 2.25rem;
+const LabelWrap = styled.div`
   margin-bottom: 40px;
   position: relative;
   display: flex;
+  flex-direction: column;
+  gap: 12px;
   width: 100%;
-  align-items: center;
-  justify-content: space-between;
+  h4 {
+    font-size: 1.75rem;
+    font-style: normal;
+    font-family: ${({ theme }) => theme.fonts.NOTOSANSKR};
+    font-weight: 500;
+    line-height: 2.25rem;
+  }
+  p {
+    color: #7a7a7a;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 130%;
+  }
 `;
 
 MypageLayout.Header = styled.div`

diff --git a/src/pages/mypage/adopt/index.tsx b/src/pages/mypage/adopt/index.tsx
@@ -40,7 +40,11 @@ export default function Adopt() {
     <AdoptWrapper>
       <MypageLayout>
         <MypageForm>
-          <MypageLayout.Label>{role === 'BREEDER' ? '분양신청내역' : '신청내역'}</MypageLayout.Label>
+          <MypageLayout.Label
+            subText={role === 'BREEDER' ? '' : '신청내역 > 상세보기를 클릭하면 브리더정보를 확인하실 수 있습니다.'}
+          >
+            {role === 'BREEDER' ? '분양신청내역' : '신청내역'}
+          </MypageLayout.Label>
           <MypageLayout.ContentsHeaders
             style={{
               marginBottom: '26px',
@@ -54,7 +58,7 @@ export default function Adopt() {
               size="sm"
             ></SelectOption>
             <SearchInput
-              placeholder="검색어를 입력해주세요."
+              placeholder="내역을 검색하세요"
               onSearch={(value) => {
                 onSearch(value);
               }}