Merge branch 'main' into feature/admin

prgrms-web-devcourse-final-project · Dec 9, 2024 · a2e9d87 · a2e9d87
2 parents f062bd2 + d6efd79
commit a2e9d87
Show file tree

Hide file tree

Showing 97 changed files with 6,269 additions and 367 deletions.
diff --git a/.gitignore b/.gitignore
@@ -18,7 +18,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
-/dist
+
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -11,5 +11,6 @@
     "javascriptreact",
     "typescript",
     "typescriptreact"
-  ]
+  ],
+  "compile-hero.disable-compile-files-on-did-save-code": true
 }
diff --git a/dist/assets/default-featured-image.png-C2hm5daT.jpg b/dist/assets/default-featured-image.png-C2hm5daT.jpg
diff --git a/dist/assets/index-4YtmX69h.js b/dist/assets/index-4YtmX69h.js
diff --git a/dist/favicon.ico b/dist/favicon.ico
diff --git a/dist/images/apple.png b/dist/images/apple.png
diff --git a/dist/images/arrow-left.png b/dist/images/arrow-left.png
diff --git a/dist/images/bell.png b/dist/images/bell.png
diff --git a/dist/images/chat.png b/dist/images/chat.png
diff --git a/dist/images/chatlist.png b/dist/images/chatlist.png
diff --git a/dist/images/chatlist_on.png b/dist/images/chatlist_on.png
diff --git a/dist/images/check.png b/dist/images/check.png
diff --git a/dist/images/comment.png b/dist/images/comment.png
diff --git a/dist/images/location.png b/dist/images/location.png
diff --git a/dist/images/location_on.png b/dist/images/location_on.png
diff --git a/dist/images/login-compl.jpg b/dist/images/login-compl.jpg
diff --git a/dist/images/login1.jpg b/dist/images/login1.jpg
diff --git a/dist/images/login10.jpg b/dist/images/login10.jpg
diff --git a/dist/images/login11.jpg b/dist/images/login11.jpg
diff --git a/dist/images/login2.jpg b/dist/images/login2.jpg
diff --git a/dist/images/login3.jpg b/dist/images/login3.jpg
diff --git a/dist/images/login4.jpg b/dist/images/login4.jpg
diff --git a/dist/images/login5.jpeg b/dist/images/login5.jpeg
diff --git a/dist/images/login6.jpg b/dist/images/login6.jpg
diff --git a/dist/images/login7.jpg b/dist/images/login7.jpg
diff --git a/dist/images/login8.jpeg b/dist/images/login8.jpeg
diff --git a/dist/images/login9.jpg b/dist/images/login9.jpg
diff --git a/dist/images/myposts.png b/dist/images/myposts.png
diff --git a/dist/images/myposts_on.png b/dist/images/myposts_on.png
diff --git a/dist/images/mypostscheck.png b/dist/images/mypostscheck.png
diff --git a/dist/images/mypostscheck_on.png b/dist/images/mypostscheck_on.png
diff --git a/dist/images/naverlogo.png b/dist/images/naverlogo.png
diff --git a/dist/images/notification.png b/dist/images/notification.png
diff --git a/dist/images/notification_on.png b/dist/images/notification_on.png
diff --git a/dist/images/orderlist.png b/dist/images/orderlist.png
diff --git a/dist/images/orderlist_on.png b/dist/images/orderlist_on.png
diff --git a/dist/images/origin.png b/dist/images/origin.png
diff --git a/dist/images/qricon.png b/dist/images/qricon.png
diff --git a/dist/images/refund.png b/dist/images/refund.png
diff --git a/dist/images/refund_on.png b/dist/images/refund_on.png
diff --git a/dist/images/search.png b/dist/images/search.png
diff --git a/dist/images/setting.png b/dist/images/setting.png
diff --git a/dist/images/setting_on.png b/dist/images/setting_on.png
diff --git a/dist/images/towel.jpeg b/dist/images/towel.jpeg
diff --git a/dist/images/trenchcoat.jpeg b/dist/images/trenchcoat.jpeg
diff --git a/dist/images/vacuum.png b/dist/images/vacuum.png
diff --git a/dist/images/wish.png b/dist/images/wish.png
diff --git a/dist/images/wish_on.png b/dist/images/wish_on.png
diff --git a/dist/images/wishlist.png b/dist/images/wishlist.png
diff --git a/dist/images/wishlist_on.png b/dist/images/wishlist_on.png
diff --git a/dist/index.html b/dist/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="ko">
+  <head>
+    <meta charset="UTF-8" />
+    <!-- 구글 폰트 로드 -->
+    <!-- <link rel="preconnect" href="https://fonts.googleapis.com" /> -->
+
+    <!-- 아이콘 설정 -->
+    <!-- <link rel="" href="" /> -->
+
+    <!-- 뷰포트 설정 -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <!-- 페이지 타이틀 설정 -->
+    <title>Good-Buy-Us</title>
+    <script type="module" crossorigin src="/assets/index-4YtmX69h.js"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

diff --git a/dist/logo192.png b/dist/logo192.png
diff --git a/dist/logo512.png b/dist/logo512.png
diff --git a/dist/manifest.json b/dist/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/dist/robots.txt b/dist/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/public/images/apple.png b/public/images/apple.png
diff --git a/public/images/towel.jpeg b/public/images/towel.jpeg
diff --git a/public/images/trenchcoat.jpeg b/public/images/trenchcoat.jpeg
diff --git a/public/images/vacuum.png b/public/images/vacuum.png
diff --git a/src/api/mypageApi.ts b/src/api/mypageApi.ts
@@ -1,35 +1,138 @@
 import axiosInstance from './axiosInstance';
 
+export type MyPostType = {
+  availableNumber: number;
+  category: string;
+  closeAt: null;
+  communityPostId: number;
+  createdAt: string;
+  description: string;
+  imageUrls: string[];
+  nickname: string;
+  paymentDeadline: null;
+  period: number;
+  productUrl: string;
+  status: string;
+  title: string;
+  totalAmount: number;
+  unitAmount: number;
+  userId: number;
+};
+
+export type GroupPurchaseType = {
+  communityPostId: number;
+  title: string;
+  totalAmount: number;
+  description: string;
+  productUrl: string;
+  category: string;
+  availableNumber: number;
+  createdAt: string;
+  period: number;
+  closeAt: null;
+  unitAmount: number;
+  imageUrls: string[];
+  status: string;
+  userId: number;
+  nickname: string;
+  paymentDeadline: null;
+};
+
 export type OrderType = {
-  delivery: null | string;
+  productName: string;
+  price: number;
   orderDate: string;
   paymentStatus: string;
   payment_key: null | string;
-  price: number;
-  productName: string;
   quantity: number;
+  delivery: null | string;
+  postId: number;
+  url: string;
 };
 
 export const postPasswordVerify = async (body: { currentPassword: string }) => {
-  const response = await axiosInstance.post(`/mypage/verfiy`, body);
+  const response = await axiosInstance.post(`/api/mypage/verify`, body);
 
   return response.data;
 };
 
 export const postPasswordChange = async (body: { newPassword: string }) => {
-  const response = await axiosInstance.post(`/mypage/change`, body);
+  const response = await axiosInstance.post(`/api/mypage/change`, body);
 
   return response.data;
 };
 
-export const postLocationChange = async (body: { newAddress: string }) => {
-  const response = await axiosInstance.post(`/mypage/changeneighbor`, body);
+export const putLocationChange = async (body: { newAddress: string }) => {
+  const response = await axiosInstance.put(`/api/mypage/changeneighbor`, body);
 
   return response.data;
 };
 
 export const getOrderList = async () => {
-  const response = await axiosInstance.get(`/mypage/orders`);
+  const response = await axiosInstance.get(`/api/mypage/orders`);
+
+  if (response.status !== 204) {
+    return response.data;
+  } else {
+    return [];
+  }
+};
+
+export const getRefundList = async () => {
+  const response = await axiosInstance.get(`/api/mypage/refund_orders`);
+
+  return response.data;
+};
+
+export const getUser = async () => {
+  const response = await axiosInstance.get(`/api/mypage`);
+
+  return response.data;
+};
+
+export const getCommunity = async () => {
+  const response = await axiosInstance.get(`/api/mypage/community`);
+
+  return response.data;
+};
+
+export const getMyPostList = async () => {
+  const response = await axiosInstance.get(`/api/mypage/post`);
+
+  return response.data;
+};
+
+export const deleteMyPost = async (id: string) => {
+  const response = await axiosInstance.delete(`/api/mypage/post/${id}`);
+
+  return response.data;
+};
+
+export const postProductCancel = async (body: {
+  paymentKey: string;
+  cancelReason: string;
+}) => {
+  const response = await axiosInstance.post(
+    `/api/v1/main-payments/cancel`,
+    body
+  );
+
+  return response.data;
+};
+
+export const putEditProfile = async (file: File) => {
+  const formData = new FormData();
+
+  formData.append('profile', file);
+  const response = await axiosInstance.put(
+    `/api/mypage/editprofile`,
+    formData,
+    {
+      headers: {
+        'Content-Type': 'multipart/form-data',
+      },
+    }
+  );
 
   return response.data;
 };
diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -1,32 +1,23 @@
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import { Link } from 'react-router-dom';
 import styled from 'styled-components';
-// import cart from '../../assets/icons/icon.png';
+import cart from '../../assets/icons/icon.png';
 import logo from '../../assets/icons/goodbuyus-logo.svg';
 import menu from '../../assets/icons/menu.svg';
+import { useAuth } from '../../context/AuthContext';
+
 const Header = () => {
-  const [isLoggedIn, setIsLoggedIn] = useState(false);
-  const [isAdmin, setIsAdmin] = useState(false);
-  const [isUser, setIsUser] = useState(false);
+  const { isLoggedIn, isAdmin, logout } = useAuth();
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
 
-  useEffect(() => {
-    const token = localStorage.getItem('token');
-    const userRole = localStorage.getItem('role');
-
-    setIsLoggedIn(!!token);
-    setIsAdmin(userRole === 'ROLE_ADMIN');
-    setIsUser(userRole === 'ROLE_USER');
-  }, []);
-
   const toggleMobileMenu = () => {
     setIsMobileMenuOpen(!isMobileMenuOpen);
   };
 
   const handleCommunityClick = (
     e: React.MouseEvent<HTMLAnchorElement, MouseEvent>
   ) => {
-    if (!isUser && !isAdmin) {
+    if (!isLoggedIn || !isAdmin) {
       e.preventDefault();
       alert('로그인 후 이용할 수 있는 페이지입니다.');
       setIsMobileMenuOpen(!isMobileMenuOpen);
@@ -71,12 +62,14 @@ const Header = () => {
               </StyledLink>
             </NavItem>
             <NavItem>
-              <StyledLink
-                to={isAdmin ? '#' : '/mypage/setting'}
-                onClick={toggleMobileMenu}
-              >
-                {isAdmin ? 'Admin Page' : 'My Page'}
-              </StyledLink>
+              {isLoggedIn && (
+                <StyledLink
+                  to={isAdmin ? '#' : '/mypage/setting'}
+                  onClick={toggleMobileMenu}
+                >
+                  {isAdmin ? 'Admin Page' : 'My Page'}
+                </StyledLink>
+              )}
               {isAdmin && (
                 <SubMenu>
                   <SubMenuItem>
@@ -98,22 +91,16 @@ const Header = () => {
               </Login>
             ) : (
               <>
-                <LogOut
-                  onClick={() => {
-                    localStorage.removeItem('role');
-                    localStorage.removeItem('token');
-                    setIsLoggedIn(false);
-                  }}
-                >
+                <LogOut onClick={logout}>
                   <a>LogOut</a>
                 </LogOut>
-                {/* <LogOut>
+                <LogOut>
                   <CartIcon>
                     <StyledLink to="/cart" onClick={toggleMobileMenu}>
                       <img src={cart} alt="장바구니 아이콘" />
                     </StyledLink>
                   </CartIcon>
-                </LogOut> */}
+                </LogOut>
               </>
             )}{' '}
           </NavList>
@@ -300,7 +287,7 @@ const Login = styled.li`
     text-decoration: none;
     display: block;
     text-align: center;
-    margin-top: 4px;
+    margin-top: 5px;
     font-weight: bold;
   }
 
@@ -329,11 +316,11 @@ const LogOut = styled.li`
   padding: 0px 10px;
 
   a {
+    font-size: 15px;
     color: white;
     text-decoration: none;
     display: block;
     text-align: center;
-    margin-top: 1px;
     font-weight: bold;
   }
 
@@ -370,16 +357,17 @@ const StyledLink = styled(Link)`
   }
 `;
 
-// const CartIcon = styled.div`
-//   img {
-//     width: 20px;
-//     height: 20px;
-//   }
-
-//   @media (min-width: 576px) and (max-width: 767px) {
-//     img {
-//       width: 25px;
-//       height: 25px;
-//     }
-//   }
-// `;
+const CartIcon = styled.div`
+  img {
+    margin-top: -4px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (min-width: 576px) and (max-width: 767px) {
+    img {
+      width: 25px;
+      height: 25px;
+    }
+  }
+`;
diff --git a/src/components/pages/HomePage/CategoryProduct.tsx b/src/components/pages/HomePage/CategoryProduct.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import StarRating from '../../common/StarRating';
 import DEFAULT_IMG from '../../../assets/icons/default-featured-image.png.jpg';
@@ -42,24 +42,19 @@ const CategoryProduct: React.FC<CategoryProductsProps> = ({
     setSelectedCategory(category);
     setIsExpanded(false);
   };
-
-  const filtered = products.filter((product: Product) =>
-    product.category.toLowerCase().includes(selectedCategory.toLowerCase())
+  const filtered = useMemo(
+    () =>
+      products?.filter((product) =>
+        product.category.toLowerCase().includes(selectedCategory.toLowerCase())
+      ) || [],
+    [selectedCategory, products]
   );
 
-  const getRandomProducts = (products: Product[]): Product[] => {
-    const shuffled = [...products].sort(() => 0.5 - Math.random()); // Shuffle the array
+  const displayedProducts = useMemo(() => {
+    const shuffled = [...filtered].sort(() => 0.5 - Math.random());
     return shuffled.slice(0, 8);
-  };
-
-  const displayedProducts = useMemo(
-    () => getRandomProducts(filtered),
-    [filtered]
-  );
+  }, [filtered]);
 
-  useEffect(() => {
-    //fetch상품
-  }, [selectedCategory]);
   return (
     <Recommend>
       <CategoryWrapper>