[DEV] 공유모달 UI 제작 by eun0903 · Pull Request #71 · drddyn/Mine-FE

eun0903 · 2026-03-08T09:26:47Z

🔗 관련 이슈

closed #69

✨ 요약

공유모달 제작
링크 복사 시 나타는 토스트를 제작

📝 작업 내용

gemini-code-assist · 2026-03-08T09:27:08Z

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

이 PR은 사용자 상호작용 및 콘텐츠 발견 가능성을 향상시키는 데 중점을 둡니다. 쉬운 콘텐츠 공유를 위한 새로운 공유 모달을 도입하고, 매거진 피드에 대한 원활한 탐색 경험을 제공하기 위해 탐색 페이지에 무한 스크롤 기능을 구현합니다. 또한, 설정 모달은 새로운 관심사 설정 섹션과 기존 프로필 및 화면 설정에 대한 개선된 UI로 세련되게 다듬어졌습니다.

Highlights

공유 모달 구현: 사용자가 링크를 복사하고 다양한 소셜 미디어 플랫폼(트위터, 카카오톡, 인스타그램)을 통해 콘텐츠를 공유할 수 있는 새로운 공유 모달 컴포넌트(ShareModal.tsx)가 추가되었습니다.
링크 복사 토스트 메시지: 공유 모달에서 링크가 클립보드에 성공적으로 복사되면 토스트 메시지가 표시됩니다.
탐색 페이지 무한 스크롤: 탐색 페이지(ExplorePage)가 매거진 피드에 대한 무한 스크롤을 지원하여, 사용자가 아래로 스크롤할 때 더 많은 콘텐츠를 가져옵니다.
설정 모달 개선: 설정 모달이 '관심사 설정' 탭을 포함하도록 업데이트되었으며, 프로필 및 화면 설정에 대한 시각적 개선사항(프로필 공개 토글 포함)이 적용되었습니다.
API 연동: 무한 스크롤 기능을 지원하기 위해 매거진 피드와 관련된 새로운 API 엔드포인트 및 타입이 도입되었습니다.

Changelog

Mine/src/api/magazine.ts
- 매거진 피드를 가져오기 위한 새로운 타입(FeedDto, ResponseFeed)과 API 함수(getMagazineFeed)를 추가했습니다.
Mine/src/components/hamburgerModal/SectionHamburgerModal.tsx
- 새로운 ShareModal을 통합하도록 수정되었으며, 사용되지 않는 props가 제거되었습니다.
Mine/src/components/hamburgerModal/ShareModal.tsx
- 링크 복사 기능과 소셜 미디어 공유 옵션(링크 복사 시 토스트 메시지 포함)을 갖춘 새로운 공유 모달 컴포넌트를 추가했습니다.
Mine/src/components/settings/InterestSettings.tsx
- 사용자가 자신의 관심사를 선택하고 관리할 수 있는 새로운 컴포넌트를 추가했습니다.
Mine/src/components/settings/ProfileSettings.tsx
- 프로필 설정의 UI 스타일을 업데이트하고 프로필 공개 여부를 위한 상태를 추가했습니다.
Mine/src/components/settings/ScreenSettings.tsx
- 화면 설정의 UI 스타일을 리팩토링하고 업데이트했습니다.
Mine/src/components/settings/SettingsModal.tsx
- 새로운 '관심사 설정' 탭을 추가하고, 로그아웃 및 저장 작업에 대한 새로운 토스트 메시지를 구현했으며, UI 색상을 업데이트했습니다.
Mine/src/hooks/useGetMagazineFeed.ts
- 매거진 피드의 무한 스크롤 기능을 위한 새로운 React Query 훅을 추가했습니다.
Mine/src/icon/email.svg
- 이메일 아이콘 SVG 파일을 추가했습니다.
Mine/src/icon/instagram.svg
- 인스타그램 아이콘 SVG 파일을 추가했습니다.
Mine/src/icon/kakao.svg
- 카카오톡 아이콘 SVG 파일을 추가했습니다.
Mine/src/icon/link.svg
- 링크 아이콘 SVG 파일을 추가했습니다.
Mine/src/icon/twitter.svg
- 트위터 아이콘 SVG 파일을 추가했습니다.
Mine/src/pages/magazine/ExplorePage.tsx
- 새로운 훅과 IntersectionObserver를 사용하여 매거진 피드에 대한 무한 스크롤을 구현했습니다.
Mine/src/pages/magazine/components/ExploreGrid.tsx
- 무한 스크롤 훅에서 받은 실제 매거진 데이터를 표시하도록 업데이트되었습니다.
Mine/src/pages/magazine/components/ExploreItem.tsx
- 동적인 매거진 제목과 커버 이미지를 표시하고 클릭 시 매거진 상세 페이지로 이동하도록 수정되었습니다.
Mine/src/types/magazine.ts
- 매거진 피드 데이터 및 요청을 지원하기 위한 새로운 타입 정의를 추가했습니다.

Activity

제공된 컨텍스트에는 PR 활동(댓글, 리뷰, 진행 상황 등)에 대한 정보가 없습니다.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

gemini-code-assist

Code Review

This pull request introduces an 'Explore' page with infinite scrolling for magazine feeds, implemented with new API endpoints and types. It adds a 'Share Modal' to SectionHamburgerModal for link copying and social media sharing, and integrates a new 'Interest Settings' component into the SettingsModal. Significant styling updates were applied across ProfileSettings, ScreenSettings, and SettingsModal to enhance dark theme compatibility and UI consistency, including changes to button appearances, modal backgrounds, and text colors. Review feedback suggests improving error handling for clipboard operations, ensuring API endpoint consistency, simplifying modal onClose handlers, refactoring hardcoded CSS values in the share toast, visually differentiating action buttons in confirmation modals, and considering moving the isValidUrl utility function to a shared location for reusability.

Mine/src/components/hamburgerModal/ShareModal.tsx

Mine/src/api/magazine.ts

Mine/src/components/hamburgerModal/SectionHamburgerModal.tsx

Mine/src/components/hamburgerModal/ShareModal.tsx

Mine/src/components/settings/ScreenSettings.tsx

Mine/src/pages/magazine/components/ExploreItem.tsx

…nto dev/share-modal

drddyn

고생하셨습니다 아래 코멘트 관련 수정만 해주세요

drddyn · 2026-03-09T05:08:54Z

Mine/src/components/hamburgerModal/ShareModal.tsx

+                </div>
+            </div>
+
+            {showToast && (


스크린세팅에 있는 아래 토스트랑 통합해서 공용 컴포넌트로 만들고 불러와서 쓰는 형식으로 바꾸면 좋을 것 같습니다.

…nto dev/share-modal

vercel · 2026-03-13T00:05:11Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
mine	Ready	Preview, Comment	Mar 14, 2026 7:32am

eun0903 self-assigned this Mar 8, 2026

gemini-code-assist bot reviewed Mar 8, 2026

View reviewed changes

drddyn added 2 commits March 8, 2026 20:34

Merge branch 'develop' into dev/share-modal

76c5dd7

Merge branch 'dev/share-modal' of https://github.com/drddyn/Mine-FE i…

1ecb113

…nto dev/share-modal

drddyn reviewed Mar 9, 2026

View reviewed changes

eun0903 and others added 3 commits March 9, 2026 15:31

fix: 공용 Toast, ConfirmModal 컴포넌트 분리

b8ded4b

Merge branch 'dev/share-modal' of https://github.com/drddyn/Mine-FE i…

6b6d9b8

…nto dev/share-modal

Merge branch 'develop' into dev/share-modal

847ff3f

vercel bot deployed to Preview March 13, 2026 00:05 View deployment

drddyn added 2 commits March 13, 2026 14:45

fix: 충돌 해결

512f3fe

feat: 비밀번호 수정 버튼 추가 및 스타일링변경

6a18d4e

vercel bot deployed to Preview March 13, 2026 06:27 View deployment

Merge branch 'develop' into dev/share-modal

71197fd

vercel bot deployed to Preview March 14, 2026 07:32 View deployment

drddyn merged commit 250bd95 into develop Mar 14, 2026
3 checks passed

drddyn deleted the dev/share-modal branch March 14, 2026 07:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DEV] 공유모달 UI 제작#71

[DEV] 공유모달 UI 제작#71
drddyn merged 8 commits intodevelopfrom
dev/share-modal

eun0903 commented Mar 8, 2026

Uh oh!

gemini-code-assist bot commented Mar 8, 2026

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

drddyn left a comment

Uh oh!

drddyn Mar 9, 2026

Uh oh!

vercel bot commented Mar 13, 2026 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

eun0903 commented Mar 8, 2026

🔗 관련 이슈

✨ 요약

📝 작업 내용

Uh oh!

gemini-code-assist bot commented Mar 8, 2026

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

drddyn left a comment

Choose a reason for hiding this comment

Uh oh!

drddyn Mar 9, 2026

Choose a reason for hiding this comment

Uh oh!

vercel bot commented Mar 13, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

vercel bot commented Mar 13, 2026 •

edited

Loading