diff --git a/public/svg/BirthDay.svg b/public/svg/BirthDay.svg new file mode 100644 index 00000000..ed54c032 --- /dev/null +++ b/public/svg/BirthDay.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/svg/Male.svg b/public/svg/Male.svg new file mode 100644 index 00000000..74bc6f7a --- /dev/null +++ b/public/svg/Male.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/svg/BirthDay.tsx b/src/assets/svg/BirthDay.tsx new file mode 100644 index 00000000..7dfbe662 --- /dev/null +++ b/src/assets/svg/BirthDay.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgBirthDay = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgBirthDay; diff --git a/src/assets/svg/Male.tsx b/src/assets/svg/Male.tsx new file mode 100644 index 00000000..5b35be04 --- /dev/null +++ b/src/assets/svg/Male.tsx @@ -0,0 +1,33 @@ +import * as React from "react"; +import type { SVGProps } from "react"; +const SvgMale = (props: SVGProps) => ( + + + + + + + + + +); +export default SvgMale; diff --git a/src/assets/svg/index.ts b/src/assets/svg/index.ts index c18275d1..f4937994 100644 --- a/src/assets/svg/index.ts +++ b/src/assets/svg/index.ts @@ -1,21 +1,24 @@ export { default as AppBarBack } from "./AppBarBack"; export { default as Arrow } from "./Arrow"; export { default as Auth } from "./Auth"; +export { default as BirthDay } from "./BirthDay"; +export { default as DropDown } from "./DropDown"; +export { default as Maker } from "./Maker"; +export { default as Male } from "./Male"; +export { default as ScissorsIcon } from "./ScissorsIcon"; +export { default as Star } from "./Star"; export { default as Bookmark } from "./Bookmark"; export { default as Calendar } from "./Calendar"; export { default as Camera } from "./Camera"; export { default as Check } from "./Check"; export { default as DefaultProfile } from "./DefaultProfile"; -export { default as DownArrow } from "./DownArrow"; -export { default as DropDown } from "./DropDown"; +export { default as DownArrow } from "./DownArrow" export { default as Favicon } from "./Favicon"; export { default as Home } from "./Home"; export { default as Logo } from "./Logo"; -export { default as Maker } from "./Maker"; -export { default as ScissorsIcon } from "./ScissorsIcon"; export { default as Search } from "./Search"; export { default as Smile } from "./Smile"; -export { default as Star } from "./Star"; export { default as UpArrow } from "./UpArrow"; export { default as Warning } from "./Warning"; -export { default as AddImage } from "./AddImage"; \ No newline at end of file +export { default as AddImage } from "./AddImage"; + diff --git a/src/constants/routes.ts b/src/constants/routes.ts index 78f9f82b..e546de88 100644 --- a/src/constants/routes.ts +++ b/src/constants/routes.ts @@ -11,6 +11,7 @@ export const ROUTE = { signup: '/customer/signup', // 회원가입 signupComplete: '/customer/signup-complete', // 회원가입 완료 pet: { + info: '/customer/pet/info', edit: '/customer/pet/edit', // 반려동물 정보 수정 }, }, diff --git a/src/pages/customer/pet/info/components/OptionButton.styles.ts b/src/pages/customer/pet/info/components/OptionButton.styles.ts new file mode 100644 index 00000000..789d5b78 --- /dev/null +++ b/src/pages/customer/pet/info/components/OptionButton.styles.ts @@ -0,0 +1,26 @@ +import styled from "styled-components"; +import { colors } from "../../../../../style/color"; + +export const GridWrapper = styled.div` + display: flex; + gap: 12px; + align-items: center; + margin-top: 20px; +`; + +export const ButtonStyle = styled.button<{ selected: boolean }>` + padding: 12px 24px; + width: 200px; + height: 48px; + border: 1px solid + ${({ selected }) => (selected ? `${colors.white}` : `${colors.gray300}`)}; + background-color: ${({ selected }) => (selected ? `${colors.blue100}` : `${colors.gray300}`)}; + color: ${({ selected }) => + selected ? `${colors.white}` : `${colors.gray100}`}; + border-radius: 10px; + cursor: pointer; + transition: all 0.3s; + display: flex; + align-items: center; + justify-content: center; +`; diff --git a/src/pages/customer/pet/info/components/OptionButton.tsx b/src/pages/customer/pet/info/components/OptionButton.tsx new file mode 100644 index 00000000..59209742 --- /dev/null +++ b/src/pages/customer/pet/info/components/OptionButton.tsx @@ -0,0 +1,43 @@ +import { useState } from "react"; +import { Text } from "../../../../../components/texts/Text"; +import { ButtonStyle, GridWrapper } from "./OptionButton.styles"; + +export interface OptionButtonProps { + buttonNames: string[]; + selectedIndex: number; + onSelect?: (index: number) => void; +} + +function OptionButton({ + buttonNames, + selectedIndex, + onSelect, +}: OptionButtonProps) { + const [selected, setSelected] = useState(selectedIndex); + + const handleSelect = (index: number) => { + setSelected(index); + onSelect?.(index); + }; + + return ( + + {buttonNames.map((name, index) => ( + handleSelect(index)} + > + + {name} + + + ))} + + ); +} + +export default OptionButton; diff --git a/src/pages/customer/pet/info/index.styles.ts b/src/pages/customer/pet/info/index.styles.ts new file mode 100644 index 00000000..2dd175b8 --- /dev/null +++ b/src/pages/customer/pet/info/index.styles.ts @@ -0,0 +1,42 @@ + +import { styled } from "styled-components"; +import { typography } from "../../../../style/typography"; +import { colors } from "../../../../style/color"; + +export const PageWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + padding-top: 60px; +`; + +export const ContentWrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 5px 5px; +`; + +export const ButtonWrapper = styled.div` + margin-top: 30px; + +`; + +export const MyInfoWrapper = styled.div` + display: flex; + flex-direction: row; + gap:10px; + +`; + + +export const InfoWrapper= styled.div` + width: 410px; + height: 100px; + margin-top: 19px; + background-color: ${colors.blue300}; + display: flex; + justify-content: center; + border-radius: 8px; + color: white; +`; diff --git a/src/pages/customer/pet/info/index.tsx b/src/pages/customer/pet/info/index.tsx new file mode 100644 index 00000000..c72cdb33 --- /dev/null +++ b/src/pages/customer/pet/info/index.tsx @@ -0,0 +1,76 @@ +import { AppBar, GNB, Text } from "../../../../components"; +import {InfoWrapper,PageWrapper, ContentWrapper, ButtonWrapper ,MyInfoWrapper} from "./index.styles"; +import ProfileImg from "../../../../components/profile-img/ProfileImg"; +import OptionButton from "./components/OptionButton"; +import SvgBirthDay from "../../../../assets/svg/BirthDay"; +import SvgMale from "../../../../assets/svg/Male"; + +export default function PetInfoPage() { + const handleSelect = (index: number) => { + if (index === 0) { + console.log("삭제하기 클릭"); + } else if (index === 1) { + console.log("수정하기 클릭"); + } + }; + + return ( + + + + + 태어난지 + + 4년 1개월 + + + + + + + + 꼬미 + + + + + + 말티즈 + + 3.5kg + + + + + + + 2020년 10월 07일 + + 4살 + + + + + + + 슬개골& 외이염 + 이 있어요 + + + + + + + + + ); +} diff --git a/src/router/customer/pet/index.tsx b/src/router/customer/pet/index.tsx index f7d1c0e9..aeb6e8e9 100644 --- a/src/router/customer/pet/index.tsx +++ b/src/router/customer/pet/index.tsx @@ -1,8 +1,14 @@ import PetEdit from "../../../pages/customer/pet/edit"; +import PetInfoPage from "../../../pages/customer/pet/info"; + export const petPaths = [ - { - path: "edit", - element: , - }, -]; + { + path: "edit", + element: + }, + { + path: "info", + element: + } +]