새로운 UI로 변경 by Dobbymin · Pull Request #7 · Dobbymin/Dobbymin.github.io

Dobbymin · 2025-10-25T10:24:50Z

📝 상세 내용

반응형 탭 컴포넌트 구현 및 레이아웃 개선

이번 PR에서는 탭 컴포넌트를 반응형으로 개선하고, PostCard 그리드 레이아웃을 정상화했습니다.

주요 변경사항

탭 컴포넌트 반응형 구현
- 모바일 환경을 고려한 스크롤 가능한 탭 레이아웃 적용
- 화면 크기에 따른 반응형 패딩 설정 (px-3 sm:px-5)
- 탭 항목의 최소 너비 지정 (min-w-[120px])
- 긴 텍스트 처리를 위한 truncate 클래스 추가
- 스냅 스크롤 기능 추가 (snap-x, snap-start)
PostCard 그리드 레이아웃 수정
- 그리드 컬럼 설정을 명시적으로 변경: lg:grid-cols-[270px_270px_270px]
- 반응형 패딩 조정: px-4 md:px-8 lg:px-0
- 불필요한 래퍼 div 제거로 레이아웃 정상화
ESLint 설정 개선
- @typescript-eslint/no-unused-vars 규칙을 error에서 warn으로 변경
- 개발 중 미사용 변수에 대한 유연한 처리 가능

기술 스택

Next.js (App Router)
TypeScript
Tailwind CSS
ESLint

#️⃣ 이슈 번호

[UI 수정] 기존 UI 제거 및 새로운 UI 적용 #5

⏰ 현재 버그

X

📷 스크린샷(선택)

변경 전

PostCard가 비정상적인 크기로 표시
탭이 반응형으로 동작하지 않음

변경 후

PostCard가 270px 고정 너비로 3열 그리드 정상 표시
모바일/태블릿/데스크톱에서 반응형 탭 동작
스냅 스크롤로 향상된 모바일 UX

gemini-code-assist · 2025-10-25T10:29:07Z

Summary of Changes

Hello @Dobbymin, 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은 사용자 인터페이스와 경험을 대폭 개선하는 데 중점을 둡니다. 반응형 탭 컴포넌트를 도입하고 PostCard 그리드 레이아웃을 재정의하여 다양한 화면 크기에서 일관되고 최적화된 보기를 제공합니다. 또한, 개발자 경험을 향상시키기 위해 ESLint 규칙을 조정하고, 공유 UI 컴포넌트의 구조를 재편하여 코드의 유지보수성과 확장성을 높였습니다. 전반적으로 시각적 일관성과 반응성을 개선하여 이전의 레이아웃 문제를 해결하는 것을 목표로 합니다.

Highlights

반응형 탭 컴포넌트 구현: 모바일 환경을 고려한 스크롤 가능한 탭 레이아웃이 적용되었으며, 화면 크기에 따른 반응형 패딩, 최소 너비 지정, 긴 텍스트 처리를 위한 truncate 클래스, 그리고 스냅 스크롤 기능이 추가되었습니다.
PostCard 그리드 레이아웃 개선: PostCard 그리드 레이아웃이 lg:grid-cols-[270px_270px_270px]와 같이 명시적인 컬럼 설정으로 수정되었고, 반응형 패딩 조정 및 불필요한 래퍼 div 제거를 통해 레이아웃이 정상화되었습니다.
ESLint 설정 유연성 강화: @typescript-eslint/no-unused-vars 규칙이 error에서 warn으로 변경되어 개발 중 사용되지 않는 변수에 대한 처리가 더욱 유연해졌습니다.
UI 컴포넌트 구조 재편: 기존 Header, Footer, PostCard 컴포넌트가 card 및 layout 하위 디렉토리로 재구성되었으며, 새로운 Tabs 컴포넌트가 tabs 디렉토리에 추가되어 컴포넌트 관리가 개선되었습니다.
전역 스타일 및 Grid 컴포넌트 확장: 새로운 CSS 변수들이 추가되고 body 태그에 배경색이 적용되었으며, Grid 컴포넌트가 cols, maxWidth, justifyContent와 같은 새로운 prop을 통해 더욱 유연하게 그리드 레이아웃을 제어할 수 있도록 개선되었습니다.

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

이번 PR은 새로운 UI를 도입하면서 반응형 탭 컴포넌트 구현, PostCard 그리드 레이아웃 개선 등 많은 부분을 변경했네요. 전반적으로 코드 구조가 개선되었지만, 몇 가지 웹 접근성, 버그 가능성, 유지보수성 측면에서 개선할 점을 발견했습니다. 특히 Tabs 컴포넌트는 PR 설명에 명시된 기능들이 일부 누락된 것으로 보이며, 웹 접근성을 위해 시맨틱 태그를 사용하는 것이 중요합니다. 또한, 일부 컴포넌트에서 하드코딩된 값이나 미사용 코드가 있어 이를 개선하는 방향으로 피드백을 남겼습니다.

gemini-code-assist · 2025-10-25T10:31:41Z

src/app/globals.css

+  --line-height-footer: calc(
+    var(--footer-height) - 2 * var(--footer-padding-x)
+  );


--line-height-footer를 계산할 때 정의되지 않은 --footer-padding-x 변수를 사용하고 있어 CSS가 올바르게 적용되지 않을 수 있습니다. 이 변수를 정의하거나, 계산에서 제거하는 것을 고려해 보세요. 만약 수평 패딩이 없다면, calc(var(--footer-height))로도 충분할 수 있습니다.

gemini-code-assist · 2025-10-25T10:31:41Z

src/shared/components/features/layout/Header.tsx

+        <Link href={routerPath.about}>
+          <p className='font-lemon text-xl'>About</p>
+        </Link>
+        <Sun className='cursor-pointer text-blog-pink' />


Sun 아이콘에 cursor-pointer 클래스가 적용되어 있어 사용자가 클릭할 수 있는 요소로 보이지만, 실제로는 onClick 핸들러가 연결되어 있지 않습니다. 이는 사용자에게 혼란을 줄 수 있으며, 키보드 사용자 등에게는 접근성이 떨어집니다. 상호작용을 의도하셨다면 button 태그로 감싸고 onClick 핸들러를 추가하는 것이 웹 접근성 모범 사례입니다.

gemini-code-assist · 2025-10-25T10:31:41Z

src/shared/components/features/tabs/Tabs.tsx

+    <div className='flex h-13 justify-start overflow-x-auto py-2 font-fira-code'>
+      {tabs.map((tab, idx) => (
+        <div
+          key={tab.name}
+          className={`flex cursor-pointer items-center justify-center gap-2 border-r px-5 text-sm font-semibold transition-colors last:border-r-0 ${
+            selected === idx
+              ? 'bg-blog-gray-100 text-blog-black'
+              : 'bg-blog-gray-200 text-blog-gray-600 hover:font-bold'
+          } ${idx === 0 ? '' : 'w-full'} `}
+          onClick={() => setSelected(idx)}
+        >
+          <p>{tab.name}</p>
+          <p className='text-blog-green'>({tab.count})</p>
+        </div>
+      ))}
+    </div>


현재 Tabs 컴포넌트 구현이 PR 설명과 다르고, 웹 접근성 및 스타일링에 개선이 필요해 보입니다.

웹 접근성: 클릭 가능한 div 대신 시맨틱한 <button> 태그와 role='tab' 속성을 사용해야 키보드 탐색과 스크린 리더 호환성을 보장할 수 있습니다.

구현 불일치: PR 설명에 언급된 반응형 패딩(px-3 sm:px-5), 최소 너비(min-w-[120px]), 스냅 스크롤(snap-x) 등의 기능이 누락되었습니다.

스타일링 문제: h-13은 유효한 Tailwind 클래스가 아니며, w-full 로직은 스크롤 가능한 탭의 의도와 맞지 않아 보입니다.

아래와 같이 개선하는 것을 제안합니다.

<div className='snap-x snap-mandatory flex h-[52px] w-full justify-start overflow-x-auto py-2 font-fira-code'> {tabs.map((tab, idx) => ( <button key={tab.name} role="tab" aria-selected={selected === idx} className={`snap-start flex min-w-[120px] shrink-0 cursor-pointer items-center justify-center gap-2 border-r px-3 text-sm font-semibold transition-colors last:border-r-0 sm:px-5 ${ selected === idx ? 'bg-blog-gray-100 text-blog-black' : 'bg-blog-gray-200 text-blog-gray-600 hover:font-bold' }`} onClick={() => setSelected(idx)} > <p className="truncate">{tab.name}</p> <p className='text-blog-green'>({tab.count})</p> </button> ))} </div>

gemini-code-assist · 2025-10-25T10:31:41Z

src/app/page.tsx

+  const [search, setSearch] = useState('');
+
+  const onChangeSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setSearch(e.target.value);
+  };


search 상태와 onChangeSearch 핸들러가 선언되었지만 컴포넌트 내에서 사용되지 않고 있습니다. 현재 사용하지 않는 코드라면 삭제하여 코드베이스를 깔끔하게 유지하는 것이 좋습니다.

gemini-code-assist · 2025-10-25T10:31:41Z

src/app/page.tsx

+        maxWidth='7xl'
+      >
+        {posts.map((_, index) => (
+          <PostCard key={index} />


map 함수에서 배열의 index를 key로 사용하고 있습니다. 현재는 임시 데이터라 문제가 되지 않지만, 추후 실제 데이터로 변경될 때 리스트 아이템이 추가, 삭제, 또는 재정렬될 경우 성능 문제나 상태 관리의 버그를 유발할 수 있습니다. 각 포스트의 고유 ID(예: post.id)를 key로 사용하는 것을 권장합니다.

gemini-code-assist · 2025-10-25T10:31:41Z

src/shared/components/features/card/PostCard.tsx

+
+export const PostCard = () => {
+  return (
+    <div className='flex w-full flex-col overflow-hidden bg-white shadow-lg transform-content'>


transform-content는 유효한 Tailwind CSS 클래스가 아닙니다. 아마 transform을 의도하신 것 같습니다. transform 클래스는 scale, rotate 등 다른 변환 유틸리티와 함께 사용될 때 활성화됩니다. 의도하신 기능이 없다면 이 클래스를 제거하는 것이 좋습니다.

Suggested change

<div className='flex w-full flex-col overflow-hidden bg-white shadow-lg transform-content'>

<div className='flex w-full flex-col overflow-hidden bg-white shadow-lg'>

gemini-code-assist · 2025-10-25T10:31:42Z

src/shared/components/features/card/PostCard.tsx

+          <div className='text-sm text-blog-blue'>
+            게시물 1에 대한 내용입니다.게시물 1에 대한 내용입니다.게시물 1에
+            대한 내용입니다.게시물 1에 대한 내용입니다.
+          </div>


게시물 내용이 길어지면 카드의 높이가 달라져 그리드 레이아웃이 깨질 수 있습니다. 일관된 UI를 위해 truncate 클래스를 사용해 한 줄로 표시하거나, @tailwindcss/line-clamp 플러그인을 사용하여 여러 줄 말줄임 처리를 하는 것을 고려해 보세요.

Suggested change

<div className='text-sm text-blog-blue'>

게시물 1에 대한 내용입니다.게시물 1에 대한 내용입니다.게시물 1에

대한 내용입니다.게시물 1에 대한 내용입니다.

</div>

<div className='truncate text-sm text-blog-blue'>

게시물 1에 대한 내용입니다.게시물 1에 대한 내용입니다.게시물 1에

대한 내용입니다.게시물 1에 대한 내용입니다.

</div>

gemini-code-assist · 2025-10-25T10:31:42Z

src/shared/components/features/layout/Footer.tsx

+          Copyright &copy; 2025 <b>Dobbymin</b> All rights reserved.
+        </p>
+        <div className='flex items-center justify-center gap-1 font-fira-code text-blog-gray-600'>
+          <span>gmin0701@knu.ac.kr</span>
+          <span className='font-bold'>.</span>
+          <span>+82-10-3095-7259</span>
+          <span className='font-bold'>.</span>
+          <Link
+            className='hover:font-bold hover:underline'
+            href='https://github.com/Dobbymin'
+          >
+            GitHub
+          </Link>
+          <span className='font-bold'>.</span>
+          <Link
+            className='hover:font-bold hover:underline'
+            href='https://www.linkedin.com/in/dobbymin/'
+          >
+            LinkedIn
+          </Link>
+        </div>


푸터에 개인 정보(이메일, 전화번호, 링크)가 하드코딩되어 있습니다. 이 정보들을 별도의 상수 파일로 분리하여 관리하면 재사용성과 유지보수성을 높일 수 있습니다.

또한, <b> 태그 대신 Tailwind CSS의 font-bold 클래스를 사용하는 것이 일관성 측면에서 더 좋습니다.

예시:

// constants/author.ts export const authorInfo = { name: 'Dobbymin', email: 'gmin0701@knu.ac.kr', // ... }; // Footer.tsx <p>... Copyright © 2025 <span className='font-bold'>{authorInfo.name}</span> All rights reserved. </p>

gemini-code-assist · 2025-10-25T10:31:42Z

src/shared/components/features/layout/Header.tsx

+        <Input
+          className='border-none bg-transparent text-sm text-blog-gray-500 shadow-none outline-none placeholder:text-blog-gray-400 focus:border-none focus:ring-0 focus:outline-none'
+          type='text'
+        />


검색 Input 컴포넌트에 placeholder가 없어 사용자에게 어떤 입력이 필요한지 알려주기 어렵습니다. placeholder='검색어를 입력하세요...'와 같이 안내 문구를 추가하면 사용자 경험을 개선할 수 있습니다.

Suggested change

<Input

className='border-none bg-transparent text-sm text-blog-gray-500 shadow-none outline-none placeholder:text-blog-gray-400 focus:border-none focus:ring-0 focus:outline-none'

type='text'

/>

<Input

className='border-none bg-transparent text-sm text-blog-gray-500 shadow-none outline-none placeholder:text-blog-gray-400 focus:border-none focus:ring-0 focus:outline-none'

placeholder='검색어를 입력하세요...'

type='text'

/>

Dobbymin added 12 commits July 15, 2025 01:51

feat(header): color 변경 및 검색 창 추가

a537e0d

feat(footer): 개인 연락처 및 정보 추가

f126734

feat: 시멘틱 color 추가

ac92907

feat(header): 헤더 컴포넌트 추가

fa90241

feat(post-card): 게시물 카드 컴포넌트 구현

3a8e117

fix(grid): grid widget 의 정의된 type 수정

a084e16

feat(tabs): 카테고리 탭 임시 구현

1ec83da

feat: css 타입 오류 해결을 위한 글로벌 타입 선언 파일 추가

a89daa2

chore: 사용하지 않는 파일 제거 및 export 파일 추가

e0096b4

fix(grid): 메인 페이지의 grid 크기 수정

fff2dd1

fix(eslint): '@typescript-eslint/no-unused-vars' 규칙을 경고로 설정

bf8c884

refactor(layout): BlogLayout 구조 개선 및 스타일 수정

7fb97bf

Dobbymin self-assigned this Oct 25, 2025

Dobbymin added ✨ Feature 새로운 기능 추가 및 구현하는 경우 🎨 Design UI / UX 디자인 관련 작업을 진행하는 경우 labels Oct 25, 2025

Dobbymin linked an issue Oct 25, 2025 that may be closed by this pull request

[UI 수정] 기존 UI 제거 및 새로운 UI 적용 #5

Closed

Dobbymin merged commit 3347aae into main Oct 25, 2025
1 check passed

Dobbymin deleted the refactor#05-new-ui branch October 25, 2025 10:27

gemini-code-assist bot reviewed Oct 25, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

새로운 UI로 변경#7

새로운 UI로 변경#7
Dobbymin merged 12 commits intomainfrom
refactor#05-new-ui

Dobbymin commented Oct 25, 2025

Uh oh!

Uh oh!

gemini-code-assist bot commented Oct 25, 2025

Uh oh!

gemini-code-assist bot left a comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

gemini-code-assist bot Oct 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

	<div className='flex w-full flex-col overflow-hidden bg-white shadow-lg transform-content'>
	<div className='flex w-full flex-col overflow-hidden bg-white shadow-lg'>

Conversation

Dobbymin commented Oct 25, 2025

📝 상세 내용

반응형 탭 컴포넌트 구현 및 레이아웃 개선

주요 변경사항

기술 스택

#️⃣ 이슈 번호

⏰ 현재 버그

📷 스크린샷(선택)

변경 전

변경 후

Uh oh!

Uh oh!

gemini-code-assist bot commented Oct 25, 2025

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!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

gemini-code-assist bot Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant