Merge pull request #156 from ssu-student-union/feat/#148_jongse_qa_3

Feat/#148 jongse qa 3
ssu-student-union · Sep 24, 2024 · b41c082 · b41c082
2 parents c9983f1 + c0b4bf8
commit b41c082
Show file tree

Hide file tree

Showing 19 changed files with 150 additions and 56 deletions.
diff --git a/src/components/MainCarousel/index.tsx b/src/components/MainCarousel/index.tsx
@@ -1,5 +1,5 @@
 import Slider from 'react-slick';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import 'slick-carousel/slick/slick.css';
 import 'slick-carousel/slick/slick-theme.css';
@@ -20,6 +20,7 @@ const images = ['/image/1.jpeg', '/image/2.jpeg', '/image/3.jpeg'];
 
 const MainCarousel = () => {
   const [currentSlide, setCurrentSlide] = useState(0);
+  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(!!localStorage.getItem('accessToken'));
   const navigate = useNavigate();
 
   const settings = {
@@ -38,6 +39,19 @@ const MainCarousel = () => {
     pauseOnDotsHover: false,
   };
 
+  // Monitor accessToken changes and update state accordingly
+  useEffect(() => {
+    const handleStorageChange = () => {
+      setIsLoggedIn(!!localStorage.getItem('accessToken'));
+    };
+
+    window.addEventListener('storage', handleStorageChange);
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange);
+    };
+  }, []);
+
   return (
     <div className="relative h-screen w-full overflow-hidden">
       <Slider {...settings} className="absolute inset-0 z-0 h-full w-full">
@@ -51,15 +65,18 @@ const MainCarousel = () => {
       <div className="pointer-events-none absolute inset-0 z-10 flex flex-col items-center justify-center text-center text-white">
         <div className="pointer-events-auto text-xl font-bold">제64대 총학생회</div>
         <h1 className="pointer-events-auto text-[80px] font-black leading-none">US:SUM</h1>
-        <button
-          onClick={(e) => {
-            e.stopPropagation();
-            navigate('/register');
-          }}
-          className="pointer-events-auto mt-6 h-[46px] w-[173px] rounded-full border-[1px] border-white bg-transparent"
-        >
-          <p className="font-bold">로그인 하러가기</p>
-        </button>
+
+        {!isLoggedIn && (
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate('/register');
+            }}
+            className="pointer-events-auto mt-6 h-[46px] w-[173px] rounded-full border-[1px] border-white bg-transparent"
+          >
+            <p className="font-bold">로그인 하러가기</p>
+          </button>
+        )}
       </div>
 
       <Counter slideCount={images.length} currentSlide={currentSlide} />

diff --git a/src/components/PostCard/PostCardBasicMissing.tsx b/src/components/PostCard/PostCardBasicMissing.tsx
@@ -33,8 +33,8 @@ const PostCard = ({
 }: PostCardProps) => {
   const styles = getStyles(size);
 
-  const maxTitleLength = size === Size.default ? 17 : 30;
-  const maxSubtitleLength = size === Size.default ? 24 : 50;
+  const maxTitleLength = size === Size.default ? 16 : 12;
+  const maxSubtitleLength = size === Size.default ? 24 : 18;
 
   const truncatedTitle = useTruncateText(title, maxTitleLength);
   const truncatedSubtitle = useTruncateText(subtitle, maxSubtitleLength);

diff --git a/src/hooks/editor/useBlockImageUpload.ts b/src/hooks/editor/useBlockImageUpload.ts
@@ -0,0 +1,21 @@
+import { useEffect } from 'react';
+import { Editor } from '@toast-ui/react-editor';
+
+export const useBlockImageUpload = (editorRef: React.MutableRefObject<Editor | null>) => {
+  useEffect(() => {
+    if (editorRef.current) {
+      const instance = editorRef.current.getInstance();
+
+      // 이미지 업로드를 막는 훅 등록
+      instance.addHook('addImageBlobHook', () => {
+        alert('글 작성만 가능합니다.');
+        return false; // 이미지 업로드 중단
+      });
+
+      // 클린업 함수: 컴포넌트 언마운트 시 훅 제거
+      return () => {
+        instance.removeHook('addImageBlobHook');
+      };
+    }
+  }, [editorRef]);
+};
diff --git a/src/pages/audit/auditEdit/component/ImagePreview.tsx b/src/pages/audit/auditEdit/component/ImagePreview.tsx
@@ -37,7 +37,10 @@ export function ImagePreview({ imageItem, onRemove, onClick, isThumbnail }: Imag
             onRemove();
           }}
         >
-          <XCircle size={32} color="#2F4BF7" weight="fill" />
+          <div className="relative">
+            <div className="absolute inset-0 m-auto h-[24px] w-[24px] rounded-full bg-white" />
+            <XCircle size={32} color="#2F4BF7" weight="fill" className="relative z-10" />
+          </div>
         </button>
       )}
     </div>

diff --git a/src/pages/audit/auditEdit/container/auditEditContentSection.tsx b/src/pages/audit/auditEdit/container/auditEditContentSection.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { Editor } from '@toast-ui/react-editor';
 import '@toast-ui/editor/dist/toastui-editor.css';
+import { useBlockImageUpload } from '@/hooks/editor/useBlockImageUpload';
 
 interface AuditEditContentProps {
   onContentChange: (content: string) => void;
@@ -27,6 +28,8 @@ export function AuditEditContentSection({ onContentChange, initialValue = '' }:
     }
   };
 
+  useBlockImageUpload(editorRef);
+
   useEffect(() => {
     handleResize();
     window.addEventListener('resize', handleResize);

diff --git a/src/pages/audit/auditEdit/hook/useAuditEdit.ts b/src/pages/audit/auditEdit/hook/useAuditEdit.ts
@@ -29,6 +29,15 @@ export function useAuditEdit() {
 
   const handleSubmit = async () => {
     try {
+      if (images.length === 0) {
+        alert('이미지 파일을 1개 이상 추가해주세요.');
+        return;
+      }
+      if (category === '') {
+        alert('카테고리를 선택해주세요.');
+        return;
+      }
+
       const uploadResponse = await uploadFiles({
         boardCode: '감사기구게시판',
         files,

diff --git a/src/pages/audit/auditPatch/container/auditPatchImageSection.tsx b/src/pages/audit/auditPatch/container/auditPatchImageSection.tsx
@@ -8,19 +8,23 @@ interface AuditPatchImageSectionProps {
 
 export function AuditPatchImageSection({ imageList, thumbnailImage, setThumbnailImage }: AuditPatchImageSectionProps) {
   return (
-    <div className="px-[200px] xs:px-[30px] sm:px-[30px] md:px-[30px] lg:px-[30px]">
-      <div className="mr-[1rem] mt-[12px] flex h-auto w-full flex-row items-center justify-start gap-4 overflow-x-auto whitespace-nowrap rounded-xs border-[0.125rem] border-gray-300 p-[1rem]">
-        <div className="flex max-w-full flex-row gap-4">
-          {imageList.map((image, index) => (
-            <ImagePreview
-              key={image + index}
-              imageItem={image}
-              isThumbnail={thumbnailImage === image}
-              onClick={() => setThumbnailImage(image)}
-            />
-          ))}
+    <>
+      <div
+        className={imageList.length === 0 ? 'hidden' : 'px-[200px] xs:px-[30px] sm:px-[30px] md:px-[30px] lg:px-[30px]'}
+      >
+        <div className="mr-[1rem] mt-[12px] flex h-auto w-full flex-row items-center justify-start gap-4 overflow-x-auto whitespace-nowrap rounded-xs border-[0.125rem] border-gray-300 p-[1rem]">
+          <div className="flex max-w-full flex-row gap-4">
+            {imageList.map((image, index) => (
+              <ImagePreview
+                key={image + index}
+                imageItem={image}
+                isThumbnail={thumbnailImage === image}
+                onClick={() => setThumbnailImage(image)}
+              />
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/pages/lost-article/edit/hook/useLostEdit.tsx b/src/pages/lost-article/edit/hook/useLostEdit.tsx
@@ -28,6 +28,11 @@ export function useLostEdit() {
 
   const handleSubmit = async () => {
     try {
+      if (images.length === 0) {
+        alert('이미지 파일을 1개 이상 추가해주세요.');
+        return;
+      }
+
       const uploadResponse = await uploadFiles({
         boardCode: '분실물게시판',
         images,

diff --git a/src/pages/main/containers/MainScheduleSection.tsx b/src/pages/main/containers/MainScheduleSection.tsx
@@ -6,7 +6,7 @@ export function MainScheduleSection() {
 
   return (
     <div className="h-[180px] w-full bg-primary text-primary-foreground">
-      <div className="flex h-full items-center justify-center text-center xs:gap-[17px] sm:flex-row sm:gap-[161px] md:flex-row md:gap-[10px] lg:flex-col lg:gap-[7px] xl:flex-col xl:gap-[7px] xxl:flex-col xxl:gap-[7px]">
+      <div className="flex h-full items-center justify-center text-center xs:gap-[1rem] sm:flex-row sm:gap-[1rem] md:flex-row md:gap-[1rem] lg:flex-col lg:gap-[7px] xl:flex-col xl:gap-[7px] xxl:flex-col xxl:gap-[7px]">
         <div className="rounded bg-background px-[2rem] py-1 font-semibold text-primary sm:text-xl md:text-xl lg:text-2xl xl:text-2xl xxl:text-2xl">
           대동제
         </div>

diff --git a/src/pages/main/containers/NoticeSection.tsx b/src/pages/main/containers/NoticeSection.tsx
@@ -30,7 +30,7 @@ const NoticeSection = () => {
   const { data, noticeCount } = useNoticePost({
     boardCode: '공지사항게시판',
     groupCode: '중앙기구',
-    memberCode: selectedSubcategories === '전체' ? undefined : selectedSubcategories,
+    memberCode: selectedSubcategories === '전체' ? '' : selectedSubcategories,
     take,
   });
 
@@ -54,7 +54,7 @@ const NoticeSection = () => {
       <Spacing size={width > 390 ? 32 : 22} direction="vertical" />
       <div className="flex flex-col md:items-center lg:items-center xl:items-center xxl:items-center">
         {noticeCount ? (
-          <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pr-[1.063rem] scrollbar-hide xs:pl-[3.125rem] sm:pl-[3.125rem] md:pl-[3.125rem] lg:px-[12.5rem] xl:px-[12.5rem] xxl:px-[12.5rem]">
+          <div className="flex w-[calc(100dvw-3.125rem)] items-start justify-start gap-[1.063rem] overflow-x-scroll pl-0 pr-[1.063rem] scrollbar-hide lg:px-[11.0rem] xl:px-[11.0rem] xxl:px-[11.0rem]">
             {data?.data.postListResDto.map((notice) => (
               <PostCardNotice
                 key={notice.postId}

diff --git a/src/pages/main/hook/useNoticePost.tsx b/src/pages/main/hook/useNoticePost.tsx
@@ -14,8 +14,8 @@ export const useNoticePost = ({ boardCode, groupCode, memberCode, take }: UseNot
 
   const { data, isLoading } = useGetBoardPosts<GetNoticeBoardPostsResponse>({
     boardCode,
-    page,
     take,
+    page,
     groupCode,
     memberCode,
   });

diff --git a/src/pages/notice/noticeEdit/component/ImagePreview.tsx b/src/pages/notice/noticeEdit/component/ImagePreview.tsx
@@ -36,7 +36,10 @@ export function ImagePreview({ imageItem, onRemove = () => {}, onClick = () => {
           onRemove();
         }}
       >
-        <XCircle size={32} color="#2F4BF7" weight="fill" />
+        <div className="relative">
+          <div className="absolute inset-0 m-auto h-[24px] w-[24px] rounded-full bg-white" />
+          <XCircle size={32} color="#2F4BF7" weight="fill" className="relative z-10" />
+        </div>
       </button>
     </div>
   );

diff --git a/src/pages/notice/noticeEdit/container/noticeEditContentSection.tsx b/src/pages/notice/noticeEdit/container/noticeEditContentSection.tsx
@@ -1,6 +1,7 @@
 import { useState, useEffect, useRef } from 'react';
 import { Editor } from '@toast-ui/react-editor';
 import '@toast-ui/editor/dist/toastui-editor.css';
+import { useBlockImageUpload } from '@/hooks/editor/useBlockImageUpload';
 
 interface NoticeEditContentProps {
   onContentChange: (content: string) => void;
@@ -27,6 +28,8 @@ export function NoticeEditContentSection({ onContentChange, initialValue = '' }:
     }
   };
 
+  useBlockImageUpload(editorRef);
+
   useEffect(() => {
     handleResize();
     window.addEventListener('resize', handleResize);

diff --git a/src/pages/notice/noticeEdit/hook/useNoticeEdit.ts b/src/pages/notice/noticeEdit/hook/useNoticeEdit.ts
@@ -29,6 +29,11 @@ export function useNoticeEdit() {
 
   const handleSubmit = async () => {
     try {
+      if (images.length === 0) {
+        alert('이미지 파일을 1개 이상 추가해주세요.');
+        return;
+      }
+
       const uploadResponse = await uploadFiles({
         boardCode: '공지사항게시판',
         files,

diff --git a/src/pages/notice/noticePatch/container/noticePatchImageSection.tsx b/src/pages/notice/noticePatch/container/noticePatchImageSection.tsx
@@ -8,19 +8,23 @@ interface AuditPatchImageSectionProps {
 
 export function NoticePatchImageSection({ imageList, thumbnailImage, setThumbnailImage }: AuditPatchImageSectionProps) {
   return (
-    <div className="px-[200px] xs:px-[30px] sm:px-[30px] md:px-[30px] lg:px-[30px]">
-      <div className="mr-[1rem] mt-[12px] flex h-auto w-full flex-row items-center justify-start gap-4 overflow-x-auto whitespace-nowrap rounded-xs border-[0.125rem] border-gray-300 p-[1rem]">
-        <div className="flex max-w-full flex-row gap-4">
-          {imageList.map((image, index) => (
-            <ImagePreview
-              key={image + index}
-              imageItem={image}
-              isThumbnail={thumbnailImage === image}
-              onClick={() => setThumbnailImage(image)}
-            />
-          ))}
+    <>
+      <div
+        className={imageList.length === 0 ? 'hidden' : 'px-[200px] xs:px-[30px] sm:px-[30px] md:px-[30px] lg:px-[30px]'}
+      >
+        <div className="mr-[1rem] mt-[12px] flex h-auto w-full flex-row items-center justify-start gap-4 overflow-x-auto whitespace-nowrap rounded-xs border-[0.125rem] border-gray-300 p-[1rem]">
+          <div className="flex max-w-full flex-row gap-4">
+            {imageList.map((image, index) => (
+              <ImagePreview
+                key={image + index}
+                imageItem={image}
+                isThumbnail={thumbnailImage === image}
+                onClick={() => setThumbnailImage(image)}
+              />
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/src/pages/partnership/partnershipEdit/component/ImagePreview.tsx b/src/pages/partnership/partnershipEdit/component/ImagePreview.tsx
@@ -37,7 +37,10 @@ export function ImagePreview({ imageItem, onRemove, onClick, isThumbnail }: Imag
             onRemove();
           }}
         >
-          <XCircle size={32} color="#2F4BF7" weight="fill" />
+          <div className="relative">
+            <div className="absolute inset-0 m-auto h-[24px] w-[24px] rounded-full bg-white" />
+            <XCircle size={32} color="#2F4BF7" weight="fill" className="relative z-10" />
+          </div>
         </button>
       )}
     </div>

diff --git a/src/pages/partnership/partnershipEdit/container/PartnershipEditContentSection.tsx b/src/pages/partnership/partnershipEdit/container/PartnershipEditContentSection.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect, useRef } from 'react';
 import { Editor } from '@toast-ui/react-editor';
 import '@toast-ui/editor/dist/toastui-editor.css';
 import { useResize } from '@/hooks/useResize';
+import { useBlockImageUpload } from '@/hooks/editor/useBlockImageUpload';
 
 interface PartnershipEditContentProps {
   onContentChange: (content: string) => void;
@@ -15,6 +16,8 @@ export function PartnershipEditContentSection({ onContentChange, initialValue =
 
   const { width } = useResize();
 
+  useBlockImageUpload(editorRef);
+
   useEffect(() => {
     if (width <= 1080) {
       setEditorHeight('300px');

diff --git a/src/pages/partnership/partnershipEdit/hook/usePartnershipEdit.ts b/src/pages/partnership/partnershipEdit/hook/usePartnershipEdit.ts
@@ -29,6 +29,14 @@ export function usePartnershipEdit() {
 
   const handleSubmit = async () => {
     try {
+      if (images.length === 0) {
+        alert('이미지 파일을 1개 이상 추가해주세요.');
+        return;
+      }
+      if (category === '') {
+        alert('카테고리를 선택해주세요.');
+        return;
+      }
       const uploadResponse = await uploadFiles({
         boardCode: '제휴게시판',
         files,

diff --git a/src/pages/partnership/partnershipPatch/container/PartnershipPatchImageSection.tsx b/src/pages/partnership/partnershipPatch/container/PartnershipPatchImageSection.tsx
@@ -12,20 +12,23 @@ export function PartnershipPatchImageSection({
   setThumbnailImage,
 }: PartnershipPatchImageSectionProps) {
   return (
-    <div className="px-[200px] xs:px-[30px] sm:px-[30px] md:px-[30px] lg:px-[30px]">
-      <div className="mt-[12px] flex h-[270px] w-full flex-row items-center justify-start gap-4 overflow-x-auto whitespace-nowrap rounded-xs border-[0.125rem] border-gray-300 p-[1rem]">
-        <div className="flex max-w-full flex-row gap-4">
-          {imageList.map((image, index) => (
-            <ImagePreview
-              key={image + index}
-              imageItem={image}
-              isThumbnail={thumbnailImage === image}
-              onRemove={() => {}}
-              onClick={() => setThumbnailImage(image)}
-            />
-          ))}
+    <>
+      <div
+        className={imageList.length === 0 ? 'hidden' : 'px-[200px] xs:px-[30px] sm:px-[30px] md:px-[30px] lg:px-[30px]'}
+      >
+        <div className="mr-[1rem] mt-[12px] flex h-auto w-full flex-row items-center justify-start gap-4 overflow-x-auto whitespace-nowrap rounded-xs border-[0.125rem] border-gray-300 p-[1rem]">
+          <div className="flex max-w-full flex-row gap-4">
+            {imageList.map((image, index) => (
+              <ImagePreview
+                key={image + index}
+                imageItem={image}
+                isThumbnail={thumbnailImage === image}
+                onClick={() => setThumbnailImage(image)}
+              />
+            ))}
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 }