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

[feat] : 공고상세페이지 분기, 마이페이지 #57

Merged
merged 6 commits into from
Oct 29, 2023
Merged

[feat] : 공고상세페이지 분기, 마이페이지 #57

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ba57434
[feat] : 공고상세페이지 기능 추가
kimdanbin Oct 22, 2023
e8d76ed
[feat]: 공고상세페이지 분기
kimdanbin Oct 29, 2023
2c89042
[feat]: 공고상세페이지 분기 처리
kimdanbin Oct 29, 2023
e7da009
[feat]: 상세페이지 분기, 마이페이지
kimdanbin Oct 29, 2023
af3af95
[feat]: 공고상세페이지 분기, 마이페이지
kimdanbin Oct 29, 2023
f9c6821
Merge branch 'weekly-8' into feature/detail-post-page
rktdnjs Oct 29, 2023
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
141 changes: 115 additions & 26 deletions src/pages/PostDetailPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,67 @@
import React from 'react';
import Swal from 'sweetalert2';
import { MdOutlineLocationOn, MdLocationPin } from 'react-icons/md';
import { BsArrowDown } from 'react-icons/bs';
import { useState } from 'react';
import Button from '../components/atoms/Button';
import OtherNav from '../components/atoms/OtherNav';

const PostDetailPage = () => {
return (
<div className="page--layout">
{/* 파란색 부분 */}
<div className="bg-sky-blue h-60 rounded-b-3xl">
<OtherNav iconColor="#fff" bgColor="#000" />
<div className="p-5">
<div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>
<div className="p-4">
<div className="flex items-center">
<MdOutlineLocationOn className="mr-1" size="30" style={{ color: 'white' }} />
<span className="text-white">스타벅스 전대후문점</span>
</div>
<BsArrowDown className="ml-2 my-1" style={{ color: 'white' }} />
<div className="flex items-center">
<MdLocationPin className="mr-1" size="30" style={{ color: 'white' }} />
<span className="text-white">공과대학 7호관</span>
</div>
</div>
</div>
</div>
{/* 하얀색 부분 */}
<div className="px-8">
const [page, setPage] = useState(0);
const [isMatch, setIsMatch] = useState(false);

// 이 음료 픽업하기 버튼을 눌렀을 때 뜨는 모달창
const pickUpBtnModal = () => {
return Swal.fire({
title: '이 음료를 픽업하시겠습니까?',
showCancelButton: true,
cancelButtonText: '취소',
confirmButtonText: '수락',
confirmButtonColor: '#0075ff',
heightAuto: true,
}).then((result) => {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분도 마찬가지로 utils/alert.js로 빼주세요! 저도 빼려구요,,!!!

if (result.isConfirmed) {
setPage(1);
}
});
};

// 픽업하기 눌렀다가 취소할 때
const cancel = () => {
setPage(0);
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

함수명을 좀 더 명확하게 짓는 게 어떨까요? 픽업을 취소한다는 의미가 내포되었으면 좋겠어요!


// 입력완료 버튼
const doneWrite = () => {
setPage(0);
setIsMatch(true);
return Swal.fire({
icon: 'success',
title: '매칭이 완료 되었어요!',
showConfirmButton: false,
timer: 3000,
});
};

// 픽업버튼 활성화할지 안할지
const pickUpBtn = (isMatched) => {
if (isMatched) {
return (
<Button bgColor="bg-zinc-300" disabled="disable">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<Button bgColor="bg-zinc-300" disabled="disable">
<Button bgColor="bg-zinc-300" disabled>

disabled만 입력해도 비활성화처리가 됩니다!

이미 매칭된 공고
</Button>
);
}
return (
<Button onClick={pickUpBtnModal} bgColor="bg-blue">
이 음료 픽업하기
</Button>
);
};

// 공고상세페이지 처음 눌렀을 때 뜨는 정보
const info = () => {
Copy link
Contributor

@baegyeong baegyeong Oct 22, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

하드코딩 부분은 useQuery()를 통해 백엔드로부터 data를 받아오고, 그 data를 하드코딩한 부분에 대체해주시면 됩니다! 막히는 부분이 있다면 사소한거라도 슬랙에 남겨주세요!

return (
<>
<div className="my-12">
<div className="text-2xl text-blue py-2">주문 정보</div>
<div>아이스 아메리카노 1잔</div>
Expand All @@ -46,11 +81,65 @@ const PostDetailPage = () => {
<div className="text-2xl text-blue py-2">마감기한</div>
<div>오늘 14시 10분까지</div>
</div>
<div className="flex justify-center">
{/* eslint-disable-next-line */}
<Button children="이 음료 픽업하기" bgColor="bg-blue" />
<div className="flex justify-center">{pickUpBtn(isMatch)}</div>
</>
);
};

// 예상 도착 시간 적는 부분
const pickerTime = () => {
return (
<div>
<div className="mt-12 mb-3">
<div className="text-xl py-2">예상 도착 시간은 언제인가요?</div>
<div className=" text-sm">오더의 장소에 도착할 시간을 알려주세요.</div>
</div>
<div className="mt-6">
<input className="text-center" type="number" placeholder="15" style={{ border: 1 }} /> 분 후 도착
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

border를 인라인 스타일로 따로 지정하신 이유가 궁금합니다! 보통 Input 컴포넌트는 다 똑같은 스타일이기 때문에 별도로 지정을 안해도 될 것 같다고 생각해서요.

그리고 이건 제가 잘못한 부분인데 여기 input창 넓이를 좀 줄여주실 수 있을까요?(와이어프레임에 방금 반영해뒀어요..ㅠ) 그 부분을 저번에 과제 제출전에 급하게 진혁님이 바꿔주신거라 입력할 정보가 숫자뿐인데도 넓이를 길게 잡아두셔서요...

</div>
<div className="mt-72 flex justify-between px-3">
<Button onClick={cancel} width="w-32" textColor="text-black" bgColor="bg-zinc-300">
취소
</Button>
<Button onClick={doneWrite} width="w-32">
입력완료
</Button>
</div>
</div>
);
};

// 페이지가 0이면 상세페이지 처음, 1이면 예상도착시간
const nowPage = (pageNum) => {
if (pageNum === 1) {
return pickerTime();
}
return info();
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이 부분 상위에 페이지 컴포넌트를 하나더 만들어서, pageNum이 1일때는 pickerTime 컴포넌트를 리턴, 0일때는 info 컴포넌트를 리턴하는 게 좋을 것 같아요!

그럼 일단 info와 pickerTime을 컴포넌트로 빼주시고 진행하시면 될 것 같아요~


return (
<div className="page--layout">
{/* 파란색 부분 */}
<div className="bg-sky-blue h-60 rounded-b-3xl">
<OtherNav iconColor="#fff" bgColor="#000" />
<div className="p-5">
<div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>
<div className="p-4">
<div className="flex items-center">
<MdOutlineLocationOn className="mr-1" size="30" style={{ color: 'white' }} />
<span className="text-white">스타벅스 전대후문점</span>
</div>
<BsArrowDown className="ml-2 my-1" style={{ color: 'white' }} />
<div className="flex items-center">
<MdLocationPin className="mr-1" size="30" style={{ color: 'white' }} />
<span className="text-white">공과대학 7호관</span>
</div>
</div>
</div>
</div>
{/* 하얀색 부분 */}
{/* eslint-disable-next-line */}
<div className="px-8">{nowPage(page)}</div>
</div>
);
};
Expand Down
74 changes: 65 additions & 9 deletions src/pages/PostDetailWriterPage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,16 @@ import React from 'react';
import Swal from 'sweetalert2';
import { MdOutlineLocationOn, MdLocationPin } from 'react-icons/md';
import { BsArrowDown, BsThreeDotsVertical } from 'react-icons/bs';
import { useNavigate } from 'react-router-dom';
import OtherNav from '../components/atoms/OtherNav';

const PostDetailWriterPage = () => {
const navigate = useNavigate();

// 매칭 됐는지 안됐는지(true면 피커정보랑 더보기 없어짐)
const isMatch = false;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이제 response 변경사항에 따라, 이 부분은 상위 컴포넌트에서 isMatch & same을 한꺼번에 받아서 조건에 따라 하위 컴포넌트인 PostDetailWriterPage를 보여주도록 리팩토링 하면 좋을 것 같습니다 :)


// 삭제 버튼 눌렀을 때
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기 아래의 Swal.fire 부분은 제가 따로 만들어놓은 utils/alert.js 라는 Swal 알림 전용 파일이 있어요!
그 부분에다가 따로 빼놓고 사용하시면 좀 더 깔끔해 보이실 거에요!

const postDelete = () => {
return Swal.fire({
title: '삭제하시겠습니까?',
Expand All @@ -16,10 +23,12 @@ const PostDetailWriterPage = () => {
cancelButtonText: '취소',
}).then((result) => {
if (result.isConfirmed) {
Swal.fire('삭제됨');
// 공고가 삭제됨
}
});
};

// 우상단 점3개 눌렀을 때
const control = () => {
return Swal.fire({
showDenyButton: true,
Expand All @@ -28,22 +37,68 @@ const PostDetailWriterPage = () => {
}).then((result) => {
if (result.isConfirmed) {
// 공고 수정하게 됨
navigate('/post-write');
} else if (result.isDenied) {
postDelete();
}
});
};

// 피커정보
// eslint-disable-next-line
const pickerInfo = (isMatch) => {
if (isMatch) {
return (
<div>
<div className="my-8">
<div className="text-2xl text-blue py-2">피커정보</div>
<div className="flex">
<div className="text-zinc-400">도착시간</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

eslint를 꺼둔 이유가 궁금합니다!

<div className="ml-5">3000원</div>
</div>
<div className="flex my-1">
<div className="text-zinc-400">계좌정보</div>
<div className="ml-5">농협 01010101010101010101</div>
</div>
<div className="flex my-1">
<div className="text-zinc-400">계좌정보</div>
<div className="ml-5">010-1234-5678</div>
</div>
</div>
</div>
);
}
};

// eslint-disable-next-line
const threeDot = (isMatch) => {
if (!isMatch) {
return <BsThreeDotsVertical size="25" style={{ color: 'white' }} />;
}
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

여기도 eslint를 꺼둔 이유가 궁금합니다!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

threeDot은 매칭 됐을 때 뿐만 아니라 이 글의 작성자가 아닐 때도 보이지 않게 짜주셔야 할 것 같습니다!


const matching = () => {
if (isMatch) {
console.log(isMatch);
return (
<div>
<div className="text-white text-lg">피커가 픽업을 시작했어요!</div>
<div className="text-white text-lg">피커에게 픽업팁을 송금 해주세요.</div>
</div>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<div>
<div className="text-white text-lg">피커가 픽업을 시작했어요!</div>
<div className="text-white text-lg">피커에게 픽업팁을 송금 해주세요.</div>
</div>
<div className="text-white text-lg">
<div>피커가 픽업을 시작했어요!</div>
<div>피커에게 픽업팁을 송금 해주세요.</div>
</div>

동일한 스타일을 반복하지 않고 이렇게 쓸 수도 있을 것 같아요!

);
}
return <div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>;
};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

매칭이 되어있으면 특정 내용을 보여주고, 매칭이 되어있지 않으면 사라지게 하도록 하기 위해 작성하신 코드 인것 같네요! 그런데 이 부분은 멘토님께서 피드백해주셨을 때 말씀해주셨듯이, 하나의 페이지에서 이러한 정보에 따라 일일이 변화를 주기에는 코드가 복잡해질 수 있다고 하셨던 것 기억나시나요?!

  • 조건에 따른 분기는 상위 컴포넌트에서 처리
  • 하위 컴포넌트에서는 이제 분기이후에 받아온 데이터들을 렌더링

하도록 코드를 짜면 좋을 것 같습니다!

return (
<div className="page--layout">
{/* 파란색 부분 */}
<div className="bg-sky-blue h-60 rounded-b-3xl">
<OtherNav iconColor="#fff" bgColor="#000" />
<div className="p-5">
<div className="px-5">
<div className="flex justify-between items-center">
<div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>
<button onClick={control}>
<BsThreeDotsVertical size="25" style={{ color: 'white' }} />
</button>
{matching()}
<button onClick={control}>{threeDot(isMatch)}</button>
</div>
<div className="p-4">
<div className="flex items-center">
Expand All @@ -60,11 +115,11 @@ const PostDetailWriterPage = () => {
</div>
{/* 하얀색 부분 */}
<div className="px-8">
<div className="my-12">
<div className="my-8">
<div className="text-2xl text-blue py-2">주문 정보</div>
<div>아이스 아메리카노 1잔</div>
</div>
<div className="my-14">
<div className="my-8">
<div className="text-2xl text-blue py-2">요청 사항</div>
<div className="flex">
<div className="text-zinc-400">픽업팁</div>
Expand All @@ -75,10 +130,11 @@ const PostDetailWriterPage = () => {
<div className="ml-5">1층 도착하시면 연락주세요!</div>
</div>
</div>
<div className="my-14">
<div className="my-8">
<div className="text-2xl text-blue py-2">마감기한</div>
<div>오늘 14시 10분까지</div>
</div>
{pickerInfo(isMatch)}
</div>
</div>
);
Expand Down