Merge pull request #228 from boostcampwm-2024/feature-dev-hotfix

[feature-dev-hotfix] 비회원 AI 변환 블락

Author: Minju9187

client/src/components/MindMapMainSection/ControlSection/TextUpload.tsx

@@ -14,6 +14,7 @@ export default function TextUpload() {
     useUpload();
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
   const { open, openModal, closeModal } = useModal();
+  const isAuthenticated = useConnectionStore((state) => state.token);
 
   function textUploadValidation() {
     if (content.length < MIN_TEXT_UPLOAD_LIMIT) {
@@ -24,12 +25,12 @@ export default function TextUpload() {
   }
   function openConfirmModal() {
     if (availabilityInform) return;
+    if (!textUploadValidation()) return;
     openModal();
   }
 
   function handleAiProcessButton() {
     closeModal();
-    if (!textUploadValidation()) return;
     updateErrorMsg("");
     handleSocketEvent({ actionType: "aiRequest", payload: { aiContent: content } });
   }
@@ -49,7 +50,7 @@ export default function TextUpload() {
             maxLength={MAX_TEXT_UPLOAD_LIMIT}
           />
           <div className="flex justify-between text-grayscale-400">
-            <p>AI 변환 남은 횟수 : {aiCount}번</p>
+            {isAuthenticated ? <p>AI 변환 남은 횟수 : {aiCount}번</p> : <p>비회원은 AI 변환 기능을 사용할 수 없어요</p>}
             <p className="text-right text-grayscale-400">
               {content.length}/{MAX_TEXT_UPLOAD_LIMIT}
             </p>

client/src/components/MindMapMainSection/ControlSection/VoiceFileUpload.tsx

@@ -23,6 +23,7 @@ export default function VoiceFileUpload() {
   const { aiCount, updateLoadingStatus } = useNodeListContext();
   const handleSocketEvent = useConnectionStore((state) => state.handleSocketEvent);
   const propagateError = useConnectionStore((state) => state.propagateError);
+  const isAuthenticated = useConnectionStore((state) => state.token);
   const [key, setKey] = useState(0);
 
   function fileValidation(file) {
@@ -39,7 +40,6 @@ export default function VoiceFileUpload() {
 
   async function sendAudioFile() {
     closeModal();
-    if (!fileValidation(file)) return;
     updateErrorMsg("");
     handleSocketEvent({ actionType: "audioAiRequest" });
     try {
@@ -57,14 +57,19 @@ export default function VoiceFileUpload() {
 
   function openConfirmModal() {
     if (availabilityInform) return;
+    if (!fileValidation(file)) return;
     openModal();
   }
 
   return (
     <>
       <div className="flex h-full flex-col text-grayscale-100">
         <UploadBox key={key} file={file} setFile={setFile} />
-        <p className="mb-5 mt-1 text-grayscale-400">AI 변환 남은 횟수 : {aiCount}번</p>
+        {isAuthenticated ? (
+          <p className="mb-5 mt-1 text-grayscale-400">AI 변환 남은 횟수 : {aiCount}번</p>
+        ) : (
+          <p className="mb-5 mt-1 text-grayscale-400">비회원은 AI 변환 기능을 사용할 수 없어요</p>
+        )}
         <div className="mb-5 flex w-full flex-col gap-1">
           <Button
             className="rounded-xl bg-bm-blue p-3 transition hover:brightness-90"

client/src/hooks/useUpload.ts

@@ -8,6 +8,7 @@ export default function useUpload() {
   const { aiCount } = useNodeListContext();
   const [availabilityInform, setAvailabilityInform] = useState("");
   const [errorMsg, setErrorMsg] = useState("");
+  const isAuthenticated = useConnectionStore((state) => state.token);
 
   const ownerAvailability = role === "owner";
 
@@ -24,6 +25,10 @@ export default function useUpload() {
   }
 
   function checkAvailability() {
+    if (!isAuthenticated) {
+      setAvailabilityInform("비회원은 AI 변환 기능을 사용할 수 없어요");
+      return;
+    }
     if (!ownerAvailability) {
       setAvailabilityInform("마인드맵 소유자만 AI 변환을 할 수 있어요");
       return;