CESCO-setbangsari · RubiYH · Aug 25, 2025 · Aug 25, 2025 · Aug 25, 2025 · Aug 25, 2025
diff --git a/app/assets/image/amisan.jpg b/app/assets/image/amisan.jpg
diff --git a/app/assets/image/flowerGimbap.jpg b/app/assets/image/flowerGimbap.jpg
diff --git a/app/assets/image/victorySuper.jpg b/app/assets/image/victorySuper.jpg
diff --git a/app/pages/checklist/_components/CheckCard.vue b/app/pages/checklist/_components/CheckCard.vue
@@ -1,10 +1,10 @@
 <template>
   <div
-    class="relative z-0 rounded-bl-2xl rounded-br-2xl rounded-tl-2xl rounded-tr-2xl bg-neutral-100 px-7 pb-9 pt-6"
+    class="relative z-0 rounded-bl-[15px] rounded-br-[15px] rounded-tl-[15px] rounded-tr-[15px] bg-gray-f5 px-7 pb-9 pt-6"
     :style="{ width: cardWidth, height: cardHeight }"
   >
     <img
-      class="absolute left-0 top-0 z-10 w-full rounded-tl-2xl rounded-tr-2xl object-cover"
+      class="absolute left-0 top-0 z-10 w-full rounded-tl-[15px] rounded-tr-[15px] object-cover"
       :src="img"
       alt="사진"
       :style="{ height: cardImgHeight }"

diff --git a/app/pages/checklist/_components/CheckTipBox.vue b/app/pages/checklist/_components/CheckTipBox.vue
@@ -1,9 +1,9 @@
 <template>
   <div
-    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-2xl bg-neutral-100 px-[50px] py-[30px]"
+    class="box-border flex w-[894px] items-center justify-start gap-[23px] rounded-[15px] bg-gray-f5 px-[50px] py-[30px]"
   >
     <div
-      class="flex h-16 w-16 items-center justify-center rounded-2xl bg-blue-500 text-4xl text-white"
+      class="flex h-16 w-16 items-center justify-center rounded-[15px] bg-primary text-[40px] text-background"
     >
       {{ checkNum }}
     </div>

diff --git a/app/pages/checklist/index.vue b/app/pages/checklist/index.vue
@@ -1,17 +1,17 @@
 <template>
-  <div class="flex flex-col items-center justify-start">
+  <div class="mb-[200px] flex flex-col items-center justify-start">
     <div
-      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-2xl bg-neutral-100 py-[35px]"
+      class="relative flex h-[371px] w-[896px] flex-col items-center justify-center rounded-[15px] bg-gray-f5 py-[35px]"
     >
       <img src="~/assets/image/checklistIcon.jpg" alt="체크리스트" class="h-[147px] w-[107px]" />
       <div
-        class="justify-start px-[40px] py-[10px] text-center font-['Pretendard'] text-3xl font-semibold leading-10 text-zinc-900"
+        class="justify-start px-[40px] py-[20px] text-center text-[32px] font-[600] text-gray-1a"
       >
         부동산 퀴즈 풀고 크레딧 받기
       </div>
 
       <button
-        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-[#2D8AE7] font-['Pretendard'] text-[32px] font-semibold leading-10 text-white"
+        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-primary text-[28px] font-[500] text-background"
         @click="gotoQuiz"
       >
         퀴즈풀기
@@ -20,57 +20,35 @@
     <div class="mt-[90px] flex w-[896px] flex-col">
       <section class="mb-[80px]">
         <div class="mb-[60px] text-center">
-          <div class="font-['Pretendard'] text-4xl font-bold leading-[58px] text-blue-500">
-            잠깐!
-          </div>
-          <span class="font-['Pretendard'] text-4xl font-bold leading-[58px] text-zinc-900">
+          <div class="text-[40px] font-[700] leading-[58px] text-primary">잠깐!</div>
+          <span class="text-[40px] font-[700] leading-[58px] text-gray-1a">
             집 구하기 전 확인하셨나요?
           </span>
         </div>
         <!-- 카드 그리드 -->
         <div class="mb-[80px] flex justify-center">
           <div class="grid grid-cols-2 items-start gap-x-[70px] gap-y-[50px]">
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="One">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  보증보험 가입
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  가능 여부 확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">보증보험 가입</span>
+                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
-              <div
-                class="justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 보증보험을 가입하면 보증금 피해 발생 시
                 <br />
                 보증금의 일부나 전액을 배상 받을 수 있습니다.
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="Two">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  중개업자 신원
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">중개업자 신원</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span
-                  class="whitespace-nowrap font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500"
-                >
+                <span class="whitespace-nowrap text-[18px] font-[400] text-primary">
                   국토부 중개사 조회 사이트
                 </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-[400] text-gray-1a">
                   에서 중개사의 자격
                   <br />
                   여부를 확인해야합니다. 무자격자에게 계약하면
@@ -80,68 +58,40 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Three">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  등기부등본
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">등기부등본</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
               </div>
               <div class="justify-start">
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
-                  등기부등본은 부동산 또는
-                </span>
-                <span class="font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500">
-                  대법원 인터넷등기소
-                </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-normal text-gray-1a">등기부등본은 부동산 또는</span>
+                <span class="text-[18px] font-semibold text-primary">대법원 인터넷등기소</span>
+                <span class="text-[18px] font-normal text-gray-1a">
                   를 통해 반드시 확인해야할 정보입니다.
                   <br />
                   실제 집주인이 누구인지 확인하고 근저당이나 압류 여부를 확인할 수 있습니다.
                   <br />
                 </span>
-                <span
-                  class="font-['Pretendard'] text-base font-normal leading-relaxed text-zinc-900"
-                >
+                <span class="text-base font-normal text-gray-1a">
                   <br />
                 </span>
-                <span class="font-['Pretendard'] text-sm font-semibold leading-snug text-blue-500">
+                <span class="text-[14px] font-[400] text-primary">
                   TIP!
                   <br />
                 </span>
-                <span
-                  class="font-['Pretendard'] text-base font-normal leading-relaxed text-zinc-900"
-                >
+                <span class="text-base font-normal text-gray-1a">
                   등기부등본은 변경 가능성이 있기에 입주 전 반드시 한번 더 확인해야합니다!
                 </span>
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Four">
-              <div>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500"
-                >
-                  확정일자 및 전입신고
-                </span>
-                <span
-                  class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900"
-                >
-                  가능 여부 확인
-                </span>
+              <div class="mb-[10px]">
+                <span class="text-[24px] font-[600] text-primary">확정일자 및 전입신고</span>
+                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
-              <div
-                class="justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 확정일자와 전입신고가 가능해야지만 보증금을 법적으로 보호할 수 있습니다.
               </div>
-              <div
-                class="mt-[25px] justify-start font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900"
-              >
+              <div class="mt-[25px] justify-start text-[18px] font-[400] text-gray-1a">
                 다만, 상가주택이나 불법건축물 등의 경우 불가할 수도 있기에 반드시 사전에
                 확인해야합니다.
               </div>
@@ -152,23 +102,15 @@
         <div class="flex justify-center">
           <CheckCard :img="Five" card-width="896px" card-height="764px" card-img-height="533px">
             <div class="justify-start">
-              <span class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-blue-500">
-                선순위 계약자
-              </span>
-              <span class="font-['Pretendard'] text-2xl font-semibold leading-[50px] text-zinc-900">
-                확인
-              </span>
-              <div class="w-[836px] justify-start">
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
-                  입주하기 전 반드시
-                </span>
-                <span
-                  class="font-['Pretendard'] text-lg font-normal leading-7 text-blue-500"
-                ></span>
-                <span class="font-['Pretendard'] text-lg font-semibold leading-7 text-blue-500">
+              <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
+              <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              <div class="mt-[10px] w-[836px] justify-start">
+                <span class="text-[18px] font-[400] text-gray-1a">입주하기 전 반드시</span>
+                <span class="text-[18px] font-[400] text-primary"></span>
+                <span class="text-[18px] font-semibold text-primary">
                   주민센터나 정부24에서 전세입자의 전출 여부를 확인
                 </span>
-                <span class="font-['Pretendard'] text-lg font-normal leading-7 text-zinc-900">
+                <span class="text-[18px] font-[400] text-gray-1a">
                   해야 합니다.
                   <br />
                   만약 전세입자가 전출신고를 하지 않고 여전히 전입신고 상태를 유지하고 있다면,
@@ -183,31 +125,23 @@
         </div>
       </section>
       <div
-        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-zinc-400"
+        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-[#B4B4B4]"
       ></div>
       <section class="mt-[80px]">
-        <div class="mb-[34px] font-['Pretendard'] text-4xl font-bold leading-[58px] text-blue-500">
-          등기부등본 위조 확인 TIP
-        </div>
+        <div class="mb-[34px] text-[40px] font-[700] text-primary">등기부등본 위조 확인 TIP</div>
         <div class="flex flex-col gap-[44px]">
           <CheckTipBox check-num="1">
             <div class="w-[634px] justify-start">
-              <div class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
+              <div class="text-[32px] font-normal text-gray-1a">
                 등기부등본은 말소된 내역이 포함된
               </div>
-              <span class="font-['Pretendard'] text-3xl font-semibold leading-[50px] text-blue-500">
-                등기사항 전부 증명서 유형
-              </span>
-              <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                으로 발급 받아야합니다.
-              </span>
+              <span class="text-[32px] font-semibold text-primary">등기사항 전부 증명서 유형</span>
+              <span class="text-[32px] font-normal text-gray-1a">으로 발급 받아야합니다.</span>
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="2">
-            <div
-              class="justify-start font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900"
-            >
+            <div class="justify-start text-[32px] font-normal text-gray-1a">
               가압류, 가처분, 가등기, 근저당권 등에 대해 말소된
               <br />
               내역을 찾아야 합니다.
@@ -216,9 +150,7 @@
 
           <CheckTipBox check-num="3">
             <div class="w-[634px] justify-start">
-              <div
-                class="justify-start font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900"
-              >
+              <div class="justify-start whitespace-nowrap text-[32px] font-normal text-gray-1a">
                 말소된 이력에 대해 임대인에게 채권자로부터 채권변제
                 <br />
                 확인서 발급을 꼭 요청해야합니다.
@@ -229,17 +161,11 @@
           <CheckTipBox check-num="4">
             <div class="w-[634px] justify-start">
               <div class="justify-start whitespace-nowrap">
-                <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                  요청을 거부한다면,
-                </span>
-                <span
-                  class="font-['Pretendard'] text-3xl font-semibold leading-[50px] text-blue-500"
-                >
+                <span class="text-[32px] font-normal text-gray-1a">요청을 거부한다면,</span>
+                <span class="text-[32px] font-semibold text-primary">
                   해당 매물은 피하는 것이 안전
                 </span>
-                <span class="font-['Pretendard'] text-3xl font-normal leading-[50px] text-zinc-900">
-                  합니다.
-                </span>
+                <span class="text-[32px] font-normal text-gray-1a">합니다.</span>
               </div>
             </div>
           </CheckTipBox>

diff --git a/app/pages/community/_components/CommentItem.vue b/app/pages/community/_components/CommentItem.vue
@@ -2,19 +2,11 @@
   <div
     class="box-border flex h-[200px] w-[400px] cursor-pointer flex-col rounded-[10px] p-[30px] hover:bg-blue-50"
   >
-    <div
-      class="mb-[5px] justify-start font-['Pretendard'] text-lg font-semibold leading-tight text-zinc-900"
-    >
-      {{ writer }}
-    </div>
-    <div
-      class="mb-[15px] justify-start font-['Pretendard'] text-base font-normal leading-tight text-neutral-400"
-    >
+    <div class="mb-[5px] justify-start text-lg font-semibold leading-tight text-gray-1a">익명</div>
+    <div class="mb-[15px] justify-start text-base font-normal text-gray-b4">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div
-      class="mb-[10px] justify-start font-['Pretendard'] text-base font-normal leading-normal text-zinc-900"
-    >
+    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
       {{ comment }}
     </div>
     <div class="flex items-start justify-start gap-[20px]">
@@ -27,17 +19,13 @@
         ></FilledLike>
 
         <Like v-else class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div
-          class="justify-start font-['Pretendard'] text-base font-normal leading-none text-zinc-400"
-        >
+        <div class="justify-start text-base font-normal text-gray-b4">
           {{ likeCount }}
         </div>
       </div>
       <div class="flex justify-start gap-[10px]">
         <CommentIcon class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div
-          class="justify-start font-['Pretendard'] text-base font-normal leading-none text-zinc-400"
-        >
+        <div class="justify-start text-base font-normal text-gray-b4">
           {{ commentCount }}
         </div>
       </div>
@@ -82,7 +70,7 @@ const { mutate: clickLike } = useMutation({
   onSuccess: (data) => {
     console.log("좋아요 생성 성공:", data);
     queryClient.invalidateQueries({
-      queryKey: ["replies", props.postId],
+      queryKey: ["post", props.postId],
     });
   },
   onError: (error) => {
@@ -119,7 +107,7 @@ const handleDelete = () => {
 const props = defineProps({
   writer: {
     type: String,
-    default: "",
+    default: "작성자",
   },
   date: {
     type: String,