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

Merged
merged 14 commits into from
Jan 21, 2025
Merged

Conversation

woneeeee
Copy link
Collaborator

@woneeeee woneeeee commented Jan 21, 2025

1. 무슨 이유로 코드를 변경했나요?


2. 어떤 위험이나 장애를 발견했나요?


3. 관련 스크린샷을 첨부해주세요.

2025-01-21.6.15.47.mov

4. 완료 사항

채팅 모달 UI 구현을 완료하였습니다.

5. 추가 사항

계좌 전송하기 버튼을 누르면 계좌번호가 메시지 입력창으로 넘어가도록 구현하였습니다!

랜딩 svg가 변경되었는데 새로운 이슈 파기엔 애매해서 현재 이슈에서 svg만 수정했습니당 😅 근데 현재 랜딩페이지 svg 용량이 너무 커서 터미널창에서
[BABEL] Note: The code generator has deoptimised the styling of /Users/kimjiwon/Desktop/GachTaxi-FE/src/assets/icon/secondLanding.svg as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/kimjiwon/Desktop/GachTaxi-FE/src/assets/icon/firstLandingPage.svg as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/kimjiwon/Desktop/GachTaxi-FE/src/assets/icon/lastLanding.svg as it exceeds the max of 500KB.
계속 이게 뜨는데 어떻게 해결하면 좋을까요,,,

@woneeeee woneeeee added feat 신규피쳐 design css labels Jan 21, 2025
@woneeeee woneeeee requested a review from WooGi1020 January 21, 2025 09:18
@woneeeee woneeeee self-assigned this Jan 21, 2025
@woneeeee woneeeee linked an issue Jan 21, 2025 that may be closed by this pull request
Copy link

구현 기능 확인하기: https://gachtaxi-r5jv2c5ur-cogis-projects.vercel.app

Copy link
Collaborator

@WooGi1020 WooGi1020 left a comment

Choose a reason for hiding this comment

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

고생하셨습니다~~ 😁 일단 제가 알기로는 SVG 자체가 큰 용량의 이미지를 가져오기 위한게 아니라 아이콘 등을 지원하기 위해서 만들어진 것으로 알고 있어요! 벡터값 기반으로 이미지를 렌더링하는거라 확장자를 PNG로 변경하거나 그래도 경고가 출력되면 최적화 라이브러리 같은 걸 사용해야 할 것 같습니다.. 😂😂

@@ -151,7 +151,7 @@ const MessageList = () => {
<div
ref={listRef}
onScroll={handleScroll}
className="flex-1 overflow-y-auto px-4"
className="flex-1 overflow-y-auto px-4 bg-[#141513]"
Copy link
Collaborator

Choose a reason for hiding this comment

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

테일윈드 변수로 따로 설정해서 사용하는게 조금 더 통일성이 있을 것 같습니다!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

넵 그럼 따로 변수 설정하도록 할게요!

@@ -11,12 +14,15 @@ const RenderOtherMessage: React.FC<RenderOtherMessageProps> = ({
timeStamp,
imageUrl,
}) => {
const [isReportModalOpen, setReportModalOpen] = useState(false);

return (
<div className="flex items-start gap-2">
<img
Copy link
Collaborator

Choose a reason for hiding this comment

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

사용자 이미지 없을떄 기본 이미지 보여주는 부분도 미리 추가해놓으면 더 편하실 것 같아요!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아항 감사합니당 수정할게요!! 😁

Copy link
Collaborator

Choose a reason for hiding this comment

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

디자이너분들과 모달 디자인 통일하자고 헀던 것 같은데 채팅방에서 사용하는 모달들은 혹시 제외된건가요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아 저는 그 택시를 호출할까요 모달 그 부분만 모달 디자인 통일하는걸로 알고 다른 모달을 만들었는데... ㅠㅠ 회의때 한 번 여쭤봐야겠네용...

Copy link
Collaborator

Choose a reason for hiding this comment

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

지난번에 더 확실하게 여쭤볼걸 그랬네요... 😞 만드신 거 아까운데 회의때 지금 작성하신 모달 부분은 그대로 가져가는 쪽으로 말씀드려볼까요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

좋습니당!! 😁

@woneeeee
Copy link
Collaborator Author

고생하셨습니다~~ 😁 일단 제가 알기로는 SVG 자체가 큰 용량의 이미지를 가져오기 위한게 아니라 아이콘 등을 지원하기 위해서 만들어진 것으로 알고 있어요! 벡터값 기반으로 이미지를 렌더링하는거라 확장자를 PNG로 변경하거나 그래도 경고가 출력되면 최적화 라이브러리 같은 걸 사용해야 할 것 같습니다.. 😂😂

아하 현재 두번째 랜딩페이지가 픽스가 아니라서 그럼 전체 랜딩페이지가 나오면 PNG로 변경해서 올리겠습니당 감사해요!!

Copy link

구현 기능 확인하기: https://gachtaxi-6m2aw1j5t-cogis-projects.vercel.app

@woneeeee woneeeee merged commit 1f7cd56 into main Jan 21, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design css feat 신규피쳐
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat: 채팅 모달 UI 구현
2 participants