-
Notifications
You must be signed in to change notification settings - Fork 1
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.
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: 편지쓰기 페이지 UI 구현 #60
Conversation
* 📦 chore: @radix-ui/react-tooltip 설치 * ✨ feat: useTimeout 훅 작성 * ✨ feat: Tooltip 컴포넌트 작성 * 🔨 refactor: IconButton에 forwardRef 추가 * 💄 design: Tooltip 스토리북 작성 * 📝 style: isOpen 초기 값 delay > 0 로 변경 * 💄 design: 배경 이미지 변경
🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-ptakqbhuib.chromatic.com/ |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
수고하셨어요!! 👍
컴포넌트 안에 스타일도 함께 작성 VS styles.ts 에 컴포넌트 별로 스타일 객체 더 만듦
특정 컴포넌트에서만 사용되는 스타일의 경우에는 같은 컴포넌트 파일 하단에 styles
객체를 만드는 방법도 좋다고 생각해요!
(특정 페이지에서만 사용하는 컴포넌트가 규모가 엄청 커질 것 같진 않아서..?)
handleChange, | ||
}: { | ||
value: number[]; | ||
handleChange: (e: Event, newValue: number | number[]) => void; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p3;
외부에서 prop으로 넘겨 받은 핸들러이니 onChange
라는 이름이면 더 명확하게 와닿을 것 같아요! 😁
handleChange: (e: Event, newValue: number | number[]) => void; | |
onChange: (e: Event, newValue: number | number[]) => void; |
<button | ||
css={[ | ||
buttonStyles.button('semi-transparent', 'sm'), | ||
style.iconContainer, | ||
]} | ||
> | ||
<ImageSquare /> | ||
</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
p5;
제가 Navbar 스토리북에 요런 형태로 작성했었군요.. 😅
a
, Link
등 기존의 button
과 다른 태그에 스타일을 입혀야 하는 경우에는 buttonStyles.button
을 사용하는 건 좋다고 생각하는데.. 현재는 Button
컴포넌트의 button
태그와 동일한 태그를 사용하고 있기에 아래와 같은 형태는 어떨까요!?
<button | |
css={[ | |
buttonStyles.button('semi-transparent', 'sm'), | |
style.iconContainer, | |
]} | |
> | |
<ImageSquare /> | |
</button> | |
<Button css={style.iconContainer} variant="semi-transparent" size="sm"> | |
<ImageSquare /> | |
</Button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아이쿠,,감사합니다
* ✨ feat: 편지쓰기 페이지 UI 구현 (#60) * ✨ feat: Tooltip 컴포넌트, useTimeout 훅 작성 (#57) * 📦 chore: @radix-ui/react-tooltip 설치 * ✨ feat: useTimeout 훅 작성 * ✨ feat: Tooltip 컴포넌트 작성 * 🔨 refactor: IconButton에 forwardRef 추가 * 💄 design: Tooltip 스토리북 작성 * 📝 style: isOpen 초기 값 delay > 0 로 변경 * 💄 design: 배경 이미지 변경 * ✨ feat: LetterWrite 페이지 편지지 UI 구현 * ✨ feat: LetterWrite 페이지 경로 추가 * ✨ feat: LetterWrite 페이지 바텀시트 UI 구현 * 🔨 refactor: LetterWrite 페이지 컴포넌트 분리 * 🔨 refactor: html 태그 변경 및 인터페이스 분리 * 💄 design: AgeSlider 툴팁 변경 * 🚑 fix: 빌드 오류 수정 * 🚑 fix: 빌드 오류 수정-버튼 스타일 인자 * 🔨 refactor: Button 컴포넌트 사용 및 함수명 변경 --------- Co-authored-by: SangHoon Lee <50488780+bbearcookie@users.noreply.github.com> * ✨ feat: 편지쓰기 페이지 form 구현 (#62) * ✨ feat: 편지 내용 글자수 제한 기능 구현 * ✨ feat: 편지 받는이 BottomSheet 클릭 이벤트 구현 * ✨ feat: react-hook-form 에 제출할 폼 내용 등록 * ✨ feat: 사진 form 등록 및 사진 삭제 기능 구현 * ✨ feat: 선택된 편지 받는 사람 표시 구현 * ✨ feat: Zod 를 사용하여 form 유효성 검사 * ✨ feat: 폴라로이드 모달 구현 및 폴라로이드 컴포넌트 수정 * 🔨 refactor: LetterWrite 페이지 컴포넌트 및 스타일 분리 * 🚑 fix: 이미지 삭제 후 같은 이미지 재선택 시 등록 안되는 오류 수정 * 📝 style: px 을 rem 단위로 변경 및 console.log 제거 * ✨ feat: textarea 의 maxLength 속성 사용 * ✨ feat: 스키마의 숫자 값 상수화 및 useForm 에 스키마 타입 추가 * ✨ feat: 이미지 유효성 검사 추가 * 📝 style: 하단 버튼 문구 '보내기'로 변경 * ✨ feat: 편지 쓰기 모킹 API 구현 (#68) * ✨ feat: 편지 작성 모킹 및 API 구현 * ✨ feat: 타입 수정 및 폼 데이터 API 문서에 맞게 값 변환 완료 * ✨ feat: 편지 작성 API 처리 * 📝 style: postLetter API 매개변수명 변경 * 💄 design: Letter Write 페이지 디자인 수정 * 💄 design: 편지 받는 사람 설정 컨테이너 디자인 변경 및 아이콘 변경 * 🔨 refactor: 타입 변경 * 💄 design: 보낸 사람 선택창 필터링 Chip으로 변경 및 UI 수정 * 📝 style: 뷰포트 메타 태그에 user-scalable 비활성화 * 💄 design: AgeSlider padding 추가 * 🚑 fix: build 에러 수정 * 💄 design: 닉네임 온보딩 아이콘 위치 상대적으로 변경 --------- Co-authored-by: SangHoon Lee <50488780+bbearcookie@users.noreply.github.com>
🧩 이슈 번호
✅ 작업 사항
편지쓰기 페이지 UI 구현
👩💻 공유 포인트 및 논의 사항
styles.ts
에서 모든 스타일을 관리하니깐 코드가 길어지고 쉽게 파악하기 힘듦=> 컴포넌트 안에 스타일도 함께 작성 VS
styles.ts
에 컴포넌트 별로 스타일 객체 더 만듦