From 7b260e5a3c569b2c32c56156c793691c9c538838 Mon Sep 17 00:00:00 2001
From: sangrae <tiger030205@gmail.com>
Date: Fri, 16 Oct 2026 01:56:03 +0900
Subject: [PATCH 1/2] =?UTF-8?q?refactor:=20=ED=96=89=EC=82=AC=20=EC=8B=A0?=
 =?UTF-8?q?=EC=B2=AD=20=ED=8F=BC=C2=B7=ED=99=88=C2=B7=EC=97=B4=EB=A6=B0?=
 =?UTF-8?q?=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=9E=91=EC=84=B1=EB=82=B4?=
 =?UTF-8?q?=EC=97=AD=EC=9D=98=20=EC=B9=B4=EB=93=9C=20=EC=82=AC=EC=9D=B4=20?=
 =?UTF-8?q?=EA=B0=84=EA=B2=A9=EC=9D=84=208px=EB=A1=9C=20=ED=86=B5=EC=9D=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/features/events/EventsApplicationScreen.tsx             | 2 +-
 src/features/feedbacks/components/FeedbacksMineList.tsx     | 2 +-
 src/features/feedbacks/components/FeedbacksMineSkeleton.tsx | 2 +-
 src/features/home/HomeScreen.tsx                            | 6 +++---
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/features/events/EventsApplicationScreen.tsx b/src/features/events/EventsApplicationScreen.tsx
index 5131d9d..6239e16 100644
--- a/src/features/events/EventsApplicationScreen.tsx
+++ b/src/features/events/EventsApplicationScreen.tsx
@@ -121,7 +121,7 @@ function EventsApplicationScreen() {
   return (
     <div className="flex h-full flex-col">
       <div className="scrollbar-hidden flex-1 overflow-y-auto">
-        <div className="flex flex-col gap-3 px-5 pb-8">
+        <div className="flex flex-col gap-2 px-5 pb-8">
           <EventsSummaryCard
             dateTime={dateTime}
             eventName={eventName}
diff --git a/src/features/feedbacks/components/FeedbacksMineList.tsx b/src/features/feedbacks/components/FeedbacksMineList.tsx
index 48a0fa2..c8e98e5 100644
--- a/src/features/feedbacks/components/FeedbacksMineList.tsx
+++ b/src/features/feedbacks/components/FeedbacksMineList.tsx
@@ -28,7 +28,7 @@ function FeedbacksMineList({ onSelect, onWrite }: FeedbacksMineListProps) {
   }
 
   return (
-    <div className="flex flex-col gap-3 px-5 pb-4">
+    <div className="flex flex-col gap-2 px-5 pb-4">
       {feedbacks.map((feedback) => (
         <FeedbacksHistoryCard
           feedback={feedback}
diff --git a/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx b/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx
index fdd8aad..02d0410 100644
--- a/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx
+++ b/src/features/feedbacks/components/FeedbacksMineSkeleton.tsx
@@ -10,7 +10,7 @@ function FeedbacksMineSkeleton() {
   const animation = useSkeletonAnimation();
 
   return (
-    <div className="flex flex-col gap-3 overflow-hidden px-5">
+    <div className="flex flex-col gap-2 overflow-hidden px-5">
       {SKELETON_ROW_KEYS.slice(0, 3).map((key) => (
         <div
           className="flex flex-col gap-2 rounded-xl bg-background-normal p-4"
diff --git a/src/features/home/HomeScreen.tsx b/src/features/home/HomeScreen.tsx
index b87a01a..2040be7 100644
--- a/src/features/home/HomeScreen.tsx
+++ b/src/features/home/HomeScreen.tsx
@@ -90,15 +90,15 @@ function HomeScreen() {
             }
           />
         </div>
-        <div className="flex flex-col gap-3 pt-0.5 pb-4">
+        <div className="flex flex-col gap-2 pt-0.5 pb-4">
           <HomeNoticeBanner
             notices={HOME_MOCK_DATA.notices}
             onSelect={(noticeId) => push(`/notices/${noticeId}`)}
           />
           {/* 배너 카드(relative)가 뒤 섹션보다 나중에 그려져 그림자가 덮지 않게 뒤 섹션도 relative로 둔다 */}
-          <div className="relative flex flex-col gap-3">
+          <div className="relative flex flex-col gap-2">
             {HOME_MOCK_DATA.applyCards.length > 0 && (
-              <div className="flex flex-col gap-3 px-5">
+              <div className="flex flex-col gap-2 px-5">
                 {HOME_MOCK_DATA.applyCards.map((card) => (
                   <HomeApplyCard
                     card={card}

From 95b7744c6080b0439b36181a61c20f7b2ac0a0ae Mon Sep 17 00:00:00 2001
From: sangrae <tiger030205@gmail.com>
Date: Fri, 16 Oct 2026 01:56:12 +0900
Subject: [PATCH 2/2] =?UTF-8?q?docs:=20=ED=9A=8C=EC=83=89=20=EB=B0=B0?=
 =?UTF-8?q?=EA=B2=BD=20=EC=9C=84=20=ED=9D=B0=20=EC=B9=B4=EB=93=9C=20?=
 =?UTF-8?q?=EC=82=AC=EC=9D=B4=20=EA=B0=84=EA=B2=A9=20=EA=B7=9C=EC=B9=99=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/conventions/component-convention.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/docs/conventions/component-convention.md b/docs/conventions/component-convention.md
index 6034744..e68cf6c 100644
--- a/docs/conventions/component-convention.md
+++ b/docs/conventions/component-convention.md
@@ -59,6 +59,7 @@ interface RentalItemCardProps {
   2. **이름 붙인 토큰**: 화면의 기준이 되는 크기(배너 높이 등)나 Figma 효과 스타일(그림자)은 `index.css`의 `@theme`에 이름을 붙여 쓴다 — `--spacing-notice-banner: 261px` → `h-notice-banner`, `--shadow-spread-small` → `shadow-spread-small`. 색 토큰과 같은 방식이다.
   3. **구조로 없애기**: 그림 위치·크기를 숫자로 맞춰야 하는 자리는 에셋을 Figma 배치대로 잘라 받아(카드 크기 그림, 회전이 반영된 SVG 등) `w-full`·고유 크기로 놓는다. 글자 폭처럼 남는 공간을 채우는 값은 `flex-1`·`min-w-0`으로 둔다.
   4. **예외**: 0.5px 선처럼 단계·토큰으로 나타낼 수 없는 값만 임의값으로 쓰고, 어느 Figma 값인지 주석을 남긴다.
+- **회색 배경 위 흰 카드 사이는 8px(`gap-2`)로 통일한다.** 화면마다 12px로 그려진 곳이 섞여 있었는데 디자이너가 8px로 정리했다(Figma `4174:101198` 간격통일, #123). Figma가 12px로 보여도 흰 카드끼리면 8px로 둔다. 섹션 제목과 카드 묶음 사이, 카드 안쪽 간격은 이 규칙과 별개다.
 
 ### 타이포그래피