Merge pull request #54 from prgrms-web-devcourse-final-project/featur…

…e/mypage

Feat: 닉네임, 환불 소셜로그인 api 적용, api 실패 시 알람 추가, 주소 풀네임으로 변경

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;
+};

src/components/common/Header.tsx

@@ -55,7 +55,7 @@ const Header = () => {
               {isLoggedIn && (
                 <StyledLink
                   to={isAdmin ? '#' : '/mypage/setting'}
-                  onClick={(e) => {
+                  onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
                     if (isAdmin) {
                       e.preventDefault(); // Admin일 경우 링크 동작 차단
                     } else {
@@ -92,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>

src/components/pages/login/FindPasswordPage.tsx

@@ -18,7 +18,7 @@ const FindPasswordPage = () => {
             style={{
               width: '100%',
               height: '100%',
-              objectFit: 'contain',
+              objectFit: 'cover',
             }}
           />
         </LeftContent>

src/components/pages/login/LoginCompletePage.tsx

@@ -14,7 +14,7 @@ const LoginCompletePage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>

src/components/pages/login/ResetPasswordPage.tsx

@@ -31,7 +31,7 @@ const ResetPasswordPage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>

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('주소를 가져오지 못했습니다.');

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('닉네임 조건을 만족시켜 주세요.');

src/components/pages/login/SetProfilePage.tsx

@@ -29,7 +29,7 @@ const SetProfilePage = () => {
           style={{
             width: '100%',
             height: '100%',
-            objectFit: 'contain',
+            objectFit: 'cover',
           }}
         />
       </LeftContent>

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>

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);
+                }
               }
             }
           }}

src/components/pages/login/TermsPage.tsx

@@ -73,7 +73,7 @@ const TermsPage = () => {
             style={{
               width: '100%',
               height: '100%',
-              objectFit: 'contain',
+              objectFit: 'cover',
             }}
           />
         </LeftContent>

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('주소를 가져오지 못했습니다.');

src/components/pages/myPage/OrderListComponents/OrderHistory.tsx

@@ -36,7 +36,7 @@ const OrderHistory = () => {
         return '결제 완료';
       case 'FAILED':
         return '결제 실패';
-      case 'CANCELD':
+      case 'CANCELED':
         return '결제 취소';
       case 'PARTIAL_CANCELED':
         return '부분 취소';
@@ -78,18 +78,24 @@ const OrderHistory = () => {
               >
                 상품 페이지 이동
               </ActionButton>
-              <CancelButton
-                onClick={() => {
-                  handleCancelClick();
-                  if (order.payment_key) {
-                    setPk(order.payment_key);
-                  }
-                }}
-              >
-                주문 취소/환불
-              </CancelButton>
               {order.paymentStatus === 'DONE' && (
-                <ReviewLink>
+                <CancelButton
+                  onClick={() => {
+                    handleCancelClick();
+                    if (order.payment_key) {
+                      setPk(order.payment_key);
+                    }
+                  }}
+                >
+                  주문 취소/환불
+                </CancelButton>
+              )}
+              {order.paymentStatus === 'DONE' && (
+                <ReviewLink
+                  onClick={() => {
+                    navigate(`/products/${order.postId}`);
+                  }}
+                >
                   <ReviewIcon src="/images/qricon.png" alt="review icon" />
                   <span>리뷰 작성하기</span>
                 </ReviewLink>

src/components/pages/myPage/OrderListComponents/RefundHistory.tsx

@@ -1,37 +1,46 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import styled from 'styled-components';
-import { getRefundList } from '../../../../api/mypageApi';
-import { refundHistoryData } from '../mockData';
+import { getRefundList, RefundType } from '../../../../api/mypageApi';
 
 const RefundHistory = () => {
+  const [refundList, setRefundList] = useState<RefundType[]>([]);
+  const navigate = useNavigate();
+
   useEffect(() => {
     const fetchOrderList = async () => {
       const response = await getRefundList();
 
-      console.log(response);
+      setRefundList(response);
     };
     fetchOrderList();
   }, []);
   return (
     <Container>
       <RefundList>
-        {refundHistoryData.map((refund) => (
-          <RefundItem key={refund.id}>
+        {refundList.map((refund, idx) => (
+          <RefundItem key={idx}>
             <RefundWrapper>
               <ImageContainer>
                 <ImagePlaceholder />
               </ImageContainer>
               <RefundDetails>
-                <ProductName>{refund.name}</ProductName>
+                <ProductName>{refund.productName}</ProductName>
                 <ProductInfo>Quantity: {refund.quantity}</ProductInfo>
-                <StatusBadge status={refund.status}>
-                  {refund.status}
+                <StatusBadge status={refund.paymentStatus}>
+                  {refund.paymentStatus === 'CANCELED' ? '취소' : '대기 중'}
                 </StatusBadge>
               </RefundDetails>
             </RefundWrapper>
-            <Price>{refund.price}</Price>
+            <Price>{refund.price}원</Price>
             <Actions>
-              <ActionButton>상품 페이지 이동</ActionButton>
+              <ActionButton
+                onClick={() => {
+                  navigate(`/products/${refund.postId}`);
+                }}
+              >
+                상품 페이지 이동
+              </ActionButton>
             </Actions>
           </RefundItem>
         ))}