Merge pull request #17 from URECA-PODONG/feat/#7

feat(#7): update mypage

src/Router.jsx

@@ -3,38 +3,47 @@ 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 (
     <BrowserRouter>
       <div className="Router">
-        {/* <Nav /> */}
+        <Nav />
         <Routes>
           <Route path="/" element={<PaymentEnd/>} />
           <Route path="/" element={<MainPage />} />
-<<<<<<< Updated upstream
           <Route path="/Login" element={<LoginPage />} />
-=======
->>>>>>> Stashed changes
           <Route path="/petitem" element={<PetItemPage />} />
           <Route path="/petitemList" element={<PetItemListPage />} />
           <Route path="/petitemDetail/:no" element={<PetItemDetailPage/>} />
+          <Route path="/user-register" element={<UserRegisterPage />} />
+          <Route path="/petRegister" element={<PetRegisterPage/>} />
+          <Route path="/editUserRegister" element={<UserEditPage />} />
+          <Route path="/editPetRegister" element={<PetEditPage/>} />
+          <Route path="/mypage" element={<MyPage />}/>
+          <Route path="/missingSave" element={<RegisterMissingSavePage />} /> 
+          <Route path="/missingRegister" element={<RegisterMissing/>} />
         </Routes>
-        {/* <Footer /> */}
+        <Footer />
         <ScrollTop />
       </div>
     </BrowserRouter>
   );
 }
 
 export default Router;
+

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 (
+    <SelectContainer>
+      <StyledSelect value={value || ""} onChange={onChange} required={required}>
+        <option value="" disabled>
+          {placeholder}
+        </option>
+        {options.map((option) => (
+          <option key={option.value} value={option.value}>
+            {option.label}
+          </option>
+        ))}
+      </StyledSelect>
+      <ArrowIcon />
+    </SelectContainer>
+  );
+};
+
+export default SelectBox;

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 (
+    <Container>
+      <ImageBox>
+        {imgPath.length > 0 && ( 
+          <img 
+            src={imgPath[0]} 
+            alt='애완동물 사진' 
+            style={{
+              width: '150px', 
+              height: '150px', 
+              borderRadius: '50%', 
+              objectFit: 'cover' 
+            }} 
+          />
+        )}
+      </ImageBox>
+      <InputFile htmlFor="inputForm">
+        등록
+        <HiddenInput
+          className="inputFile"
+          type="file"
+          id="inputForm"
+          onChange={addImage} 
+        />
+      </InputFile>
+    </Container>
+  );
+};
+
+export default UploadImg;