Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat(#7): 펫 정보 등록 DB 연결 성공 & 실종등록 페이지 이미지 사진 미리보기 가능하게 완료 #30

Merged
merged 1 commit into from
Nov 2, 2024
Merged

feat(#7): 펫 정보 등록 DB 연결 성공 & 실종등록 페이지 이미지 사진 미리보기 가능하게 완료 #30

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="ko">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
Expand Down
4 changes: 2 additions & 2 deletions src/components/Register/SelectBox.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,8 +39,8 @@ const SelectBox = ({ options, value, onChange, placeholder, required }) => {
<option value="" disabled>
{placeholder}
</option>
{options.map((option) => (
<option key={option.value} value={option.value}>
{options.map((option, index) => (
<option key={option.id || index} value={option.value}>
{option.label}
</option>
))}
Expand Down
2 changes: 2 additions & 0 deletions src/components/common/SideNav.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ const SideNav = () => {
{ path: '/myPage/editPetRegister', title: '응애 정보 수정' },
{ path: '/myPage/missingRegister', title: '실종 등록' },
{ path: '/myPage/missingSave', title: '실종 등록 완료' },
{path : '/petRegister', title: '우리응애 등록'},
{path : '/userRegister/:userId', title: '회원정보 등록'},
{ path: '/myPage', title: '마이 페이지' },
{ path: '/orderList/orderDetail/orderCancel', title: '주문 취소' },
{ path: '/orderList/orderDetail', title: '주문 상세' },
Expand Down
78 changes: 61 additions & 17 deletions src/pages/MyPage/RegisterMissing.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ const Container = styled.div`
display: flex;
flex-direction: column;
`;

const SubContainer = styled.div`
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -95,11 +96,32 @@ const EditButton = styled.button`
}
`;

const ImageContainer = styled.input`
const ImageContainer = styled.div`
width: 125px;
height: 125px;
border: 1px solid #E4E4E4;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
cursor: pointer;
position: relative;
background-color: #f8f8f8;
`;

const PlaceholderText = styled.span`
color: #888;
font-size: 12px;
text-align: center;
`;

const PreviewImage = styled.img`
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
`;

const StyledTextarea = styled.textarea`
Expand Down Expand Up @@ -133,20 +155,33 @@ const RegisterButton = styled.button`
const RegisterMissing = () => {
const navigate = useNavigate();

const [petName, setPetName] = useState(''); // 이름
const [date, setDate] = useState(''); // 잃어버린 날짜
const [address, setAddress] = useState(''); // 주소
const [petName, setPetName] = useState('');
const [date, setDate] = useState('');
const [address, setAddress] = useState('');
const [phone, setPhone] = useState('');
const [description, setDescription] = useState(''); // 상세정보
const [locationInput, setLocationInput] = useState(''); // 위치 정보
const [description, setDescription] = useState('');
const [locationInput, setLocationInput] = useState('');
const [map, setMap] = useState(null);
const [marker, setMarker] = useState(null);
const [latitude, setLatitude] = useState(37.5665);
const [longitude, setLongitude] = useState(126.978);
const [previewImage, setPreviewImage] = useState(null); // 미리보기 이미지 상태 추가

const today = new Date().toISOString().split("T")[0];

const handleImageChange = (e) => {
const file = e.target.files[0];
if (file) {
const reader = new FileReader();
reader.onloadend = () => {
setPreviewImage(reader.result); // 미리보기 이미지 설정
};
reader.readAsDataURL(file); // 파일을 Data URL로 읽음
} else {
setPreviewImage(null); // 이미지가 없으면 미리보기 초기화
}
};

const today = new Date().toISOString().split("T")[0]; // 오늘 날짜 형식 설정

// Axios 요청을 handle하는 부분
const handleSubmit = async () => {
const formData = new FormData();
formData.append('petName', petName);
Expand All @@ -155,7 +190,7 @@ const RegisterMissing = () => {
formData.append('phone', phone);
formData.append('description', description);
formData.append('createdAt', new Date().toISOString());
// 사진 파일 추가

const imageInput = document.querySelector('input[type="file"]');
if (imageInput.files[0]) {
formData.append('image', imageInput.files[0]);
Expand Down Expand Up @@ -202,15 +237,12 @@ const RegisterMissing = () => {
newMarker.setMap(newMap);
setMarker(newMarker);

// 클릭 이벤트 리스너 추가
window.kakao.maps.event.addListener(newMap, 'click', (mouseEvent) => {
const clickedPosition = mouseEvent.latLng;

// 마커 위치 변경
newMarker.setPosition(clickedPosition);
setLatitude(clickedPosition.getLat());
setLongitude(clickedPosition.getLng());
setLocationInput(`위도: ${clickedPosition.getLat().toFixed(6)}, 경도: ${clickedPosition.getLng().toFixed(6)}`); // 위도 경도 업데이트
setLocationInput(`위도: ${clickedPosition.getLat().toFixed(6)}, 경도: ${clickedPosition.getLng().toFixed(6)}`);
});
}, [latitude, longitude]);

Expand All @@ -220,7 +252,7 @@ const RegisterMissing = () => {
const { latitude, longitude } = position.coords;
setLatitude(latitude);
setLongitude(longitude);
setLocationInput(`위도: ${latitude}, 경도: ${longitude}`); // 위도 경도 저장
setLocationInput(`위도: ${latitude}, 경도: ${longitude}`);
}, (error) => {
console.error("위치 정보에 접근할 수 없습니다.", error);
});
Expand Down Expand Up @@ -282,11 +314,23 @@ const RegisterMissing = () => {
<StyledInput type="date" placeholder="YYYY-MM-DD" value={date} onChange={handleDateChange} max={today} />
</DateContainer>
<AddressContainer>
<SubTitle>핸드폰 번호</SubTitle>
<SubTitle>핸드폰 번호</SubTitle>
<StyledInput placeholder="연락처를 입력해주세요" value={phone} onChange={handlePhoneChange} />
</AddressContainer>
<SubTitle>아이 사진</SubTitle>
<ImageContainer type="file" />
<input
type="file"
onChange={handleImageChange}
style={{ display: 'none' }}
id="imageUpload"
/>
<ImageContainer onClick={() => document.getElementById('imageUpload').click()}>
{previewImage ? (
<PreviewImage src={previewImage} alt="미리보기" />
) : (
<PlaceholderText>사진 등록</PlaceholderText>
)}
</ImageContainer>
<SubTitle>상세정보</SubTitle>
<StyledTextarea value={description} placeholder="최대한 자세하게 작성해주세요" onChange={(e) => setDescription(e.target.value)} />
<RegisterButton onClick={handleSubmit}>등록하기</RegisterButton>
Expand Down
Loading