[refactor] 버튼 UI 통합 #218

obvoso · 2023-09-30T13:23:55Z

#196

변경사항

버튼 UI통합
- 버튼 부정 / 긍정 순으로 변경
- 버튼 rounded-full 로 변경
- 버튼 hover 컬러 밝아지도록 변경
- 버튼 명사(취소, 확인 등)형에서 동사(취소하기, 확인하기)형으로 수정
- 버튼 컨테이너가 있는 경우, space-x 등 제거로 인한 마진 통일감 추가

변경 스크린샷

<- 얘는 수락하기 호버 컬러 확인해주세여

기타

기존 버튼 크기가 일관되지 않았는데,
버튼 통합으로인해 커지거나 / 작아진 버튼들이 있어요.
혹시 특정 버튼이 커지거나 / 작아지기를 원하시면 의견 남겨주세요

JuneParkCode

큰 작업 고생하셨습니다.
버튼 필요한 부분들에서 모두 잘 통합된 것 확인했습니다.

JuneParkCode · 2023-09-30T13:47:20Z

42manito/src/common/Button/Button.tsx

accept = true / false 처리보다 조금 더 가독성을 위해서 두 타입으로 ACCEPT / CANCEL 두 개로 구분지어도 좋을 것 같아요. 그런데 이러면 enum 같은거 써야할 것 같아서 일단은 패스..

좋은 의견 감사합니다.. storybook build fail 뜬 김에 같이 수정해볼게요 ༼;´༎ຶ۝༎ຶ༽

아마 프론트엔드에서 enum은 지양해야하는걸로 알고있슴다.. ༼;´༎ຶ۝༎ຶ༽

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking

패스하려고 했던 이유가 이거였는뎅..

const enum이 그나마 대체방안..?

tree shaking.. 처음 알았는데 좋은 거 알아갑니다!! 내일 const enum이나 union으로 수정하고 머지할게욥

jinaji

ㄷㄷ. css 빼는 것도 고생인데 버튼이 많지요 ... 커밋수랑 파일수 보고 🥹 됐어요
enum으로 타입 빼신 거랑 제가 확인할 수 있는 버튼에서는 디자인 일치된 것과 부정긍정 확인했구요!! 고생 많으셨습니다 빌드는 왜 안 되는 걸까요 ,,, 제가 이 상황에 제 풀리퀘를 머지해도 될지 .. . .. ....
빌드 오류만 잡으시면 될 것 같아서 승인해두겠습니다 고생많으셨습니다!!!!!!

obvoso · 2023-09-30T15:45:08Z

ㄷㄷ. css 빼는 것도 고생인데 버튼이 많지요 ... 커밋수랑 파일수 보고 🥹 됐어요

enum으로 타입 빼신 거랑 제가 확인할 수 있는 버튼에서는 디자인 일치된 것과 부정긍정 확인했구요!! 고생 많으셨습니다 빌드는 왜 안 되는 걸까요 ,,, 제가 이 상황에 제 풀리퀘를 머지해도 될지 .. . .. ....

빌드 오류만 잡으시면 될 것 같아서 승인해두겠습니다 고생많으셨습니다!!!!!!

스토리북.. 자꾸 실패해서.. 그냥 내일 클러가서 스토리북 다 빼보려구여.. ༼;´༎ຶ۝༎ຶ༽ 머지는 제가 나중에 할게여..ㅠㅠ

JuneParkCode · 2023-09-30T15:49:26Z

ㅋㅋㅋ... chromatic 이거 지금 사용중은 아닌거라서 일단 무시해도 되긴해요. .

JuneParkCode · 2023-09-30T15:50:20Z

disable 시키실걸면
https://github.com/manito42/FrontEnd/blob/dev/.github/workflows/chromatic.yml

이 파일 주석처리해두면 됩니당.

JuneParkCode

변경사항 확인했어요~

JuneParkCode · 2023-09-30T15:51:58Z

42manito/src/common/Button/Button.tsx

아마 프론트엔드에서 enum은 지양해야하는걸로 알고있슴다.. ༼;´༎ຶ۝༎ຶ༽

https://engineering.linecorp.com/ko/blog/typescript-enum-tree-shaking

패스하려고 했던 이유가 이거였는뎅..

const enum이 그나마 대체방안..?

falconlee236

커밋된 파일 개수를 보고 1차적으로 놀랐고,
버튼을 모듈로 빼서 다른 프로그램에 사용하는 코드에서 2차적으로 놀랐습니다.

css가 그냥 어렵고 짜증나는걸로 생각했었는데, 이렇게 하나로 묶어버리니까 생각보다
엄청나게 편하네요?? 뛰어난 실력 때문이라고 생각합니다.
정말 많이 배워갑니다!!

obvoso · 2023-10-01T07:12:27Z

storybook test코드 주석처리했어요
머지 할게요~

* refactor: Button storybook 삭제 * refactor: Button 컴포넌트 활성화, css 수정 * refactor: profile edit컴포넌트 버튼 수정 * sytle: 버튼 margin 반응형으로 수정 * refactor: reservation 컴포넌트 버튼 수정 * refactor: reservation nextProgressButton 클래스네임 수정 * refactor: profile 버튼 수정 * refactor: mentor 모달 버튼 수정 * refactor: connect 모달 버튼 수정 * refactor: feedback 모달 버튼 수정 * fix: storybook 파일 원상복구..ㅜ * fix: storyies.tsx props 변경 * fix: Button props enum으로 수정 * fix: stories 함수 새로 정의... * props 변경만 다시 커밋.. * remove: stories 그냥 삭제 * [refactor] const enum으로 수정

* Update chromatic.yml * [fix]: 194 todo 모달 뒤로가기 기능 제거 (#209) * [fix]: 모달 뒤로가기 기능 제거 * [refartor]: 미사용 전역 state(focus, zoomout) 제거 * [fix]: connect modal 호출시 미사용 Props 제거 * [fix]: setNewMentor 의존성에 mentors 추가 (#210) * [fix]: FeedbackModal.tsx에서 rating의 기본 state를 0에서 5로 변경 (#213) * [fix] ProfileUpdate에서의 소개글 글자수 제한 수정 (#212) * [fix]: 소개글 placeholder를 소개글을 작성해주세요로 변경 * [fix]: 최대 글자수 제한을 1000으로 변경 * [todo] About Page 제거 (#215) * [fix]: Remove About Link in Sidebar.tsx * [fix]: Remove components/About directory * [fix]: Remove Pages/About directory * [fix] tag search #191 (#211) * [remove]: 사용하지 않는 소스 파일 제거 * [remove]: 사용하지 않는 import 제거 * [fix]: UserProfile 의 hashtag, category 를 CardHashtag로 통합 [feat]: profile 에서 hashtag, category 클릭시 search로 이동 [fix]: 통합 과정에서 UserProfile, Reservation, Profile Update 등에서 관련 요소 변경 [remove]: 기존에 사용했던 Hashtags, Categories 제거 [fix]: Card 범위를 넘어가는 요소를 hashtags 에 넣지 않도록 변경 [fix]: hashtag list 가 profile div를 넘어가는 문제 해결 * [fix]: card hashtag className 조정 및 color props 제거 [fix]: card hashtag # 을 옵셔널하게 변경 [fix]: reservation 에서도 tag 클릭시 이동할 수 있도록 변경 * [todo] 멘토 활성화 시 필수 요소 확인 기능 추가 (#216) * [fix] 멘토링 모달 상태관리 (#214) * [fix]: connect modal 의 카테고리 / 해시태그 메시지 변경 * [fix]: 멘토링 모달 닫기 상태관리 * [fix]: 명칭 수정사항 반영 * [fix]: mentor connect slice 상태 초기화 * [fix]: 주석 제거, 불필요한 state 및 reducer 제거 * [refactor] 버튼 UI 통합 (#218) * refactor: Button storybook 삭제 * refactor: Button 컴포넌트 활성화, css 수정 * refactor: profile edit컴포넌트 버튼 수정 * sytle: 버튼 margin 반응형으로 수정 * refactor: reservation 컴포넌트 버튼 수정 * refactor: reservation nextProgressButton 클래스네임 수정 * refactor: profile 버튼 수정 * refactor: mentor 모달 버튼 수정 * refactor: connect 모달 버튼 수정 * refactor: feedback 모달 버튼 수정 * fix: storybook 파일 원상복구..ㅜ * fix: storyies.tsx props 변경 * fix: Button props enum으로 수정 * fix: stories 함수 새로 정의... * props 변경만 다시 커밋.. * remove: stories 그냥 삭제 * [refactor] const enum으로 수정 * [fix]: Login #202 (#219) * [fix]: base query error 상태 핸들링 안되는 문제 수정 * [fix]: uid / access token 변경 시 리로드 요청 * [fix]: header 에서 로그아웃 시 reload * [fix] sidebar ui 변경 (#217) * refactor: handleSignout async/await 제거 * refactor: 사이드바 왼쪽에서 나옴 * feat: add sidebar close button * style: close btn hover 추가, 마진 조정 * fix: sidebar close btn삭제, sidebar width 320으로 변경 * refactor: 햄버거 sm이하일 때만 보이게 수정 * fix: style에서 invisible 제거, className으로 수정 * refactor: header, sidebar 수정 * refactor: delete un-used * refactor: 헤더 검색 버튼 삭제 * styles: 헤더 높이 확장, z-index제거, 모바일 헤더 중앙 정렬 * styles: 사이드바 문구 한글화, 햄버거 정렬 start로 수정 * refactor: 사이드바 검색버튼 삭제 --------- Co-authored-by: Sangyun_LEE <falconlee236@cau.ac.kr> Co-authored-by: Photogrammer <81505228+JuneParkCode@users.noreply.github.com> Co-authored-by: jinaji <101309869+jinaji@users.noreply.github.com>

* Update chromatic.yml * [fix]: 194 todo 모달 뒤로가기 기능 제거 (manito42#209) * [fix]: 모달 뒤로가기 기능 제거 * [refartor]: 미사용 전역 state(focus, zoomout) 제거 * [fix]: connect modal 호출시 미사용 Props 제거 * [fix]: setNewMentor 의존성에 mentors 추가 (manito42#210) * [fix]: FeedbackModal.tsx에서 rating의 기본 state를 0에서 5로 변경 (manito42#213) * [fix] ProfileUpdate에서의 소개글 글자수 제한 수정 (manito42#212) * [fix]: 소개글 placeholder를 소개글을 작성해주세요로 변경 * [fix]: 최대 글자수 제한을 1000으로 변경 * [todo] About Page 제거 (manito42#215) * [fix]: Remove About Link in Sidebar.tsx * [fix]: Remove components/About directory * [fix]: Remove Pages/About directory * [fix] tag search manito42#191 (manito42#211) * [remove]: 사용하지 않는 소스 파일 제거 * [remove]: 사용하지 않는 import 제거 * [fix]: UserProfile 의 hashtag, category 를 CardHashtag로 통합 [feat]: profile 에서 hashtag, category 클릭시 search로 이동 [fix]: 통합 과정에서 UserProfile, Reservation, Profile Update 등에서 관련 요소 변경 [remove]: 기존에 사용했던 Hashtags, Categories 제거 [fix]: Card 범위를 넘어가는 요소를 hashtags 에 넣지 않도록 변경 [fix]: hashtag list 가 profile div를 넘어가는 문제 해결 * [fix]: card hashtag className 조정 및 color props 제거 [fix]: card hashtag # 을 옵셔널하게 변경 [fix]: reservation 에서도 tag 클릭시 이동할 수 있도록 변경 * [todo] 멘토 활성화 시 필수 요소 확인 기능 추가 (manito42#216) * [fix] 멘토링 모달 상태관리 (manito42#214) * [fix]: connect modal 의 카테고리 / 해시태그 메시지 변경 * [fix]: 멘토링 모달 닫기 상태관리 * [fix]: 명칭 수정사항 반영 * [fix]: mentor connect slice 상태 초기화 * [fix]: 주석 제거, 불필요한 state 및 reducer 제거 * [refactor] 버튼 UI 통합 (manito42#218) * refactor: Button storybook 삭제 * refactor: Button 컴포넌트 활성화, css 수정 * refactor: profile edit컴포넌트 버튼 수정 * sytle: 버튼 margin 반응형으로 수정 * refactor: reservation 컴포넌트 버튼 수정 * refactor: reservation nextProgressButton 클래스네임 수정 * refactor: profile 버튼 수정 * refactor: mentor 모달 버튼 수정 * refactor: connect 모달 버튼 수정 * refactor: feedback 모달 버튼 수정 * fix: storybook 파일 원상복구..ㅜ * fix: storyies.tsx props 변경 * fix: Button props enum으로 수정 * fix: stories 함수 새로 정의... * props 변경만 다시 커밋.. * remove: stories 그냥 삭제 * [refactor] const enum으로 수정 * [fix]: Login manito42#202 (manito42#219) * [fix]: base query error 상태 핸들링 안되는 문제 수정 * [fix]: uid / access token 변경 시 리로드 요청 * [fix]: header 에서 로그아웃 시 reload * [fix] sidebar ui 변경 (manito42#217) * refactor: handleSignout async/await 제거 * refactor: 사이드바 왼쪽에서 나옴 * feat: add sidebar close button * style: close btn hover 추가, 마진 조정 * fix: sidebar close btn삭제, sidebar width 320으로 변경 * refactor: 햄버거 sm이하일 때만 보이게 수정 * fix: style에서 invisible 제거, className으로 수정 * refactor: header, sidebar 수정 * refactor: delete un-used * refactor: 헤더 검색 버튼 삭제 * styles: 헤더 높이 확장, z-index제거, 모바일 헤더 중앙 정렬 * styles: 사이드바 문구 한글화, 햄버거 정렬 start로 수정 * refactor: 사이드바 검색버튼 삭제 --------- Co-authored-by: Sangyun_LEE <falconlee236@cau.ac.kr> Co-authored-by: Photogrammer <81505228+JuneParkCode@users.noreply.github.com> Co-authored-by: jinaji <101309869+jinaji@users.noreply.github.com>

obvoso added 10 commits September 30, 2023 21:56

refactor: Button storybook 삭제

349a67a

refactor: Button 컴포넌트 활성화, css 수정

d769c9d

refactor: profile edit컴포넌트 버튼 수정

e9e3191

sytle: 버튼 margin 반응형으로 수정

9fb4761

refactor: reservation 컴포넌트 버튼 수정

c3f508a

refactor: reservation nextProgressButton 클래스네임 수정

46960bd

refactor: profile 버튼 수정

a4c22b1

refactor: mentor 모달 버튼 수정

ea472fe

refactor: connect 모달 버튼 수정

4fa8ff8

refactor: feedback 모달 버튼 수정

39914dd

obvoso closed this Sep 30, 2023

obvoso reopened this Sep 30, 2023

obvoso self-assigned this Sep 30, 2023

obvoso requested review from falconlee236, JuneParkCode and jinaji September 30, 2023 13:40

obvoso added the refactor refactoring label Sep 30, 2023

obvoso added this to the 배포 전 테스트 및 수정 milestone Sep 30, 2023

obvoso linked an issue Sep 30, 2023 that may be closed by this pull request

[todo] 버튼 UI 통합 #196

Closed

7 tasks

obvoso changed the title ~~Refactor/196~~ [refactor] 버튼 UI 통합 Sep 30, 2023

fix: storybook 파일 원상복구..ㅜ

1a9ae47

JuneParkCode approved these changes Sep 30, 2023

View reviewed changes

obvoso added 4 commits September 30, 2023 23:21

fix: storyies.tsx props 변경

60f3163

fix: Button props enum으로 수정

4402543

fix: stories 함수 새로 정의...

acb5fe0

props 변경만 다시 커밋..

6b3c67e

obvoso force-pushed the refactor/196 branch from 300065a to 6b3c67e Compare September 30, 2023 14:57

remove: stories 그냥 삭제

566572a

jinaji approved these changes Sep 30, 2023

View reviewed changes

JuneParkCode approved these changes Sep 30, 2023

View reviewed changes

falconlee236 linked an issue Oct 1, 2023 that may be closed by this pull request

[bug] 버튼 UI 관련 문제 #162

Closed

falconlee236 approved these changes Oct 1, 2023

View reviewed changes

obvoso added 2 commits October 1, 2023 16:07

[refactor] const enum으로 수정

cd35f21

Merge branch 'dev' into refactor/196

8e0ce49

obvoso merged commit e8f562e into manito42:dev Oct 1, 2023

obvoso deleted the refactor/196 branch October 1, 2023 07:14

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[refactor] 버튼 UI 통합 #218

[refactor] 버튼 UI 통합 #218

obvoso commented Sep 30, 2023 •

edited

Loading

JuneParkCode left a comment

JuneParkCode Sep 30, 2023

obvoso Sep 30, 2023

JuneParkCode Sep 30, 2023

obvoso Sep 30, 2023

jinaji left a comment

obvoso commented Sep 30, 2023

JuneParkCode commented Sep 30, 2023

JuneParkCode commented Sep 30, 2023

JuneParkCode left a comment

JuneParkCode Sep 30, 2023

falconlee236 left a comment

obvoso commented Oct 1, 2023

[refactor] 버튼 UI 통합 #218

[refactor] 버튼 UI 통합 #218

Conversation

obvoso commented Sep 30, 2023 • edited Loading

변경사항

변경 스크린샷

기타

JuneParkCode left a comment

Choose a reason for hiding this comment

JuneParkCode Sep 30, 2023

Choose a reason for hiding this comment

obvoso Sep 30, 2023

Choose a reason for hiding this comment

JuneParkCode Sep 30, 2023

Choose a reason for hiding this comment

obvoso Sep 30, 2023

Choose a reason for hiding this comment

jinaji left a comment

Choose a reason for hiding this comment

obvoso commented Sep 30, 2023

JuneParkCode commented Sep 30, 2023

JuneParkCode commented Sep 30, 2023

JuneParkCode left a comment

Choose a reason for hiding this comment

JuneParkCode Sep 30, 2023

Choose a reason for hiding this comment

falconlee236 left a comment

Choose a reason for hiding this comment

obvoso commented Oct 1, 2023

obvoso commented Sep 30, 2023 •

edited

Loading