CESCO-setbangsari · RubiYH · Sep 25, 2025 · Sep 24, 2025 · Sep 24, 2025 · Sep 25, 2025
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-[15px] bg-gray-f5 px-[50px] py-[30px]"
+    class="box-border flex 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-[15px] bg-primary text-[40px] text-background"
+      class="flex items-center justify-center rounded-[15px] bg-primary px-[26px] py-[10px] text-[40px] text-background"
     >
       {{ checkNum }}
     </div>

diff --git a/app/pages/checklist/index.vue b/app/pages/checklist/index.vue
@@ -1,7 +1,7 @@
 <template>
   <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-[15px] bg-gray-f5 py-[35px]"
+      class="relative flex flex-col items-center justify-center rounded-[15px] bg-gray-f5 px-[267px] py-[36px]"
     >
       <img src="~/assets/image/checklistIcon.jpg" alt="체크리스트" class="h-[147px] w-[107px]" />
       <div
@@ -11,7 +11,7 @@
       </div>
 
       <button
-        class="h-[64px] w-[177px] justify-start rounded-[10px] bg-primary text-[28px] font-[500] text-background"
+        class="justify-start rounded-[10px] bg-primary px-[40px] py-[10px] text-[28px] font-[500] text-background"
         @click="gotoQuiz"
       >
         퀴즈 풀기
@@ -29,7 +29,7 @@
         <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 class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <span class="text-[24px] font-[600] text-primary">보증보험 가입</span>
                 <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
               </div>
@@ -40,12 +40,12 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="447px" card-img-height="240px" :img="Two">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <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 text-[18px] font-[400] text-primary">
+                <span class="whitespace-nowrap text-[18px] font-[500] text-primary">
                   국토부 중개사 조회 사이트
                 </span>
                 <span class="text-[18px] font-[400] text-gray-1a">
@@ -58,35 +58,39 @@
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Three">
-              <div class="mb-[10px]">
+              <div class="mb-[10px] flex gap-[4px]">
                 <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="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">
+                <span class="text-[18px] font-[400] text-gray-1a">등기부등본은 부동산 또는</span>
+                <span class="text-[18px] font-[500] text-primary">대법원 인터넷등기소</span>
+                <span class="text-[18px] font-[400] text-gray-1a">
                   를 통해 반드시 확인해야할 정보입니다.
                   <br />
                   실제 집주인이 누구인지 확인하고 근저당이나 압류 여부를 확인할 수 있습니다.
                   <br />
                 </span>
-                <span class="text-base font-normal text-gray-1a">
+                <span class="text-base font-[400] text-gray-1a">
                   <br />
                 </span>
                 <span class="text-[14px] font-[400] text-primary">
                   TIP!
                   <br />
                 </span>
-                <span class="text-base font-normal text-gray-1a">
+                <span class="text-base font-[400] text-gray-1a">
                   등기부등본은 변경 가능성이 있기에 입주 전 반드시 한번 더 확인해야합니다!
                 </span>
               </div>
             </CheckCard>
             <CheckCard card-width="413px" card-height="570px" card-img-height="240px" :img="Four">
               <div class="mb-[10px]">
-                <span class="text-[24px] font-[600] text-primary">확정일자 및 전입신고</span>
-                <span class="text-[24px] font-[600] text-gray-1a">가능 여부 확인</span>
+                <span class="whitespace-nowrap text-[24px] font-[600] text-primary">
+                  확정일자 및 전입신고
+                </span>
+                <span class="whitespace-nowrap text-[24px] font-[600] text-gray-1a">
+                  가능 여부 확인
+                </span>
               </div>
               <div class="justify-start text-[18px] font-[400] text-gray-1a">
                 확정일자와 전입신고가 가능해야지만 보증금을 법적으로 보호할 수 있습니다.
@@ -102,12 +106,14 @@
         <div class="flex justify-center">
           <CheckCard :img="Five" card-width="896px" card-height="764px" card-img-height="533px">
             <div class="justify-start">
-              <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
-              <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              <div class="flex gap-1">
+                <span class="text-[24px] font-[600] text-primary">선순위 계약자</span>
+                <span class="text-[24px] font-[600] text-gray-1a">확인</span>
+              </div>
               <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">
+                <span class="text-[18px] font-[500] text-primary">
                   주민센터나 정부24에서 전세입자의 전출 여부를 확인
                 </span>
                 <span class="text-[18px] font-[400] text-gray-1a">
@@ -125,32 +131,36 @@
         </div>
       </section>
       <div
-        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-[#B4B4B4]"
+        class="h-0 w-full outline outline-[1.50px] outline-offset-[-0.75px] outline-gray-b4"
       ></div>
       <section class="mt-[80px]">
         <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="text-[32px] font-normal text-gray-1a">
+            <div class="justify-start">
+              <div class="text-[32px] font-[400] text-gray-1a">
                 등기부등본은 말소된 내역이 포함된
               </div>
-              <span class="text-[32px] font-semibold text-primary">등기사항 전부 증명서 유형</span>
-              <span class="text-[32px] font-normal text-gray-1a">으로 발급 받아야합니다.</span>
+              <span class="whitespace-nowrap text-[32px] font-[500] text-primary">
+                등기사항 전부 증명서 유형
+              </span>
+              <span class="whitespace-nowrap text-[32px] font-[400] text-gray-1a">
+                으로 발급 받아야합니다.
+              </span>
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="2">
-            <div class="justify-start text-[32px] font-normal text-gray-1a">
+            <div class="justify-start text-[32px] font-[400] text-gray-1a">
               가압류, 가처분, 가등기, 근저당권 등에 대해 말소된
               <br />
               내역을 찾아야 합니다.
             </div>
           </CheckTipBox>
 
           <CheckTipBox check-num="3">
-            <div class="w-[634px] justify-start">
-              <div class="justify-start whitespace-nowrap text-[32px] font-normal text-gray-1a">
+            <div class="justify-start">
+              <div class="justify-start whitespace-nowrap text-[32px] font-[400] text-gray-1a">
                 말소된 이력에 대해 임대인에게 채권자로부터 채권변제
                 <br />
                 확인서 발급을 꼭 요청해야합니다.
@@ -159,13 +169,13 @@
           </CheckTipBox>
 
           <CheckTipBox check-num="4">
-            <div class="w-[634px] justify-start">
+            <div class="justify-start">
               <div class="justify-start whitespace-nowrap">
-                <span class="text-[32px] font-normal text-gray-1a">요청을 거부한다면,</span>
-                <span class="text-[32px] font-semibold text-primary">
+                <span class="text-[32px] font-[400] text-gray-1a">요청을 거부한다면,</span>
+                <span class="text-[31px] font-[500] text-primary">
                   해당 매물은 피하는 것이 안전
                 </span>
-                <span class="text-[32px] font-normal text-gray-1a">합니다.</span>
+                <span class="text-[32px] font-[400] text-gray-1a">합니다.</span>
               </div>
             </div>
           </CheckTipBox>

diff --git a/app/pages/community/_api/types/PostResponse.ts b/app/pages/community/_api/types/PostResponse.ts
@@ -6,4 +6,5 @@ export interface PostResponse {
   userId: number;
   createdAt: string;
   modifiedAt: string;
+  likeByUser: boolean;
 }
diff --git a/app/pages/community/_components/CommentItem.vue b/app/pages/community/_components/CommentItem.vue
@@ -1,16 +1,16 @@
 <template>
   <div
-    class="box-border flex h-[200px] w-[400px] cursor-pointer flex-col rounded-[10px] p-[30px] hover:bg-blue-50"
+    class="box-border flex cursor-pointer flex-col rounded-[10px] px-[30px] py-[26px] hover:bg-secondary"
   >
-    <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">
+    <div class="mb-[5px] justify-start text-[20px] font-[600] text-gray-1a">익명</div>
+    <div class="mb-[15px] justify-start text-[16px] font-[400] text-gray-b4">
       {{ dayjs(date).format("YYYY-MM-DD") }}
     </div>
-    <div class="mb-[10px] justify-start text-base font-normal text-gray-1a">
+    <div class="mb-[10px] justify-start text-[20px] font-[400] text-gray-1a">
       {{ comment }}
     </div>
     <div class="flex items-start justify-start gap-[20px]">
-      <div class="flex justify-start gap-[10px]" @click="handleClickLike">
+      <div class="flex justify-start gap-[10px]" @click.stop="handleClickLike">
         <FilledLike
           v-if="isLike"
           class="h-4 w-4"
@@ -19,18 +19,18 @@
         ></FilledLike>
 
         <Like v-else class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div class="justify-start text-base font-normal text-gray-b4">
-          {{ likeCount }}
+        <div class="justify-start text-[18px] font-[400] text-gray-b4">
+          {{ currentLikeCount }}
         </div>
       </div>
       <div class="flex justify-start gap-[10px]">
         <CommentIcon class="h-4 w-4" filled="false" :font-controlled="false" />
-        <div class="justify-start text-base font-normal text-gray-b4">
+        <div class="justify-start text-[18px] font-[400] text-gray-b4">
           {{ commentCount }}
         </div>
       </div>
     </div>
-    <div class="hidden h-48 w-96 rounded-[10px] bg-blue-50" />
+    <div class="hidden h-48 w-96 rounded-[10px] bg-secondary" />
   </div>
 </template>
 
@@ -39,25 +39,75 @@ import CommentIcon from "~/assets/icon/commentIcon.svg";
 import Like from "~/assets/icon/like.svg";
 import FilledLike from "~/assets/icon/filledHeart.svg";
 import dayjs from "dayjs";
-import { useMutation, useQueryClient } from "@tanstack/vue-query";
+import { useMutation } from "@tanstack/vue-query";
 import { apiInstance } from "~/utils/api";
 
-const isLike = ref(false);
+const props = defineProps({
+  writer: {
+    type: String,
+    default: "작성자",
+  },
+  date: {
+    type: String,
+    default: "",
+  },
+  comment: {
+    type: String,
+    default: "",
+  },
+  commentCount: {
+    type: Number,
+    default: 1,
+  },
+  likeCount: {
+    type: Number,
+    default: 1,
+  },
+  userId: {
+    type: Number,
+    default: 1,
+  },
+  postId: {
+    type: Number,
+    required: true,
+  },
+  likeByUser: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+// props.likeByUser로 초기값 설정
+const isLike = ref(props.likeByUser);
+const currentLikeCount = ref(props.likeCount);
+
+// props가 변경될 때 isLike 상태도 업데이트
+watch(
+  () => props.likeByUser,
+  (newValue) => {
+    isLike.value = newValue;
+  }
+);
+
+// likeCount props가 변경될 때 currentLikeCount도 업데이트
+watch(
+  () => props.likeCount,
+  (newValue) => {
+    currentLikeCount.value = newValue;
+  }
+);
 
 const handleClickLike = () => {
-  isLike.value = !isLike.value;
-  if (isLike.value === true) {
+  if (isLike.value) {
+    handleDelete();
+  } else {
     clickLike({
       userId: props.userId,
       postId: props.postId,
     });
-  } else {
-    handleDelete();
   }
 };
 
-const queryClient = useQueryClient();
-
 const { mutate: clickLike } = useMutation({
   mutationFn: async (postData: { userId: number; postId: number }) => {
     console.log("게시글 좋아요 누른 데이터:", postData);
@@ -69,9 +119,8 @@ const { mutate: clickLike } = useMutation({
   },
   onSuccess: (data) => {
     console.log("좋아요 생성 성공:", data);
-    queryClient.invalidateQueries({
-      queryKey: ["post", props.postId],
-    });
+    isLike.value = true;
+    currentLikeCount.value += 1;
   },
   onError: (error) => {
     console.error("좋아요 생성 실패:", error);
@@ -91,9 +140,8 @@ const { mutate: cancelLike } = useMutation({
   },
   onSuccess: () => {
     console.log("좋아요 삭제 성공");
-    queryClient.invalidateQueries({
-      queryKey: ["replies", props.postId],
-    });
+    isLike.value = false;
+    currentLikeCount.value = Math.max(0, currentLikeCount.value - 1);
   },
   onError: (error) => {
     console.error(`좋아요 삭제 실패했습니다: ${error.message}`);
@@ -103,35 +151,4 @@ const { mutate: cancelLike } = useMutation({
 const handleDelete = () => {
   cancelLike(props.postId);
 };
-
-const props = defineProps({
-  writer: {
-    type: String,
-    default: "작성자",
-  },
-  date: {
-    type: String,
-    default: "",
-  },
-  comment: {
-    type: String,
-    default: "",
-  },
-  commentCount: {
-    type: Number,
-    default: 1,
-  },
-  likeCount: {
-    type: Number,
-    default: 1,
-  },
-  userId: {
-    type: Number,
-    default: 1,
-  },
-  postId: {
-    type: Number,
-    required: true,
-  },
-});
 </script>