Skip to content

[WIP] Refactor: modify card list grid (#350) #351

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.

Sign up for GitHub

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

Open
Bangdayeon wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[WIP] Refactor: modify card list grid (#350) #351

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .husky/pre-commit
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

pnpm exec lint-staged || exit 1
pnpm lint-staged || exit 1
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"dev": "next dev --turbopack",
"build": "next build",
"start": "next start",
"lint": "exec eslint .",
"lint": "eslint .",
"prepare": "husky",
"storybook": "storybook dev -p 6006",
"build-storybook": "storybook build",
Expand Down
2 changes: 1 addition & 1 deletion src/components/basics/CardList/CardList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,5 +9,5 @@ interface CardListProps {
}

export default function CardList({ children }: CardListProps) {
return <div className="grid w-full max-w-251 grid-cols-4 gap-4">{children}</div>;
return <div className="grid grid-cols-2 gap-4 md:grid-cols-4">{children}</div>;
}
6 changes: 3 additions & 3 deletions src/components/basics/LinkCard/LinkCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const LinkCard = React.forwardRef<HTMLDivElement, LinkCardProps>(function LinkCa
return (
<div
ref={ref}
className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 relative flex h-58 w-47 cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 flexs relative aspect-47/58 w-full cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
Copy link

@coderabbitai coderabbitai bot Feb 4, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

flexs 오타로 인해 flex 레이아웃이 적용되지 않습니다.
flexs는 유효한 Tailwind 클래스가 아니어서 flex-col이 동작하지 않습니다. flex로 수정하세요.

🛠️ 수정 제안 
-      className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 flexs relative aspect-47/58 w-full cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
+      className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 flex relative aspect-47/58 w-full cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 flexs relative aspect-47/58 w-full cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
className="border-gray200 hover:bg-gray50 active:bg-blue50 focus:border-blue500 flex relative aspect-47/58 w-full cursor-pointer flex-col overflow-hidden rounded-2xl border transition-colors"
🤖 Prompt for AI Agents 
In `@src/components/basics/LinkCard/LinkCard.tsx` at line 30, In LinkCard.tsx
update the className on the root element: replace the erroneous Tailwind token
"flexs" with "flex" so the flex layout and "flex-col" take effect; locate the
className string in the LinkCard component and make that single-token change.

tabIndex={0}
onClick={onClick}
onKeyDown={handleKeyDown}
Expand All @@ -42,15 +42,15 @@ const LinkCard = React.forwardRef<HTMLDivElement, LinkCardProps>(function LinkCa
/>
)}

<div className="bg-gray900 relative h-22 w-full shrink-0">
<div className="bg-gray900 relative aspect-94/47 w-full max-w-94 shrink-0">
<Image
src={imageUrl ? imageUrl : '/images/default_linkcard_image.png'}
alt={title}
fill
className="border-gray200 border-b object-cover"
/>
</div>
<div className="flex flex-1 flex-col justify-between p-3">
<div className="flex aspect-94/69 w-full flex-1 flex-col justify-between p-3">
Comment on lines +45 to +53
Copy link

@coderabbitai coderabbitai bot Feb 4, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Check Tailwind version
echo "=== Tailwind version ==="
rg -A 2 '"tailwindcss"' --glob 'package.json'

echo ""
echo "=== Tailwind config files ==="
find . -maxdepth 2 -type f -name 'tailwind.config.*' -o -name 'tailwind.config.js' -o -name 'tailwind.config.ts'

echo ""
echo "=== Checking tailwind.config content ==="
if [ -f "tailwind.config.js" ]; then
  cat -n tailwind.config.js
elif [ -f "tailwind.config.ts" ]; then
  head -100 -n tailwind.config.ts
fi

echo ""
echo "=== Searching for aspect and maxWidth definitions ==="
rg -n 'aspect|aspectRatio|maxWidth|max-w' --glob 'tailwind.config.*'

echo ""
echo "=== Searching for custom utility definitions ==="
rg -n 'aspect-94|max-w-94' --glob '*.css' --glob '*.tsx' --glob '*.jsx'

Repository: Team-SoFa/linkiving

Length of output: 807

🏁 Script executed:

#!/bin/bash
echo "=== CSS files in project ==="
find . -type f -name '*.css' | head -20

echo ""
echo "=== Checking global CSS for theme definitions ==="
if [ -f "src/index.css" ]; then
  cat -n src/index.css
elif [ -f "src/globals.css" ]; then
  cat -n src/globals.css
elif [ -f "src/app.css" ]; then
  cat -n src/app.css
fi

echo ""
echo "=== Searching for `@theme` or `@utility` in CSS ==="
rg -n '@theme|@utility|aspect-94|max-w-94' --type css

echo ""
echo "=== Directory structure ==="
ls -la src/

echo ""
echo "=== Check if aspect and max-w are in any config files ==="
rg -n 'aspectRatio|aspect-' --type css --type ts --type js -A 2

Repository: Team-SoFa/linkiving

Length of output: 4103

🏁 Script executed:

#!/bin/bash
echo "=== src/styles/globals.css content ==="
cat -n src/styles/globals.css

echo ""
echo "=== src/styles/custom/colors.css content ==="
cat -n src/styles/custom/colors.css

echo ""
echo "=== src/styles/custom/colorTokens.css content ==="
cat -n src/styles/custom/colorTokens.css

echo ""
echo "=== src/styles/custom/typoTokens.css content ==="
cat -n src/styles/custom/typoTokens.css

Repository: Team-SoFa/linkiving

Length of output: 13407

🏁 Script executed:

#!/bin/bash
echo "=== Search for all `@theme` blocks in project ==="
rg -n '@theme' src/

echo ""
echo "=== Search for aspect or maxWidth in entire src directory ==="
rg -n 'aspect-|max-w-' src/ --type css --type ts --type tsx | grep -E '@theme|aspectRatio|maxWidth' || echo "No aspect/maxWidth theme definitions found"

echo ""
echo "=== Check if utilities are actually being used ==="
rg -n 'aspect-94|max-w-94|aspect-47' src/ | wc -l

echo ""
echo "=== Verify Tailwind v4 standard utilities ==="
echo "Checking Tailwind documentation for standard aspect-ratio and max-width utilities..."
echo "Standard Tailwind v4 would use predefined values or arbitrary values like:"
echo "  - aspect-video, aspect-square, etc. (not aspect-94/47)"
echo "  - max-w-sm, max-w-md, etc. or max-w-[94px] (not max-w-94)"

Repository: Team-SoFa/linkiving

Length of output: 714

aspect-94/47, aspect-94/69, aspect-47/58, max-w-94 유틸리티가 정의되지 않았습니다.

Tailwind v4.1.17에서 이 유틸리티들을 사용하려면 반드시 @theme 블록에서 정의하거나, 임의 값 문법을 사용해야 합니다. 현재 src/styles/globals.css와 src/styles/custom/colors.css의 @theme 블록에는 색상과 폰트만 정의되어 있으며, aspect 비율이나 max-width 설정이 없습니다. aspect-[94/47], max-w-[94px] 같은 임의 값 문법으로 수정하세요.

🤖 Prompt for AI Agents 
In `@src/components/basics/LinkCard/LinkCard.tsx` around lines 45 - 53, The
Tailwind utilities used in LinkCard.tsx (aspect-94/47, aspect-94/69,
aspect-47/58, max-w-94) are not defined in the theme; update the className
strings in the LinkCard component to use Tailwind arbitrary-value syntax (e.g.,
aspect-[94/47], aspect-[94/69], aspect-[47/58], max-w-[94px]) so the
aspect-ratio and max-width resolve correctly, keeping the same class ordering
and other classes (e.g., replace in the divs that currently use aspect-94/47,
aspect-94/69 and max-w-94).

<div className="flex flex-col gap-1">
<span className="truncate text-sm font-semibold">{title}</span>
<div className="flex items-center gap-1">
Expand Down