git pull

package.json

@@ -5,6 +5,8 @@
    "dependencies": {
       "@emotion/react": "^11.11.1",
       "@emotion/styled": "^11.11.0",
+      "@mui/material": "^5.14.8",
+      "@mui/styled-engine-sc": "^5.14.8",
       "@tanstack/react-query": "^4.32.6",
       "@testing-library/jest-dom": "^5.14.1",
       "@testing-library/react": "^13.0.0",
@@ -27,6 +29,7 @@
       "react-scripts": "5.0.1",
       "react-test-renderer": "^18.2.0",
       "styled-components": "^6.0.7",
+      "styled-reset": "^4.5.1",
       "typescript": "^5.1.6",
       "web-vitals": "^2.1.0",
       "yarn": "^1.22.19"

src/components/breeders/BreederCard.tsx

@@ -1,6 +1,6 @@
 import Board from 'components/common/board/Board';
 import { PATHS } from '../../constants';
-import { IBreeder } from 'pages/breeders';
+import { IBreeder } from 'pages/mypage/breeders';
 import { Link } from 'react-router-dom';
 import { styled } from 'styled-components';
 import { ReactComponent as Badge } from 'assets/images/badge.svg';

src/components/common/select/OptionsSelected.tsx

@@ -0,0 +1,83 @@
+import React, { useRef } from 'react';
+import { styled } from 'styled-components';
+
+interface Option {
+  value: string;
+  label: string;
+}
+interface SelectOptionProps {
+  selectedValue: string | undefined;
+  onSelect: (value: string) => void;
+  options: Option[];
+  optionStyle?: React.CSSProperties;
+  selectedOptionStyle?: React.CSSProperties;
+  placeholder: string | undefined;
+}
+const CustomSelect = styled.div`
+  position: relative;
+  max-width: 240px;
+  font-size: 0;
+  display: flex;
+`;
+const Select = styled.select`
+  width: 100%;
+  height: 3rem;
+  font-size: 1rem;
+  padding-left: 2rem;
+  border: 1px solid#dddddd;
+  border-radius: 1rem;
+  box-sizing: border-box;
+  background-color: #fff;
+  color: #939393;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+`;
+const IconSVG = styled.svg`
+  margin-left: -44px;
+  align-self: center;
+  width: 32px;
+  height: 32px;
+`;
+const StyledOption = styled.option<{ isSelected: boolean }>`
+  cursor: pointer;
+  background-color: ${(props) => (props.isSelected ? 'lightblue' : 'white')};
+  font-weight: ${(props) => (props.isSelected ? 'bold' : 'normal')};
+`;
+
+const SelectOption: React.FC<SelectOptionProps> = ({ selectedValue, onSelect, options, placeholder }) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  return (
+    <Container ref={containerRef}>
+      <CustomSelect>
+        <Select placeholder={placeholder}>
+          {options.map((option) => (
+            <StyledOption
+              key={option.value}
+              value={option.value}
+              isSelected={selectedValue === option.value}
+              onMouseEnter={() => onSelect(option.value)}
+            >
+              {option.label}
+            </StyledOption>
+          ))}
+        </Select>
+        <IconSVG width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path
+            d="M16.7425 21.1716C16.3452 21.614 15.6519 21.614 15.2545 21.1716L8.83648 14.0253C8.25832 13.3816 8.7152 12.3571 9.58047 12.3571L22.4166 12.3571C23.2819 12.3571 23.7388 13.3816 23.1606 14.0253L16.7425 21.1716Z"
+            fill="#4EC1BF"
+          />
+        </IconSVG>
+      </CustomSelect>
+    </Container>
+  );
+};
+
+export default SelectOption;
+const Container = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+  margin-bottom: 1rem;
+`;

src/components/mypage/sidemenuItem.ts

@@ -12,7 +12,7 @@ export const adoptmenuItem: ISidemenuItem[] = [
   },
   {
     name: '분양후기 관리',
-    path: PATHS.mypage.review,
+    path: PATHS.mypage.reviews,
   },
   {
     name: '프로필 관리',

src/constants.ts

@@ -1,7 +1,7 @@
 /** 상수 */
 export const CONSTANTS = {
   get API_URL() {
-    const url = process.env.REACT_APP_API_URL || "http://3.38.43.179:8080";
+    const url = process.env.REACT_APP_API_URL || 'http://3.38.43.179:8080';
     if (!url) {
       throw new Error('API_URL 환경변수가 설정되지 않았습니다.');
     }
@@ -103,7 +103,7 @@ export const PATHS = {
     /**분양 신청 내역 */
     adopt: '/mypage/adopt',
     /**분양 후기 관리 */
-    review: '/mypage/review',
+    reviews: '/mypage/reviews',
     /** 보유견종 관리 */
     breed: {
       /** 보유견종 관리 루트 */

src/layout/MypageLayout.tsx

@@ -142,6 +142,11 @@ MypageLayout.Header = styled.div`
   display: flex;
   justify-content: space-between;
 `;
+MypageLayout.ContentsHeaders = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+`;
 
 MypageLayout.Content = styled.div``;
 

src/pages/Router.tsx

@@ -19,8 +19,7 @@ import Footer from '../components/common/footer/Footer';
 import SignUpStep1 from './signup/step-1';
 import SignUpStep2 from './signup/step-2';
 import SignUpStep3 from './signup/step-3';
-import Breeders from './breeders';
-import Reserve from './reserve';
+import Breeders from './mypage/breeders';
 import Adopt from './mypage/adopt';
 import Breed from './mypage/breed';
 import Modify from './mypage/modify';
@@ -29,11 +28,13 @@ import Profile from './mypage/profile';
 import Review from './mypage/review';
 import NewBreed from './mypage/breed/new';
 import EditBreed from './mypage/breed/edit';
-import BreederDetail from './breeders/[id]';
+import BreederDetail from './mypage/breeders/[id]';
 
 import { useLogin } from '../api/useLogin';
 import UserDetail from './user/[id]';
 import Dogs from './dogs';
+import Reviews from './mypage/breeders/reviews/reviews';
+import Reserve from './reserve';
 
 export default function Router() {
   const { isLoggedIn } = useLogin();
@@ -82,7 +83,7 @@ export default function Router() {
         <Route path="*" element={<div>404</div>} />
 
         <Route path={PATHS.mypage.adopt} element={<Adopt />} />
-        <Route path={PATHS.mypage.review} element={<Review />} />
+        <Route path={PATHS.mypage.reviews} element={<Reviews />} />
         <Route path={PATHS.mypage.breed.root} element={<Breed />} />
         <Route path={PATHS.mypage.breed.new} element={<NewBreed />} />
         <Route path={PATHS.mypage.breed.edit} element={<EditBreed />} />

src/pages/breeders/[id].tsx → src/pages/mypage/breeders/[id].tsx

@@ -1,6 +1,6 @@
 import axios, { AxiosError, AxiosResponse } from 'axios';
 import Detail from 'components/common/detail/Detail';
-import { API_PATHS } from '../../constants';
+import { API_PATHS } from '../../../constants';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { IBreederDetail } from 'assets/types/User';

src/pages/mypage/breeders/reviews/index.ts

@@ -0,0 +1 @@
+export { default as Reviews } from './reviews';

src/pages/mypage/breeders/reviews/reviews.tsx

@@ -0,0 +1,85 @@
+import Pagination from 'components/common/board/Pagination';
+import Button, { ButtonSize } from 'components/common/button/Button';
+import SearchInput from 'components/common/search/SearchInput';
+import MypageLayout from 'layout/MypageLayout';
+import { API_PATHS } from '@constants';
+import { Link } from 'react-router-dom';
+import { useMemo, useState } from 'react';
+import { Page } from 'pageable-response';
+import MypageForm from 'layout/MypageForm';
+import SelectOption from 'components/common/select/OptionsSelected';
+interface Option {
+  value: string;
+  label: string;
+}
+const options: Option[] = [
+  { value: '전체', label: '전체' },
+  { value: '견종', label: '견종' },
+  { value: '제목', label: '제목' },
+  { value: '강아지 이름', label: '강아지 이름' },
+];
+const Reviews = () => {
+  const [page, setPage] = useState(1);
+  const [pageInfo, setPageInfo] = useState<Page>({
+    totalPages: 0,
+    first: false,
+    last: false,
+    number: 0,
+  });
+  const [selectedOption, setSelectedOption] = useState<string | undefined>(undefined);
+  const handleOptionSelect = (value: string) => {
+    setSelectedOption(value);
+  };
+  return (
+    <MypageLayout>
+      <MypageForm>
+        <MypageLayout.ContentsHeaders
+          style={{
+            marginBottom: '4rem',
+          }}
+        >
+          <MypageLayout.Label>분양후기 관리</MypageLayout.Label>
+          <SelectOption
+            placeholder="선택해주세요"
+            selectedValue={selectedOption}
+            onSelect={handleOptionSelect}
+            options={options}
+          />
+          <SearchInput placeholder="검색어를 입력해주세요." onSearch={(v) => console.log(v)} />
+        </MypageLayout.ContentsHeaders>
+        <MypageLayout.Content
+          style={{
+            display: 'grid',
+            gridTemplateColumns: 'repeat(4, 1fr)',
+            gridTemplateRows: 'repeat(2, 1fr)',
+            gap: '3rem',
+            marginBottom: '6rem',
+          }}
+        ></MypageLayout.Content>
+        <MypageLayout.Footer>
+          <Pagination
+            style={{
+              alignSelf: 'center',
+            }}
+            currentpage={page}
+            totalPage={pageInfo.totalPages}
+            onChange={(page) => setPage(page)}
+          />
+          <Link
+            to=""
+            style={{
+              position: 'absolute',
+              right: 0,
+            }}
+          >
+            <Button buttonSize={ButtonSize.MEDIUM} style={{ fontSize: 18 }}>
+              추가
+            </Button>
+          </Link>
+        </MypageLayout.Footer>
+      </MypageForm>
+    </MypageLayout>
+  );
+};
+
+export default Reviews;

src/styles/GlobalStyle.ts

@@ -1,6 +1,8 @@
 import { createGlobalStyle } from 'styled-components';
+import reset from 'styled-reset';
 
 const GlobalStyle = createGlobalStyle`
+   ${reset},
    * {
       margin: 0;
       padding: 0;

tsconfig.json

@@ -1,4 +1,5 @@
 {
+  "extends": "./tsconfig.paths.json",
   "compilerOptions": {
     "baseUrl": "src",
     "target": "es5",
@@ -25,4 +26,6 @@
     "src"
   ],
   "exclude": ["node_modules"],
+  "types": ["@types/jest"],
+  "allowSyntheticDefaultImports": true
 }

tsconfig.paths.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./src",
+    "paths": {
+      "~/*": ["./*"],
+      "@constants": ["constants.ts"],
+    }
+  }
+}