diff --git a/package-lock.json b/package-lock.json index 6096174..a4274eb 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,9 +9,8 @@ "version": "0.0.0", "dependencies": { "@types/ol": "^7.0.0", - "leaflet": "^1.9.4", - "ol": "^10.2.1", "@types/react-textarea-autosize": "^8.0.0", + "ol": "^10.2.1", "react": "^18.3.1", "react-dom": "^18.3.1", "react-helmet-async": "^2.0.5", @@ -25,7 +24,6 @@ }, "devDependencies": { "@eslint/js": "^9.13.0", - "@types/leaflet": "^1.9.14", "@types/node": "^22.9.0", "@types/react": "^18.3.1", "@types/react-dom": "^18.3.0", @@ -3744,13 +3742,6 @@ "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==", "dev": true }, - "node_modules/@types/geojson": { - "version": "7946.0.14", - "resolved": "https://registry.npmjs.org/@types/geojson/-/geojson-7946.0.14.tgz", - "integrity": "sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==", - "dev": true, - "license": "MIT" - }, "node_modules/@types/hoist-non-react-statics": { "version": "3.3.5", "resolved": "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.5.tgz", @@ -3761,16 +3752,6 @@ "hoist-non-react-statics": "^3.3.0" } }, - "node_modules/@types/leaflet": { - "version": "1.9.14", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.14.tgz", - "integrity": "sha512-sx2q6MDJaajwhKeVgPSvqXd8rhNJSTA3tMidQGduZn9S6WBYxDkCpSpV5xXEmSg7Cgdk/5vJGhVF1kMYLzauBg==", - "dev": true, - "license": "MIT", - "dependencies": { - "@types/geojson": "*" - } - }, "node_modules/@types/node": { "version": "22.9.0", "resolved": "https://registry.npmjs.org/@types/node/-/node-22.9.0.tgz", @@ -7318,12 +7299,6 @@ "integrity": "sha512-Y+60/zizpJ3HRH8DCss+q95yr6145JXZo46OTpFvDZWLfRCE4qChOyk1b26nMaNpfHHgxagk9dXT5OP0Tfe+dQ==", "dev": true }, - "node_modules/leaflet": { - "version": "1.9.4", - "resolved": "https://registry.npmjs.org/leaflet/-/leaflet-1.9.4.tgz", - "integrity": "sha512-nxS1ynzJOmOlHp+iL3FyWqK89GtNL8U8rvlMOsQdTTssxZwCXh8N2NB3GDQOL+YR3XnWyZAxwQixURb+FA74PA==", - "license": "BSD-2-Clause" - }, "node_modules/lerc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz", diff --git a/src/assets/add-dog-picture.svg b/src/assets/add-dog-picture.svg new file mode 100644 index 0000000..933b3c9 --- /dev/null +++ b/src/assets/add-dog-picture.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/pages/LoginPage/DogProfileSection/index.tsx b/src/pages/LoginPage/DogProfileSection/index.tsx new file mode 100644 index 0000000..597bc23 --- /dev/null +++ b/src/pages/LoginPage/DogProfileSection/index.tsx @@ -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 ( + + + + + + 반려견 기본 정보를
알려주세요! + + + + 반려견 사진 추가 +
반려견 사진 추가
+ + + + 이름 입력 + 생년월일 선택 + 한줄 소개 입력 + + 다음 + + ) +} diff --git a/src/pages/LoginPage/DogProfileSection/styles.ts b/src/pages/LoginPage/DogProfileSection/styles.ts new file mode 100644 index 0000000..4868903 --- /dev/null +++ b/src/pages/LoginPage/DogProfileSection/styles.ts @@ -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; +` \ No newline at end of file diff --git a/src/pages/LoginPage/index.tsx b/src/pages/LoginPage/index.tsx index ef8048b..51cd2bc 100644 --- a/src/pages/LoginPage/index.tsx +++ b/src/pages/LoginPage/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() { DDang | 로그인 - LoginPage + ) } diff --git a/src/router.tsx b/src/router.tsx index 60ad5a6..5a21574 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -24,10 +24,6 @@ export const router = createBrowserRouter([ path: '/log', element: , }, - { - path: '/login', - element: , - }, { path: '/walk', element: , @@ -38,4 +34,8 @@ export const router = createBrowserRouter([ }, ], }, + { + path: '/login', + element: , + } ])