Design: 분양신청내역 퍼블리싱

src/components/common/board/TableBoard.tsx

@@ -46,7 +46,7 @@ const Table = styled.table`
   tbody {
     tr {
       td {
-        padding: 22px 10px;
+        padding: 19px 10px;
         text-align: center;
         vertical-align: middle;
         color: #9e9e9e;

src/pages/mypage/adopt/Breeder.tsx

@@ -0,0 +1,99 @@
+import TableBoard from 'components/common/board/TableBoard';
+import { styled } from 'styled-components';
+
+interface ListProps {
+  matchingId: number;
+  adopterNickname: string;
+  submitDate: string;
+  nameAndBreed: string;
+  isProcessed: boolean;
+}
+
+const TableWrapper = styled.div`
+  min-height: 500px;
+  table {
+    .matching-id {
+      width: 95px;
+    }
+    .adopter-nickname,
+    .submit-date,
+    .is-processed {
+      width: 175px;
+    }
+    .name-and-breed {
+      width: 205px;
+    }
+    .application-detail {
+      width: 109px;
+    }
+  }
+`;
+const BreederBoard = () => {
+  const listCategory = [
+    { uid: 'matching-id', name: 'No' },
+    { uid: 'adopter-nickname', name: '분양희망자' },
+    { uid: 'submit-date', name: '제출 날짜' },
+    { uid: 'name-and-breed', name: '강아지 이름 (견종명)' },
+    { uid: 'is-processed', name: '분양상태' },
+    { uid: 'application-detail', name: '신청내역' },
+  ];
+  const list: ListProps[] = [
+    {
+      matchingId: 1,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: true,
+    },
+    {
+      matchingId: 2,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: true,
+    },
+    {
+      matchingId: 3,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: true,
+    },
+    {
+      matchingId: 4,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: false,
+    },
+    {
+      matchingId: 5,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: true,
+    },
+  ];
+  return (
+    <TableWrapper className="table-wrapper">
+      <TableBoard category={listCategory}>
+        {list?.map(({ matchingId, adopterNickname, submitDate, nameAndBreed, isProcessed }) => {
+          return (
+            <TableBoard.TbodyItems key={matchingId} isDisabled={isProcessed}>
+              <td className="uid matching-id">{matchingId}</td>
+              <td className="adopter-nickname,">{adopterNickname}</td>
+              <td className="submit-date">{submitDate}</td>
+              <td className="name-and-breed">{nameAndBreed}</td>
+              <td className="is-processed">{isProcessed ? '분양승인' : '분양거절'}</td>
+              <td className="application-detail">
+                <button>상세보기</button>
+              </td>
+            </TableBoard.TbodyItems>
+          );
+        })}
+      </TableBoard>
+    </TableWrapper>
+  );
+};
+
+export default BreederBoard;

src/pages/mypage/adopt/User.tsx

@@ -0,0 +1,99 @@
+import TableBoard from 'components/common/board/TableBoard';
+import { styled } from 'styled-components';
+
+interface ListProps {
+  matchingId: number;
+  adopterNickname: string;
+  submitDate: string;
+  nameAndBreed: string;
+  isProcessed: boolean;
+}
+
+const TableWrapper = styled.div`
+  min-height: 500px;
+  table {
+    .matching-id {
+      width: 95px;
+    }
+    .adopter-nickname,
+    .submit-date,
+    .is-processed {
+      width: 175px;
+    }
+    .name-and-breed {
+      width: 205px;
+    }
+    .application-detail {
+      width: 109px;
+    }
+    tbody tr {
+      height: 136px;
+    }
+  }
+`;
+
+const UserBoard = () => {
+  const listCategory = [
+    { uid: 'matching-id', name: 'No' },
+    { uid: 'breeder-nickname', name: '브리더' },
+    { uid: 'submit-date', name: '제출 날짜' },
+    { uid: 'name-and-breed', name: '강아지 이름 (견종명)' },
+    { uid: 'application-detail', name: '신청내역' },
+    { uid: 'is-processed', name: '분양상태' },
+  ];
+
+  const list: ListProps[] = [
+    {
+      matchingId: 1,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: true,
+    },
+    {
+      matchingId: 2,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: true,
+    },
+    {
+      matchingId: 3,
+      adopterNickname: '수현',
+      submitDate: 'YYYY-MM-DD',
+      nameAndBreed: '초코(말티즈)',
+      isProcessed: false,
+    },
+  ];
+  return (
+    <TableWrapper className="table-wrapper">
+      <TableBoard category={listCategory}>
+        {list?.map(({ matchingId, adopterNickname, submitDate, nameAndBreed, isProcessed }) => {
+          return (
+            <TableBoard.TbodyItems key={matchingId} isDisabled={isProcessed}>
+              <td className="uid matching-id">{matchingId}</td>
+              <td className="adopter-nickname,">{adopterNickname}</td>
+              <td className="submit-date">{submitDate}</td>
+              <td className="name-and-breed">{nameAndBreed}</td>
+              <td className="application-detail">
+                <button>상세보기</button>
+              </td>
+              <td className="is-processed">
+                {isProcessed ? (
+                  <>
+                    <span>분양 승인</span>
+                    <button>후기 작성</button>
+                  </>
+                ) : (
+                  '분양거절'
+                )}
+              </td>
+            </TableBoard.TbodyItems>
+          );
+        })}
+      </TableBoard>
+    </TableWrapper>
+  );
+};
+
+export default UserBoard;

src/pages/mypage/adopt/index.tsx

@@ -0,0 +1,79 @@
+import { useJwtInfo } from 'hooks/useJwtInfo';
+import SelectOption from 'components/common/select/SelectOption';
+import SearchInput from 'components/common/search/SearchInput';
+import MypageLayout from 'layout/MypageLayout';
+import MypageForm from 'layout/MypageForm';
+import { useState } from 'react';
+import Pagination from 'components/common/board/Pagination';
+import BreederBoard from './Breeder';
+import UserBoard from './User';
+import { styled } from 'styled-components';
+import { Page } from 'pageable-response';
+
+const AdoptWrapper = styled.section`
+  .container {
+    min-height: 58rem;
+  }
+`;
+
+export default function Adopt() {
+  const [page, setPage] = useState(0);
+  const [pageInfo, setPageInfo] = useState<Page>({
+    totalPages: 0,
+    first: false,
+    last: false,
+    number: 0,
+  });
+  const { role } = useJwtInfo();
+  const [selectedOption, setSelectedOption] = useState<string | undefined>(undefined);
+  const searchOptions = [
+    { value: 'all', label: '전체' },
+    { value: 'breed', label: '견종' },
+    { value: 'name', label: '강아지 이름' },
+  ];
+
+  const onSearch = async (keyword: string) => {
+    // keyword로 찾기 api 쓰겠쥬
+  };
+  // {role === 'BREEDER' ? <Breeder /> : <User />}
+  return (
+    <AdoptWrapper>
+      <MypageLayout>
+        <MypageForm>
+          <MypageLayout.Label>{role === 'BREEDER' ? '분양신청내역' : '신청내역'}</MypageLayout.Label>
+          <MypageLayout.ContentsHeaders
+            style={{
+              marginBottom: '26px',
+            }}
+          >
+            <SelectOption
+              selectedValue={selectedOption}
+              onSelect={setSelectedOption}
+              options={searchOptions}
+              placeholder="항목을 선택해 주세요"
+              size="sm"
+            ></SelectOption>
+            <SearchInput
+              placeholder="검색어를 입력해주세요."
+              onSearch={(value) => {
+                onSearch(value);
+              }}
+            />
+          </MypageLayout.ContentsHeaders>
+          <MypageLayout.Content>{role === 'BREEDER' ? <BreederBoard /> : <UserBoard />}</MypageLayout.Content>
+          <MypageLayout.Footer>
+            <Pagination
+              style={{
+                alignSelf: 'center',
+                margin: '64px auto',
+              }}
+              currentpage={page}
+              totalPage={pageInfo.totalPages}
+              onChange={(page) => setPage(page)}
+            />
+          </MypageLayout.Footer>
+        </MypageForm>
+      </MypageLayout>
+    </AdoptWrapper>
+  );
+}