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: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) #1048

Merged
merged 1 commit into from
Oct 12, 2022

Conversation

wonsss
Copy link
Contributor

@wonsss wonsss commented Oct 3, 2022

close #1046

  • 로드맵을 위한 하위 컴포넌트로서 사이드시트 모달을 구현하고 해당 컴포넌트의 스토리북을 작성함

  • 사용방법

const Component = () => {
	const [isSideSheetOpen, setIsSideSheetOpen] = useState(false);
	
	const handleOpenSideSheet = () => {
		setIsSideSheetOpen(true);
	};
	
	const handleCloseSideSheet = () => {
		setIsSideSheetOpen(false);
	};
	
	return (
		<>
		    <button onClick={handleOpenSideSheet}>
		      로드맵 열기
		    </Button>
		
		    {isSideSheetOpen && (
			    <SideSheet
			      handleCloseSideSheet={handleCloseSideSheet}
			    ><넣을 컴포넌트>  
				</SideSheet>
		  	)}
		
		</>
	)
}

@wonsss wonsss requested a review from euijinkk October 3, 2022 16:31
@wonsss wonsss self-assigned this Oct 3, 2022
Copy link
Contributor

@euijinkk euijinkk left a comment

Choose a reason for hiding this comment

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

어프루브 후 같이 작업하면서 수정해나갑시다!

Comment on lines +3 to +9
const backdropRoot = document.createElement('div');
backdropRoot.setAttribute('id', 'backdrop-root');
document.body.append(backdropRoot);

const modalRoot = document.createElement('div');
modalRoot.setAttribute('id', 'overlay-root');
document.body.append(modalRoot);
Copy link
Contributor

Choose a reason for hiding this comment

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

preview의 decorator 에 생성해두면 좋을것같아요!

@wonsss wonsss merged commit dc1ce82 into develop Oct 12, 2022
@wonsss wonsss deleted the feature/1046-sidesheet branch October 12, 2022 05:25
@wonsss wonsss restored the feature/1046-sidesheet branch October 12, 2022 05:29
@wonsss wonsss deleted the feature/1046-sidesheet branch October 12, 2022 05:39
Yboyu0u added a commit that referenced this pull request Oct 24, 2022
* refactor: LoginDocument mock이용한 테스트로 수정

* refactor(MissionDocumentation): mock이용한 테스트로 수정

* refactor(ProfileDocumentation): mock이용한 테스트로 수정 + response fixture 생성

* refactor(CommentDocumentation): mock 이용한 테스트로 수정

* refactor(MemberDocumentation, MemberReactionDocumentation): mock 이용한 테스트로 수정

* refactor(SessionMemberDocumentation): mock 이용한 테스트로 수정

* refactor(TagDocumentation): mock 이용한 테스트로 수정

* refactor(StudylogOverviewDocumentation): mock 이용한 테스트로 수정

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

* refactor(StudylogRssFeedDocumentation): mock 이용한 테스트로 수정

* chore: 자바 버전을 8에서 9로 변경

* test(StudylogRssFeedDocumentation): 응답 fixture로 빼기

* chore: 자바9 -> 8 변경

* chore: 자바9 -> 8 변경

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
hanull pushed a commit that referenced this pull request Oct 27, 2022
* refactor: LoginDocument mock이용한 테스트로 수정

* refactor(MissionDocumentation): mock이용한 테스트로 수정

* refactor(ProfileDocumentation): mock이용한 테스트로 수정 + response fixture 생성

* refactor(CommentDocumentation): mock 이용한 테스트로 수정

* refactor(MemberDocumentation, MemberReactionDocumentation): mock 이용한 테스트로 수정

* refactor(SessionMemberDocumentation): mock 이용한 테스트로 수정

* refactor(TagDocumentation): mock 이용한 테스트로 수정

* refactor(StudylogOverviewDocumentation): mock 이용한 테스트로 수정

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

* refactor(StudylogRssFeedDocumentation): mock 이용한 테스트로 수정

* chore: 자바 버전을 8에서 9로 변경

* test(StudylogRssFeedDocumentation): 응답 fixture로 빼기

* chore: 자바9 -> 8 변경

* chore: 자바9 -> 8 변경

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
Yboyu0u added a commit that referenced this pull request Oct 28, 2022
* feat: 임시저장 로직 response에 ability 필드 추가

* feat: 플라이웨이에 crate studylog_temp_ability 추가

* test: 문서화 테스트 추가

* refactor: 역량 관련해서 적절한 에러로 수정

* fix: 임시저장 관련 테스트 추가 및 에러 해결

* fix: StudylogTempAbility OnDelete 속성 추가

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
Yboyu0u added a commit that referenced this pull request Oct 28, 2022
* feat: 임시저장 로직 response에 ability 필드 추가

* feat: 플라이웨이에 crate studylog_temp_ability 추가

* test: 문서화 테스트 추가

* refactor: 역량 관련해서 적절한 에러로 수정

* fix: 임시저장 관련 테스트 추가 및 에러 해결

* fix: StudylogTempAbility OnDelete 속성 추가

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

* fix: List.of() 제거

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
Yboyu0u added a commit that referenced this pull request Oct 30, 2022
* feat: 임시저장 로직 response에 ability 필드 추가

* feat: 플라이웨이에 crate studylog_temp_ability 추가

* test: 문서화 테스트 추가

* refactor: 역량 관련해서 적절한 에러로 수정

* fix: 임시저장 관련 테스트 추가 및 에러 해결

* fix: StudylogTempAbility OnDelete 속성 추가

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

* [BE] 문서화 테스트 개선 (#1091)

* refactor: LoginDocument mock이용한 테스트로 수정

* refactor(MissionDocumentation): mock이용한 테스트로 수정

* refactor(ProfileDocumentation): mock이용한 테스트로 수정 + response fixture 생성

* refactor(CommentDocumentation): mock 이용한 테스트로 수정

* refactor(MemberDocumentation, MemberReactionDocumentation): mock 이용한 테스트로 수정

* refactor(SessionMemberDocumentation): mock 이용한 테스트로 수정

* refactor(TagDocumentation): mock 이용한 테스트로 수정

* refactor(StudylogOverviewDocumentation): mock 이용한 테스트로 수정

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

* refactor(StudylogRssFeedDocumentation): mock 이용한 테스트로 수정

* chore: 자바 버전을 8에서 9로 변경

* test(StudylogRssFeedDocumentation): 응답 fixture로 빼기

* chore: 자바9 -> 8 변경

* chore: 자바9 -> 8 변경

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>

* feat: 임시 저장 기능 구현 (#1067)

* feat: 임시 저장 버튼 UI 구현

* feat: type의 값이 nullable하도록 만들어주는 util type 구현

* feat: 임시 저장 기능 구현

- 임시 저장 버튼 클릭시 저장할 수 있도록 기능 구현

* feat: 학습 로그내 역량에 대해서도 임시 저장 기능 작동하도록 구현

* feat: 임시 저장 기능에 사용되는 문구 상수화

* fix: 새로운 글 작성시 editor가 제대로 나오지 않는 문제 해결

- toastUiEditor의 intialValue는 마운트 됐을 때 들어간 값이므로, 기존의 로직에서는 임시 저장된 값이 없으면 새로운 글 작성시 editor가 제대로 출력되지 않았습니다.
- 그래서, 임시 저장된 것이 없으면 빈 값을 content에 넣어서 해결해주었습니다.

* refactor: nullish 연산자로 대체

* feat: 글 임시저장시 제목 또는 내용이 있으면 가능하도록 기능 구현

* refactor: axios client를 활용하여 http client 대체

* refactor: api 요청 함수 컨벤션에 맞도록 변경

* feat: 임시저장 스터디 로그 응답 결과 Nullable 적용

* feat: 임시 저장 api 요청 관련 훅 생성

* refactor: 불필요한 함수 및 상수 제거

* refactor 게시물 등록 시 remove로 cache 제거

Co-authored-by: gytks4 <[email protected]>

* refactor: 임시저장 기능 수정 (#1099)

* feat: 임시저장 로직 response에 ability 필드 추가

* feat: 플라이웨이에 crate studylog_temp_ability 추가

* test: 문서화 테스트 추가

* refactor: 역량 관련해서 적절한 에러로 수정

* fix: 임시저장 관련 테스트 추가 및 에러 해결

* fix: StudylogTempAbility OnDelete 속성 추가

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>

* fix: List.of() 제거

Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: Hanul Lee <[email protected]>
Co-authored-by: al-bur <[email protected]>
Yboyu0u added a commit that referenced this pull request Nov 2, 2022
* feat: 임시저장 로직 response에 ability 필드 추가

* feat: 플라이웨이에 crate studylog_temp_ability 추가

* test: 문서화 테스트 추가

* refactor: 역량 관련해서 적절한 에러로 수정

* fix: 임시저장 관련 테스트 추가 및 에러 해결

* fix: StudylogTempAbility OnDelete 속성 추가

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
Yboyu0u added a commit that referenced this pull request Nov 2, 2022
* feat: 임시저장 로직 response에 ability 필드 추가

* feat: 플라이웨이에 crate studylog_temp_ability 추가

* test: 문서화 테스트 추가

* refactor: 역량 관련해서 적절한 에러로 수정

* fix: 임시저장 관련 테스트 추가 및 에러 해결

* fix: StudylogTempAbility OnDelete 속성 추가

* feat: comment count svg 변경 (#1063)

* chore: comment svg 수정

* chore: comment svg 수정

* feat: 로드맵을 위한 하위 컴포넌트 구현 (#1047)

* chore: storybook 사용을 위해 reactDocgen 에러 설정

* feat: 상위에서 크기를 제어하는 ResponsiveButton 컴포넌트 구현

* feat: LabelledImage 컴포넌트 구현

* feat: KeywordSection 컴포넌트 구현

* refactor: Omit -> Pick으로 타입 변경

* feat: fontSize를 Style Props 인자로 내려주기

* feat: 로드맵을 위한 하위 컴포넌트 구현(sidesheet modal) (#1048)

* fix: List.of() 제거

Co-authored-by: JUDONGHYEOK <[email protected]>
Co-authored-by: 김의진 <[email protected]>
Co-authored-by: Marco <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants