Merge branch 'main' into feature/admin

prgrms-web-devcourse-final-project · Dec 9, 2024 · 2fb8cae · 2fb8cae
2 parents 061937e + 52d2317
commit 2fb8cae
Show file tree

Hide file tree

Showing 19 changed files with 171 additions and 81 deletions.
diff --git a/src/api/mypageApi.ts b/src/api/mypageApi.ts
@@ -1,5 +1,14 @@
 import axiosInstance from './axiosInstance';
 
+export type RefundType = {
+  productName: string;
+  quantity: number;
+  price: number;
+  url: string;
+  paymentStatus: string;
+  postId: number;
+};
+
 export type MyPostType = {
   availableNumber: number;
   category: string;
@@ -136,3 +145,11 @@ export const putEditProfile = async (file: File) => {
 
   return response.data;
 };
+
+export const putChangeNickname = async (nickname: string) => {
+  const response = await axiosInstance.put(
+    `/api/mypage/change_nickname?nickName=${nickname}`
+  );
+
+  return response.data;
+};
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -14,16 +14,6 @@ const Header = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
 
-  const handleCommunityClick = (
-    e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
-  ) => {
-    if (!isLoggedIn && !isAdmin) {
-      e.preventDefault();
-      alert('로그인 후 이용할 수 있는 페이지입니다.');
-      setIsMobileMenuOpen(!isMobileMenuOpen);
-    }
-  };
-
   return (
     <HeaderContainer>
       <HeaderContent>
@@ -57,15 +47,21 @@ const Header = () => {
               </StyledLink>
             </NavItem>
             <NavItem>
-              <StyledLink to="/community/post" onClick={handleCommunityClick}>
+              <StyledLink to="/community/post" onClick={toggleMobileMenu}>
                 Community
               </StyledLink>
             </NavItem>
             <NavItem>
               {isLoggedIn && (
                 <StyledLink
                   to={isAdmin ? '#' : '/mypage/setting'}
-                  onClick={toggleMobileMenu}
+                  onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                    if (isAdmin) {
+                      e.preventDefault(); // Admin일 경우 링크 동작 차단
+                    } else {
+                      toggleMobileMenu();
+                    }
+                  }}
                 >
                   {isAdmin ? 'Admin Page' : 'My Page'}
                 </StyledLink>
@@ -96,7 +92,10 @@ const Header = () => {
                 </LogOut>
                 <LogOut>
                   <CartIcon>
-                    <StyledLink to="/cart" onClick={toggleMobileMenu}>
+                    <StyledLink
+                      to="/mypage/wishlist"
+                      onClick={toggleMobileMenu}
+                    >
                       <img src={cart} alt="장바구니 아이콘" />
                     </StyledLink>
                   </CartIcon>

diff --git a/src/components/pages/Payment/PaymentFailPage.tsx b/src/components/pages/Payment/PaymentFailPage.tsx
@@ -11,7 +11,7 @@ const PaymentFailPage = () => {
   const productId = Number(id);
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
-  const amount = urlParams.get('totalAmount');
+  const price = urlParams.get('price');
   const { data: product, isLoading, isError } = useProductQuery(productId);
 
   if (!product) {
@@ -33,7 +33,7 @@ const PaymentFailPage = () => {
               </SummaryRow>
               <SummaryRow>
                 <Label>결제 금액</Label>
-                <Value>{amount} 원</Value>
+                <Value>{price} 원</Value>
               </SummaryRow>
             </OrderSummary>
           </FailureSection>

diff --git a/src/components/pages/Payment/PaymentSuccessPage.tsx b/src/components/pages/Payment/PaymentSuccessPage.tsx
@@ -12,7 +12,7 @@ const PaymentSuccessPage = () => {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
 
-  const amount = urlParams.get('totalAmount');
+  const price = urlParams.get('price');
 
   const { data: product, isLoading, isError } = useProductQuery(productId);
 
@@ -34,7 +34,7 @@ const PaymentSuccessPage = () => {
               </SummaryRow>
               <SummaryRow>
                 <Label>결제 금액</Label>
-                <Value>{amount}원</Value>
+                <Value>{price}원</Value>
               </SummaryRow>
             </OrderSummary>
           </SuccessSection>

diff --git a/src/components/pages/ProductDetailPage/ProductDetail.tsx b/src/components/pages/ProductDetailPage/ProductDetail.tsx
@@ -24,7 +24,7 @@ const ProductDetail: React.FC = () => {
   const { quantity, setQuantity } = useQuantity();
   const [remainingTime, setRemainingTime] = useState('');
   const navigate = useNavigate();
-  const isOutOfStock = product ? product.now >= product.currentStock : false;
+  const isOutOfStock = product ? product.currentStock < 0 : false;
   const isDeadlinePassed = remainingTime === '마감되었습니다.';
   const isButtonDisabled = isOutOfStock || isDeadlinePassed;
   useEffect(() => {
@@ -209,7 +209,7 @@ const Stars = styled.div`
   position: absolute;
   font-size: 20px;
   color: #ffaa00;
-  bottom: 80px;
+  bottom: 13%;
   right: 2%;
 
   @media (min-width: 768px) and (max-width: 1024px) {

diff --git a/src/components/pages/ProductPage/ProductComponent.tsx b/src/components/pages/ProductPage/ProductComponent.tsx
@@ -27,7 +27,7 @@ const ProductComponent: React.FC<ProductComponentProps> = ({
   const filteredProducts =
     selectedText === '마감 상품'
       ? products.filter(
-          (p) => p.available === false && new Date(p.deadline) < new Date()
+          (p) => p.available === false || new Date(p.deadline) < new Date()
         )
       : products.filter(
           (p) => p.available === true && new Date(p.deadline) > new Date()

diff --git a/src/components/pages/login/FindPasswordPage.tsx b/src/components/pages/login/FindPasswordPage.tsx
@@ -18,7 +18,7 @@ const FindPasswordPage = () => {
             style={{
               width: '100%',
               height: '100%',
-              objectFit: 'contain',
+              objectFit: 'cover',
             }}
           />
         </LeftContent>

diff --git a/src/components/pages/login/LoginCompletePage.tsx b/src/components/pages/login/LoginCompletePage.tsx
@@ -14,7 +14,7 @@ const LoginCompletePage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>

diff --git a/src/components/pages/login/ResetPasswordPage.tsx b/src/components/pages/login/ResetPasswordPage.tsx
@@ -31,7 +31,7 @@ const ResetPasswordPage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>

diff --git a/src/components/pages/login/SetLocationPage.tsx b/src/components/pages/login/SetLocationPage.tsx
@@ -29,8 +29,10 @@ function SetLocationPage() {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               (result: any, status: any) => {
                 if (status === window.kakao.maps.services.Status.OK) {
-                  const primaryRegion = result[0]?.region_3depth_name || '';
-                  setRegion(primaryRegion);
+                  const fullRegion = `${result[0]?.region_1depth_name || ''} ${
+                    result[0]?.region_2depth_name || ''
+                  } ${result[0]?.region_3depth_name || ''}`;
+                  setRegion(fullRegion);
                   setCalled(true);
                 } else {
                   console.error('주소를 가져오지 못했습니다.');

diff --git a/src/components/pages/login/SetNicknamePage.tsx b/src/components/pages/login/SetNicknamePage.tsx
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
@@ -29,7 +30,7 @@ const SetNicknamePage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>
@@ -53,14 +54,27 @@ const SetNicknamePage = () => {
         <NextButton
           onClick={async () => {
             if (isValidLength && isValidFormat) {
-              const response = await postSignUpNickname({ nickname: nickname });
+              try {
+                const response = await postSignUpNickname({
+                  nickname: nickname,
+                });
 
-              if (response.message === '닉네임 중복 확인 완료') {
-                localStorage.setItem('nickname', nickname);
+                if (response.message === '닉네임 중복 확인 완료') {
+                  localStorage.setItem('nickname', nickname);
 
-                navigate('/setprofile');
-              } else {
-                alert('닉네임이 중복입니다.');
+                  navigate('/setprofile');
+                } else {
+                  alert('닉네임이 중복입니다.');
+                }
+              } catch (err) {
+                if (
+                  axios.isAxiosError(err) &&
+                  err.response &&
+                  err.response.data &&
+                  err.response.data.error
+                ) {
+                  alert(err.response.data.error);
+                }
               }
             } else {
               alert('닉네임 조건을 만족시켜 주세요.');

diff --git a/src/components/pages/login/SetProfilePage.tsx b/src/components/pages/login/SetProfilePage.tsx
@@ -29,7 +29,7 @@ const SetProfilePage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>

diff --git a/src/components/pages/login/SignInPage.tsx b/src/components/pages/login/SignInPage.tsx
@@ -1,14 +1,25 @@
-import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import React, { useEffect, useState } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { postSignIn } from '../../../api/loginApi';
 import { useAuth } from '../../../context/AuthContext';
 
 const SignInPage = () => {
   const navigate = useNavigate();
+  const location = useLocation();
   const [email, setEmail] = useState<string>('');
   const [pw, setPw] = useState<string>('');
   const { login } = useAuth();
+
+  useEffect(() => {
+    const searchParams = new URLSearchParams(location.search);
+    const accessToken = searchParams.get('accessToken');
+    if (accessToken) {
+      localStorage.setItem('token', accessToken);
+      navigate('/');
+    }
+  }, [location, navigate]);
+
   return (
     <Wrapper>
       <LeftContent>

diff --git a/src/components/pages/login/SignUpPage.tsx b/src/components/pages/login/SignUpPage.tsx
@@ -1,3 +1,4 @@
+import axios from 'axios';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { styled } from 'styled-components';
@@ -20,7 +21,7 @@ function SignUpPage() {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>
@@ -71,24 +72,35 @@ function SignUpPage() {
             if (pw !== cpw) {
               alert('비밀번호가 일치하지 않습니다.');
             } else {
-              const response = await postSignUp({
-                email: email,
-                password: pw,
-                password_confirm: cpw,
-                name: name,
-                phone: phone,
-              });
+              try {
+                const response = await postSignUp({
+                  email: email,
+                  password: pw,
+                  password_confirm: cpw,
+                  name: name,
+                  phone: phone,
+                });
 
-              if (response.message === '이메일, 전화번호 중복 확인 완료') {
-                localStorage.setItem('email', email);
-                localStorage.setItem('password', pw);
-                localStorage.setItem('password_confirm', cpw);
-                localStorage.setItem('name', name);
-                localStorage.setItem('phone', phone);
+                if (response.message === '이메일, 전화번호 중복 확인 완료') {
+                  localStorage.setItem('email', email);
+                  localStorage.setItem('password', pw);
+                  localStorage.setItem('password_confirm', cpw);
+                  localStorage.setItem('name', name);
+                  localStorage.setItem('phone', phone);
 
-                navigate('/termsandservice');
-              } else {
-                alert('이메일 또는 전화번호가 중복 되었습니다.');
+                  navigate('/termsandservice');
+                } else {
+                  alert('이메일 또는 전화번호가 중복 되었습니다.');
+                }
+              } catch (err) {
+                if (
+                  axios.isAxiosError(err) &&
+                  err.response &&
+                  err.response.data &&
+                  err.response.data.error
+                ) {
+                  alert(err.response.data.error);
+                }
               }
             }
           }}

diff --git a/src/components/pages/login/TermsPage.tsx b/src/components/pages/login/TermsPage.tsx
@@ -73,7 +73,7 @@ const TermsPage = () => {
             style={{
               width: '100%',
               height: '100%',
-              objectFit: 'contain',
+              objectFit: 'cover',
             }}
           />
         </LeftContent>

diff --git a/src/components/pages/myPage/LocationPage.tsx b/src/components/pages/myPage/LocationPage.tsx
@@ -29,8 +29,10 @@ function LocationPage() {
               // eslint-disable-next-line @typescript-eslint/no-explicit-any
               (result: any, status: any) => {
                 if (status === window.kakao.maps.services.Status.OK) {
-                  const primaryRegion = result[0]?.region_3depth_name || '';
-                  setRegion(primaryRegion);
+                  const fullRegion = `${result[0]?.region_1depth_name || ''} ${
+                    result[0]?.region_2depth_name || ''
+                  } ${result[0]?.region_3depth_name || ''}`;
+                  setRegion(fullRegion);
                   setCalled(true);
                 } else {
                   console.error('주소를 가져오지 못했습니다.');