[#340] Feat: 게시글 상세페이지 텐스택쿼리 마이그래이션 #341
Conversation
컴포넌트 구조를 변경했습니다. 기존에 url 에 따라 투표하기와 투표결과를 구분했지만, 이미 투표했다면 결과가 보이도록 구현했습니다.
| alert(e); | ||
| } | ||
| if (!token) return; | ||
| await createComment(JSON.stringify({ type: 'comment', content: comment })); |
There was a problem hiding this comment.
인자를 json.stringfy 해서 주기보다는 인자로 주는것이 어떨까요?!
인자로 type, content 를 주게될시에 타입추론이되어서 사용하기에 편리할것 같습니다.
그래서 createComment 함수 내부에서 type 인자를 받아 'comment' or 'vote' 를 판단하여 분기시키는 역할을 주는것이 더 좋을것 같습니다.! 혹시 어떻게 생각하실까요?
사용하는 입장에서는 create, comment 각각 둘로 잘 분리되었으면 좋겠다는생각입니다!
createComment(content);
createVote(content);이렇게 분리 시켜 주는것도 좋을것 같구요! 지금 당장 분리시키는것이 좋을진 모르겠지만, 이렇게하면 독립적으로 함수들을(여기선 comment, vote) 확장시킬때 comment, vote 역할을 모두 책임지는 createComment 에서 확장시키는것보단 좋을것 같습니다.
| @@ -0,0 +1,7 @@ | |||
| import { useDeletePostAPI } from '@/apis/posts'; | |||
|
|
|||
| export const useDeletePost = (postId: string) => { | |||
There was a problem hiding this comment.
위에 useCommentAPI 로 명시하신 것처럼 useDeletePostAPI 로 명시해주시면 좋을것 같습니다!
API 를 붙여주시면 통일성도 있고, 사용할때 api 호출관련 훅이구나라고 판단하기 쉬울것 같습니다!
| import { useMutation, useQueryClient } from '@tanstack/react-query'; | ||
| import { api } from './core'; | ||
|
|
||
| const postVote = (postId: string, comment: string) => |
There was a problem hiding this comment.
저는 postComment 가 더 나을것 같다, 라고생각이드는데 혹시어떻게 생각하실까요?!
api 명세가 comment 라고 명시되어있고 postVote 라고 한다면 해당 함수를 사용할때, api 에 vote 관련 명세가 있었나? 라고생각할수도있을것같습니다.
그래서 제생각에는 api 와 가장 가까운 함수에서는 postComment 가 나을것 같구, 해당 함수를 사용하거나 래핑하는 함수에서 comment 와 vote 로 분기하는 식으로 설계하면 어떨까?싶습니다!
| userId: postDetail.author._id, | ||
| }; | ||
| if (!voteContent || !token) return; | ||
| await createComment(JSON.stringify({ type: 'vote', content: voteContent })); |
| const timeOffset = (standardTime: string | Date) => { | ||
| if (standardTime instanceof Date) { | ||
| standardTime = standardTime.toString(); | ||
| } | ||
|
|
||
| const MINUTE = 60; | ||
| const HOUR = MINUTE * 60; | ||
| const DAY = HOUR * 24; | ||
| const MONTH = DAY * 30; | ||
| const YEAR = MONTH * 12; | ||
|
|
||
| const createTime = new Date(standardTime); |
There was a problem hiding this comment.
new Date() constructor 에 string 대신에 Date 타입이 들어가도 작동하는것 같습니다!
그래서 toString 으로 바꾸지 않아도될것같습니다!
그리고 string 이 date 인지 검사하는게 필요할것같습니다!
💬 Issue Number
🤷♂️ Description
📷 Screenshots
👻 Good Function
📋 Check List
📒 Remarks
core.ts파일을 분리했어요. Mutation 코드에서 에러를 처리해야하는데 그것보다 axios에서 처리하는 내용을 래핑해서 사용하는게 더 편할 것 같아서 분리해놓았습니다. 지금은 에러응답에 대한 처리가 없지만, 시간을 내서 모달이나 토스트창을 활용해볼예정입니다.