Feat 33 : 소식 UI

[bini0918]

💡 To Reviewers

• 해당 브랜치에서 새롭게 설치한 라이브러리가 있다면 함께 명시해 주세요.
• 리뷰어가 코드를 이해하는 데 도움이 되는 정보나 참고사항이 있다면 자유롭게 작성해 주세요.

🔥 작업 내용 (가능한 구체적으로 작성해 주세요)

• 소식 페이지 ui
• 책이야기 대댓글 ui

🤔 추후 작업 예정

• 홈화면 반응형
• 검색

📸 작업 결과 (스크린샷)

• 작업 결과를 보여주는 스크린샷을 첨부해 주세요.

🔗 관련 이슈

• 브랜치 생성 시 연결했던 이슈 번호를 작성해 주세요.
• 예: closed [feat] 소식 UI 구현 #33

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @bini0918, 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은 애플리케이션의 소식 및 책이야기 섹션에 대한 사용자 인터페이스를 대폭 개선합니다. 소식과 책이야기 콘텐츠를 위한 상세 페이지와 새로운 글 작성 기능을 도입하여 사용자 참여를 증진시키고, 모바일 환경에 최적화된 하단 네비게이션 바를 추가하여 전반적인 탐색 경험을 향상시킵니다. 또한, 책이야기 페이지에 댓글 기능을 추가하여 커뮤니티 상호작용을 강화했습니다.

Highlights

• 새로운 UI/UX 기능 구현: 소식 및 책이야기 섹션에 대한 새로운 UI/UX 기능이 구현되었습니다. 여기에는 소식 상세 페이지, 책이야기 상세 페이지, 새로운 책이야기 작성 페이지, 그리고 책이야기 댓글 시스템이 포함됩니다.
• 반응형 디자인 개선: 모바일, 태블릿, 데스크탑 환경에 맞춰 다양한 컴포넌트(헤더, 네비게이션, 카드 등)의 반응형 디자인이 개선되었습니다. 특히 모바일 사용자를 위한 하단 네비게이션 바가 추가되었습니다.
• 댓글 시스템 도입: 책이야기 상세 페이지에 댓글 및 대댓글 기능을 포함한 포괄적인 댓글 시스템이 추가되었습니다. 댓글 수정, 삭제, 신고 기능도 포함되어 있습니다.
• 새로운 SVG 에셋 추가: 새로운 UI 요소를 지원하기 위해 다양한 SVG 에셋(화살표, 책 샘플, 버튼, 하단 네비게이션 아이콘 등)이 추가되었습니다.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

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를 구현하고, 책 이야기 상세 페이지에 댓글 및 대댓글 기능을 추가하는 등 많은 기능이 포함되어 있습니다. 전반적으로 컴포넌트 구조가 잘 잡혀있고 반응형 디자인이 잘 적용되었습니다. 몇 가지 개선점을 제안합니다. 페이지 컴포넌트의 params 타입이 잘못 지정된 부분을 수정하고, 성능에 영향을 줄 수 있는 큰 SVG 파일의 사용 방식을 개선하는 것이 좋습니다. 또한, 개발 중에 사용된 하드코딩된 값들을 실제 데이터로 교체하고, 일부 혼동을 줄 수 있는 아이콘을 변경하며, CSS 클래스명 오류를 수정하여 코드의 완성도를 높일 수 있습니다.

[gemini-code-assist]

페이지 컴포넌트의 params 타입 정의가 잘못되었습니다. Promise로 감싸지 않은 객체 타입을 직접 사용해야 합니다. Next.js의 async 페이지 컴포넌트는 이미 resolve된 params 객체를 받습니다.

Suggested change

	type Props = {
	params: Promise<{ id: string }>;
	};
	type Props = {
	params: { id: string };
	};

[gemini-code-assist]

페이지 컴포넌트의 params 타입 정의가 잘못되었습니다. async 페이지 컴포넌트는 Promise가 아닌 resolve된 params 객체를 받습니다. 올바른 타입으로 수정하여 코드의 정확성을 높이는 것이 좋습니다.

Suggested change

	type Props = {
	params: Promise<{ id: string }>;
	};
	type Props = {
	params: { id: string };
	};

[gemini-code-assist]

Tailwind CSS 클래스명에 오타가 있습니다. Subhead_2와 Body_1_3은 globals.css에 정의된 subhead_2, body_1_3과 대소문자가 달라 스타일이 적용되지 않습니다. 클래스명을 소문자로 수정해야 합니다.

Suggested change

	<p className="Subhead_2 pb-1 text-Gray-7">{title}</p>
	<p className="Body_1_3 h-16 pt-1 text-Gray-5 line-clamp-3 overflow-hidden">
	{content}
	</p>
	<p className="subhead_2 pb-1 text-Gray-7">{title}</p>
	<p className="body_1_3 h-16 pt-1 text-Gray-5 line-clamp-3 overflow-hidden">
	{content}
	</p>

[gemini-code-assist]

SVG 파일 내에 Base64로 인코딩된 큰 이미지 데이터가 포함되어 있습니다. 이 방식은 파일 크기를 크게 증가시켜 페이지 로딩 성능에 부정적인 영향을 줄 수 있습니다. 특히 샘플 이미지가 아닌 실제 프로덕션 이미지를 사용할 때는 next/image 컴포넌트를 통해 외부 이미지 URL을 사용하거나, 이미지를 최적화하여 별도의 파일로 관리하는 것을 권장합니다.

[gemini-code-assist]

SVG 파일에 Base64로 인코딩된 큰 이미지 데이터가 포함되어 있어 파일 크기가 매우 큽니다. 이는 페이지 로딩 성능을 저하시킬 수 있습니다. 이미지는 별도의 파일(e.g., .png, .webp)로 분리하고 next/image를 통해 로드하는 방식을 사용하는 것이 성능에 더 유리합니다.

[gemini-code-assist]

clamp() 함수를 인라인 스타일로 사용하고 있습니다. 재사용성과 유지보수성을 높이기 위해 이 스타일을 globals.css나 Tailwind 설정 파일에 커스텀 유틸리티 클래스로 추가하여 사용하는 것을 고려해 보세요.

[gemini-code-assist]

isLoggedIn 상태가 상수로 하드코딩되어 있습니다. 개발 중에는 유용할 수 있지만, 실제 프로덕션 코드에서는 실제 인증 상태를 확인하는 동적인 로직으로 대체해야 합니다.

// const isLoggedIn = false; // true: 로그인, false: 로그인X
// import { useAuth } from '@/hooks/useAuth'; // 예시
// const { isLoggedIn } = useAuth(); // 예시: 실제 인증 훅 사용

[gemini-code-assist]

내가 작성한 댓글의 메뉴에서 '수정하기'와 '삭제하기' 기능에 각각 report.svg와 share.svg 아이콘이 사용되고 있어 사용자가 혼동할 수 있습니다. 기능에 맞는 명확한 아이콘(예: 연필, 휴지통 아이콘)으로 변경하여 사용자 경험을 개선하는 것이 좋습니다.

[gemini-code-assist]

새로운 댓글을 추가할 때 작성자 이름이 "유빈"으로 하드코딩되어 있습니다. 이 부분은 실제 로그인한 사용자의 정보로 동적으로 설정되어야 합니다.

[gemini-code-assist]

새 답글을 추가할 때 작성자 이름이 "유빈"으로 하드코딩되어 있습니다. 실제 로그인한 사용자의 정보로 대체해야 합니다.