Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Sprint] 일대다상담 모든 api와 view 구현 완료 #220

Merged
merged 3 commits into from
Apr 15, 2024
+364 −214
Merged

[Sprint] 일대다상담 모든 api와 view 구현 완료 #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
834d863
Feat: 셰어 댓글 리스트 좋아요, 댓글 채택 기능 api 연동 #210
rmdnps10 Apr 15, 2024
2f33862
Feat: 답변 채택 시에 다른 답변 채택 버튼 나타나지 않도록 댓글 리스트 순회하며 isChosen이 true가 있는지 확…
rmdnps10 Apr 15, 2024
0b2ff81
Feat: 일대다상담 모든 api 연동 완료 #210 #211
rmdnps10 Apr 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/api/get.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,11 +143,11 @@ export const getCounselorsRandomConsult = async () =>
export const getCustomerOpenConsultList = async (params: any) =>
await getInstance('/posts/customers', params);

export const getCustomerPopularConsultList = async (params: any) =>
await getInstance('/posts/customers/public/likes', params);
export const getCustomerPopularConsultList = async () =>
await getPublicInstance('/posts/customers/public/likes');

export const getCustomerPublicConsultList = async (params: any) =>
await getInstance('/posts/customers/public', params);
await getPublicInstance('/posts/customers/public', params);

export const getCustomerIsWriter = async (postId: any) =>
await getInstance(`/posts/customers/public/${postId}`);
Expand Down
4 changes: 2 additions & 2 deletions src/api/patch.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,8 +76,8 @@ export const patchWishLists = async (counselorId: number) =>

//Comment Controller

export const patchAdoptComment = async (postId: any, params: any) =>
await patchInstance(`/comments/customers/${postId}`, params);
export const patchAdoptComment = async (postId: any, commentId: string) =>
await patchInstance(`/comments/customers/${postId}?commentId=${commentId}`);

//Post Controller
export const patchOpenConsult = async (body: any) => {
Expand Down
39 changes: 29 additions & 10 deletions src/components/Buyer/BuyerOpenConsult/HotOpenConsultList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,42 @@
import React from 'react';
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { ReactComponent as FireIcon } from 'assets/icons/icon-fire.svg';
import { Body3, Body4 } from 'styles/font';
import { Grey6 } from 'styles/color';
import { getCustomerPopularConsultList } from 'api/get';
import { useNavigate } from 'react-router-dom';
interface apiHotConsultObj {
postId: number;
title: string;
}
function HotOpenConsultList() {
const [hotConsultList, setHotConsultList] = useState<apiHotConsultObj[]>([]);
const navigate = useNavigate();
useEffect(() => {
const fetchHotConsultList = async () => {
const res: any = await getCustomerPopularConsultList();
setHotConsultList(res.data);
};
fetchHotConsultList();
}, []);
return (
<HotList>
<FireIconWrapper>
<FireIcon />
</FireIconWrapper>
<HotTitleItem>
<Body4>이거 권태기 증상 맞나요?</Body4>
</HotTitleItem>
<HotTitleItem>
<Body4>이거 권태기 증상 맞나요?</Body4>
</HotTitleItem>
<HotTitleItem>
<Body4>이거 권태기 증상 맞나요?</Body4>
</HotTitleItem>
{hotConsultList.map((item) => (
<HotTitleItem
onClick={() => {
navigate(`/open-consult/${item.postId}`);
}}
>
<Body4>
{item.title.length > 19
? item.title.slice(0, 19) + '...'
: item.title}
</Body4>
</HotTitleItem>
))}
</HotList>
);
}
Expand Down
139 changes: 97 additions & 42 deletions src/components/Buyer/BuyerOpenConsult/OpenConsultList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useState } from 'react';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import styled from 'styled-components';
import { Green, Grey1, Grey2, Grey3, Grey6 } from 'styles/color';
import { Body1, Caption1, Caption2 } from 'styles/font';
Expand All @@ -14,60 +14,106 @@ import { ReactComponent as WriteIcon } from 'assets/icons/icon-write.svg';
import { Space } from 'components/Common/Space';
import { BackDrop } from 'components/Common/BackDrop';
import { openConsultApiObject } from 'pages/Buyer/BuyerConsult';
import { getCustomerPublicConsultList } from 'api/get';
import {
getCustomerOpenConsultList,
getCustomerPublicConsultList,
} from 'api/get';
import { useNavigate } from 'react-router-dom';
import useIntersectionObserver from 'hooks/useIntersectionObserver';

function OpenConsultList() {
const [cardData, setCardData] = useState<openConsultApiObject[]>([]);
useEffect(() => {
const fetchOpenConsultData = async () => {
const preventRef = useRef(true);
const navigate = useNavigate();
const [isLastElem, setIsLastElem] = useState<boolean>(false);
const [isLoading, setIsLoading] = useState<boolean>(false);
const onIntersect: IntersectionObserverCallback = async (entry) => {
if (entry[0].isIntersecting && !isLastElem && preventRef.current) {
preventRef.current = false;
await fetchOpenConsult(
cardData[cardData.length - 1]?.postId,
cardData[cardData.length - 1]?.finishedAt,
);
preventRef.current = true;
}
};
const { setTarget } = useIntersectionObserver({
root: null,
rootMargin: '0px',
threshold: 0.8,
onIntersect,
});
const fetchOpenConsult = async (lastId: number, lastDate: string) => {
try {
const params = {
postId: '0',
finishedAt: new Date().toISOString().slice(0, 19),
postId: lastId,
finishedAt: lastDate,
};
const res: any = await getCustomerPublicConsultList({ params });

if (res.status === 200) {
setCardData(res.data);
if (res.data.length !== 0) {
if (lastId === 0) {
setCardData(res.data);
} else {
const updatedReviews = [...cardData, ...res.data];
setCardData(updatedReviews);
}
} else {
setIsLastElem(true);
}
} else if (res.response.status === 404) {
alert('존재하지 않는 회원입니다.');
navigate('/login');
}
} catch (err) {
alert(err);
} finally {
if (lastId === 0) {
setIsLoading(false);
}
};
fetchOpenConsultData();
}
};
useLayoutEffect(() => {
fetchOpenConsult(0, new Date().toISOString().slice(0, 19));
}, []);
console.log(cardData);
return (
<div>
<BuyerOpenConsultCardList>
{/* 상담카드 부분 */}
<BuyerOpenConsultCard>
<div className="row1">
<Body1>이거 권태기 증상 맞나요?</Body1>
<PrivateSign>
<LockIcon />
<Caption1 color={Grey3}>비공개</Caption1>
</PrivateSign>
</div>
<Space height="1.2rem" />
<div className="row2">
요즘따라 여자친구가 먼저 만나자고 이야기도 안 하고 만나면
피곤하다고만 해요. 스킨십도 하려고 하지 않고 인생이 재미가
없다네요.. 그런데 여자친구가 다른 남자 인스타 피드에는 좋아요를
눌러요... 이거 여자친구가 권태기가 맞는 걸까요? 맞다면 어떻게
이야기를 꺼내면 좋을까요? 너무 힘듭니다..
</div>
<div className="row3">
<IconItem>
<HeartResizeIcon />
<Caption1 color={Grey2}>28</Caption1>
</IconItem>
<IconItem>
<SaveIcon />
<Caption1 color={Grey2}>28</Caption1>
</IconItem>
<IconItem>
<CommentIcon />
<Caption1 color={Grey2}>28</Caption1>
</IconItem>
</div>
<TimeLeft>8분 전</TimeLeft>
</BuyerOpenConsultCard>
{cardData.map((item) => (
<BuyerOpenConsultCard
onClick={() => {
navigate(`/open-consult/${item.postId}`);
}}
>
<div className="row1">
<Body1>{item.title}</Body1>
</div>
<Space height="1.2rem" />
<div className="row2">{item.content}</div>
<div className="row3">
<IconItem>
<HeartResizeIcon />
<Caption1 color={Grey2}>{item.totalLike}</Caption1>
</IconItem>
<IconItem>
<SaveIcon />
<Caption1 color={Grey2}>{item.totalScrap}</Caption1>
</IconItem>
<IconItem>
<CommentIcon />
<Caption1 color={Grey2}>{item.totalComment}</Caption1>
</IconItem>
</div>
<TimeLeft>{item.updatedAt}</TimeLeft>
</BuyerOpenConsultCard>
))}
{!isLastElem ? (
<div ref={setTarget} style={{ height: '3.5rem' }} />
) : (
<div style={{ height: '3.5rem' }} />
)}
{/* 상담카드 부분 */}
</BuyerOpenConsultCardList>
</div>
Expand All @@ -84,11 +130,20 @@ const BuyerOpenConsultCardList = styled.div`
const BuyerOpenConsultCard = styled.div`
width: 100%;
height: 14rem;
cursor: pointer;
position: relative;
background-color: ${Grey6};
padding: 1.6rem;
box-sizing: border-box;
border-radius: 1.2rem;
.row1 {
width: calc(100% - 5rem);
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
max-height: 5rem;
overflow: hidden;
}
.row2 {
display: -webkit-box;
max-height: 4.7rem;
Expand Down
Loading
Loading