Merge pull request #62 from prgrms-web-devcourse-final-project/32-design/add-dog-profile-ui

🎨 Design: 강아지 프로필 기본정보 입력페이지 추가

Author: wonill

package-lock.json

@@ -0,0 +1,31 @@
+import * as S from './styles'
+import { ActionButton } from '~components/Button/ActionButton'
+import AddDogPicture from '~assets/add-dog-picture.svg'
+import TwoLineInput  from '~components/Input/TwoLineInput'
+import PrevButton from '~components/Button/PrevButton'
+import { Typo24 } from '~components/Typo/index'
+
+export default function DogProfileSection() {
+  return (
+          <S.DogProfileSection>
+            <S.PrevBtnWrapper>
+              <PrevButton />
+            </S.PrevBtnWrapper>
+            <S.TypoWrapper>
+            <Typo24 weight='700'>반려견 기본 정보를<br/> 알려주세요!</Typo24>
+            </S.TypoWrapper>
+            <S.AddDogPictureBtnWrapper>
+              <S.AddDogPictureBtn>
+                <img src={AddDogPicture} alt="반려견 사진 추가" />
+                <div>반려견 사진 추가</div>
+              </S.AddDogPictureBtn>
+            </S.AddDogPictureBtnWrapper>
+            <S.InputArea>
+              <TwoLineInput placeholder='이름 입력'>이름 입력</TwoLineInput>
+              <S.DatePickerBtn>생년월일 선택</S.DatePickerBtn>
+              <TwoLineInput placeholder='한줄 소개 입력'>한줄 소개 입력</TwoLineInput>
+            </S.InputArea>
+            <ActionButton>다음</ActionButton>
+          </S.DogProfileSection>
+  )
+}

src/assets/add-dog-picture.svg

@@ -0,0 +1,65 @@
+import { styled } from 'styled-components'
+
+export const DogProfileSection = styled.div`
+    padding : 0 20px 24px 20px;
+    background-color: ${({theme}) => theme.colors.grayscale.gc_4};
+    height: 100dvh;
+    
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+`
+
+export const PrevBtnWrapper = styled.div`
+    height: 56px;
+
+    @media (max-height: 700px) {
+        margin-bottom: 10px;
+    }
+`
+
+export const TypoWrapper = styled.div`
+    text-align: center;
+`
+
+export const AddDogPictureBtnWrapper = styled.div`
+    display: flex;
+    justify-content: center;
+`
+
+export const AddDogPictureBtn = styled.div`
+    width: 180px;
+    height: 180px;
+    background-color: ${({theme}) => theme.colors.brand.lighten_2};
+    border-radius: 50%;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    gap : 0.5rem;
+
+    font-weight : 700;
+    color: ${({theme}) => theme.colors.brand.darken};
+    cursor: pointer;
+`
+
+export const InputArea = styled.div`
+    display: flex;
+    flex-direction: column;
+
+    @media (min-height: 700px) {
+        margin-bottom: 40px;
+        gap: 0.3rem;
+    }
+`
+
+export const DatePickerBtn = styled.div`
+  width: 100%;
+  border: none;
+  text-align: center;
+  padding: 17px 32px;
+  font-size: ${({ theme }) => theme.typography._20};
+  color: ${({theme}) => theme.colors.grayscale.font_3};
+  cursor: pointer;
+`

src/pages/LoginPage/DogProfileSection/index.tsx

@@ -1,5 +1,6 @@
 import * as S from './styles'
 import { Helmet } from 'react-helmet-async'
+import DogProfileSection from './DogProfileSection'
 
 export default function LoginPage() {
   return (
@@ -8,7 +9,7 @@ export default function LoginPage() {
         <title>DDang | 로그인</title>
         <meta name='description' content='DDang 서비스 로그인' />
       </Helmet>
-      LoginPage
+      <DogProfileSection />
     </S.LoginPage>
   )
 }

src/pages/LoginPage/DogProfileSection/styles.ts

@@ -24,10 +24,6 @@ export const router = createBrowserRouter([
         path: '/log',
         element: <Pages.LogPage />,
       },
-      {
-        path: '/login',
-        element: <Pages.LoginPage />,
-      },
       {
         path: '/walk',
         element: <Pages.WalkPage />,
@@ -38,4 +34,8 @@ export const router = createBrowserRouter([
       },
     ],
   },
+  {
+    path: '/login',
+    element: <Pages.LoginPage />,
+  }
 ])