fix: 소개 글자 수 조정&카드 형식 타이틀 조정

Clubber2024 · Feb 20, 2025 · 47ccc27 · 47ccc27
1 parent 277d9c6
commit 47ccc27
Show file tree

Hide file tree

Showing 7 changed files with 58 additions and 16 deletions.
diff --git a/src/component/admin/AdminIntroductionpage.jsx b/src/component/admin/AdminIntroductionpage.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import styles from './AdminIntroductionPage.module.css';
+import parse from 'html-react-parser';
+
 export default function AdminIntroductionPage({
     clubName,
     college,
@@ -26,7 +28,10 @@ export default function AdminIntroductionPage({
     const NewLines = ({ text }) => {
         return <div>{handleNewLines(text)}</div>;
     };
-    console.log(activity);
+    //링크 텍스트 존재 시 하이퍼링크 자동처리 컴포넌트
+    const transformContent = (text) => {
+        return text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
+    };
     return (
         <>
             <div className={styles.detailBody}>
@@ -38,7 +43,7 @@ export default function AdminIntroductionPage({
                 </p>
                 <br></br>
                 <strong>📌 소개</strong>
-                <p className={styles.p_style}>{introduction}</p>
+                <p className={styles.p_style}>{introduction ? parse(transformContent(introduction)) : ''}</p>
                 <br></br>
                 <strong>📌 인스타</strong>
                 {instagram !== null ? (

diff --git a/src/component/admin/EditPage.jsx b/src/component/admin/EditPage.jsx
@@ -32,11 +32,15 @@ export default function EditPage() {
     };
 
     const handleIntroductionChange = (e) => {
+        const introValue = e.target.value;
+
+        if (introValue.length > 1000) return;
+
         setClub((prevState) => ({
             ...prevState,
-            introduction: e.target.value,
+            introduction: introValue,
         }));
-        setIntroCount(e.target.value.length);
+        setIntroCount(introValue.length);
     };
     const handleInstagramChange = (e) => {
         setClubInfo((prevState) => ({
@@ -53,11 +57,15 @@ export default function EditPage() {
     };
 
     const handleActivityChange = (e) => {
+        const activityValue = e.target.value;
+
+        if (activityValue.length > 1500) return;
+
         setClubInfo((prevState) => ({
             ...prevState,
-            activity: e.target.value,
+            activity: activityValue,
         }));
-        setActiCount(e.target.value.length);
+        setActiCount(activityValue.length);
     };
 
     const handleRoomChange = (e) => {
@@ -129,7 +137,7 @@ export default function EditPage() {
         if (clubInfo?.activity?.length > 1500) {
             setIsErrorModalOpen(true);
             setModalMessage("'📌 대표활동 ' 은 최대 1500자까지 작성 가능합니다.");
-        } else if (club?.introduction?.length > 100) {
+        } else if (club?.introduction?.length > 1000) {
             setIsErrorModalOpen(true);
             setModalMessage("'📌 소개 ' 는 최대 100자까지 작성 가능합니다. ");
         } else {
@@ -249,7 +257,7 @@ export default function EditPage() {
                         {club.department === null ? club.division : club.department}
                     </p>
                     <br />
-                    <strong>📌 소개 ({introCount}/100)</strong>
+                    <strong>📌 소개 ({introCount}/1000)</strong>
 
                     <textarea
                         value={club.introduction}

diff --git a/src/component/centralClub/centralClub.module.css b/src/component/centralClub/centralClub.module.css
@@ -35,6 +35,11 @@
         text-align: left;
         padding: 0 0 0 3%;
         margin: 0 0 5px 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        white-space: nowrap;
+        overflow-y: auto;
     }
     .content {
         width: 100%;
@@ -100,6 +105,11 @@
         text-align: left;
         padding: 0 0 0 3%;
         border-radius: 10px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        white-space: nowrap;
+        overflow-y: auto;
     }
     .content {
         width: 100%;

diff --git a/src/component/detail/introduction/IntroductionPage.jsx b/src/component/detail/introduction/IntroductionPage.jsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import parse from 'html-react-parser';
 
 export default function IntroductionPage({
     clubName,
@@ -27,6 +28,10 @@ export default function IntroductionPage({
     const NewLines = ({ text }) => {
         return <div>{handleNewLines(text)}</div>;
     };
+    //링크 텍스트 존재 시 하이퍼링크 자동처리 컴포넌트
+    const transformContent = (text) => {
+        return text.replace(/(https?:\/\/[^\s]+)/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a>');
+    };
 
     return (
         <>
@@ -39,7 +44,7 @@ export default function IntroductionPage({
                 </p>
                 <br></br>
                 <strong>📌 소개</strong>
-                <p>{introduction}</p>
+                <p>{introduction ? parse(transformContent(introduction)) : ''}</p>
                 <br></br>
                 <strong>📌 인스타</strong>
                 {instagram ? (

diff --git a/src/component/search/searchClub.module.css b/src/component/search/searchClub.module.css
@@ -42,6 +42,11 @@
         padding: 0 0 0 3%;
         margin: 0 0 5px 0;
         float: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+        white-space: nowrap;
+        overflow-y: auto;
     }
     .content {
         width: 100%;
@@ -101,6 +106,11 @@
         text-align: left;
         padding: 0 0 0 3%;
         border-radius: 10px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        white-space: nowrap;
+        overflow-y: auto;
     }
     .content {
         width: 100%;

diff --git a/src/component/smallClub/smallClubProps.module.css b/src/component/smallClub/smallClubProps.module.css
@@ -33,6 +33,11 @@
         text-align: left;
         padding: 0 0 0 3%;
         margin: 0 0 5px 0;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        white-space: nowrap;
+        overflow-y: auto;
     }
     .content {
         width: 100%;
@@ -85,6 +90,11 @@
         text-align: left;
         padding: 0 0 0 3%;
         border-radius: 10px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        width: 100%;
+        white-space: nowrap;
+        overflow-y: auto;
     }
     .content {
         width: 100%;

diff --git a/src/pages/DetailPage.jsx b/src/pages/DetailPage.jsx
@@ -167,13 +167,7 @@ export default function ClubsPage() {
                     }
                 }
             }
-            // } else if (isAdmin && token) {
-            //     setModalMessage('관리자는 즐겨찾기를 이용할 수 없습니다.');
-            //     setIsModalOpen(true);
-            // } else {
-            //     setModalMessage('즐겨찾기 추가는 로그인 이후 가능합니다.');
-            //     setIsModalOpen(true);
-            // }
+
             getBookmarkData(); // 각 요청 후 즐겨찾기 리스트 업데이트
         } catch (error) {
             getBookmarkData(); //에러 발생해도 업데이트