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

kimdanbin · 2023-10-22T05:44:13Z

PR 타입(하나 이상의 PR 타입을 선택해주세요)

작업 사항

PostDetailPage에서 isMatch, isWriter에 따라서 PickerMatch, PickerNoMatch, WriterMatch, PickerNoMatch로 분기하고 PostDetailWriterPage를 없앴어요!!
그 제가 아직 조금씩 헷갈려서 5시 넘어서도 계속 고칠 수도 있어요

마이페이지
마이페이지는 권한상태 따라서 관리자랑 학생이랑 게스트로 분기했습니다!

관련 이슈

Feature: 공고 상세 페이지 기능 구현 #58

rktdnjs · 2023-10-22T07:04:33Z

공고 상세 페이지 개발 시 참고사항(response 값 변경사항)

{
    "success": true,
    "response": {
        "boardId": 1,
        "shopName": "전남대 후문 스타벅스",
        "destination": "전남대 공대7 217호관",
        "beverage": [
            {
                "name": "핫 아메리카노"
            },
            {
                "name": "아이스 아메리카노"
            }
        ],
        "tip": 1000,
        "request": "빨리 와주세요",
        "finishedAt": 1696073040,
        "isMatch": true,
        "same": true
    },
    "error": null
}

"isMatch": true, (매칭 여부)
"same": true (사용자 = 공고글 작성자 일치 여부)

위 2가지 내용에 따라 분기 처리 되도록 코드를 큰 틀에서 작성해주시면 될 것 같습니다!

rktdnjs · 2023-10-22T07:34:10Z

src/pages/PostDetailWriterPage.jsx

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


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

rktdnjs · 2023-10-22T07:36:48Z

src/pages/PostDetailWriterPage.jsx

+  // 매칭 됐는지 안됐는지(true면 피커정보랑 더보기 없어짐)
+  const isMatch = false;
+
+  // 삭제 버튼 눌렀을 때


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

rktdnjs · 2023-10-22T07:41:40Z

src/pages/PostDetailWriterPage.jsx

+  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>
+              <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' }} />;
+    }
+  };
+
+  const matching = () => {
+    if (isMatch) {
+      console.log(isMatch);
+      return (
+        <div>
+          <div className="text-white text-lg">피커가 픽업을 시작했어요!</div>
+          <div className="text-white text-lg">피커에게 픽업팁을 송금 해주세요.</div>
+        </div>
+      );
+    }
+    return <div className="mt-1 text-white text-xl">매칭을 기다리고 있어요.</div>;
+  };
+


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

조건에 따른 분기는 상위 컴포넌트에서 처리

하위 컴포넌트에서는 이제 분기이후에 받아온 데이터들을 렌더링

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

rktdnjs · 2023-10-22T07:47:25Z

안녕하세요 단빈님. 작성하신 코드는 전부 잘 읽어보았습니다!
저는 코드에 대한 리뷰를 드리기 보다는, 전체적으로 어떻게 깔끔한 Flow로 짜야하는지 정리해드리고자 합니다!

공고 상세 페이지에서의 분기 처리

저희가 백엔드로부터 데이터를 받아와서 컴포넌트를 상황에 맞게 보여주는데 필요한 정보는 2개가 있습니다.

isMatch(매칭 여부)
same(공고글을 클릭한 사용자 = 공고글 작성자 일치 여부)

따라서, 공고상세페이지(PostDetailPage.jsx)에서는 위의 조건에 따라(총 4가지) 다른 컴포넌트를 보여주면 되겠습니다!

어떻게 하면 깔끔한 구조의 컴포넌트를 만들 수 있을까

이 부분은 저도 그렇게 잘 알고있는 건 아니지만, 그래도 다음과 같은 구성으로 하면 어떨까 생각해보았습니다.
해당 페이지 구현시 전체적인 틀을 잡고 가면 깔끔하니 더 보기 좋을 것 같습니다!
현재는 하나의 페이지 안에서 조건에 따라 보여주는 내용이 너무 많다고 느껴져서,
기능별로 별도의 하위 컴포넌트로 분리하여 처리하는 것을 추천드립니다!!

PostDetailPage
ㄴ[Case1]공고상세페이지(매칭전 & 공고글 작성자 != 사용자)
  ㄴ[Case1 하위 컴포넌트]피커가 도착 예정 시간을 입력하는 페이지 & 입력 완료후 보여줄 페이지
ㄴ[Case2]공고상세페이지(매칭전 & 공고글 작성자 == 사용자)
ㄴ[Case3]공고상세페이지(매칭후 & 공고글 작성자 != 사용자)
ㄴ[Case4]공고상세페이지(매칭후 & 공고글 작성자 == 사용자)

피그마 링크 : https://www.figma.com/file/UHfny7FM7ZtXo0cTsBcuKY/12%EC%A1%B0?type=design&node-id=376-1660&mode=design&t=YQP9wFfcxGeyzNFA-0(공고상세페이지 Case by Case 섹션 참고하시면 좋습니다!)

별도로 드리고 싶은 말씀!

git commit 의 활용

커밋진행시, 터미널에서 git commit -m이 아닌 git commit 을 입력하면 내용을 좀 더 자세하게 입력할 수 있어요!

[feat] : 공고상세페이지 기능 구현

- 공고상세페이지 하위에서 보여줄 PostWriterPage.jsx 구현
- 데이터를 동적으로 처리하는 부분 구현 필요
- 조건 분기 ~...

이런식으로 작성해주시면, 단빈님과 다른 팀원분들이 볼 때 좀 더 편하고 빠르게 커밋 내용을 파악할 수 있어 좋아요!
그렇기 때문에, 나중에 커밋하실때 이렇게 좀 더 자세하게 내용 작성해주시면 Very Good!!👍👍

현재 집중하셔야 되는 부분

저희 서비스가 돌아가기 위해서는 오더 - 피커 간에 매칭이 정상적으로 이루어져야 합니다!
따라서 기능 중에서도 최소한 다음과 같은 기능들은 문제 없이 돌아가도록 이 부분에 집중해주시면 될 것 같아요!
(공고글 수정이나, 삭제는 매칭보다는 후순위!)

공고글 입장 시 isMatch & same 값에 따라 하위 컴포넌트로 보여줄 내용 분기 처리
피커입장에서 도착예상시간 입력 후 매칭신청하면 내용이 백엔드로 전달할 수 있게 axios.post로 요청하는 부분
좀 더 자세히 말씀드리자면, index.js 부분의 instance를 활용해서 별도로 요청하는 로직을 apis 폴더 하위에서 짜서 사용!!

baegyeong

매칭 전/후에 따라 상태가 달라지는 로직은 한 파일에 담아두는 것보다는 컴포넌트 파일을 나눠서 prop으로 전달하는 게 어떨까..! 하는 생각을 남깁니다. 수고하셨어요~!

추가로 여기 부분 빨간색 선에 맞춰서 정렬해주시면 더 좋을 것 같아요!

baegyeong · 2023-10-22T07:59:13Z

src/pages/PostDetailPage.jsx

+  const pickUpBtn = (isMatched) => {
+    if (isMatched) {
+      return (
+        <Button bgColor="bg-zinc-300" disabled="disable">


Suggested change

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

<Button bgColor="bg-zinc-300" disabled>

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

baegyeong · 2023-10-22T08:03:46Z

src/pages/PostDetailPage.jsx

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


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

baegyeong · 2023-10-22T08:07:31Z

src/pages/PostDetailPage.jsx

+          <div className=" text-sm">오더의 장소에 도착할 시간을 알려주세요.</div>
+        </div>
+        <div className="mt-6">
+          <input className="text-center" type="number" placeholder="15" style={{ border: 1 }} /> 분 후 도착


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

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

baegyeong · 2023-10-22T08:09:31Z

src/pages/PostDetailPage.jsx

+  const nowPage = (pageNum) => {
+    if (pageNum === 1) {
+      return pickerTime();
+    }
+    return info();
+  };


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

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

baegyeong · 2023-10-22T08:11:34Z

src/pages/PostDetailPage.jsx

+  const cancel = () => {
+    setPage(0);
+  };


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

baegyeong · 2023-10-22T08:13:37Z

src/pages/PostDetailPage.jsx

+  const pickUpBtnModal = () => {
+    return Swal.fire({
+      title: '이 음료를 픽업하시겠습니까?',
+      showCancelButton: true,
+      cancelButtonText: '취소',
+      confirmButtonText: '수락',
+      confirmButtonColor: '#0075ff',
+      heightAuto: true,
+    }).then((result) => {


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

baegyeong · 2023-10-22T08:16:35Z

src/pages/PostDetailWriterPage.jsx

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


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

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

baegyeong · 2023-10-22T08:17:18Z

src/pages/PostDetailWriterPage.jsx

+  // 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>


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

baegyeong · 2023-10-22T08:19:49Z

src/pages/PostDetailWriterPage.jsx

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


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>

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

제거 여러번 해매서 아직 하드코딩 한 부분은 못바꿔서 마이페이지 먼저 해볼려구요..

이거 하는데 좀 헤매서.. 아직 하드코딩은 못바꿨어요..

아직 마이페이지 구현이랑 하드코딩을 못했어요

[feat] : 공고상세페이지 기능 추가

ba57434

kimdanbin self-assigned this Oct 22, 2023

kimdanbin added the ✨ feature This feature will be developed label Oct 22, 2023

rktdnjs reviewed Oct 22, 2023

View reviewed changes

baegyeong approved these changes Oct 22, 2023

View reviewed changes

kimdanbin added 3 commits October 29, 2023 12:03

[feat]: 공고상세페이지 분기

e8d76ed

제거 여러번 해매서 아직 하드코딩 한 부분은 못바꿔서 마이페이지 먼저 해볼려구요..

[feat]: 공고상세페이지 분기 처리

2c89042

이거 하는데 좀 헤매서.. 아직 하드코딩은 못바꿨어요..

[feat]: 상세페이지 분기, 마이페이지

e7da009

아직 마이페이지 구현이랑 하드코딩을 못했어요

kimdanbin changed the title ~~[feat] : 공고상세페이지 기능 추가~~ [feat] : 공고상세페이지 분기, 마이페이지 Oct 29, 2023

kimdanbin changed the base branch from weekly-7 to weekly-8 October 29, 2023 04:55

kimdanbin and others added 2 commits October 29, 2023 16:34

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

af3af95

Merge branch 'weekly-8' into feature/detail-post-page

f9c6821

rktdnjs merged commit cf4b5ae into Step3-kakao-tech-campus:weekly-8 Oct 29, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

kimdanbin commented Oct 22, 2023 •

edited

Loading

rktdnjs commented Oct 22, 2023

rktdnjs Oct 22, 2023

rktdnjs Oct 22, 2023

rktdnjs Oct 22, 2023

rktdnjs commented Oct 22, 2023 •

edited

Loading

baegyeong left a comment

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023 •

edited

Loading

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

baegyeong Oct 22, 2023

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

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

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

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

Conversation

kimdanbin commented Oct 22, 2023 • edited Loading

PR 타입(하나 이상의 PR 타입을 선택해주세요)

작업 사항

관련 이슈

rktdnjs commented Oct 22, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rktdnjs commented Oct 22, 2023 • edited Loading

공고 상세 페이지에서의 분기 처리

어떻게 하면 깔끔한 구조의 컴포넌트를 만들 수 있을까

별도로 드리고 싶은 말씀!

baegyeong left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

baegyeong Oct 22, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kimdanbin commented Oct 22, 2023 •

edited

Loading

rktdnjs commented Oct 22, 2023 •

edited

Loading

baegyeong Oct 22, 2023 •

edited

Loading