Merge pull request #92 from prgrms-web-devcourse-final-project/91-des…

…ign/register-dog-page-ui

🎨 Design: 반려견등록 첫 페이지 ui

src/pages/RegisterPage/Dog/SelectSectionButton/index.tsx

@@ -0,0 +1,27 @@
+import * as S from './styles'
+import { useModalStore } from '~stores/modalStore'
+import { Typo20 } from '~components/Typo'
+import { ReactNode } from 'react'
+
+interface SelectSectionButtonProps {
+  title: string
+  description: string
+  src: string
+  modal: ReactNode
+}
+
+export default function SelectSectionButton({ title, description, src, modal }: SelectSectionButtonProps) {
+  const { pushModal } = useModalStore()
+
+  return (
+    <S.SelectSectionButton onClick={() => pushModal(modal)}>
+      <S.TypoWrapper>
+        <Typo20 weight='700'>{title}</Typo20>
+      </S.TypoWrapper>
+      <S.Desc>{description}</S.Desc>
+      <S.ImageWrapper>
+        <img src={src} alt='반려견 등록' />
+      </S.ImageWrapper>
+    </S.SelectSectionButton>
+  )
+}

src/pages/RegisterPage/Dog/SelectSectionButton/styles.ts

@@ -0,0 +1,30 @@
+import styled from 'styled-components'
+
+export const SelectSectionButton = styled.button`
+  width: 100%;
+  height: 160px;
+  padding: 20px 24px;
+  border: solid 2px ${({ theme }) => theme.colors.grayscale.gc_1};
+  border-radius: 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+
+  cursor: pointer;
+`
+
+export const TypoWrapper = styled.div`
+  text-align: start;
+  max-width: 114px;
+`
+
+export const Desc = styled.div`
+  color: ${({ theme }) => theme.colors.grayscale.font_3};
+  color: gray;
+  font-size: 13px;
+`
+
+export const ImageWrapper = styled.div`
+  margin-left: auto;
+  margin-top: auto;
+`

src/pages/RegisterPage/Dog/index.tsx

@@ -1,6 +1,11 @@
 import * as S from './styles'
 import { Helmet } from 'react-helmet-async'
+import { Typo24 } from '~components/Typo/index'
+import SelectSectionButton from './SelectSectionButton'
+import addDogProfile from '~assets/add-dog-profile.svg'
+import addFamilycode from '~assets/add-family-code.svg'
 import DogProfileSection from '~modals/RegisterDogModal/DogProfileSection'
+import FamilyCodeSection from '~modals/RegisterDogModal/FamilyCodeSection'
 
 export default function RegisterDogPage() {
   return (
@@ -9,7 +14,26 @@ export default function RegisterDogPage() {
         <title>DDang | 반려견 정보 등록</title>
         <meta name='description' content='반려견의 정보를 등록하세요.' />
       </Helmet>
-      <DogProfileSection />
+      <S.TypoWrapper>
+        <Typo24 weight='700'>
+          키우는 반려견을 등록하고
+          <br /> 즐거운 산책을 시작하세요!
+        </Typo24>
+      </S.TypoWrapper>
+      <S.ButtonWrapper>
+        <SelectSectionButton
+          title='반려견 프로필 추가하기'
+          description='반려견 프로필을 추가해보세요'
+          src={addDogProfile}
+          modal={<DogProfileSection />}
+        />
+        <SelectSectionButton
+          title='가족 반려견 등록하기'
+          description='가족 코드를 등록해보세요'
+          src={addFamilycode}
+          modal={<FamilyCodeSection />}
+        />
+      </S.ButtonWrapper>
     </S.RegisterDogPage>
   )
 }

src/pages/RegisterPage/Dog/styles.ts

@@ -1,3 +1,21 @@
 import { styled } from 'styled-components'
 
-export const RegisterDogPage = styled.div``
+export const RegisterDogPage = styled.div`
+  padding: 120px 20px 24px 20px;
+  background-color: ${({ theme }) => theme.colors.grayscale.gc_4};
+  height: 100dvh;
+
+  @media (max-height: 700px) {
+    padding: 100px 20px 24px 20px;
+  }
+`
+
+export const TypoWrapper = styled.div`
+  text-align: start;
+  margin-bottom: 40px;
+`
+
+export const ButtonWrapper = styled.div`
+  display: grid;
+  gap: 12px;
+`