Fix(게시글 클릭 가능 범위 확장)

src/pages/Notice/index.tsx

@@ -101,19 +101,25 @@ function Notice() {
           ) : (
             currentNotices.map((noticeItem, index) => (
               <div className={noticeContainer} key={noticeItem.id}>
-                <div className={notice}>
+                <div onClick={() => toggleNotice(noticeItem.id)} className={notice}>
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <p className={noticeNumber}>{index + 1 + (currentPage - 1) * itemsPerPage}</p>
                     {/* 공지사항의 renewal이 true일 경우 'New' 배지를 표시 */}
                     {noticeItem.renewal && <span className={newBadge}>중요</span>}
                   </div>
 
-                  <div onClick={() => toggleNotice(noticeItem.id)} className={noticeContentWrapper}>
+                  <div className={noticeContentWrapper}>
                     <p className={noticeTitle}>{noticeItem.title}</p>
                   </div>
 
                   {/* downbtn을 클릭하면 토글 */}
-                  <button onClick={() => toggleNotice(noticeItem.id)} className={arrowButton}>
+                  <button
+                    onClick={(e) => {
+                      e.stopPropagation(); // 이벤트 전파 방지
+                      toggleNotice(noticeItem.id);
+                    }}
+                    className={arrowButton}
+                  >
                     <span className="material-symbols-outlined">
                       {expandedNoticeId === noticeItem.id ? "arrow_drop_up" : "arrow_drop_down"}
                     </span>

src/pages/Notice/notice.css.ts

@@ -95,6 +95,7 @@ export const notice = style({
   alignItems: "center",
   flexDirection: "row",
   position: "relative",
+  cursor: "pointer",
   "@media": {
     "(max-width: 375px)": {
       //Iphone SE 같은 소형폰
@@ -115,7 +116,6 @@ export const noticeContentWrapper = style({
   overflow: "hidden", // 넘치는 부분을 숨김
   position: "relative",
   marginLeft: 10,
-  cursor: "pointer",
 });
 
 export const noticeTitle = style({

src/pages/QnA/index.tsx

@@ -121,19 +121,23 @@ function QnA() {
           ) : (
             currentNotices.map((QnaItem, index) => (
               <div className={qnaContainer} key={QnaItem.id}>
-                <div className={qna}>
+                <div onClick={() => toggleQna(QnaItem.id)} className={qna}>
                   {/* 번호와 제목 표시 */}
                   <div style={{ display: "flex", alignItems: "center" }}>
                     <p className={qnaNumber}>{index + 1 + (currentPage - 1) * itemsPerPage}</p>
                   </div>
 
-                  <div onClick={() => toggleQna(QnaItem.id)} className={qnaContentWrapper}>
+                  <div className={qnaContentWrapper}>
                     <p className={qnaContent}>{QnaItem.title}</p>
                   </div>
+
                   {/* downbtn을 클릭하면 토글 */}
                   <button
-                    onClick={() => toggleQna(QnaItem.id)}
-                    className={arrowButton} // 스타일 추가
+                    onClick={(e) => {
+                      e.stopPropagation(); // 이벤트 버블링을 막음
+                      toggleQna(QnaItem.id);
+                    }}
+                    className={arrowButton}
                   >
                     <span className="material-symbols-outlined">
                       {expandedQna.includes(QnaItem.id) ? "arrow_drop_up" : "arrow_drop_down"}

src/pages/QnA/qna.css.ts

@@ -63,6 +63,7 @@ export const qna = style({
   alignItems: "center",
   flexDirection: "row",
   position: "relative",
+  cursor: "pointer",
   "@media": {
     "(max-width: 375px)": {
       //Iphone SE 같은 소형폰
@@ -83,7 +84,6 @@ export const qnaContentWrapper = style({
   overflow: "hidden", // 넘치는 부분을 숨김
   position: "relative",
   marginLeft: 10,
-  cursor: "pointer",
 });
 
 export const qnaContent = style({