[Fix] kdt-8-4#3, kdt-8-4#14 코드 수정

hyeiis · Mar 27, 2024 · 04641bc · 04641bc
2 parents 8bd2487 + e720376
commit 04641bc
Show file tree

Hide file tree

Showing 21 changed files with 348 additions and 76 deletions.
diff --git a/weatherfit_refactoring/package-lock.json b/weatherfit_refactoring/package-lock.json
diff --git a/weatherfit_refactoring/package.json b/weatherfit_refactoring/package.json
@@ -10,8 +10,11 @@
     "format": "prettier --write \"**/*.{js,jsx,ts,tsx,json,css,scss,md}\""
   },
   "dependencies": {
+    "@types/jsonwebtoken": "^9.0.6",
     "axios": "^1.6.7",
+    "dompurify": "^3.0.11",
     "js-cookie": "^3.0.5",
+    "jsonwebtoken": "^9.0.2",
     "next": "14.0.4",
     "react": "^18",
     "react-dom": "^18",
@@ -21,6 +24,7 @@
     "zustand": "^4.4.7"
   },
   "devDependencies": {
+    "@types/dompurify": "^3.0.5",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "^20",
     "@types/react": "^18",

diff --git a/weatherfit_refactoring/public/images/question.bmp b/weatherfit_refactoring/public/images/question.bmp
diff --git a/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx b/weatherfit_refactoring/src/Components/Atoms/Button/ButtonStore.tsx
@@ -75,7 +75,7 @@ export default function ButtonStore({
       case ButtonStyle.CATEGORY_BTN_Y:
         return (
           <button
-            className={`${style} bg-yellow-200 border border-black rounded-2xl pb-[5px]`}
+            className={`${style} bg-yellow-200 border border-black rounded-2xl px-2 py-0.5`}
             onClick={onClickFunction}>
             {children}
           </button>

diff --git a/weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx b/weatherfit_refactoring/src/Components/Molecules/BestThreeCodi.tsx
@@ -4,11 +4,23 @@ import Image from 'next/image'
 
 export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail }) {
   if (!data || !data.images) {
-    return null
+    return (
+      <div className="flex space-x-2 w-full justify-center cursor-pointer">
+        <BoxStore boxStyle={BoxStyle.BOX_IMAGE}>
+          <Image
+            src={''}
+            alt={`없을 경우..`}
+            width={100}
+            height={100}
+            className="w-full h-full object-cover border rounded-2xl"
+          />
+        </BoxStore>
+      </div>
+    )
   }
 
   return (
-    <>
+    <div className="flex space-x-2 w-full justify-center cursor-pointer">
       {data.images.map((image, index) => (
         <Link href={`/detail/${data.boardId}`}>
           <BoxStore boxStyle={BoxStyle.BOX_IMAGE} key={index}>
@@ -23,6 +35,6 @@ export default function BestThreeCodi({ data }: { data?: FEEDDATA_detail }) {
         </Link>
         // 유저 정보 넣어야 함
       ))}
-    </>
+    </div>
   )
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailCategory.tsx
@@ -71,6 +71,7 @@ export default function DetailCategory({
     </div>
   )
 }
+
 function setFeedData(toJson: any) {
   throw new Error('Function not implemented.')
 }
diff --git a/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx b/weatherfit_refactoring/src/Components/Molecules/DetailContent.tsx
@@ -1,4 +1,5 @@
 'use client'
+import DOMPurify from 'dompurify'
 import { FeedData } from '@/Store/FeedData'
 import { useRouter } from 'next/navigation'
 
@@ -37,27 +38,28 @@ export default function DetailContent({
     const result: JSX.Element[] = []
 
     splitContent.forEach((current, index) => {
-      const replacedContent = current
+      const cleanedContent = DOMPurify.sanitize(current)
         .replace(/\n/g, '<br />')
         .replace(/ /g, '&nbsp;')
 
       result.push(
         <span
           key={`content-${index}`}
-          dangerouslySetInnerHTML={{ __html: replacedContent }} // HTML 문자열을 설정하여 줄바꿈 인식
+          dangerouslySetInnerHTML={{ __html: cleanedContent }} // HTML 문자열을 설정하여 줄바꿈 인식
         />,
       )
 
       if (index !== splitContent.length - 1) {
         const currentHashTag = matchedHashTags[index]
-        const tagIndex = hashTag.indexOf(currentHashTag.slice(1))
+        const cleanedHashTag = DOMPurify.sanitize(currentHashTag)
+        const tagIndex = hashTag.indexOf(cleanedHashTag.slice(1))
 
         result.push(
           <span
             key={`hashtag-${index}`}
             className={tagIndex !== -1 ? 'text-blue-400 cursor-pointer' : ''}
-            onClick={() => handleHashTagClick(currentHashTag)}>
-            {currentHashTag}
+            onClick={() => handleHashTagClick(cleanedHashTag)}>
+            {cleanedHashTag}
           </span>,
         )
       }
@@ -68,7 +70,6 @@ export default function DetailContent({
 
   return (
     <div className="font-NanumSquareRound px-1 break-all text-justify w-full">
-      {/* 추후에 더보기 접기 버튼 넣어야 할 듯 */}
       <span className="font-extrabold mr-2">{nickName}</span>
       {extractAndStyleHashtags(content)}
     </div>
-Original file line number
+Diff line change
@@ Expand Up / @@ -71,6 +71,7 @@ export default function DetailCategory({ @@
         </div>
       )
     }
     function setFeedData(toJson: any) {
       throw new Error('Function not implemented.')
     }