feat: 글쓰기페이지 #100
Closed
feat: 글쓰기페이지 #100
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Collaborator
|
리액트 훅 폼 사용하면 BaseTextarea 컴포넌트 내에서 value, onChange prop 을 별도로 지정할 필요가 없습니다 ! |
hongggyelim
reviewed
Dec 6, 2024
hongggyelim
reviewed
Dec 6, 2024
Collaborator
There was a problem hiding this comment.
컴포넌트에 value, onChange prop을 추가하지 않고 페이지에서 리액트 훅 폼을 사용해주세요
컴포넌트에 prop을 추가하면 리액트 훅폼 쓰는 페이지에서 에러가 발생합니다
hongggyelim
reviewed
Dec 6, 2024
|
|
||
| className="bg-primary-orange-100 text-white hover:bg-primary-orange-300" | ||
|
|
||
| className="bg-primary-grayscale-500 hover:bg-primary-grayscale-600 text-white" |
Collaborator
There was a problem hiding this comment.
gray 색상 쓸때는 primary 없이 bg-grayscale-숫자 요렇게 써주셔야돼요
yyezzzy
approved these changes
Dec 6, 2024
Collaborator
yyezzzy
left a comment
yyezzzy
left a comment
There was a problem hiding this comment.
콜솔출력도 한글로 잘 해주셨네요 ! 수정할 부분 수정되면 머지해주세요 ~
Comment on lines
5
to
8
| import Button from "../../../components/button/default/Button"; | ||
| import BaseTextArea from "../../../components/input/textarea/BaseTextArea"; | ||
| import ImageInputwithPlaceHolder from "../../../components/input/file/ImageInput/ImageInputwithPlaceHolder"; | ||
| import { usePost } from "../../../../hooks/usePost"; |
Comment on lines
6
to
15
| @params variant: "white" | "transparent" - 필수값 | ||
| @params name: string - 필수값 | ||
| @params size: "w-[00px] h-[00px] lg:w-[00px] lg:h-[00px]" - 기본값: "w-[327px] h-[132px] lg:w-[640px] lg:h-[160px]" | ||
| @params placeholder: string | ||
| @params errorMessage: string - 에러메시지 + 테두리 색상 변경 | ||
| @params disabled: boolean | ||
| @params wrapperClassName?: string; - 부가적인 tailwind css 클래스 | ||
| @params innerClassName?: string; - 부가적인 tailwind css 클래스 | ||
| @params value: string - 현재 입력된 값 | ||
| @params onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void - 값 변경 핸들러 |
|
💄 Storybook: https://673dcf13c9a3a1189a7c6fd4-hjwlxmplth.chromatic.com/ # Chromatic에서 생성된 Storybook URL |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
BaseTextArea 에서
value: 현재 입력값을 React 상태로 유지하고, 화면에 표시
onChange: 사용자의 입력 이벤트를 부모 컴포넌트로 전달하여 상태를 업데이트
추가했습니다.
예시)
export default function TextArea(props: TextAreaProps) {
return (
<textarea
value={props.value} // 부모로부터 받은 값
onChange={props.onChange} // 부모로부터 받은 상태 업데이트 함수
placeholder="텍스트를 입력하세요"
제목과 내용을 써서 등록하기 버튼을 눌러야하는데, 제목과 내용에 텍스트를 입력해도 입력된 텍스트가 없다고 떠서, 페이지 내에서 수정해보려고 했는데 잘 되지 않아서 추가했습니다.