Feature/common feed #21
Conversation
- remove aria-hidden="true" in modal background - remove aria-hidden="true" in modal container - add role in modal div - change link to button in ModalMenu - modify modal scss
- seperate image upload logic hooks - add image preview common component - add flex related mixin - seperate common feed related type
- add setData useEffect dependency array - change image tag to next/image
- common feed popup state intergration - add common feed popup type - remove children setState props & apply to update function from parent
❌ Deploy Preview for prostargram failed.
|
| setCurrentImage, | ||
| removeImage, | ||
| } = useImageUpload(); | ||
| const [data, setData] = useState<CommonFeedData>({ |
There was a problem hiding this comment.
상태명을 feedData로 변경해보는건 어떨까요!?
그냥 data는 너무 일반적인 명사라서 어떤 데이터인지 명확하지 않은 것 같아서요!
There was a problem hiding this comment.
feature/discussion-feed 브랜치에서 변경 될 예정입니다!
| ...prev, | ||
| hashtag: newHashtags, | ||
| })); | ||
| }; |
There was a problem hiding this comment.
updateImages, updateContents, updateHashTags를 하나의 메서드로 변경해보는건 어떨까요!
하나의 메서드로 합치면 코드 복잡성도 낮출 수 있고, 이후 하위 컴포넌트로 전달할 props의 개수도 적으니
나중에 유지보수하거나 코드 읽기도 더 쉬울 것 같아요!
const changeFeedData = (nextFeedData: Partial<CommonFeedData>) => {
setFeedData((prev) => ({
...prev,
...nextFeedData,
}));
};| onNext?: () => void; | ||
| images: FeedImage[]; | ||
| currentImage: FeedImage | null; | ||
| setCurrentImage: React.Dispatch<SetStateAction<FeedImage | null>>; |
There was a problem hiding this comment.
개인적인 의견입니다!
props로 전달받는 상태 변경 함수를 그대로 사용하여 React.Dispatch, SetStateAction 타입을 사용하는 것보다,
아래와 같이 상태 변경 함수를 호출하는 메서드를 전달받아
타입을 길게 작성하지 않아도 되는 걸 선호하는 편입니다 하하.
- Before
import { ChangeEvent, SetStateAction, useEffect, useState } from 'react';
...
const SomeComponent = () => {
const [currentImage, setCurrentImage] = useSate<FeedImage | null>(null);
...
}
type AddContentProps = {
...
setCurrentImage: React.Dispatch<SetStateAction<FeedImage | null>>;
}- After
import { ChangeEvent, useEffect, useState } from 'react';
// SetStateAction 타입 제거 가능
const SomeComponent = () => {
const [currentImage, setCurrentImage] = useSate<FeedImage | null>(null);
const updateCurrentImage = (nextCurrentImage: FeedImage) => {
setCurrentImage(nextCurrentImage);
}
...
}
type AddContentProps = {
...
updateCurrentImage: (nextCurrentImage: FeedImage) => void;
}| @@ -56,7 +57,9 @@ const Navigation = () => { | |||
| type: 'modal', | |||
| url: '/', | |||
| icon: <CommonFeedIcon />, | |||
| component: <Modal onClose={closeModal}>일반피드로 대체 예정입니다</Modal>, | |||
| component: ( | |||
| <CommonFeed modalStatus={feedModal} setModalStauts={setFeedModal} /> | |||
There was a problem hiding this comment.
오타가 있습니닷! 😅
setModalStauts -> setModalStatus
There was a problem hiding this comment.
feature/discussion-feed 브랜치에서 변경 될 예정입니다!
|
|
||
| const createCommonFeed = () => { | ||
| // TODO: 일반피드 작성 서버 API 연동 | ||
| console.log('데이터', data); |
There was a problem hiding this comment.
최종적으로 서버로 생성할 피드 정보를 보낼 때,
base64로 인코딩 된 문자열이 아닌 File 객체 그대로 전송해야 합니다.
- change ts file name (commonFeed -> feed) - add discussion subject components - add AddContents feed type props - modify commonfeed typo
- replace Textarea component - change document name (@type->type)
- modify update discussion feed data using Partial - add modal component max height
- modify refactoring feed data using Partial - add max-height in modal css
- remove setStateAction props - modify common feed update function using Partial - change image type to match server request value
|
Pull Request 요약
일반 피드 작업 관련 PR 입니다.
작업 내용
참고 사항
관련 이슈