feat: 로그인/회원가입 반응형 디자인 및 api 응답값 수정 (#107)

* feat: sign in page responsive design

* feat: sign up page responsive design

* fix: change auction bid list table property

src/apis/auctions.ts

@@ -83,6 +83,7 @@ interface GetAuctionBidListResponse {
   bids: Array<{
     nickname: string;
     price: number;
+    createdAt: string;
   }>;
 }
 export const getAuctionBidList = async ({

src/components/Auction/AuctionBidList.tsx

@@ -1,10 +1,19 @@
-import { Box, Table, Tbody, Td, Th, Thead, Tr } from '@chakra-ui/react';
+import { Box, Table, Tbody, Td, Th, Thead, Tr, theme } from '@chakra-ui/react';
 import { useQuery } from '@tanstack/react-query';
 import { getAuctionBidList } from 'src/apis/auctions';
 
 interface AuctionBidListProps {
   auctionId: number;
 }
+
+const parseCratedAt = (createdAt: string) => {
+  const [date, time] = createdAt.split('T');
+  const [month, day] = date.split('-');
+  const [hour, minute] = time.split(':');
+
+  return `${month}월${day}일 ${hour}:${minute}`;
+};
+
 const AuctionBidList = ({ auctionId }: AuctionBidListProps) => {
   const { data, status } = useQuery({
     queryKey: ['auctionBidList', auctionId],
@@ -19,14 +28,16 @@ const AuctionBidList = ({ auctionId }: AuctionBidListProps) => {
       <Table size="sm">
         <Thead>
           <Tr>
-            <Th>입찰자 닉네임</Th>
+            <Th>입찰 시간</Th>
             <Th>입찰 가격</Th>
           </Tr>
         </Thead>
         <Tbody>
           {data.bids.map((bid, index) => (
             <Tr key={index}>
-              <Td>{bid.nickname}</Td>
+              <Td color={theme.colors.gray[400]}>
+                {parseCratedAt(bid.createdAt)}
+              </Td>
               <Td>{bid.price.toLocaleString('ko-KR')}</Td>
             </Tr>
           ))}

src/components/Form/FormInput.tsx

@@ -20,7 +20,12 @@ const FormInput = ({
   smallSize = false,
 }: FormInputProps) => {
   return (
-    <Flex align="center" mb={10}>
+    <Flex
+      align="center"
+      mb={10}
+      flexDirection={{ base: 'column', md: 'row' }}
+      gap={{ base: '4', md: '0' }}
+    >
       <FormInputTitle title={title} />
       <Input
         type={!type ? 'text' : type}

src/pages/SignInPage.tsx

@@ -1,6 +1,6 @@
 import PageLayout from '@/layouts/PageLayout';
 import styled from 'styled-components';
-import { Button, theme, Text } from '@chakra-ui/react';
+import { Button, theme, Text, Flex } from '@chakra-ui/react';
 import Logo from '@/assets/logo.png';
 import FormInput from '@/components/Form/FormInput';
 import { Link, useNavigate } from 'react-router-dom';
@@ -47,7 +47,13 @@ const SigninPage = () => {
 
   return (
     <PageLayout>
-      <CenterContainer>
+      <Flex
+        w="100%"
+        flexDirection="column"
+        justifyContent="center"
+        alignItems="center"
+        mt={{ base: '12', md: '24' }}
+      >
         <Link to="/">
           <LogoImg src={Logo} />
         </Link>
@@ -68,11 +74,10 @@ const SigninPage = () => {
         />
         <Button
           mt={12}
-          px={64}
-          py={4}
           color="white"
           bgColor={theme.colors.orange[300]}
           onClick={handleLogin}
+          w="70%"
         >
           로그인
         </Button>
@@ -81,22 +86,13 @@ const SigninPage = () => {
             계정 생성하기
           </Text>
         </Link>
-      </CenterContainer>
+      </Flex>
     </PageLayout>
   );
 };
 
 export default SigninPage;
 
-const CenterContainer = styled.div`
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  flex-direction: column;
-  align-items: center;
-  margin-top: 8rem;
-`;
-
 const LogoImg = styled.img`
   width: 15rem;
   height: 2.5rem;

src/pages/SignUpPage.tsx

@@ -1,7 +1,7 @@
 import PageLayout from '@/layouts/PageLayout';
 import Header from '@/components/common/Header';
 import PageTitle from '@/components/Form/PageTitle';
-import { Box, Button, theme, Flex, Text } from '@chakra-ui/react';
+import { Box, Button, theme, Flex, Text, Card } from '@chakra-ui/react';
 import FormInput from '@/components/Form/FormInput';
 import { useNavigate } from 'react-router-dom';
 import useSignUpForm from '@/hooks/SignUp/useSignUpForm';
@@ -78,39 +78,47 @@ const SignUpPage = () => {
     <PageLayout>
       <Header showIconsAndTexts={true} />
       <PageTitle title="회원 가입" />
-      <Box my={12}>
+      <Flex my={12} flexDirection="column">
         <FormInput
           smallSize
           title="닉네임"
           placeholder="닉네임"
           onChange={onChange('name')}
           value={state.name}
         />
-        <Flex>
-          <Box>
-            <FormInput
-              smallSize
-              title="아이디"
-              placeholder="아이디"
-              onChange={onChange('email')}
-              value={state.email}
-            />
-          </Box>
-          <Button
-            ml={8}
-            color="black"
-            bgColor="white"
-            border="1px"
-            borderColor="gray.300"
-            onClick={onCheckDuplicated}
+        <Flex flexDirection="column">
+          <FormInput
+            smallSize
+            title="아이디"
+            placeholder="아이디"
+            onChange={onChange('email')}
+            value={state.email}
+          />
+          <Flex
+            align={{ base: 'center', md: '' }}
+            mb={10}
+            gap={{ base: '4', md: '0' }}
           >
-            중복 확인
-          </Button>
-          <Text mt={2} ml={4} color={state.isEnableEmail ? 'green' : 'red'}>
-            {state.isEnableEmail
-              ? '중복확인이 완료되었습니다.'
-              : 'id 중복확인을 해주세요.'}
-          </Text>
+            <Button
+              color="black"
+              bgColor="white"
+              border="1px"
+              borderColor="gray.300"
+              onClick={onCheckDuplicated}
+            >
+              중복 확인
+            </Button>
+            <Text
+              fontSize="0.8rem"
+              mt={2}
+              ml={4}
+              color={state.isEnableEmail ? 'green' : 'red'}
+            >
+              {state.isEnableEmail
+                ? '중복확인이 완료되었습니다.'
+                : 'id 중복확인을 해주세요.'}
+            </Text>
+          </Flex>
         </Flex>
 
         <FormInput
@@ -143,17 +151,16 @@ const SignUpPage = () => {
           onChange={onChange('accountNumber')}
           value={state.accountNumber}
         />
-      </Box>
-
-      <Button
-        px={64}
-        py={4}
-        color="white"
-        bgColor={theme.colors.orange[300]}
-        onClick={onSubmitSignUp}
-      >
-        회원가입
-      </Button>
+        <Button
+          color="white"
+          bgColor={theme.colors.orange[300]}
+          onClick={onSubmitSignUp}
+          w={{ base: '15rem', sm: '15rem', md: '15rem', lg: '21.5rem' }}
+          alignSelf="center"
+        >
+          회원가입
+        </Button>
+      </Flex>
     </PageLayout>
   );
 };