diff --git a/public/images/myPage/bag.svg b/public/images/myPage/bag.svg new file mode 100644 index 0000000..4b570ae --- /dev/null +++ b/public/images/myPage/bag.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/public/images/myPage/coupon.svg b/public/images/myPage/coupon.svg new file mode 100644 index 0000000..2f4c784 --- /dev/null +++ b/public/images/myPage/coupon.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/public/images/myPage/missing.svg b/public/images/myPage/missing.svg new file mode 100644 index 0000000..2035e54 --- /dev/null +++ b/public/images/myPage/missing.svg @@ -0,0 +1,30 @@ + + + + + + + + + + \ No newline at end of file diff --git a/public/images/myPage/point.svg b/public/images/myPage/point.svg new file mode 100644 index 0000000..8bf38e0 --- /dev/null +++ b/public/images/myPage/point.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/images/myPage/review.svg b/public/images/myPage/review.svg new file mode 100644 index 0000000..593cdd2 --- /dev/null +++ b/public/images/myPage/review.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/Router.jsx b/src/Router.jsx index f6110bc..b614bef 100644 --- a/src/Router.jsx +++ b/src/Router.jsx @@ -3,34 +3,42 @@ import MainPage from './pages/MainPage/MainPage.jsx'; import Nav from './components/common/Nav.jsx'; import Footer from './components/common/Footer'; import ScrollTop from './components/common/ScrollTop.jsx'; -<<<<<<< Updated upstream import LoginPage from './pages/LoginPage/LoginPage.jsx'; -======= import PGpay from './pages/PaymentPage/PGpay.jsx'; import Payment from './pages/PaymentPage/Payment.jsx'; import PaymentEnd from './pages/PaymentPage/PaymentEnd.jsx'; ->>>>>>> Stashed changes import PetItemPage from './pages/PetItemPage/PetItemPage.jsx'; import PetItemListPage from './pages/PetItemPage/PetItemListPage.jsx'; import PetItemDetailPage from './pages/PetItemPage/PetItemDetailPage.jsx'; +import UserRegisterPage from './pages/RegisterPage/UserRegisterPage.jsx'; +import PetEditPage from './pages/MyPage/PetEditPage.jsx'; +import UserEditPage from './pages/MyPage/UserEditPage.jsx'; +import MyPage from './pages/MyPage/MyPage.jsx'; +import RegisterMissingSavePage from './pages/MyPage/RegisterMissingSavePage.jsx'; +import RegisterMissing from './pages/MyPage/RegisterMissing.jsx'; +import PetRegisterPage from './pages/RegisterPage/PetRegisterPage.jsx'; function Router() { return (
- {/*
@@ -38,3 +46,4 @@ function Router() { } export default Router; + diff --git a/src/components/Register/SelectBox.jsx b/src/components/Register/SelectBox.jsx new file mode 100644 index 0000000..6a1bf2c --- /dev/null +++ b/src/components/Register/SelectBox.jsx @@ -0,0 +1,53 @@ +import React from 'react'; +import styled from 'styled-components'; +import { MdKeyboardArrowDown } from "react-icons/md"; + +const SelectContainer = styled.div` + position: relative; + width: 100%; +`; + +const StyledSelect = styled.select` + width: 100%; + padding: 13px 30px 13px 13px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; + appearance: none; + margin-bottom: 8px; + background-color: white; + cursor: pointer; + + &:focus { + border-color: #E4E4E4; + outline: none; + } +`; + +const ArrowIcon = styled(MdKeyboardArrowDown)` + position: absolute; + right: 10px; + top: 40%; + transform: translateY(-50%); + pointer-events: none; +`; + +const SelectBox = ({ options, value, onChange, placeholder, required }) => { + return ( + + + + {options.map((option) => ( + + ))} + + + + ); +}; + +export default SelectBox; diff --git a/src/components/Register/UploadImg.jsx b/src/components/Register/UploadImg.jsx new file mode 100644 index 0000000..049590d --- /dev/null +++ b/src/components/Register/UploadImg.jsx @@ -0,0 +1,80 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; + +const Container = styled.div` + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin-bottom: 10px; +`; + +const InputFile = styled.label` + display: inline-block; + padding: 10px 20px; + background-color: #FFEFEF; + align-items: center; + color: #FF6E00; + border-radius: 20px; + cursor: pointer; + font-size: 10px; + font-weight: bold; + transition: background-color 0.3s; + margin-top : -15px; + + &:hover { + background-color: #FFD3D3; + } +`; + +const HiddenInput = styled.input` + display: none; +`; + +const ImageBox = styled.div` + margin-top: 10px; + padding: 4px; + display: flex; + justify-content: center; +`; + +const UploadImg = ({ imgPath, setImgPath }) => { + + const addImage = (e) => { + const files = e.target.files; + if (files.length > 0) { + const newPath = [URL.createObjectURL(files[0])]; + setImgPath(newPath); + } + }; + + return ( + + + {imgPath.length > 0 && ( + 애완동물 사진 + )} + + + 등록 + + + + ); +}; + +export default UploadImg; diff --git a/src/pages/MyPage/MyPage.jsx b/src/pages/MyPage/MyPage.jsx new file mode 100644 index 0000000..ce13149 --- /dev/null +++ b/src/pages/MyPage/MyPage.jsx @@ -0,0 +1,444 @@ +import React from 'react' +import { RxAvatar } from "react-icons/rx"; +import { FaCircleUser } from "react-icons/fa6"; +import { MdOutlineKeyboardArrowRight } from "react-icons/md"; +import styled from "styled-components"; +import { useNavigate } from 'react-router-dom'; +import { images } from '../../components/Images'; + +const ScrollableContainer = styled.div` + max-height: 100%; + border: 1px solid #ddd; + margin: 64px 0; +`; + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: 100%; +`; + +const SubContainer = styled.div` + display: flex; + width: 100%; + height: 100%; + flex-direction: column; + background-color: #F5F5F5; + padding: 15px; + box-sizing: border-box; +`; + +const MainContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; +`; + +const StyledAvatar = styled(RxAvatar)` + font-size: 24px; + color: #FF6E00; + width: 64px; + height: 64px; + margin-top: 36px; + margin-left: 30px; + margin-bottom: 21px; +`; + +const UserInfo = styled.div` + display: flex; + align-items: center; + font-size: 16px; + font-weight: bold; + margin-top: 12px; + margin-left: 20px; +`; + +//두번째 section + +const PetProfile = styled.div` + width: 100%; + height: auto; + display: flex; + flex-direction: column; //아래로 + margin-bottom: 8px; + background-color: #FFFFFF; + border: 1px solid #ddd; + border-radius: 5px; + padding: 16px; + box-sizing: border-box; +`; + +const PetProfileContainer = styled.div` + display: flex; + flex-direction: column; + margin-top: 5px; + margin-left: 5px; +`; + +const PetInfoFirstRow = styled.div` + display: flex; + flex-direction: row; +`; + +const PetInfo = styled.span` + font-size: 13px; + font-weight: bold; + display: flex; + flex-direction: column; + color:black; +` + +const PetInfoSecondRow = styled.div` + display: flex; + flex-direction: row; + margin-top: 5px; +`; + +const PetDetailInfo = styled.div` + display: flex; + flex-direction: column; + margin-left: 30px; + margin-bottom: 17px; + margin-top: 22px; +` + +const PetProfileEditButton = styled.button` + width: 67px; + height: 22px; + margin-left: 153px; + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 20px; + cursor: pointer; + font-size: 8px; + font-weight: bold; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } +`; +const ActivePet = styled.p` + font-size: 10px; + font-weight: 500; + margin-bottom: 5px; + color: #FF6E00; +` +const ActivePetName = styled.p` + font-size: 12px; + font-weight: bold; + color: black; + margin-bottom: 8px; +` +const ActivePetType = styled.p` + font-size: 8px; + font-weight:light; + line-height: 11px; + color: #A9A9A9; +` + +const StyledFaCircleUser = styled(FaCircleUser)` + width: 61px; + height: 61px; + margin-top: 19px; +`; + +const PetButtonContainer = styled.div` + display: flex; + flex-direction: row; + align-items: center; + text-align: center; + margin-top: 10px; +`; + +const RegisterMissing = styled.button` + font-size: 10px; + margin-left: 60px; + margin-right:110px; + + &:hover { + color: #FF6E00; + } +` +const AddPetButton = styled.button` + font-size: 10px; + + &:hover { + color: #FF6E00; + } +` + + +//세번째 section + +const OrderContainer = styled.div` + display: flex; + flex-direction: row; + width: 100%; + height: auto; + padding: 16px; + justify-content: space-between; + background-color: #FFFFFF; + border: 1px solid #ddd; + border-radius: 5px; +` + +const OrderIconContainer = styled.div` + display: flex; + flex-direction: column; + font-size: 9px; + margin-left: 10px; + color:#818181; +` + +const OrderBagImage = styled.img` + width: 20px; + height: 20px; + margin-left: 5px; + margin-bottom: 5px; + margin-top: 10px; +` + +const OrderReviewImage = styled.img` + width: 20px; + height: 20px; + margin-left: 5px; + margin-bottom: 5px; + margin-top: 10px; +` + +const OrderPointImage = styled.img` + width: 20px; + height: 20px; + margin-left:2px; + margin-bottom: 5px; + margin-top: 10px; +` + +const OrderCouponImage = styled.img` + width: 20px; + height: 20px; + margin-right: 16px; + margin-bottom: 5px; + margin-top: 10px; +` +const Coupon = styled.span` + display: flex; + flex-direction: column; + font-size: 9px; + margin-left: 2px; + color:#818181; +` + +const UserActiveInfo = styled.div` + display: flex; + flex-direction: column; + width: 100%; + height: auto; + background-color: white; + border: 1px solid #ddd; + border-radius: 5px; + padding: 20px; + font-size: 9px; + margin-top: 18px; +`//집사활동 + +const ActivityText = styled.p` + font-size: 9px; + font-weight: normal; + color: #000; + margin-left: 6px; + margin-top:1px; +`; + +const UserActiveList = styled.div` + display: flex; + flex-direction: row; + margin-bottom: 10px; + margin-top: 11px; +` + +const StyledImage = styled.img` + width: 13px; + height: 13px; + margin-right: 8px; +`; + +const MissingInfo = styled.div` + width: 100%; + height: 81px; + background-color: white; + border: 1px solid #ddd; + border-radius: 5px; + padding: 18px; + margin-top: 18px; +`//실종현황 + +const MissingHeader = styled.div` + display: flex; + flex-direction: row; + margin-bottom: 10px; + font-size: 14px; + font-weight: bold; +` + +const StyledArrowRight = styled(MdOutlineKeyboardArrowRight)` + margin-left: 5px; + margin-top:1px; + color: #8D8D8D; +`; + +const MissingDetail = styled.div` + display: flex; + flex-direction:row; + font-size: 9px; + margin-top: 13px; +` +const MissingIcon = styled.img` + width: 10px; + height: 10px; + margin-left: 10px; + margin-right: 4px; +`; + +const EditButton = styled.button` + width: 67px; + height: 22px; + margin-left: 20px; + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 20px; + cursor: pointer; + font-size: 8px; + font-weight: bold; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } +`; + +function MyPage() { + const navigate = useNavigate(); + + return ( + + + + + + 고양이가 세상을 구한다 + navigate('/editUserRegister')}>수정 + + + + + + + + 우리응애 프로필 + navigate('/editPetRegister')}>수정 + + + + + + 현재 활동하는 응애 + 환타 + 세상에 하나뿐인 코숏
6년 1개월 | 4k + + + + + navigate('/missingRegister')}> + 실종등록 + + navigate('/petRegister')}> + 응애추가 + + + {/*버튼 부분만 수정하면 될 것 같은데 ,,, */} + + + + + + 주문내역 + + + + 구매후기 + + + + 포인트 + + + + 쿠폰 + + + + + +

집사생활

+ + + + + 내 활동 + + + + 보관 게시글 + + + + 임시저장 게시글 + + + + 알림 목록 + + + + 숨긴 게시글 + + + + 차단 목록 + + + + + +

실종현황

+ + + + 확인하기 + + + + + +

산책

+ + + + 산책일지 + + + + + + + ) +} + +export default MyPage; diff --git a/src/pages/MyPage/PetEditPage.jsx b/src/pages/MyPage/PetEditPage.jsx new file mode 100644 index 0000000..c9fbc03 --- /dev/null +++ b/src/pages/MyPage/PetEditPage.jsx @@ -0,0 +1,241 @@ +import React, { useState } from 'react'; +import styled from "styled-components"; +import { useNavigate } from 'react-router-dom'; +import SelectBox from '../../components/Register/SelectBox'; +import UploadImg from '../../components/Register/UploadImg'; + +const ScrollableContainer = styled.div` + max-height: 100%; + border: 1px solid #ddd; + margin: 64px 0; +`; // 스크롤 + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 90%; + margin-top: 5%; + margin-left: 5%; +`; // 전체 컨테이너 + +const Label = styled.label` + font-size: 10px; + color: #B3B3B3; + margin-bottom: 5px; + margin-top: 8px; +`; // 각 폼 위에 설명 label + +const StyledInput = styled.input` + padding: 13px; + margin-bottom: 8px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; +`; // 폼 input + +const SelectButtonContainer = styled.div` + display: flex; + gap: 8px; + margin-bottom: 8px; +`; // 버튼 선택 컨테이너 + +const SelectButton = styled.button` + color: ${({ selected }) => (selected ? 'white' : 'black')}; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 172px; + height: 40px; + text-align: center; + border-radius: 5px; + background-color: ${({ selected }) => (selected ? '#FF6E00' : 'white')}; + cursor: pointer; + font-size: 11px; + font-weight: 500; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 버튼 + +const RegisterButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 335px; + height: 43px; + text-align: center; + border-radius: 8px; + margin-top: 10px; + margin-bottom: 20px; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 마지막 등록 버튼 + +const PetEditPage = () => { + const navigate = useNavigate(); + const [imgPath, setImgPath] = useState([]); //이미지 + const [selectedGender, setSelectedGender] = useState(null); // 성별 + const [isAllergic, setIsAllergic] = useState(null); // 알러지 여부 + const [weight, setWeight] = useState(''); // 몸무게 + + const [selectCatList, setSelectCatList] = useState(null); // 고양이 리스트 + const [selectDogList, setSelectDogList] = useState(null); // 강아지 리스트 + + const handleGenderClick = (gender) => { + setSelectedGender(gender); + }; + + const handleNeuteredClick = (value) => { + setIsNeutered(value); + }; + + const handleAllergicClick = (value) => { + setIsAllergic(value); + }; + + const handleCatChange = (e) => { + setSelectCatList(e.target.value); + }; + + const handleDogChange = (e) => { + setSelectDogList(e.target.value); + }; + + const handleWeightChange = (e) => { + const value = e.target.value; + + if (/^\d*\.?\d*$/.test(value)) { + setWeight(value); + } + }; + + const CatList = [ + { value: 'korean', label: '세상에 하나뿐인 코숏' }, + { value: 'russian-blue', label: '러시안 블루' }, + { value: 'persian', label: '페르시안' }, + { value: 'siamese', label: '샴' }, + { value: 'turkish-angora', label: '터키쉬 앙고라' }, + { value: 'abyssinian', label: '아비시니안' }, + { value: 'american-shorthair', label: '아메리칸 숏헤어' }, + { value: 'norwegian-forest', label: '노르웨이 숲' }, + { value: 'ragdoll', label: '랙돌' }, + { value: 'scottish-fold', label: '스코티시 폴드' }, + { value: 'bengal', label: '뱅갈' }, + { value: 'maine-coon', label: '메인 쿤' }, + { value: 'sphynx', label: '스핑크스' }, + { value: 'british-shorthair', label: '브리티쉬 숏헤어' }, + ]; + + const DogList = [ + { value: 'korean-jindo', label: '진돗개' }, + { value: 'golden-retriever', label: '골든 리트리버' }, + { value: 'labrador-retriever', label: '래브라도 리트리버' }, + { value: 'poodle', label: '푸들' }, + { value: 'bulldog', label: '불독' }, + { value: 'beagle', label: '비글' }, + { value: 'shih-tzu', label: '시츄' }, + { value: 'pomeranian', label: '포메라니안' }, + { value: 'dachshund', label: '닥스훈트' }, + { value: 'corgi', label: '웰시 코기' }, + { value: 'chihuahua', label: '치와와' }, + { value: 'siberian-husky', label: '시베리안 허스키' }, + { value: 'shiba-inu', label: '시바견' }, + { value: 'samoyed', label: '사모예드' }, + { value: 'yorkshire-terrier', label: '요크셔 테리어' }, + { value: 'maltese', label: '말티즈' }, + { value: 'bichon-frise', label: '비숑 프리제' }, + { value: 'border-collie', label: '보더 콜리' }, + { value: 'pug', label: '퍼그' }, + { value: 'rottweiler', label: '로트와일러' }, + { value: 'boxer', label: '복서' }, + { value: 'maltipoo', label: '말티푸' }, + { value: 'unique-mix', label: '세상에 하나뿐인 믹스' }, + ]; + //처음에 반려동물 정보를 그대로 가지고 오기 , 애완동물 정보 삭제 견종/묘종 선택 disabled + return ( + + + + + + + + <> + + + + <> + + + + + + + + + + handleGenderClick('남아')}> + 남아 + + handleGenderClick('여아')}> + 여아 + + + + + + + + + handleAllergicClick('네')}> + 네 + + handleAllergicClick('아니요')}> + 아니요 + + + + { + alert("저장 되었습니다"); + navigate('/mypage'); + }} >저장하기 + + + + ); +}; + +export default PetEditPage; diff --git a/src/pages/MyPage/RegisterMissing.jsx b/src/pages/MyPage/RegisterMissing.jsx new file mode 100644 index 0000000..9f26435 --- /dev/null +++ b/src/pages/MyPage/RegisterMissing.jsx @@ -0,0 +1,232 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { useNavigate } from 'react-router-dom'; + +const ScrollableContainer = styled.div` + max-height: 100%; + border: 1px solid #ddd; + margin: 64px 0; +`; // 스크롤 + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 90%; + margin-top: 5%; + margin-left: 5%; + overflow-y: auto; +`; // 전체 컨테이너 + +const MapContainer = styled.div` + width: 100%; + height: 250px; + margin-bottom: 30px; + border: 1px solid #ddd; +`; // 지도 + +const LocationContainer = styled.div` + display: flex; + flex-direction: row; +`; + +const SubTitle = styled.label` + font-size: 15px; + font-weight: bold; + margin-bottom: 10px; + flex-grow: 1; + margin-top: 5px; +`; + +const InputContainer = styled.div` + position: relative; + display: flex; + align-items: center; + margin-bottom: 8px; +`; + +const StyledInput = styled.input` + width: 100%; + padding: 10px 110px 10px 10px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; + margin-bottom: 10px; +`; // 폼 input + +const AddressContainer = styled.div` + display: flex; + position: relative; + flex-direction: column; + margin-bottom: 10px; +`; + +const DateContainer = styled.div` + display: flex; + flex-direction: column; + margin-bottom: 10px; +`; + +const EditButton = styled.button` + position: absolute; + right: 10px; + top: 40%; + transform: translateY(-50%); + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 8px; + cursor: pointer; + font-size: 10px; + font-weight: 500; + width: 61px; + height: 22px; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } +`; // 수정버튼 + +const ImageContainer = styled.input` + width: 125px; + height: 125px; + border: 1px solid #E4E4E4; + border-radius: 8px; +`; + +const StyledTextarea = styled.textarea` + width: 100%; + padding: 10px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; + resize: none; + height: 100px; +`; + +const RegisterButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 328px; + height: 43px; + text-align: center; + border-radius: 8px; + margin-top: 10px; + margin-bottom: 20px; + margin-left: 4px; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 마지막 저장 버튼 + +const RegisterMissing = () => { + const navigate = useNavigate(); + const [date, setDate] = useState(''); + const [phone, setPhone] = useState(''); + + const handleDateChange = (e) => { + const value = e.target.value.replace(/[^0-9]/g, ''); + let formattedValue = ''; + + if (value.length > 4) { + formattedValue += value.substring(0, 4); // 연도 + formattedValue += '-'; + if (value.length > 6) { + formattedValue += value.substring(4, 6); // 월 + formattedValue += '-'; + formattedValue += value.substring(6, 8); // 일 + } else if (value.length > 4) { + formattedValue += value.substring(4, 6); // 월 + } + } else { + formattedValue += value; // 연도 + } + + setDate(formattedValue); + }; + + const handlePhoneChange = (e) => { + const value = e.target.value.replace(/[^0-9]/g, ''); // 숫자만 허용 + if (value.length <= 11) { // 최대 11자리로 제한 + setPhone(value); + } + }; + + return ( + + + + + 실종된 위치 + + + 수정 + + + + + 실종된 날짜 + + + + + + + 아이 이름 + + + 수정 + + + + + 휴대폰 번호 + + + 수정 + + + + + 사진 등록 + + + + + 아이 특징 + + + + + + { + alert("저장 되었습니다"); + navigate('/missingSave'); + }} + > + 저장하기 + + + + ); +}; + +export default RegisterMissing; diff --git a/src/pages/MyPage/RegisterMissingSavePage.jsx b/src/pages/MyPage/RegisterMissingSavePage.jsx new file mode 100644 index 0000000..c3aaaaf --- /dev/null +++ b/src/pages/MyPage/RegisterMissingSavePage.jsx @@ -0,0 +1,103 @@ +import React from 'react' +import styled from "styled-components"; + +const ScrollableContainer = styled.div` + max-height: 100%; + overflow-y: auto; + border: 1px solid #ddd; + margin: 64px 0; +`; // 스크롤 + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 90%; + margin-top: 30%; + margin-left: 5%; + overflow-y: auto; +`; // 전체 컨테이너 + +const MentionContainer = styled.div` + text-align: center; + margin-bottom: 50px; +`; + +const SaveMention = styled.div` + font-weight: bold; + font-size: 15px; + margin-bottom: 30px; + text-align: center; +`; + +const SaveConfirm = styled.span` + font-size: 17px; + font-weight: bold; + word-break: keep-all; + color: #FF6E00; + line-height: 1.7; +`; + +const MentionBox = styled.div` + display: flex; + flex-direction: column; + border-radius:5px; + height: 250px; + margin-bottom: 20%; + text-align: center; + padding-top:30px; + padding:20px; + background-color: #F5F5F5; +`; + +const Recommendation = styled.div` + font-size:15px; + font-weight:bold; + margin-bottom: 30px; +` + +const RecommendationDescription = styled.div` + font-size: 12px; + font-weight: normal; + text-align: center; + line-height: 1.4; + word-break: keep-all; + margin-bottom: 30px; +` + +const AlertRecommendation = styled.span` + font-size: 10px; + font-weight: bold; + color: #FF0000; +` + +const RegisterMissingSavePage = () => { + return ( + + + + + 정보가 저장되었습니다.
+ + + 아이가 빠르게 가족의 품으로 돌아갈 수 있도록 + 발바닥천국이 최선을 다하겠습니다. + + + + + 추천 + + + 다른 견주가 내가 강아지를 잃어버린 위치 주변에 있을 때, 알림을 보내드려요. 알림을 받은 견주는 해당 위치를 주의 깊게 살펴보게 됩니다.

+ 아이를 발견하면, 즉시 강아지가 세상을 지배한다님에게 발견 알림이 갑니다. + + + 알림을 켜두는 것을 추천드려요 + + + + + ) +} + +export default RegisterMissingSavePage diff --git a/src/pages/MyPage/UserEditPage.jsx b/src/pages/MyPage/UserEditPage.jsx new file mode 100644 index 0000000..f6a41b9 --- /dev/null +++ b/src/pages/MyPage/UserEditPage.jsx @@ -0,0 +1,339 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { images } from '../../components/Images'; +import { HiOutlineBellAlert } from "react-icons/hi2"; + +const ScrollableContainer = styled.div` + max-height: 100%; + border: 1px solid #ddd; + margin: 64px 0; +`; //스크롤 + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 90%; + margin-left: 5%; +`; // 전체 컨테이너 + +const Description = styled.label` + font-size: 13px; + font-weight: 570; + line-height: 1.7; + margin-bottom: 15px; + margin-top: 5%; + word-break: keep-all; +`; // 사용자 인사 + +const WelcomeContainer = styled.div` + margin-bottom: 20px; + margin-top: 10px; +`; + +const WelcomeComment = styled.span` + color: black; +` + +const FirstComment = styled.span` + color: #FF6E00; +` + +const HightLight = styled.span` + color: #FF6E00; +`; // 사용자 인사 중 하이라이트 + + +const Label = styled.label` + font-size: 10px; + color: #B3B3B3; + margin-bottom: 10px; + margin-top: 5px; +`; // 각 폼 레이블 + +const KakaoEmail = styled.input` + padding: 13px 13px; + margin-bottom: 8px; + border: 1px solid #818181; + border-radius: 5px; + font-size: 11px; + background-color: #EEEEEE; + width: 100%; +`; //이메일 부분 disabled + +const Icon = styled.img` + position: absolute; + top: 40%; + left: 300px; + transform: translateY(-8px); + width: 20px; + height: 20px; +`; //카카오 아이콘 + +const InputContainer = styled.div` + position: relative; + width: 100%; + margin-bottom: 8px; +`; // 입력하는 폼 전체 컨테이너 + +const StyledInput = styled.input` + padding: 13px 50px 13px 13px; + width: 100%; + margin-top: 4px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; +`; //입력 폼 + +const ConfirmNicknameButton = styled.button` + position: absolute; + width: 64px; + height: 20px; + top: 50%; + right: 10px; + transform: translateY(-50%); + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 8px; + font-weight: bold; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } //닉네임 중복확인 +`; + +const SearchAddressButton = styled.button` + position: absolute; + width: 64px; + height: 20px; + top: 7%; + right: 10px; + transform: translateY(-50%); + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 8px; + font-weight: bold; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } +`; //주소검색 + +const Divider = styled.div` + background-color: #F7F7F7; + margin-top:16px; + width:100%; + height: 20px; +`; //구분선 + +const SubTitle = styled.label` + font-size: 15px; + font-weight: bold; + margin-bottom: 20px; + flex-grow: 1; +`; //앱푸시알림 + +const StyledBellAlert = styled(HiOutlineBellAlert)` + font-size: 16px; + color: #FF6E00; + position: absolute; + transform: translateY(2%); + margin-left: 5px; + margin-top: 1px; +`; //알람 아이콘 + +const SubTitleList = styled.label` + font-size: 13px; + font-weight: bold; + margin-bottom: 8px; +`; //각 알람 제목 + +const DescriptionContainer = styled.div` + display: flex; + flex-direction: row; +`; //설명 컨테이너 + +const SubDescription = styled.label` + font-size: 10px; + font-weight: light; + color:#8D8D8D; + margin-bottom: 10px; +`; //각 알람 설명 + +const AlertAgreementDescription = styled.div` + margin-top: 10px; + font-size: 8px; + color: #FF6E00; +`; + +const SubContainer = styled.div` + display: flex; + flex-direction: column; + margin-bottom: 10px; +`; + +const SubDescriptionContainer = styled.div` + display: flex; + flex-direction: column; + margin-top: 5px; +`; + + +const ToggleContainer = styled.div` + position: relative; + cursor: pointer; + margin-bottom:10px; + + > .toggle-container { + width: 50px; + height: 24px; + border-radius: 30px; + background-color: rgb(233,233,234); + transition: background-color 0.5s; + } + + > .toggle--checked { + background-color: #FF6E00; + } + + > .toggle-circle { + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: rgb(255,254,255); + transition: left 0.5s; + } + + > .toggle--checked { + left: 27px; + } +`; //토글 버튼 + +const AlarmAgreementContainer = styled.div` + display: flex; + align-items: center; + position: relative; + width: 100%; + margin-top: 7%; + margin-bottom: 8px; +`; + +const RegisterButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 330px; + height: 43px; + text-align: center; + border-radius: 8px; + margin-bottom: 20px; + margin-left: 20px; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 저장버튼 + +const UserEditPage = () => { + const [toggleStates, setToggleStates] = useState([false, false, false]); + + const toggleHandler = (index) => { + const newToggleStates = [...toggleStates]; + newToggleStates[index] = !newToggleStates[index]; + setToggleStates(newToggleStates); + }; + + return ( + + + + 안녕하세요 고양이가 세상을 구한다님🥳 + 발바닥 천국과🐾 당신과 반려동물의 발걸음이 더 행복해지도록 정보를 등록해 보세요. + + + + + + + + + + + 중복확인 + + + + + 주소검색 + + + + + + + + + + 앱 푸시 알림 + + + + + 우리응애 건강관리 + + 예방접종일과 병원 정보를 빠르게 받아보세요! + + + + + 집사 생활 + + + 내가 작성한 글의 댓글을 빠르게 확인하세요! + + + + + + + 실종 알림 + + 다른 아이의 등록된 실종 위치 근처에 도착하면 알림을 보내드려요 + 가족의 품으로 가는 길, 도와주시면 감사하겠습니다* + + + + toggleHandler(0)}> +
+
+ + toggleHandler(1)}> +
+
+ + toggleHandler(2)}> +
+
+ + + + 저장하기 + + ); +}; + +export default UserEditPage; \ No newline at end of file diff --git a/src/pages/RegisterPage/PetRegisterPage.jsx b/src/pages/RegisterPage/PetRegisterPage.jsx new file mode 100644 index 0000000..9468b21 --- /dev/null +++ b/src/pages/RegisterPage/PetRegisterPage.jsx @@ -0,0 +1,279 @@ +import React, { useState } from 'react'; +import styled from "styled-components"; +import { useNavigate } from 'react-router-dom'; +import SelectBox from '../../components/Register/SelectBox'; +import UploadImg from '../../components/Register/UploadImg'; + +const ScrollableContainer = styled.div` + max-height: 100%; + border: 1px solid #ddd; + margin: 64px 0; +`; // 스크롤 + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 90%; + margin-top: 5%; + margin-left: 5%; +`; // 전체 컨테이너 + + +const Label = styled.label` + font-size: 10px; + color: #B3B3B3; + margin-bottom: 5px; + margin-top: 8px; +`; // 각 폼 위에 설명 label + +const StyledInput = styled.input` + padding: 13px; + margin-bottom: 8px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; +`; // 폼 input + +const SelectButtonContainer = styled.div` + display: flex; + gap: 8px; + margin-bottom: 8px; +`; // 버튼 선택 컨테이너 + +const SelectButton = styled.button` + color: ${({ selected }) => (selected ? 'white' : 'black')}; + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 172px; + height: 40px; + text-align: center; + border-radius: 5px; + background-color: ${({ selected }) => (selected ? '#FF6E00' : 'white')}; + cursor: pointer; + font-size: 11px; + font-weight: 500; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 버튼 + +const RegisterButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 335px; + height: 43px; + text-align: center; + border-radius: 8px; + margin-top: 10px; + margin-bottom: 20px; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 마지막 등록 버튼 + +const PetRegisterPage = () => { + const navigate = useNavigate(); + const [imgPath, setImgPath] = useState([]); //이미지 + const [selectedPetType, setSelectedPetType] = useState(''); // 고양이 or 강아지 + const [selectedGender, setSelectedGender] = useState(null); // 성별 + const [isNeutered, setIsNeutered] = useState(null); // 중성화 + const [isAllergic, setIsAllergic] = useState(null); // 알러지 여부 + const [weight, setWeight] = useState(''); // 몸무게 + + const [selectCatList, setSelectCatList] = useState(null); // 고양이 리스트 + const [selectDogList, setSelectDogList] = useState(null); // 강아지 리스트 + + const handlePetTypeClick = (value) => { + setSelectedPetType(value); + } + + const handleGenderClick = (gender) => { + setSelectedGender(gender); + }; + + const handleNeuteredClick = (value) => { + setIsNeutered(value); + }; + + const handleAllergicClick = (value) => { + setIsAllergic(value); + }; + + const handleCatChange = (e) => { + setSelectCatList(e.target.value); + }; + + const handleDogChange = (e) => { + setSelectDogList(e.target.value); + }; + + const handleWeightChange = (e) => { + const value = e.target.value; + + if (/^\d*\.?\d*$/.test(value)) { + setWeight(value); + } + }; + + const CatList = [ + { value: 'korean', label: '세상에 하나뿐인 코숏' }, + { value: 'russian-blue', label: '러시안 블루' }, + { value: 'persian', label: '페르시안' }, + { value: 'siamese', label: '샴' }, + { value: 'turkish-angora', label: '터키쉬 앙고라' }, + { value: 'abyssinian', label: '아비시니안' }, + { value: 'american-shorthair', label: '아메리칸 숏헤어' }, + { value: 'norwegian-forest', label: '노르웨이 숲' }, + { value: 'ragdoll', label: '랙돌' }, + { value: 'scottish-fold', label: '스코티시 폴드' }, + { value: 'bengal', label: '뱅갈' }, + { value: 'maine-coon', label: '메인 쿤' }, + { value: 'sphynx', label: '스핑크스' }, + { value: 'british-shorthair', label: '브리티쉬 숏헤어' }, + ]; + + const DogList = [ + { value: 'korean-jindo', label: '진돗개' }, + { value: 'golden-retriever', label: '골든 리트리버' }, + { value: 'labrador-retriever', label: '래브라도 리트리버' }, + { value: 'poodle', label: '푸들' }, + { value: 'bulldog', label: '불독' }, + { value: 'beagle', label: '비글' }, + { value: 'shih-tzu', label: '시츄' }, + { value: 'pomeranian', label: '포메라니안' }, + { value: 'dachshund', label: '닥스훈트' }, + { value: 'corgi', label: '웰시 코기' }, + { value: 'chihuahua', label: '치와와' }, + { value: 'siberian-husky', label: '시베리안 허스키' }, + { value: 'shiba-inu', label: '시바견' }, + { value: 'samoyed', label: '사모예드' }, + { value: 'yorkshire-terrier', label: '요크셔 테리어' }, + { value: 'maltese', label: '말티즈' }, + { value: 'bichon-frise', label: '비숑 프리제' }, + { value: 'border-collie', label: '보더 콜리' }, + { value: 'pug', label: '퍼그' }, + { value: 'rottweiler', label: '로트와일러' }, + { value: 'boxer', label: '복서' }, + { value: 'maltipoo', label: '말티푸' }, + { value: 'unique-mix', label: '세상에 하나뿐인 믹스' }, + ]; + + return ( + + + + + + + handlePetTypeClick('강아지')}> + 강아지 + + handlePetTypeClick('고양이')}> + 고양이 + + + + + + + {selectedPetType === '고양이' && ( + <> + + + + )} + + {selectedPetType === '강아지' && ( + <> + + + + )} + + + + + + + handleGenderClick('남아')}> + 남아 + + handleGenderClick('여아')}> + 여아 + + + + + + handleNeuteredClick('네')}> + 네 + + handleNeuteredClick('아니요')}> + 아니요 + + + + + + + + + + handleAllergicClick('네')}> + 네 + + handleAllergicClick('아니요')}> + 아니요 + + + + navigate('/user-register')}> + 등록하기 + + + + ); +}; + +export default PetRegisterPage; diff --git a/src/pages/RegisterPage/UserRegisterPage.jsx b/src/pages/RegisterPage/UserRegisterPage.jsx new file mode 100644 index 0000000..63e9559 --- /dev/null +++ b/src/pages/RegisterPage/UserRegisterPage.jsx @@ -0,0 +1,338 @@ +import React, { useState } from 'react'; +import styled from 'styled-components'; +import { images } from '../../components/Images'; +import { HiOutlineBellAlert } from "react-icons/hi2"; + +const ScrollableContainer = styled.div` + max-height: 100%; + border: 1px solid #ddd; + margin: 64px 0; +`; //스크롤 + +const Container = styled.div` + display: flex; + flex-direction: column; + width: 90%; + margin-left: 5%; +`; // 전체 컨테이너 + +const Description = styled.label` + font-size: 13px; + font-weight: 570; + line-height: 1.7; + margin-bottom: 15px; + margin-top: 5%; + word-break: keep-all; +`; // 사용자 인사 + +const WelcomeContainer = styled.div` + margin-bottom: 20px; + margin-top: 10px; +`; + +const WelcomeComment = styled.span` + color: black; +` + +const FirstComment = styled.span` + color: #FF6E00; +` + +const HightLight = styled.span` + color: #FF6E00; +`; // 사용자 인사 중 하이라이트 + + +const Label = styled.label` + font-size: 10px; + color: #B3B3B3; + margin-bottom: 10px; + margin-top: 5px; +`; // 각 폼 레이블 + +const KakaoEmail = styled.input` + padding: 13px 13px; + margin-bottom: 8px; + border: 1px solid #818181; + border-radius: 5px; + font-size: 11px; + background-color: #EEEEEE; + width: 100%; +`; //이메일 부분 disabled + +const Icon = styled.img` + position: absolute; + top: 40%; + left: 300px; + transform: translateY(-8px); + width: 20px; + height: 20px; +`; //카카오 아이콘 + +const InputContainer = styled.div` + position: relative; + width: 100%; + margin-bottom: 8px; +`; // 입력하는 폼 전체 컨테이너 + +const StyledInput = styled.input` + padding: 13px 50px 13px 13px; + width: 100%; + margin-top: 4px; + border: 1px solid #E4E4E4; + border-radius: 5px; + font-size: 11px; +`; //입력 폼 + +const ConfirmNicknameButton = styled.button` + position: absolute; + width: 64px; + height: 20px; + top: 50%; + right: 10px; + transform: translateY(-50%); + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 8px; + font-weight: bold; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } //닉네임 중복확인 +`; + +const SearchAddressButton = styled.button` + position: absolute; + width: 64px; + height: 20px; + top: 7%; + right: 10px; + transform: translateY(-50%); + background-color: #FFEFEF; + color: #FF6E00; + border: none; + border-radius: 5px; + cursor: pointer; + font-size: 8px; + font-weight: bold; + padding: 5px 10px; + transition: background-color 0.3s; + + &:hover { + background-color: #FFD3D3; + } +`; //주소검색 + +const Divider = styled.div` + background-color: #F7F7F7; + margin-top:16px; + width:100%; + height: 20px; +`; //구분선 + +const SubTitle = styled.label` + font-size: 15px; + font-weight: bold; + margin-bottom: 20px; + flex-grow: 1; +`; //앱푸시알림 + +const StyledBellAlert = styled(HiOutlineBellAlert)` + font-size: 16px; + color: #FF6E00; + position: absolute; + transform: translateY(2%); + margin-left: 5px; + margin-top: 1px; +`; //알람 아이콘 + +const SubTitleList = styled.label` + font-size: 13px; + font-weight: bold; + margin-bottom: 8px; +`; //각 알람 제목 + +const DescriptionContainer = styled.div` + display: flex; + flex-direction: row; +`; //설명 컨테이너 + +const SubDescription = styled.label` + font-size: 10px; + font-weight: light; + color:#8D8D8D; + margin-bottom: 10px; +`; //각 알람 설명 + +const AlertAgreementDescription = styled.div` + margin-top: 10px; + font-size: 8px; + color: #FF6E00; +`; + +const SubContainer = styled.div` + display: flex; + flex-direction: column; + margin-bottom: 10px; +`; + +const SubDescriptionContainer = styled.div` + display: flex; + flex-direction: column; + margin-top: 5px; +`; + + +const ToggleContainer = styled.div` + position: relative; + cursor: pointer; + margin-bottom:10px; + + > .toggle-container { + width: 50px; + height: 24px; + border-radius: 30px; + background-color: rgb(233,233,234); + transition: background-color 0.5s; + } + + > .toggle--checked { + background-color: #FF6E00; + } + + > .toggle-circle { + position: absolute; + top: 1px; + left: 1px; + width: 22px; + height: 22px; + border-radius: 50%; + background-color: rgb(255,254,255); + transition: left 0.5s; + } + + > .toggle--checked { + left: 27px; + } +`; //토글 버튼 + +const AlarmAgreementContainer = styled.div` + display: flex; + align-items: center; + position: relative; + width: 100%; + margin-top: 7%; + margin-bottom: 8px; +`; + +const RegisterButton = styled.button` + display: flex; + justify-content: center; + align-items: center; + border: 1px solid #E4E4E4; + width: 330px; + height: 43px; + text-align: center; + border-radius: 8px; + margin-bottom: 20px; + margin-left: 20px; + + &:hover { + background-color: #FF6E00; + color: white; + } +`; // 저장버튼 + +const UserEditPage = () => { + const [toggleStates, setToggleStates] = useState([false, false, false]); + + const toggleHandler = (index) => { + const newToggleStates = [...toggleStates]; + newToggleStates[index] = !newToggleStates[index]; + setToggleStates(newToggleStates); + }; + + return ( + + + + 발바닥 천국과🐾 당신과 반려동물의 발걸음이 더 행복해지도록 정보를 등록해 보세요. + + + + + + + + + + + 중복확인 + + + + + 주소검색 + + + + + + + + + + 앱 푸시 알림 + + + + + 우리응애 건강관리 + + 예방접종일과 병원 정보를 빠르게 받아보세요! + + + + + 집사 생활 + + + 내가 작성한 글의 댓글을 빠르게 확인하세요! + + + + + + + 실종 알림 + + 다른 아이의 등록된 실종 위치 근처에 도착하면 알림을 보내드려요 + 가족의 품으로 가는 길, 도와주시면 감사하겠습니다* + + + + toggleHandler(0)}> +
+
+ + toggleHandler(1)}> +
+
+ + toggleHandler(2)}> +
+
+ + + + 저장하기 + + ); +}; + +export default UserEditPage; \ No newline at end of file