Feat: 푸터 설정, 페이지 이동 시 최상단으로 나타나게 설정, 반응형

src/components/common/Footer.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Footer: React.FC = () => (
+  <FooterWrapper>
+    <FooterText>© 2024 LinkUp. All Rights Reserved.</FooterText>
+  </FooterWrapper>
+);
+
+const FooterWrapper = styled.footer`
+  width: 100%;
+
+  color: white;
+  background-color: black;
+  text-align: center;
+  padding: 1rem 0;
+  margin-top: auto;
+`;
+
+const FooterText = styled.p`
+  margin: 0;
+  font-size: 1rem;
+`;
+
+export default Footer;

src/components/common/Layout.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import Header from './Header';
 import styled from 'styled-components';
 import { Outlet } from 'react-router-dom';
+import Footer from './Footer';
 
 const Layout: React.FC = () => {
   return (
@@ -10,15 +11,15 @@ const Layout: React.FC = () => {
       <MainContent>
         <Outlet />
       </MainContent>
-      {/* Footer */}
+      <Footer />
     </LayoutContainer>
   );
 };
 
 const LayoutContainer = styled.div`
   display: flex;
   flex-direction: column;
-  min-height: 100vh; /* 화면 전체를 채우기 위해 설정 */
+  min-height: 100vh;
 `;
 
 const MainContent = styled.main`

src/components/common/ScrollToTop.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+
+// 페이지 이동 시 자동으로 최상단을 보도록 하는 컴포넌트
+
+const ScrollToTop = () => {
+  const { pathname } = useLocation();
+
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [pathname]);
+  return null;
+};
+
+export default ScrollToTop;

src/components/pages/HomePage/CategoryProduct.tsx

@@ -131,6 +131,9 @@ const Card = styled.div`
     box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
     transform: translateY(-5px);
   }
+  @media (min-width: 768px) and (max-width: 1024px) {
+    width: 130px;
+  }
 `;
 const StyledLink = styled(Link)`
   text-decoration: none;

src/components/pages/HomePage/HomePage.tsx

@@ -338,6 +338,7 @@ const ContainerBox = styled.div`
   margin-left: auto;
   margin-right: auto;
 `;
+
 const Container = styled.div`
   display: flex;
   align-items: center;

src/components/pages/HomePage/PopularProduct.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import { Product } from './model/productSchema';
 import StarRating from '../../common/StarRating';
+import { Link } from 'react-router-dom';
 // import { Link } from 'react-router-dom';
 
 interface PopularProductProps {
@@ -10,37 +11,67 @@ interface PopularProductProps {
 
 const PopularProduct: React.FC<PopularProductProps> = ({ product }) => {
   return (
-    <BannerContainer>
-      <ImageWrapper>
-        <ProductImage src={product.image} alt={product.name} />
-      </ImageWrapper>
-      <ProductInfoSection>
-        <Star>
-          <StarRating rating={product.stars} />
-        </Star>
-        <ProductHeader>
-          <TitleArea>
-            <ProductName>{product.name}</ProductName>
+    <StyledLink to={`/products/${product.id}`}>
+      <BannerContainer>
+        <ImageWrapper>
+          <ProductImage src={product.image} alt={product.name} />
+        </ImageWrapper>
+        <ProductInfoSection>
+          <Star>
+            <StarRating rating={product.stars} />
+          </Star>
+          <ProductHeader>
+            <TitleArea>
+              <ProductName>{product.name}</ProductName>
 
-            <ProductCategory>{product.category}</ProductCategory>
-          </TitleArea>
-          <ProductDescription> 상품설명- 추후 추가 예정</ProductDescription>
-          {/* {product.description} */}
-        </ProductHeader>
-      </ProductInfoSection>
-    </BannerContainer>
+              <ProductCategory>{product.category}</ProductCategory>
+            </TitleArea>
+            <ProductDescription>
+              {' '}
+              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
+              추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
+              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
+              추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
+              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
+              추가 예정 상품설명- 추후 추가 예정 상품설명- 추후 추가 예정
+              상품설명- 추후 추가 예정 상품설명- 추후 추가 예정 상품설명- 추후
+              추가 예정 상품설명- 추후 추가 예정
+            </ProductDescription>
+            {/* {product.description} */}
+          </ProductHeader>
+        </ProductInfoSection>
+      </BannerContainer>
+    </StyledLink>
   );
 };
 
-const BannerContainer = styled.div`
+const StyledLink = styled(Link)`
   width: 80%;
-  height: 300px;
   margin: 0 auto;
+  display: block;
+  text-decoration: none;
+  color: inherit;
+
+  &:link,
+  &:visited,
+  &:hover,
+  &:active {
+    color: inherit;
+    text-decoration: none;
+  }
+`;
+
+const BannerContainer = styled.div`
+  height: 300px;
   display: flex;
   background-color: #f5f5f5;
   border-radius: 12px;
   overflow: hidden;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  &:hover {
+    cursor: pointer;
+    transform: translateY(-5px);
+  }
 `;
 
 const ImageWrapper = styled.div`
@@ -59,6 +90,7 @@ const ProductImage = styled.img`
 `;
 
 const ProductInfoSection = styled.div`
+  background: linear-gradient(to top, rgba(155, 155, 155, 0.7), transparent);
   flex-grow: 1;
   display: flex;
   flex-direction: column;
@@ -83,6 +115,9 @@ const TitleArea = styled.div`
   display: flex;
   align-items: baseline;
   margin-bottom: 15px;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    flex-direction: column;
+  }
 `;
 
 const ProductName = styled.h3`
@@ -95,6 +130,9 @@ const ProductName = styled.h3`
 const ProductCategory = styled.p`
   font-size: 16px;
   color: #666;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    margin-top: -10px;
+  }
 `;
 
 const ProductDescription = styled.p`
@@ -106,5 +144,12 @@ const ProductDescription = styled.p`
   -webkit-box-orient: vertical;
   overflow: hidden;
   text-overflow: ellipsis;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 export default PopularProduct;

src/components/pages/HomePage/RecommendProduct.tsx

@@ -96,6 +96,10 @@ const Card = styled.div`
     box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
     transform: translateY(-5px);
   }
+
+  @media (min-width: 768px) and (max-width: 1024px) {
+    width: 130px;
+  }
 `;
 const StyledLink = styled(Link)`
   text-decoration: none;

src/components/pages/ProductDetailPage/ProductDetail.tsx

@@ -379,7 +379,7 @@ const ProductDetail: React.FC = () => {
 };
 
 const Container = styled.div`
-  width: 100%;
+  width: 90%;
   max-width: 1200px;
   margin: 0 auto;
   padding: 20px;
@@ -417,8 +417,12 @@ const Stars = styled.div`
   position: absolute;
   font-size: 20px;
   color: #ffaa00;
-  bottom: 20%;
+  bottom: 21%;
   right: 2%;
+
+  @media (min-width: 768px) and (max-width: 1024px) {
+    bottom: 23%;
+  }
 `;
 
 const PriceWrapper = styled.div`
@@ -435,6 +439,9 @@ const DiscountWrapper = styled.div`
 const DiscountInfo = styled.div`
   font-size: 14px;
   color: #888;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    margin-left: -50%;
+  }
 `;
 const OriginalPrice = styled.div`
   text-decoration: line-through;
@@ -462,12 +469,27 @@ const RemainingCount = styled.div`
     margin-right: 8px;
     font-size: 16px;
   }
+  @media (min-width: 768px) and (max-width: 1024px) {
+    width: 220px;
+  }
 `;
 
 const Description = styled.p`
   margin-bottom: 30px;
   line-height: 1.6;
   color: #666;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    display: -webkit-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
 `;
 const DeadlineLabel = styled.div`
   font-size: 16px;

src/components/pages/ProductPage/ProductComponent.tsx

@@ -104,6 +104,9 @@ const Card = styled.div`
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   align-items: center;
   position: relative;
+  @media (min-width: 768px) and (max-width: 1024px) {
+    width: 130px;
+  }
 `;
 const StyledLink = styled(Link)`
   text-decoration: none;

src/routes/router.tsx

@@ -27,11 +27,17 @@ import SetProfilePage from '../components/pages/login/SetProfilePage';
 import LoginCompletePage from '../components/pages/login/LoginCompletePage';
 import PaymentForm from '../components/pages/Payment/PaymentForm';
 import PaymentSuccessPage from '../components/pages/Payment/PaymentSuccessPage';
+import ScrollToTop from '../components/common/ScrollToTop';
 
 const router = createBrowserRouter([
   {
     path: '/',
-    element: <Layout />,
+    element: (
+      <>
+        <Layout />
+        <ScrollToTop />
+      </>
+    ),
     errorElement: <ErrorPage />,
     children: [
       {