[FE] 유저프로필 페이지 css + api요청 (+ 마크다운 라이브러리 변경) #163
Merged
Conversation
This file contains 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
httpStatus message
gnb만큼 padding-top, margin-top 추가
belongTeamOptions
@toast-ui/react-editor -> @uiw/react-md-editor
label, placeholder 구분 및 css 수정 width, height 속성 추가 Select(ul): 위치조정
label, placeholder 구분 및 css 수정 width, height 속성 추가 Select(ul): 위치조정
lable, placholder 구분
get 유저 디테일 정보 post 유저 디테일 정보
patch -> post
kimyouknow
changed the title
hoeun0723
reviewed
Aug 31, 2022
Comment on lines
+63
to
+91
| <S.ProfileImageContainer> | ||
| {imageFile ? ( | ||
| <S.InputTypeImageHandler htmlFor="profileImage"> | ||
| <S.ImageThunbnail alt="upload" src={URL.createObjectURL(imageFile)} /> | ||
| <Button | ||
| type="button" | ||
| theme="secondary" | ||
| customStyle={S.ImageEditButton} | ||
| onClick={onUploadButtonClick} | ||
| > | ||
| 수정 | ||
| </Button> | ||
| </S.InputTypeImageHandler> | ||
| ) : ( | ||
| <S.InputTypeImageHandler htmlFor="profileImage"> | ||
| <div> | ||
| <S.PlusSolid /> | ||
| </div> | ||
| </S.InputTypeImageHandler> | ||
| )} | ||
| <S.HiddenInputHandler | ||
| ref={inputFileRef} | ||
| id="profileImage" | ||
| name="profileImage" | ||
| type="file" | ||
| accept="image/*" | ||
| onChange={onChangeFile} | ||
| /> | ||
| </S.ProfileImageContainer> |
There was a problem hiding this comment.
이 부분이 NewTeamPost 에도 반복되어 코드 작성에 고민을 하고 있는 중이었는데, 이렇게 imageFile 유무에 따른 조건문으로 처리해주면 되겠군요
코드 작성 후 저는 htmlFor에 대하여 좀 더 공부해봐야 할 거 같네요😭
좋은 예시 감사합니다.
이건 그냥 제안인데, 이 부분도 component로 만들면 어떨까요 ?
There was a problem hiding this comment.
앗 너무 좋습니다! 우선 merge하고 별도 이슈를 생성해서 작업해봐요👍
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.
About
Description
1. 유저프로필수정 페이지 css
피그마에 나와있는대로 만들지 않았습니다. 피그마에는 빠진 입력창이 있어 수정했습니다. 필수정보 입력시 필요한 입력창을 기준으로 임의대로 추가했습니다. 추후 피그마가 업데이트되면 반영이 필요합니다.
스토리북은 페이지에서 필요한 mocking 변수(함수, api요청 등등)이 과도하게 필요해 생략했습니다. 추후 mocking 하는 방법을 학습한 뒤 적용할 예정입니다.
2. 유저프로필수정 api 요청
api요청 상에는 문제가 없습니다. (network 탭 양호, spring에러 발생하지 않음, react에러도 발생하지 않음)
하지만 수정 요청 이후에 다시 유저 정보를 조회하면 반영이 되지 않은 문제가 발생했습니다. 추후 백엔드와 논의 후 수정할 부분이 필요하다면 반영이 필요합니다.
결과
유저프로필수정 페이지
수정 요청 이후 데이터가 최신화되지 않은 에러 결과
123.mov
3. 마크다운 라이브러리 변경
기존에 사용하던 라이브러리 - toast ui react-markdown editor 가 다음과 같은 문제가 있어
대체 라이브러리로 변경했습니다. 공식문서 설명도 깔끔하고 codesandbox 예제로 이것저것 태스트해봤는데 잘 되는 것 같아 변경했습니다.
Ref
#161