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 구현 #25

Merged
merged 12 commits into from
Nov 5, 2024

Conversation

seongjin2427
Copy link
Collaborator

Pull Request 요약

PR에 대한 내용을 작성해주세요.

일반 피드에 대한 상세 읽기 모달창을 구현합니다.


작업 내용

작업 내용에 대해서 작성해주세요.


  • UI 구현
    • FeedWrapper - 브라우저 navigator 주소창에 f를 포함한 Query String이 있다면, children props를 렌더링
    • ReadOnlyCommonFeed - 일반 피드에 대한 읽기 전용 피드 컴포넌트
    • Slide - 자식 요소들을 슬라이드 중 하나의 페이지로 렌더링
    • FeedTextContent - 일반 피드 정보를 렌더링
    • - FeedCommentList - 해당 피드에 대한 댓글 들에 대한 리스트들을 렌더링
      • 대댓글도 재귀적으로 렌더링
    • FeedComment - 댓글 하나에 대한 정보를 렌더링
    • FeedLikeBox - 해당 피드에 대한 좋아요, 댓글 수를 표시하는 컴포넌트
    • FeedCommentWriteInput - 해당 피드에 대한 댓글을 작성하는 input 컴포넌트

참고 사항

참고 사항이 있다면 첨부해주세요.


  • Modal 컴포넌트 - maxWidth, height, maxHeight props 추가

관련 이슈

closing할 이슈 번호를 작성해주세요.


- FeedWrapper depends on whether there is pathname value "p" or not
- If pathname "p" value of browser navigation is existed, FeedWrapper render children props
- The folder name included "@" caused error when committing
- The folder name to start "@" means slot router
- FeedWrapper depends on whether or not browser navigation has value of key "f"
- ReadOnlyCommonFeed is only rendering from props information about common feed
- FeedTextContent is rendering feed information (profile, content, username etc.)
- not included server request logic
- added height, maxHeight props at Modal Component
- update useAutoResizeTextArea hook (not use row count, use scrollHeight)
@seongjin2427 seongjin2427 added the feat 구현, 개선 사항에 관련된 이슈입니다. label Nov 3, 2024
@seongjin2427 seongjin2427 self-assigned this Nov 3, 2024
@seongjin2427 seongjin2427 requested a review from lee1nna November 3, 2024 11:30
Copy link

netlify bot commented Nov 3, 2024

Deploy Preview for prostargram failed.

Name Link
🔨 Latest commit 49218d4
🔍 Latest deploy log https://app.netlify.com/sites/prostargram/deploys/67275ee314eaf90008709ebd

Copy link

sonarqubecloud bot commented Nov 3, 2024

Quality Gate Failed Quality Gate failed

Failed conditions
1 Security Hotspot
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

Copy link
Collaborator

@lee1nna lee1nna left a comment

Choose a reason for hiding this comment

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

고생하셨습니다!!

@lee1nna
Copy link
Collaborator

lee1nna commented Nov 5, 2024

FeedCommentWriteInput 컴포넌트와 FeedReplyWriteInput 컴포넌트가 유사한 로직도 많고 공통된 훅을 사용하고 있어서
하나의 컴포넌트로 처리하면 재사용성이 더 좋을 것 같습니다
차이가 나는 부분은 props로 �대응해도 괜찮지 않을까 하는 개인적인 생각입니다!

  id: string | number;
  placeholder?: string;
  maxLength?: number;
  onSubmit: (id: string | number, content: string) => void;

@seongjin2427
Copy link
Collaborator Author

구현했을 당시에는 두 컴포넌트 디자인적인 차이가 있어서 일단 구분을 해두었는데요!
리팩토링하면서 하나로 합쳐볼 수 있을 것 같아요!!
의견 감사합니다!! 👍

@seongjin2427 seongjin2427 merged commit 5b8eb6a into develop Nov 5, 2024
1 of 6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat 구현, 개선 사항에 관련된 이슈입니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

일반 피드 상세 읽기 모달 UI 구현
2 participants