[DEV] 새매거진 인풋 박스 UI 제작

[eun0903]

🔗 관련 이슈

closed #78

✨ 요약

새매거진 인풋 박스 UI를 제작했습니다.
요청한대대로 인풋박스 컴포넌트로 제작

📝 작업 내용

[vercel]

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

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

[gemini-code-assist]

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!

이 풀 리퀘스트는 새로운 매거진 생성 경험을 개선하고, 기존 매거진 상세 페이지의 UI/UX를 향상시키는 데 중점을 둡니다. 사용자가 매거진을 생성할 때 더 직관적인 입력 방식을 제공하며, 매거진 섹션들이 동적으로 다양한 그리드 레이아웃으로 표시되도록 하여 시각적인 매력을 더했습니다. 또한, 매거진 정보 표시 컴포넌트의 재사용성을 높이고, 사이드바의 매거진 목록 관리 기능을 개선하여 전반적인 사용자 인터페이스의 유연성과 일관성을 강화했습니다.

Highlights

• 새로운 매거진 입력 컴포넌트 추가: 사용자로부터 매거진 주제와 분위기를 입력받는 새로운 NewMagazineInput 컴포넌트가 추가되었습니다.
• 메인 페이지 UI 개선: 메인 페이지의 매거진 생성 UI가 LLMInputBox에서 새로 추가된 NewMagazineInput 컴포넌트로 교체되었으며, 배경 이미지와 로딩 오버레이 스타일이 개선되었습니다.
• 매거진 상세 페이지 리팩토링: 매거진 상세 페이지(MagazinePage)의 구조가 리팩토링되어 MagazineProvider와 MagazineInfo 컴포넌트를 활용하도록 변경되었고, 사용자 정보 표시 방식이 개선되었습니다.
• 사이드바 매거진 목록 기능 개선: 사이드바의 매거진 목록(SidebarOpen)에서 매거진 목록을 가져오는 size 파라미터가 5에서 100으로 증가하여 더 많은 매거진을 표시할 수 있게 되었고, 매거진 목록 렌더링 방식이 개선되었습니다.
• 동적 그리드 레이아웃 시스템 도입: 매거진 섹션 커버(SectionCover) 및 그리드 컨테이너(GridContainor)의 레이아웃 로직이 업데이트되어 다양한 개수의 섹션에 대한 유연하고 동적인 그리드 패턴을 지원합니다.
• MagazineInfo 컴포넌트 기능 확장: MagazineInfo 컴포넌트가 mode 및 onClick 프롭을 받아 매거진 제목 클릭 시 해당 매거진 페이지로 이동하는 기능을 추가하고, 스타일 및 정보 표시를 개선했습니다.

Changelog

• Mine/src/components/NewMagazineInput.tsx
  • 새로운 매거진 주제 및 분위기 입력 컴포넌트가 추가되었습니다.
• Mine/src/layout/sidebar/SidebarMagazine.tsx
  • 사이드바 매거진 항목의 호버 효과 및 햄버거 아이콘 가시성 관련 스타일이 수정되었습니다.
• Mine/src/layout/sidebar/SidebarOpen.tsx
  • 매거진 목록 조회 size가 5에서 100으로 변경되었습니다.
  • 매거진 목록 렌더링 로직이 재배치되었습니다.
• Mine/src/layout/sidebar/SidebarSectionList.tsx
  • 사이드바 섹션 목록 항목의 스타일이 업데이트되어 제목 표시 방식이 개선되었습니다.
• Mine/src/pages/magazine/MagazinePage.tsx
  • MagazineProvider와 MagazineInfo 컴포넌트를 사용하도록 리팩토링되었으며, ProfileBox 직접 사용이 제거되었습니다.
• Mine/src/pages/magazine/components/GridContainor.tsx
  • GRID_ITEM_LAYOUT_PRESETS 및 GRID_LAYOUT_PRESENT를 활용하여 그리드 레이아웃 로직이 업데이트되었습니다.
• Mine/src/pages/magazine/components/HeartCount.tsx
  • classname 프롭이 추가되었고, 하트 아이콘 및 텍스트 색상이 변경되었습니다.
• Mine/src/pages/magazine/components/MagazineInfo.tsx
  • magazineId, mode, onClick 프롭이 추가되었고, 스타일 및 로직이 업데이트되었습니다.
• Mine/src/pages/magazine/components/ProfileBox.tsx
  • mode 프롭에 따라 닉네임 텍스트 색상이 변경되도록 업데이트되었습니다.
• Mine/src/pages/magazine/components/SectionContent.tsx
  • useNavigate 훅이 추가되어 매거진 페이지로 이동하는 handleClick 함수가 정의되었습니다.
  • MagazineInfo 컴포넌트에 새로운 프롭들이 전달되었습니다.
• Mine/src/pages/magazine/components/SectionCover.tsx
  • 섹션 커버 이미지의 스타일이 max-w-70 max-h-100에서 w-full h-full로 변경되었습니다.
• Mine/src/pages/main/MainPage.tsx
  • LLMInputBox가 NewMagazineInput 컴포넌트로 교체되었습니다.
  • 배경 이미지 및 로딩 오버레이 스타일이 추가/수정되었습니다.
• Mine/src/style/gridpattern.ts
  • GRID_LAYOUT_PRESETS가 GRID_ITEM_LAYOUT_PRESETS와 GRID_LAYOUT_PRESENT로 분리 및 확장되어 더 복잡하고 유연한 그리드 패턴 정의를 지원합니다.

Activity

• 이 풀 리퀘스트는 최근에 생성되었으며, 아직 검토자 활동은 없습니다.

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.

Footnotes

1. 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

이번 PR은 새 매거진 생성 UI를 위한 NewMagazineInput 컴포넌트를 추가하고, 사이드바 및 매거진 페이지의 UI를 개선하는 내용을 담고 있습니다. 전반적으로 코드 구조가 개선되었고 UI가 일관성 있게 변경되었습니다. 몇 가지 개선점을 제안합니다. NewMagazineInput 컴포넌트에서 style 속성으로 처리된 부분들을 Tailwind CSS 클래스로 통합하여 코드 가독성과 유지보수성을 높이는 것을 권장합니다. 마지막으로, 시맨틱 HTML을 준수하기 위한 작은 수정사항을 제안했습니다.

[gemini-code-assist]

<label> 태그는 폼 입력 요소와 연결될 때 사용됩니다. 여기서는 텍스트를 표시하는 목적이므로 시맨틱 HTML을 위해 <label> 대신 <span>이나 <div> 태그를 사용하는 것이 더 적절합니다.

Suggested change

	<label className="block w-full hover:text-gray-100 overflow-hidden text-ellipsis whitespace-nowrap text-gray-100-op70 font-medium14">
	{title}
	</label>
	<span className="block w-full hover:text-gray-100 overflow-hidden text-ellipsis whitespace-nowrap text-gray-100-op70 font-medium14">
	{title}
	</span>

[eun0903]

이건 제가 했던 부분이 아닌데, 수정해야하나 말아야하나 모르겠네요