Merge branch 'dev' into refactor/#59

PROMAplatform · Oct 16, 2024 · 1798dd5 · 1798dd5
2 parents ed4db92 + bf0de5d
commit 1798dd5
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 11 deletions.
diff --git a/src/components/Chatting/components/Messages/ChattingMessages.jsx b/src/components/Chatting/components/Messages/ChattingMessages.jsx
@@ -8,7 +8,7 @@ import promaChattingProfile from "../../../../assets/images/promaChattingProfile
 import SkeletonMessage from "./SkeletonMessage";
 import filePreview from "../../../../assets/images/filePreview.svg";
 import MarkdownRenderer from "./MarkdownRenderer";
-import { B6 } from "../../../../styles/font-styles";
+// import { B6 } from "../../../../styles/font-styles";
 import styles from "./ChattingMessages.module.css";
 
 function ChattingMessages() {
@@ -91,9 +91,9 @@ function ChattingMessages() {
                                         className={styles.image}
                                     />
                                 </a>
-                                <B6 color="gray7" className={styles.fileName}>
+                                {/* <B6 color="gray7" className={styles.fileName}>
                                     {getFileName(message.messageFile)}
-                                </B6>
+                                </B6> */}
                             </div>
                         )}
                         {message.messageQuestion && (

diff --git a/src/components/Chatting/components/Prompt/PromptPreview.jsx b/src/components/Chatting/components/Prompt/PromptPreview.jsx
@@ -10,26 +10,34 @@ import { t } from "i18next";
 function PromptPreview() {
     const currentPrompt = useRecoilValue(currentPromptState);
     const setCurrentPrompt = useSetRecoilState(currentPromptState);
+
     function onDeleteHandler() {
         setCurrentPrompt(null);
     }
+
     return (
-        <div className={styles.container} data-tour="currentPrompt">
+        <div
+            className={`${styles.container} ${currentPrompt ? styles.containerActive : ""}`}
+            data-tour="currentPrompt"
+        >
             <div className={styles.iconContainer}>
                 <img src={blockIcon} alt="block" />
             </div>
             {currentPrompt ? (
                 <>
-                    <B5 color="gray6" className={styles.text}>
+                    <B5 className={styles.text}>
                         '{currentPrompt.name}'{" "}
                         {t(`input.currentPromptIntroduce`)}
                     </B5>
-                    <img src={clearIcon} alt="x" className={styles.clearIcon} onClick={onDeleteHandler}/>
+                    <img
+                        src={clearIcon}
+                        alt="x"
+                        className={styles.clearIcon}
+                        onClick={onDeleteHandler}
+                    />
                 </>
             ) : (
-                <B5 color="gray6" className={styles.text}>
-                    {t(`main.promptClickIntend`)}
-                </B5>
+                <B5 className={styles.text}>{t(`main.promptClickIntend`)}</B5>
             )}
         </div>
     );

diff --git a/src/components/Chatting/components/Prompt/PromptPreview.module.css b/src/components/Chatting/components/Prompt/PromptPreview.module.css
@@ -12,6 +12,24 @@
     background-color: var(--white);
     border-radius: 20px;
     box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
+    transition: all 0.3s ease;
+    box-shadow: 0 0 10px rgba(185, 127, 240, 0.8);
+}
+
+.containerActive {
+    background-color: none;
+    color: black;
+    box-shadow: 0 0 15px rgba(138, 43, 226, 0.6);
+    animation: glowing 1s ease-in-out infinite alternate;
+}
+
+@keyframes glowing {
+    from {
+        box-shadow: 0 0 25px rgba(184, 125, 239, 0.8);
+    }
+    to {
+        box-shadow: 0 0 25px rgba(138, 43, 226, 0.8);
+    }
 }
 
 .iconContainer {
@@ -21,9 +39,28 @@
 
 .text {
     margin: 0;
+    transition: color 0.3s ease;
+}
+.container .text {
+    color: rgb(0, 0, 0);
+}
+.containerActive .text {
+    color: rgb(0, 0, 0);
+    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
 }
 
 .clearIcon {
     width: 16px;
     cursor: pointer;
-}
+    transition:
+        transform 0.2s ease,
+        filter 0.3s ease;
+}
+
+.containerActive .clearIcon {
+    color: red;
+}
+
+.clearIcon:hover {
+    transform: scale(1.1);
+}
diff --git a/src/util/randomString.js b/src/util/randomString.js
@@ -0,0 +1,9 @@
+// 파일 확장자를 포함한 긴 랜덤 문자열 생성 함수
+export function generateRandomStringWithExtension(filename) {
+    const extension = filename.split(".").pop().toLowerCase();
+    const randomPart = Array(3)
+        .fill(0)
+        .map(() => Math.random().toString(36).substring(2))
+        .join("");
+    return `${randomPart}.${extension}`;
+}
diff --git a/src/util/s3Upload.js b/src/util/s3Upload.js
@@ -1,4 +1,5 @@
 import AWS from "aws-sdk";
+import { generateRandomStringWithExtension } from "./randomString";
 
 export const uploadS3 = async (file) => {
     const REGION = process.env.REACT_APP_REGION;
@@ -11,12 +12,13 @@ export const uploadS3 = async (file) => {
         accessKeyId: ACCESS_KEY_ID,
         secretAccessKey: SECRET_ACCESS_KEY,
     });
+    const randomFileName = generateRandomStringWithExtension(file.name);
 
     const upload = new AWS.S3.ManagedUpload({
         params: {
             ACL: "public-read",
             Bucket: BUCKET_NAME,
-            Key: `proma-files/${file.name}`,
+            Key: `proma-files/${randomFileName}`,
             Body: file,
             ContentType: file.type,
         },