Skip to content

Commit 0bed2f2

Browse files
gustn99gustn99
authored
Merge pull request #39 from happbob/feat/OODD-1
Feat: 홈 api 연동 완료
2 parents b8f3f0e + cc4fac2 commit 0bed2f2

26 files changed

Lines changed: 812 additions & 270 deletions

‎index.html‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6-
<link
7-
rel="stylesheet"
8-
as="style"
9-
crossorigin
10-
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
11-
/>
12-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13-
<title>OODD</title>
14-
</head>
15-
<body>
16-
<div id="root"></div>
17-
<script type="module" src="/src/main.tsx"></script>
18-
</body>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/OODDlogo.svg" />
6+
<link
7+
rel="stylesheet"
8+
as="style"
9+
crossorigin
10+
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
11+
/>
12+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
13+
<title>OODD</title>
14+
</head>
15+
<body>
16+
<div id="root"></div>
17+
<script type="module" src="/src/main.tsx"></script>
18+
</body>
1919
</html>

‎public/OODDlogo.svg‎

Lines changed: 15 additions & 0 deletions
Loading

‎src/components/BottomSheetMenu/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const BottomSheetMenu: React.FC<BottomSheetMenuProps> = ({ items, marginBottom }
1414
</StyledText>
1515
{item.icon && <Icon src={item.icon} />}
1616
</SheetItem>
17-
{index < items.length - 1 && <hr style={{ color: 'rgba(0,0,0,0.2)', margin: '0' }} />}
17+
{index < items.length - 1 && <div style={{ borderBottom: '1px solid rgba(0,0,0,0.2)', margin: '0' }} />}
1818
</div>
1919
))}
2020
</BottomSheetMenuLayout>

‎src/components/Loading/styles.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,6 @@ export const Dot = styled.hr<{ $index: number; $dotIndex: number }>`
3232
// 점이 활성화되었을 때의 스타일
3333
${({ $index, $dotIndex }) => css`
3434
opacity: ${$dotIndex % 3 === $index ? 1 : 0.5};
35-
transform: translateY(${$dotIndex % 3 === $index ? -3 : 0}px);
35+
transform: translateY(${$dotIndex % 3 === $index ? -1 : 0}px);
3636
`}
3737
`;

‎src/pages/Home/BottomSheets/BlockBottomSheet.tsx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import block from '../../../apis/core';
2+
import { ApiDto } from '../dto';
3+
import { useRecoilState, useRecoilValue } from 'recoil';
4+
import {
5+
IsOpenBlockConfirmationModalAtom,
6+
IsOpenBlockFailModalAtom,
7+
IsOpenBlockSuccessModalAtom,
8+
PostBlockAtom,
9+
} from '../../../recoil/BlockBottomSheetAtom';
10+
import { ConfirmationModalProps } from '../../../components/ConfirmationModal/dto';
11+
import ConfirmationModal from '../../../components/ConfirmationModal';
12+
13+
const BlockConfirmationModal: React.FC = () => {
14+
const [, setIsOpenBlockConfirmationModal] = useRecoilState(IsOpenBlockConfirmationModalAtom);
15+
const [, setIsOpenBlockSuccessModal] = useRecoilState(IsOpenBlockSuccessModalAtom);
16+
const [, setIsOpenBlockFailModal] = useRecoilState(IsOpenBlockFailModalAtom);
17+
const postBlock = useRecoilValue(PostBlockAtom);
18+
19+
const blockConfirmationModalProps: ConfirmationModalProps = {
20+
content: `${postBlock?.friendName} 님을\n정말로 차단하시겠습니까?`,
21+
isCancelButtonVisible: true,
22+
confirm: {
23+
text: '차단하기',
24+
action: () => {
25+
const postNewBlock = async () => {
26+
if (postBlock) {
27+
const response = await block.post<ApiDto>('/block', {
28+
userId: postBlock.userId,
29+
friendId: postBlock.friendId,
30+
action: postBlock.action,
31+
});
32+
33+
if (response.message === 'OK') {
34+
setIsOpenBlockConfirmationModal(false);
35+
setIsOpenBlockSuccessModal(true);
36+
} else {
37+
setIsOpenBlockConfirmationModal(false);
38+
setIsOpenBlockFailModal(true);
39+
}
40+
} else {
41+
alert('잘못된 요청입니다.');
42+
}
43+
};
44+
postNewBlock();
45+
},
46+
},
47+
onCloseModal: () => {
48+
setIsOpenBlockConfirmationModal(false);
49+
},
50+
};
51+
52+
return <ConfirmationModal {...blockConfirmationModalProps} />;
53+
};
54+
55+
export default BlockConfirmationModal;

‎src/pages/Home/BottomSheets/HeartBottomSheet.tsx‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
import BottomSheet from '../../../components/BottomSheet';
2+
import { BottomSheetProps } from '../../../components/BottomSheet/dto';
3+
import Comment from '../../../components/Comment';
4+
import { CommentProps } from '../../../components/Comment/dto';
5+
import request from '../../../apis/core';
6+
import { ApiDto } from '../dto';
7+
import { useRecoilState, useRecoilValue } from 'recoil';
8+
import {
9+
IsOpenHeartBottomSheetAtom,
10+
IsOpenRequestFailModalAtom,
11+
IsOpenRequestSuccessModalAtom,
12+
PostRequestAtom,
13+
} from '../../../recoil/HeartBottomSheetAtom';
14+
15+
const HeartBottomSheet: React.FC = () => {
16+
const [isOpenHeartBottomSheet, setIsOpenHeartBottomSheet] = useRecoilState(IsOpenHeartBottomSheetAtom);
17+
const [, setIsOpenRequestSuccessModal] = useRecoilState(IsOpenRequestSuccessModalAtom);
18+
const [, setIsOpenRequestFailModal] = useRecoilState(IsOpenRequestFailModalAtom);
19+
const postRequest = useRecoilValue(PostRequestAtom);
20+
21+
const requestCommentProps: CommentProps = {
22+
content: `${postRequest?.targetName} 님께 대표 OOTD와 함께 전달될\n한줄 메시지를 보내보세요!`,
23+
sendComment: (message: string) => {
24+
const postNewRequest = async () => {
25+
if (postRequest) {
26+
const response = await request.post<ApiDto>('/user-relationships', {
27+
requesterId: postRequest.requesterId,
28+
targetId: postRequest.targetId,
29+
message: message,
30+
});
31+
32+
if (response.isSuccess) {
33+
setIsOpenHeartBottomSheet(false);
34+
setTimeout(() => {
35+
setIsOpenRequestSuccessModal(true);
36+
}, 100);
37+
} else {
38+
setIsOpenRequestFailModal(true);
39+
}
40+
} else {
41+
alert('잘못된 요청입니다.');
42+
}
43+
};
44+
45+
postNewRequest();
46+
},
47+
};
48+
49+
const heartBottomSheet: BottomSheetProps = {
50+
isOpenBottomSheet: isOpenHeartBottomSheet,
51+
Component: Comment,
52+
componentProps: requestCommentProps,
53+
onCloseBottomSheet: () => {
54+
setIsOpenHeartBottomSheet(false);
55+
},
56+
};
57+
return <BottomSheet {...heartBottomSheet} />;
58+
};
59+
60+
export default HeartBottomSheet;

‎src/pages/Home/BottomSheets/MeatballBottomSheet.tsx‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
import BottomSheet from '../../../components/BottomSheet';
2+
import { BottomSheetProps } from '../../../components/BottomSheet/dto';
3+
import { useRecoilState } from 'recoil';
4+
import { IsOpenMeatballBottomSheetAtom, IsOpenReportBottomSheetAtom } from '../../../recoil/MeatballBottomSheetAtom';
5+
import { BottomSheetMenuProps } from '../../../components/BottomSheetMenu/dto';
6+
import BottomSheetMenu from '../../../components/BottomSheetMenu';
7+
import { IsOpenBlockConfirmationModalAtom } from '../../../recoil/BlockBottomSheetAtom';
8+
import declaration from '../../../assets/Post/declaration.svg';
9+
import block from '../../../assets/Post/block.svg';
10+
11+
const MeatballBottomSheet: React.FC = () => {
12+
const [isOpenMeatballBottomSheet, setIsOpenMeatballBottomSheet] = useRecoilState(IsOpenMeatballBottomSheetAtom);
13+
const [, setIsOpenReportBottomSheet] = useRecoilState(IsOpenReportBottomSheetAtom);
14+
const [, setIsOpenBlockConfirmationModal] = useRecoilState(IsOpenBlockConfirmationModalAtom);
15+
16+
const meatballBottomSheetMenuProps: BottomSheetMenuProps = {
17+
items: [
18+
{
19+
text: '신고하기',
20+
action: () => {
21+
setIsOpenMeatballBottomSheet(false);
22+
setIsOpenReportBottomSheet(true);
23+
},
24+
icon: declaration,
25+
},
26+
{
27+
text: '차단하기',
28+
action: () => {
29+
setIsOpenMeatballBottomSheet(false);
30+
setIsOpenBlockConfirmationModal(true);
31+
},
32+
icon: block,
33+
},
34+
],
35+
marginBottom: '3.125rem',
36+
};
37+
38+
const meatballBottomSheet: BottomSheetProps = {
39+
isOpenBottomSheet: isOpenMeatballBottomSheet,
40+
Component: BottomSheetMenu,
41+
componentProps: meatballBottomSheetMenuProps,
42+
onCloseBottomSheet: () => {
43+
setIsOpenMeatballBottomSheet(false);
44+
},
45+
};
46+
47+
return <BottomSheet {...meatballBottomSheet} />;
48+
};
49+
50+
export default MeatballBottomSheet;

‎src/pages/Home/BottomSheets/PostCommentBottomSheet.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import BottomSheet from '../../../components/BottomSheet';
2+
import { BottomSheetProps } from '../../../components/BottomSheet/dto';
3+
import Comment from '../../../components/Comment';
4+
import { CommentProps } from '../../../components/Comment/dto';
5+
import request from '../../../apis/core';
6+
import { ApiDto } from '../dto';
7+
import { useRecoilState, useRecoilValue } from 'recoil';
8+
import {
9+
IsOpenPostCommentBottomSheetAtom,
10+
IsOpenPostCommentFailModalAtom,
11+
IsOpenPostCommentSuccessModalAtom,
12+
PostCommentAtom,
13+
} from '../../../recoil/PostCommentBottomSheetAtom';
14+
15+
const PostCommentBottomSheet: React.FC = () => {
16+
const [isOpenPostCommentBottomSheet, setIsOpenPostCommentBottomSheet] = useRecoilState(
17+
IsOpenPostCommentBottomSheetAtom,
18+
);
19+
const [, setIsOpenPostCommentSuccessModal] = useRecoilState(IsOpenPostCommentSuccessModalAtom);
20+
const [, setIsOpenPostCommentFailModal] = useRecoilState(IsOpenPostCommentFailModalAtom);
21+
const postComment = useRecoilValue(PostCommentAtom);
22+
23+
const postCommentProps: CommentProps = {
24+
content: `${postComment?.userName} 님의 게시물에 대한 코멘트를 남겨주세요\n코멘트는 ${postComment?.userName} 님에게만 전달됩니다`,
25+
sendComment: (message: string) => {
26+
const postNewComment = async () => {
27+
if (postComment) {
28+
const response = await request.post<ApiDto>(`/post/${postComment.postId}/comment`, {
29+
content: message,
30+
});
31+
32+
if (response.isSuccess) {
33+
setIsOpenPostCommentBottomSheet(false);
34+
setTimeout(() => {
35+
setIsOpenPostCommentSuccessModal(true);
36+
}, 100);
37+
} else {
38+
setIsOpenPostCommentFailModal(true);
39+
}
40+
} else {
41+
alert('잘못된 요청입니다.');
42+
}
43+
};
44+
45+
postNewComment();
46+
},
47+
};
48+
49+
const postCommentBottomSheet: BottomSheetProps = {
50+
isOpenBottomSheet: isOpenPostCommentBottomSheet,
51+
Component: Comment,
52+
componentProps: postCommentProps,
53+
onCloseBottomSheet: () => {
54+
setIsOpenPostCommentBottomSheet(false);
55+
},
56+
};
57+
return <BottomSheet {...postCommentBottomSheet} />;
58+
};
59+
60+
export default PostCommentBottomSheet;
61+
6;

0 commit comments

Comments
 (0)