Skip to content
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

Merged
merged 11 commits into from
Feb 2, 2024

Conversation

easyhyun00
Copy link
Collaborator

🧩 이슈 번호

✅ 작업 사항

편지쓰기 페이지 UI 구현

  • 대부분 기능은 없고 UI 만 구현했습니다.
image image

👩‍💻 공유 포인트 및 논의 사항

  • 컴포넌트 스타일 관리
    • styles.ts 에서 모든 스타일을 관리하니깐 코드가 길어지고 쉽게 파악하기 힘듦
      => 컴포넌트 안에 스타일도 함께 작성 VS styles.ts 에 컴포넌트 별로 스타일 객체 더 만듦

bbearcookie and others added 8 commits February 1, 2024 22:09

Verified

This commit was signed with the committer’s verified signature.
mpaperno Max Paperno
* 📦 chore: @radix-ui/react-tooltip 설치

* ✨ feat: useTimeout 훅 작성

* ✨ feat: Tooltip 컴포넌트 작성

* 🔨 refactor: IconButton에 forwardRef 추가

* 💄 design: Tooltip 스토리북 작성

* 📝 style: isOpen 초기 값 delay > 0 로 변경

* 💄 design: 배경 이미지 변경
@easyhyun00 easyhyun00 added the ✨ Feature 기능 개발 label Feb 2, 2024
@easyhyun00 easyhyun00 self-assigned this Feb 2, 2024
Copy link

github-actions bot commented Feb 2, 2024

🚀 Storybook Preview 보러가기: https://65a6c73d536a3c43b7c5c9bb-ptakqbhuib.chromatic.com/
🚀 React Preview 보러가기: https://dnd-10th-4-frontend-34emlabgi-bbearcookie.vercel.app

Copy link
Member

@bbearcookie bbearcookie left a 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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

p3;
외부에서 prop으로 넘겨 받은 핸들러이니 onChange 라는 이름이면 더 명확하게 와닿을 것 같아요! 😁

Suggested change
handleChange: (e: Event, newValue: number | number[]) => void;
onChange: (e: Event, newValue: number | number[]) => void;

Comment on lines 15 to 22
<button
css={[
buttonStyles.button('semi-transparent', 'sm'),
style.iconContainer,
]}
>
<ImageSquare />
</button>
Copy link
Member

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 태그와 동일한 태그를 사용하고 있기에 아래와 같은 형태는 어떨까요!?

Suggested change
<button
css={[
buttonStyles.button('semi-transparent', 'sm'),
style.iconContainer,
]}
>
<ImageSquare />
</button>
<Button css={style.iconContainer} variant="semi-transparent" size="sm">
<ImageSquare />
</Button>

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아이쿠,,감사합니다

@easyhyun00 easyhyun00 merged commit e34bf5b into feat/#55/write-page Feb 2, 2024
7 checks passed
@easyhyun00 easyhyun00 deleted the feat/#55/write-page-ui branch February 2, 2024 09:16
easyhyun00 added a commit that referenced this pull request Feb 7, 2024
* ✨ 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Feature 기능 개발
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants