feat(#5): update

URECA-PODONG · Nov 3, 2024 · be675cf · be675cf
2 parents 97dd24a + 46d73af
commit be675cf
Show file tree

Hide file tree

Showing 17 changed files with 890 additions and 688 deletions.
diff --git a/index.html b/index.html
@@ -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" />

diff --git a/package.json b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "axios": "^1.7.7",
     "http-proxy-middleware": "^3.0.3",
+    "lottie-react": "^2.4.0",
     "react": "^18.3.1",
     "react-daum-postcode": "^3.1.3",
     "react-dom": "^18.3.1",

diff --git a/src/Router.jsx b/src/Router.jsx
@@ -22,30 +22,36 @@ import PetRegisterPage from "./pages/RegisterPage/PetRegisterPage.jsx";
 import ShoppingDetail from "./pages/MainPage/ShoppingDetail.jsx";
 import SideNav from "./components/common/SideNav.jsx";
 import WalkPage from "./pages/WalkPage/WalkPage.jsx";
+import Payment from "./pages/PaymentPage/Payment.jsx";
+import PaymentEnd from "./pages/PaymentPage/PaymentEnd.jsx";
+import CancelPay from "./pages/PaymentPage/CancelPay.jsx";
 import PetEditPage from "./pages/MyPage/PetEditPage.jsx";
+<<<<<<< HEAD
 import ComunityWrite from './pages/CommunityPage/CommunityWrite.jsx';
 import CommunityList from './pages/CommunityPage/CommunityList.jsx';
 import CommunityDetail from './pages/CommunityPage/CommunityDetail.jsx';
 
+=======
+>>>>>>> 46d73af3923b0937b40a6c9d65d1e0946b6c6be0
 function Router() {
   return (
     <BrowserRouter>
       <ScrollTop />
       <NavSelector />
       <Routes>
         <Route path="/" element={<Outlet />}>
-          <Route index element={<MainPage />} />
+          <Route index element={<Payment />} />
           <Route path="login" element={<LoginPage />} />
           <Route
             path="shoppingDetail/:productId"
             element={<ShoppingDetail />}
           />
-
           <Route path="nanumList" element={<Outlet />}>
             <Route index element={<NanumList />} />
             <Route path="write" element={<NanumWrite />} />
             <Route path="detail/:no" element={<NanumDetail />} />
           </Route>
+<<<<<<< HEAD
 
           <Route path="community" element={<Outlet />}>
             <Route index element={<CommunityList/>} />
@@ -59,27 +65,24 @@ function Router() {
             <Route path="detail/:no" element={<CommunityDetail />} />
           </Route>
 
+=======
+>>>>>>> 46d73af3923b0937b40a6c9d65d1e0946b6c6be0
           <Route path="userRegister/:userId" element={<UserRegisterPage />} />
-
           <Route path="petRegister" element={<PetRegisterPage />} />
-
           <Route path="walking" element={<WalkPage />} />
-
           <Route path="myPage" element={<Outlet />}>
             <Route index element={<MyPage />} />
             <Route path="editPetRegister" element={<PetEditPage />} />
             <Route path="editUserRegister" element={<UserEditPage />} />
             <Route path="missingSave" element={<RegisterMissingSavePage />} />
             <Route path="missingRegister" element={<RegisterMissing />} />
-
           </Route>
         </Route>
       </Routes>
       <Footer />
     </BrowserRouter>
   );
 }
-
 function NavSelector() {
   const location = useLocation();
   const path = location.pathname;
@@ -90,8 +93,6 @@ function NavSelector() {
     "/myPage",
   ];
   const isNavPath = navPaths.some((navPath) => path.startsWith(navPath));
-
   return isNavPath ? <SideNav /> : <MainNav />;
 }
-
-export default Router;
+export default Router;
diff --git a/src/components/Register/SelectBox.jsx b/src/components/Register/SelectBox.jsx
@@ -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>
         ))}

diff --git a/src/components/common/Footer.jsx b/src/components/common/Footer.jsx
@@ -49,7 +49,7 @@ const Footer = () => {
       key: 'community',
       image: activeTab === '/community' ? images.communityIconOn : images.communityIconOff,
       text: '집사생활',
-      link: '/petRegister',
+      link: '/userRegister/:userId',
     },
   ];
 

diff --git a/src/components/common/SideNav.jsx b/src/components/common/SideNav.jsx
@@ -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: '주문 상세' },

diff --git a/src/pages/LoginPage/LoginPage.jsx b/src/pages/LoginPage/LoginPage.jsx
@@ -1,110 +1,55 @@
-import React, { useEffect } from 'react';
 import styled from "styled-components";
 import { images } from "../../components/Images";
-import { useNavigate, useLocation } from 'react-router-dom';
-import axios from 'axios';
+import { useNavigate } from "react-router-dom";
 
 const LoginPage = () => {
-  const navigate = useNavigate();
-  const location = useLocation();
-
-  useEffect(() => {
-    const queryParams = new URLSearchParams(location.search);
-    const jwtToken = queryParams.get('jwtToken');
-    const accessToken = queryParams.get('accessToken');
-    const refreshToken = queryParams.get('refreshToken');
-    const userId = queryParams.get('userId');
-
-    console.log('Received tokens from URL:', { jwtToken, accessToken, refreshToken });
-
-    if (jwtToken && accessToken && refreshToken) {
-      localStorage.setItem('jwtToken', jwtToken);
-      localStorage.setItem('accessToken', accessToken);
-      localStorage.setItem('refreshToken', refreshToken);
-      localStorage.setItem('userId',userId);
-      console.log('Tokens saved to localStorage:', { jwtToken, accessToken, refreshToken });
-
-      fetchUserId(jwtToken); // jwtToken을 fetchUserId 함수에 전달
-    } else {
-      console.log('Tokens not found in URL');
-    }
-  }, [location, navigate]);
-
-  const fetchUserId = async (jwtToken) => {
-    try {
-        const response = await axios.get('http://localhost:8080/api/users', {
-            headers: {
-                Authorization: `Bearer ${jwtToken}`
-            }
-        });
-
-        // 서버 응답 데이터 확인
-        console.log('Server response:', response.data);
-
-        // userId가 서버에서 제대로 전달됐는지 확인하고 로컬 스토리지에 저장
-        const userId = response.data.userId; // 서버 응답에서 userId 가져오기
-        if (userId) {
-            localStorage.setItem('userId', userId);
-            console.log('User ID saved to localStorage:', userId);
-        } else {
-            console.error('User ID is missing in server response');
-        }
-    } catch (error) {
-        console.error("Error fetching user ID:", error);
-    }
-};
-
-const handleKakaoLogin = () => {
-  const REST_API_KEY = import.meta.env.VITE_KAKAO_REST_API_KEY;
-  const REDIRECT_URI = 'http://localhost:8080/test';
-  window.location.href = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
-};
-
-  return (
-    <Container>
-      <Image src={images.loginDogCat} alt="로그인 화면 강아지와 고양이 그림" />
-      <Title>지금 가입하면 5천원 즉시 할인!</Title>
-      <Subtitle>우리 댕냥이 엄마쇼핑 시작해볼까요?</Subtitle>
-      <KakaoButton onClick={handleKakaoLogin}>카카오 계정으로 로그인</KakaoButton>
-      <OtherMethodButton>다른 방법으로 시작하기</OtherMethodButton>
-      <SkipButton onClick={() => navigate('/home')}>일단 둘러보기</SkipButton>
-    </Container>
-  );
+    const navigate = useNavigate(); // useNavigate 훅 사용
+
+
+
+    return (
+        <Container>
+            <Image src={images.loginDogCat} alt="로그인 화면 강아지와 고양이 그림" />
+            <Title>지금 가입하면 5천원 즉시 할인!</Title>
+            <Subtitle>우리 댕냥이 엄마쇼핑 시작해볼까요?</Subtitle>
+            <KakaoButton ><a href="http://localhost:8080/api/oauth2/authorization/kakao">카카오 계정으로 로그인</a></KakaoButton>
+            <OtherMethodButton>다른 방법으로 시작하기</OtherMethodButton>
+            <SkipButton onClick={() => navigate('/main')}>일단 둘러보기</SkipButton>
+        </Container>
+    );
 };
 
 export default LoginPage;
 
-// 스타일링 코드
-
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   height: 100vh;
   background-color: #ffffff;
-  padding: 20px;
+  padding: 20px; 
 `;
 
 const Image = styled.img`
   width: 150px;
   height: auto;
   margin-top: 30px;
-  margin-bottom: 20px;
+  margin-bottom: 20px; 
 `;
 
 const Title = styled.h2`
   font-size: 20px;
   font-weight: bold;
-  margin-bottom: 8px;
+  margin-bottom: 8px; 
   color: #000000;
   text-align: center;
 `;
 
 const Subtitle = styled.p`
   font-size: 14px;
   color: #666666;
-  margin-bottom: 30px;
+  margin-bottom: 30px; 
   text-align: center;
 `;
 
@@ -115,6 +60,7 @@ const Button = styled.button`
   border-radius: 30px;
   font-size: 16px;
   margin-bottom: 15px;
+
   cursor: pointer;
   transition: background-color 0.3s, transform 0.2s;
 `;
@@ -125,7 +71,7 @@ const KakaoButton = styled(Button)`
 
   &:hover {
     background-color: #ffd600;
-    transform: scale(1.05); /* 살짝 커지는 효과 */
+    transform: scale(1.05); 
   }
 `;
 
@@ -135,7 +81,7 @@ const OtherMethodButton = styled(Button)`
 
   &:hover {
     background-color: #e0e0e0;
-    transform: scale(1.05); /* 살짝 커지는 효과 */
+    transform: scale(1.05); 
   }
 `;
 
@@ -144,6 +90,8 @@ const SkipButton = styled.p`
   color: #888888;
   cursor: pointer;
   text-decoration: underline;
-  margin-top: 70px;
-  margin-bottom: 80px;
+  margin-top: 70px; 
+  margin-bottom: 80px; 
 `;
+
+