feat: 구매 상세, 경매 입찰 페이지, 구매 완료 페이지 모바일 환경 디자인 적용 (#99)

* feat: 구매 상세 페이지 반응형 디자인 적용 * feat: 경매 상세 페이지 반응형 적용 * feat: 구매완료 페이지 반응형 디자인 추가 * feat: 구매 상세 설명 페이지 폰트 수정
jnu-resellers · Jun 8, 2024 · 1d6c556 · 1d6c556
1 parent 939a522
commit 1d6c556
Show file tree

Hide file tree

Showing 11 changed files with 180 additions and 72 deletions.
diff --git a/src/components/Auction/AuctionPurchase.tsx b/src/components/Auction/AuctionPurchase.tsx
@@ -18,16 +18,22 @@ export const AuctionPurchase = () => {
   if (status === 'pending') return <>로딩 중 ...</>;
 
   return (
-    <Box w="100%">
-      <Flex justifyContent="start" alignItems="center">
-        <Text fontSize="xx-large" fontWeight="600" mr="2rem">
+    <Box w="100%" p={{ base: 2, sm: 4, md: 6 }}>
+      <Flex justifyContent="start" alignItems="center" flexWrap="wrap">
+        <Text
+          fontSize={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }}
+          fontWeight="600"
+          mr={{ base: '0', md: '2rem' }}
+        >
           기자재 경매
         </Text>
-        <Text fontSize="larger">상품 카테고리 : {auction.itemType}</Text>
+        <Text fontSize={{ base: 'md', sm: 'lg', md: 'xl' }}>
+          상품 카테고리 : {auction.itemType}
+        </Text>
       </Flex>
       <Divider orientation="horizontal" />
       <Flex flexDirection="column">
-        <Box w="100%" mr="8rem">
+        <Box w="100%">
           <AuctionPurchaseDetails
             imageNames={auction.imageNames}
             productName={auction.productName}

diff --git a/src/components/Auction/AuctionPurchaseDetails.tsx b/src/components/Auction/AuctionPurchaseDetails.tsx
@@ -55,15 +55,22 @@ export const AuctionPurchaseDetails = ({
   };
 
   return (
-    <Flex flexDirection="column" w="100%">
+    <Flex flexDirection="column" w="100%" p={{ base: 2, sm: 4, lg: '2.25rem' }}>
       <Box>
-        <Flex gap={10} mb={8}>
+        <Flex gap={10} mb={8} flexWrap="wrap">
           <AuctionPurchaseImages imageNames={imageNames} />
           <Flex flexDirection="column" justifyContent="center">
-            <Text fontSize="2.5rem" fontWeight="500">
+            <Text
+              fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}
+              fontWeight="500"
+            >
               {productName}
             </Text>
-            <Text fontSize="larger" mb={4} color={theme.colors.gray[400]}>
+            <Text
+              fontSize={{ base: 'md', sm: 'lg', md: 'xl' }}
+              mb={4}
+              color={theme.colors.gray[400]}
+            >
               판매자: {writer}
             </Text>
             <Text mb={2} color={theme.colors.gray[400]}>
@@ -72,27 +79,23 @@ export const AuctionPurchaseDetails = ({
             <Box mb={4}>
               <CurrentPriceStat nowPrice={nowPrice} startPrice={startPrice} />
             </Box>
-            <Box fontSize="larger" fontWeight="600">
+            <Box fontSize={{ base: 'md', sm: 'lg', md: 'xl' }} fontWeight="600">
               입찰 건수 : {bidCount}
             </Box>
             <AuctionTime startAt={startAt} endAt={endAt} />
             <Tooltip
               hasArrow
-              label="입찰 및 낙찰 시에는 취소가 되지 않으니 상품 문의 시에는 입찰전
-              고객센터를 통해 문의 후 입찰 부탁드립니다."
+              label="입찰 및 낙찰 시에는 취소가 되지 않으니 상품 문의 시에는 입찰전 고객센터를 통해 문의 후 입찰 부탁드립니다."
               bg="red.600"
               padding={4}
             >
               <Button
-                px={28}
-                py={6}
+                px={{ base: 4, lg: 28 }}
+                py={{ base: 2, lg: 6 }}
                 color="white"
                 bgColor={theme.colors.orange[300]}
-                float="right"
-                marginTop="2rem"
-                onClick={() => {
-                  openModal();
-                }}
+                mt={{ base: '1rem', lg: '2rem' }}
+                onClick={openModal}
               >
                 입찰 하기
               </Button>

diff --git a/src/components/Auction/AuctionPurchaseImages.tsx b/src/components/Auction/AuctionPurchaseImages.tsx
@@ -57,15 +57,21 @@ export const AuctionPurchaseImages = ({ imageNames }: PurchaseImagesProps) => {
     nextArrow: <NextArrow />,
   };
   return (
-    <Flex flexDirection="row" w="100%" m="2.25rem" maxW="32rem">
+    <Flex
+      flexDirection="row"
+      w="100%"
+      m={{ base: 2, sm: 4, lg: '2.25rem' }}
+      maxW={{ base: '100%', lg: '32rem' }}
+      justify="center"
+    >
       <Slider {...settings}>
         {imageNames.map((imageName: string) => (
           <Img
             key={imageName}
             src={generateImgCloudFrontUrl(imageName)}
             alt={imageName}
-            w="20rem"
-            h="30rem"
+            w={{ base: '15rem', sm: '20rem', lg: '30rem' }}
+            h={{ base: '15rem', sm: '20rem', lg: '30rem' }}
             maxW="30rem"
             maxH="30rem"
           />

diff --git a/src/components/Auction/AuctionTime.tsx b/src/components/Auction/AuctionTime.tsx
@@ -19,9 +19,15 @@ export const AuctionTime = ({ startAt, endAt }: AuctionTimeProps) => {
 
   return (
     <Flex flexDirection="column" color={theme.colors.gray[400]}>
-      <Text fontSize="small">시작 시간 : {timeFormatter(startAt)}</Text>
-      <Text fontSize="small">종료 시간 : {timeFormatter(endAt)}</Text>
-      <Text fontSize="small">남은 시간 : {restTime}</Text>
+      <Text fontSize={{ base: 'small', md: 'medium' }}>
+        시작 시간 : {timeFormatter(startAt)}
+      </Text>
+      <Text fontSize={{ base: 'small', md: 'medium' }}>
+        종료 시간 : {timeFormatter(endAt)}
+      </Text>
+      <Text fontSize={{ base: 'small', md: 'medium' }}>
+        남은 시간 : {restTime}
+      </Text>
     </Flex>
   );
 };
diff --git a/src/components/Purchase/DescriptionBox.tsx b/src/components/Purchase/DescriptionBox.tsx
@@ -7,7 +7,11 @@ interface DescriptionBoxProps {
 export const DescriptionBox = ({ description }: DescriptionBoxProps) => {
   return (
     <Box bgColor="#F5F5F5" mb="2rem" borderRadius="0.5rem">
-      <Text mb="2rem" p="2rem">
+      <Text
+        mb={{ base: 2, lg: 4 }}
+        p={{ base: 2, lg: 6 }}
+        fontSize={{ base: 'md', sm: 'lg', md: 'lg' }}
+      >
         {description}
       </Text>
     </Box>

diff --git a/src/components/Purchase/Purchase.tsx b/src/components/Purchase/Purchase.tsx
@@ -63,28 +63,34 @@ export const Purchase = () => {
   if (status === 'pending') return <>로딩 중 ...</>;
 
   return (
-    <Box w="100%">
-      <Flex justifyContent="start" alignItems="center">
-        <Text fontSize="xx-large" fontWeight="600" mr="2rem">
+    <Box w="100%" p={{ base: 2, sm: 4, md: 6 }}>
+      <Flex justifyContent="start" alignItems="center" flexWrap="wrap">
+        <Text
+          fontSize={{ base: 'xl', sm: '2xl', md: '3xl', lg: '4xl' }}
+          fontWeight="600"
+          mr={{ base: '0', md: '2rem' }}
+        >
           기자재 거래
         </Text>
-        <Text fontSize="larger">상품 카테고리 : {material.itemType}</Text>
+        <Text fontSize={{ base: 'md', sm: 'lg', md: 'xl' }}>
+          상품 카테고리 : {material.itemType}
+        </Text>
       </Flex>
       <Divider orientation="horizontal" />
       <Flex flexDirection="column">
-        <Box w="100%" mr="8rem">
+        <Box w="100%">
           <PurchaseDetails
             itemType={material.itemType}
             writer={material.writer}
             product={material.product}
             contact={material.contact}
           />
           <Button
-            px={28}
-            py={6}
+            px={{ base: 4, lg: 28 }}
+            py={{ base: 2, lg: 6 }}
             color="white"
             bgColor={theme.colors.orange[300]}
-            float="right"
+            alignSelf="flex-end"
             isDisabled={material.product.isSold}
             onClick={onSubmitOrder}
           >

diff --git a/src/components/Purchase/PurchaseDetails.tsx b/src/components/Purchase/PurchaseDetails.tsx
@@ -15,26 +15,48 @@ export const PurchaseDetails = ({
   itemType,
 }: PurchaseProps) => {
   return (
-    <Flex flexDirection="column" w="100%" m="2.25rem 2.25rem 0 0">
-      <Text fontSize="xx-large" fontWeight="500" mb="1.25rem">
+    <Flex
+      flexDirection="column"
+      w="100%"
+      m={{ base: 2, sm: 4, lg: '2.25rem 2.25rem 0 0' }}
+    >
+      <Text
+        fontSize={{ base: 'xl', sm: '2xl', md: '3xl' }}
+        fontWeight="500"
+        mb="1.25rem"
+      >
         {productName}
       </Text>
-      <Text fontSize="larger" mb="1.25rem">
+      <Text fontSize={{ base: 'md', sm: 'lg', md: 'xl' }} mb="1.25rem">
         {writer}
       </Text>
       <Divider orientation="horizontal" mb="1rem" />
       <Box key={productId}>
-        <Text fontSize="xxx-large">{priceFormatter(price)}원</Text>
+        <Text fontSize={{ base: '2xl', sm: '3xl', md: '4xl' }}>
+          {priceFormatter(price)}원
+        </Text>
         <PurchaseImages fileNames={fileNames} />
-        <Text fontSize="x-large" fontWeight="600" marginBottom="2rem">
+        <Text
+          fontSize={{ base: 'xl', sm: '2xl', md: '3xl' }}
+          fontWeight="600"
+          marginBottom="2rem"
+        >
           설명
         </Text>
         <DescriptionBox description={description} />
-        <Text fontSize="x-large" fontWeight="600" marginBottom="2rem">
+        <Text
+          fontSize={{ base: 'xl', sm: '2xl', md: '3xl' }}
+          fontWeight="600"
+          marginBottom="2rem"
+        >
           결함
         </Text>
         <DescriptionBox description={defect} />
-        <Text fontSize="x-large" fontWeight="600" marginBottom="2rem">
+        <Text
+          fontSize={{ base: 'xl', sm: '2xl', md: '3xl' }}
+          fontWeight="600"
+          marginBottom="2rem"
+        >
           연락처: {contact}
         </Text>
         <PriceCheck itemType={itemType} />

diff --git a/src/components/Purchase/PurchaseImages.tsx b/src/components/Purchase/PurchaseImages.tsx
@@ -4,6 +4,7 @@ import { PrevArrow, NextArrow } from '../Auction/AuctionPurchaseImages';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
 import Slider from 'react-slick';
+
 export interface PurchaseImagesProps {
   fileNames: string[];
 }
@@ -19,12 +20,13 @@ export const PurchaseImages = ({ fileNames }: PurchaseImagesProps) => {
     prevArrow: <PrevArrow />,
     nextArrow: <NextArrow />,
   };
+
   return (
     <Flex
       flexDirection="row"
       w="100%"
-      m="2.25rem"
-      maxW="32rem"
+      m={{ base: 4, lg: '2.25rem' }}
+      maxW={{ base: '20rem', lg: '32rem' }}
       justify="center"
     >
       <Slider {...settings}>
@@ -33,8 +35,8 @@ export const PurchaseImages = ({ fileNames }: PurchaseImagesProps) => {
             key={fileName}
             src={generateImgCloudFrontUrl(fileName)}
             alt={fileName}
-            w="20rem"
-            h="30rem"
+            w={{ base: '15rem', sm: '20rem', lg: '30rem' }}
+            h={{ base: '15rem', sm: '20rem', lg: '30rem' }}
             maxW="30rem"
             maxH="30rem"
           />

diff --git a/src/components/TransactionInformation/ProductInformation.jsx b/src/components/TransactionInformation/ProductInformation.jsx
@@ -14,41 +14,58 @@ import {
 const ProductInformation = ({ productInfo, totalPrice }) => {
   return (
     <div>
-      <Heading mt="24" as="h2" size="md">
+      <Heading
+        mt={{ base: '6', md: '24' }}
+        as="h2"
+        size={{ base: 'sm', md: 'md' }}
+      >
         구매 상품 정보
       </Heading>
       <TableContainer
         mt="4"
+        ml={{ base: '4', md: '0' }}
         borderRadius="lg"
         border="1px"
         borderColor="gray.200"
+        maxW="100%"
+        overflowX="auto"
       >
         <Table mt="2" variant="simple">
           <Thead>
             <Tr>
-              <Th fontSize="16" fontWeight="900">
+              <Th fontSize={{ base: '12', md: '16' }} fontWeight="900">
                 제품명
               </Th>
-              <Th fontSize="16" fontWeight="900">
+              <Th fontSize={{ base: '12', md: '16' }} fontWeight="900">
                 설명
               </Th>
-              <Th width="33%" fontSize="16" fontWeight="900">
+              <Th
+                width={{ base: '50%', md: '33%' }}
+                fontSize={{ base: '12', md: '16' }}
+                fontWeight="900"
+              >
                 결함
               </Th>
             </Tr>
           </Thead>
           <Tbody>
             <Tr>
-              <Td whiteSpace="normal">{productInfo.productName}</Td>
-              <Td whiteSpace="normal">{productInfo.description}</Td>
-              <Td whiteSpace="normal">{productInfo.defect}</Td>
+              <Td whiteSpace="normal" fontSize={{ base: '10', md: '14' }}>
+                {productInfo.productName}
+              </Td>
+              <Td whiteSpace="normal" fontSize={{ base: '10', md: '14' }}>
+                {productInfo.description}
+              </Td>
+              <Td whiteSpace="normal" fontSize={{ base: '10', md: '14' }}>
+                {productInfo.defect}
+              </Td>
             </Tr>
           </Tbody>
         </Table>
       </TableContainer>
       <Flex mt="4" justify="flex-end">
-        <Heading as="h2" size="md">
-          <Text as="span" mr="24">
+        <Heading as="h2" size={{ base: 'sm', md: 'md' }}>
+          <Text as="span" mr={{ base: '2', md: '24' }}>
             총 금액
           </Text>
           {totalPrice.toLocaleString()}원