Skip to content

Commit f7586cb

Browse files
H-sooyeonH-sooyeon
committed
Merge branch 'weekly7' of https://github.com/Step3-kakao-tech-campus/Team17_FE into feat/sooyeon
2 parents 6a432d1 + dadb5f9 commit f7586cb

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+2044
-336
lines changed

‎package.json

+8
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,16 @@
1010
"preview": "vite preview"
1111
},
1212
"dependencies": {
13+
"@emotion/react": "^11.11.1",
14+
"@emotion/styled": "^11.11.0",
15+
"@mui/material": "^5.14.14",
16+
"@mui/styled-engine-sc": "^6.0.0-alpha.2",
17+
"@mui/x-date-pickers": "^6.16.3",
1318
"@phosphor-icons/react": "^2.0.13",
1419
"@reduxjs/toolkit": "^1.9.6",
1520
"@tanstack/react-query": "^4.35.7",
1621
"axios": "^1.5.1",
22+
"dayjs": "^1.11.10",
1723
"eslint-config-prettier": "^9.0.0",
1824
"eslint-plugin-react": "^7.33.2",
1925
"msw": "^1.3.2",
@@ -26,7 +32,9 @@
2632
"react-query": "^3.39.3",
2733
"react-redux": "^8.1.3",
2834
"react-router-dom": "^6.16.0",
35+
"react-select": "^5.7.7",
2936
"react-window": "^1.8.9",
37+
"swiper": "^10.3.1"
3038
"styled-components": "^6.0.8",
3139
"swiper": "^10.3.1",
3240
"vite-plugin-pwa": "^0.16.5"

‎public/images/dog-size.png

1.4 KB
Loading

‎src/App.tsx

+12-4
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,15 @@ import Main from './pages/Main';
66
import ProfilePage from './pages/ProfilePage';
77
import ChatList from './pages/ChatList';
88
import ChatRoom from './pages/ChatRoom';
9+
import MatchList from './pages/MatchList';
10+
import Apply from './pages/Apply';
911
import Payment from './pages/Payment';
1012
import Review from './pages/Review';
1113
import Submit from './pages/Submit';
1214
import AuthRoute from './pages/AuthRoute';
1315
import CurrentWalkingMap from './components/organisms/CurrentWalkingMap';
16+
import DetailNotification from './pages/DetailNotificationPage';
17+
import { Map } from './pages/TestPage';
1418

1519
const App = () => {
1620
return (
@@ -25,12 +29,16 @@ const App = () => {
2529
<Route path="/chatlist" element={<ChatList />} />
2630
<Route path="/chatroom" element={<ChatRoom />} />
2731
<Route path="/walking" element={<CurrentWalkingMap />} />
32+
<Route path="/matchlist" element={<MatchList />} />
33+
<Route path="/apply" element={<Apply />} />
2834
<Route path="/payments" element={<Payment />} />
29-
<Route path="/review" element={<Review />} />
35+
<Route path='/review' element={<Review />} />
3036
<Route path="/submit" element={<Submit />} />
31-
</Route>
32-
</Routes>
33-
</Router>
37+
<Route path="/test" element={<Map />} />
38+
<Route path="/notification" element={<DetailNotification />} />
39+
</Routes>
40+
</Router>
41+
</>
3442
);
3543
};
3644

‎src/apis/dog.ts

+28-20
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,31 @@
1+
import axios from 'axios';
12
import { instance } from './index';
2-
3-
// member id는 request에 넣어줘야하는지
4-
export const postDog = (data: {
5-
userid: number;
6-
image: string;
7-
name: string;
8-
sex: string;
9-
breed: string;
10-
specificity: string;
11-
age: number;
12-
}) => {
13-
const { userid, image, name, sex, breed, specificity, age } = data;
14-
// const { userid, image, name, sex, breed, specificity, age } = data;
15-
return instance.post(`/profile/dog/${userid}`, {
16-
image,
17-
name,
18-
sex,
19-
breed,
20-
specificity,
21-
age,
3+
// 강아지 등록하기 => formData
4+
/**
5+
* 강아지의 프로필을 수정하는 api
6+
* @param data
7+
* @returns formData
8+
*/
9+
export const postDogProfile = (data: FormData) => {
10+
return axios.post('/profile/dog/', data, {
11+
headers: {
12+
'Content-Type': 'multipart/form-data',
13+
},
2214
});
2315
};
16+
/**
17+
* 상세 공고글에서, 본인이 가진 강아지를 가져오는 api
18+
* @returns dogs
19+
*/
20+
export const getDog = () => {
21+
return instance.get('/notification');
22+
};
23+
24+
/**
25+
* 강아지의 상세 프로필을 가져오는 api
26+
* @param dogId
27+
* @returns Dog Profile
28+
*/
29+
export const getDogProfile = (dogId: number | null) => {
30+
return instance.get(`/profile/dog${dogId}`);
31+
};

‎src/apis/profile.ts

+7-9
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { AxiosResponse } from 'axios'; // AxiosResponse 타입을 import
1+
import axios, { AxiosResponse } from 'axios'; // AxiosResponse 타입을 import
22
import { instance } from './index';
33
// Axios 응답 데이터의 타입을 정의
44
interface ProfileResponse {
@@ -33,13 +33,11 @@ export const getDogProfile = (id: number) => {
3333
return instance.get(`/profile/dog/${id}`);
3434
};
3535

36-
export const postProfile = (data: {
37-
profileConent: string;
38-
profileImage: string;
39-
}) => {
40-
const { profileConent, profileImage } = data;
41-
return instance.post('/profile', {
42-
profileConent,
43-
profileImage,
36+
// 프로필 등록하기 => formData
37+
export const postProfile = (data: FormData) => {
38+
return axios.post('/profile', data, {
39+
headers: {
40+
'Content-Type': 'multipart/form-data',
41+
},
4442
});
4543
};

‎src/components/atoms/DescriptionBoxNoti.tsx

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import * as S from '../../styles/atoms/NotificationInfo';
2+
3+
type DescriptionBoxProps = {
4+
children: React.ReactNode;
5+
};
6+
7+
const DescriptionBoxNoti = ({ children }: DescriptionBoxProps) => {
8+
return <S.Container>{children}</S.Container>;
9+
};
10+
11+
export default DescriptionBoxNoti;

‎src/components/atoms/DogSizeImage.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import Image from './Image';
2+
import * as S from '../../styles/atoms/DogSizeImage';
3+
import styled from 'styled-components';
4+
5+
type DogInfoProp = {
6+
children?: string;
7+
size?: string;
8+
mark?: boolean;
9+
};
10+
11+
const DogSizeImage = ({ size, children, mark }: DogInfoProp) => {
12+
const markColor = mark ? '#000000' : '#e2e2e2';
13+
const imageSize =
14+
children === '소형견'
15+
? '1.5rem'
16+
: children === '중형견'
17+
? '2.5rem'
18+
: children === '대형견'
19+
? '3.5rem'
20+
: '';
21+
return (
22+
<DogContainer markColor={markColor}>
23+
<PictureContainer imageSize={imageSize}>
24+
<Image src="./images/dog-size.png" alt="강아지 사이즈" size={size} />
25+
</PictureContainer>
26+
<div>{children}</div>
27+
</DogContainer>
28+
);
29+
};
30+
31+
export default DogSizeImage;
32+
33+
const DogContainer = styled.div<{ markColor: string }>`
34+
height: 100%;
35+
display: flex;
36+
flex-direction: column;
37+
align-items: center;
38+
color: ${(props) => props.markColor};
39+
`;
40+
const PictureContainer = styled.div<{ imageSize: string }>`
41+
width: ${(props) => props.imageSize};
42+
height: ${(props) => props.imageSize};
43+
`;

‎src/components/atoms/Image.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ type ImageInput = {
66
alt: string;
77
className?: string;
88
onClick?: () => void;
9+
style?: React.CSSProperties;
910
};
1011

11-
const Image = ({ size, src, alt, className, onClick }: ImageInput) => {
12+
const Image = ({ size, src, alt, className, onClick, style }: ImageInput) => {
1213
return (
1314
<span>
1415
<S.Img
@@ -17,6 +18,7 @@ const Image = ({ size, src, alt, className, onClick }: ImageInput) => {
1718
width={size}
1819
className={className}
1920
onClick={onClick}
21+
style={style}
2022
/>
2123
</span>
2224
);

‎src/components/molecules/DateModal.tsx

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import { useState, PropsWithChildren, useEffect } from 'react';
2+
import * as S from '../../styles/molecules/DateModal';
3+
import Image from '../atoms/Image';
4+
import { CaretLeft } from '@phosphor-icons/react';
5+
import dayjs, { Dayjs } from 'dayjs';
6+
import { DateTimePicker } from '@mui/x-date-pickers';
7+
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
8+
import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
9+
10+
import React from 'react';
11+
12+
type ModalDefaultType = {
13+
onClickToggleModal: () => void;
14+
};
15+
16+
export default function DateModal({
17+
onClickToggleModal,
18+
}: PropsWithChildren<ModalDefaultType>) {
19+
const today = dayjs();
20+
const [startTime, setStartTime] = React.useState<Dayjs | null>(today);
21+
const [endTime, setEndTime] = React.useState<Dayjs | null>(today);
22+
return (
23+
<S.ModalContainer>
24+
<S.DialogBox>
25+
<S.MainContainer>
26+
<S.TopBanner>
27+
<CaretLeft />
28+
<div>&nbsp;</div>
29+
<span>일정 추가</span>
30+
</S.TopBanner>
31+
<S.StartContainer>
32+
<span className="title">시작 시간</span>
33+
<div className="date">
34+
<LocalizationProvider dateAdapter={AdapterDayjs}>
35+
<DateTimePicker
36+
label="산책 시작시간"
37+
value={startTime}
38+
onChange={(startTime) => setStartTime(startTime)}
39+
disablePast
40+
slotProps={{ textField: { size: 'small' } }}
41+
/>
42+
</LocalizationProvider>
43+
</div>
44+
</S.StartContainer>
45+
<div className="middle"> 부터 </div>
46+
<S.EndContainer>
47+
<span className="title">종료 시간</span>
48+
<LocalizationProvider dateAdapter={AdapterDayjs}>
49+
<DateTimePicker
50+
label="산책 종료시간"
51+
value={endTime}
52+
onChange={(endTime) => setEndTime(endTime)}
53+
disablePast
54+
slotProps={{ textField: { size: 'small' } }}
55+
/>
56+
</LocalizationProvider>
57+
</S.EndContainer>
58+
<div className="middle"> 까지 </div>
59+
<S.Button> 등록 </S.Button>
60+
</S.MainContainer>
61+
</S.DialogBox>
62+
<S.Backdrop
63+
onClick={(e: React.MouseEvent) => {
64+
e.preventDefault();
65+
if (onClickToggleModal) {
66+
onClickToggleModal();
67+
}
68+
}}
69+
/>
70+
</S.ModalContainer>
71+
);
72+
}

0 commit comments

Comments
 (0)