[Refactor/#60] self qa

src/pages/home/components/scrollText/ScrollText.tsx

@@ -3,7 +3,7 @@ import * as styles from '@pages/home/components/scrollText/scrollText.css';
 
 const ScrollText = () => {
   const { scrollY } = useScroll();
-  const BREAKPOINT = 2480;
+  const BREAKPOINT = 2400;
 
   const positionY = useTransform(scrollY, (y) =>
     y < BREAKPOINT ? 'fixed' : 'absolute',

src/pages/home/components/sectionBottom/SectionBottom.tsx

@@ -20,9 +20,9 @@ const SectionBottom = () => {
     }
   }, []);
 
-  const FADE_IN_START = offsetTop - window.innerHeight / 2 + 200;
-  const FADE_IN_GAP = 200;
-  const FADE_OUT_GAP = 200;
+  const FADE_IN_START = offsetTop - window.innerHeight / 2;
+  const FADE_IN_GAP = 150;
+  const FADE_OUT_GAP = 150;
 
   const opacityIn = useTransform(
     scrollY,
@@ -33,7 +33,7 @@ const SectionBottom = () => {
   const translateYIn = useTransform(
     scrollY,
     [FADE_IN_START, FADE_IN_START + FADE_IN_GAP],
-    [50, 0],
+    [-100, -150],
   );
 
   const opacityOut = useTransform(

src/pages/home/components/sectionBottom/sectionBottom.css.ts

@@ -4,7 +4,7 @@ import { style } from '@vanilla-extract/css';
 const sectionBottomWrapper = style({
   position: 'relative',
   width: '100%',
-  height: '88.8rem',
+  height: '93rem',
   background: 'linear-gradient(180deg, #82acff 0%, #D7ECFF 85%)',
   overflow: 'hidden',
 });

src/pages/home/components/sectionTop/SectionTop.tsx

@@ -65,7 +65,6 @@ const SectionTop = () => {
 
   return (
     <div className={styles.sectionTopWrapper}>
-      {/* 전체 wrapper: translateY만 적용 */}
       <motion.div
         style={{
           y: wrapperTranslateY,
@@ -80,17 +79,19 @@ const SectionTop = () => {
         <motion.div
           style={{
             opacity: groupOpacity,
-            maxWidth: '768px',
+            maxWidth: 1180,
             margin: '0 auto',
             display: 'flex',
             justifyContent: 'flex-end',
-            paddingRight: '3rem',
+            paddingRight: '3.6rem',
           }}
         >
           <IcMainGroup
-            width={425.5}
-            height={426}
-            style={{ willChange: 'opacity' }}
+            style={{
+              willChange: 'opacity',
+              width: 'clamp(425.5px, 60vw, 600px)',
+              height: 'auto',
+            }}
           />
         </motion.div>
 
@@ -107,7 +108,9 @@ const SectionTop = () => {
           <IcMainChat1
             width={168}
             height={68}
-            style={{ willChange: 'opacity' }}
+            style={{
+              willChange: 'opacity',
+            }}
           />
         </motion.div>
 

src/pages/home/components/sectionTop/sectionTop.css.ts

@@ -7,6 +7,6 @@ export const sectionTopWrapper = style({
   alignItems: 'center',
 
   width: '100%',
-  height: '249.8rem',
+  height: '256rem',
   background: 'linear-gradient(180deg, #2150EC 0%,#82acff 100%)',
 });

src/pages/home/home.css.ts

@@ -2,16 +2,24 @@ import { themeVars } from '@styles/theme.css';
 import { style } from '@vanilla-extract/css';
 
 export const floatingSolveBtn = style({
+  // 1. 버튼을 담을 '컨테이너'
   display: 'flex',
-  position: 'fixed',
   justifyContent: 'flex-end',
-
+  position: 'fixed',
   bottom: '2rem',
+  zIndex: themeVars.zIndex.one,
+
+  // 2. 컨테이너를 페이지 '메인 컨텐츠'와 똑같이
+  width: '100%',
+  maxWidth: '1180px',
+
+  // 3. 컨테이너를 화면 중앙에 배치
   left: '50%',
   transform: 'translateX(-50%)',
+
+  // 4. 컨테이너의 오른쪽 안쪽에 2rem 여백을 줌
   paddingRight: '2rem',
 
-  width: '100%',
-  maxWidth: '768px',
-  zIndex: themeVars.zIndex.one,
+  // padding이 너비에 영향을 주지 않도록 설정
+  boxSizing: 'border-box',
 });

src/pages/loginCallback/LoginCallback.tsx

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 import axios from 'axios';
 import { routePath } from '@routes/routePath';
@@ -10,8 +10,14 @@ import { API_URL } from '@/shared/constants/apiURL';
 
 const LoginCallback = () => {
   const navigate = useNavigate();
+  const hasRunRef = useRef(false);
 
   useEffect(() => {
+    if (hasRunRef.current) {
+      return;
+    }
+    hasRunRef.current = true;
+
     const params = new URLSearchParams(window.location.search);
     const code = params.get('code');
     const returnedState = params.get('state');

src/pages/my/my.css.ts

@@ -146,6 +146,8 @@ export const chipList = style({
 
 export const chipListWrapper = style({
   position: 'relative',
+  width: '100%',
+  maxWidth: '60rem',
 });
 
 export const chipGradientOverlay = style({

src/pages/solve/Solve.tsx

@@ -13,6 +13,19 @@ import {
   solutionStepsRef,
 } from './ChatLogic';
 
+const preloadImages = (urls: string[]): Promise<void> => {
+  const promises = urls.map((url) => {
+    return new Promise<void>((resolve, reject) => {
+      const img = new Image();
+      img.src = url;
+      img.onload = () => resolve();
+      img.onerror = () => reject(new Error(`Failed to load image: ${url}`));
+    });
+  });
+
+  return Promise.all(promises).then(() => undefined);
+};
+
 // 타입
 type StepItem = Record<`step ${number}`, string>;
 type AnswerItem = { answer: string };
@@ -26,6 +39,8 @@ const Solve = () => {
   const [downloadUrls, setDownloadUrls] = useState<string[]>([]);
   const [s3Key, setS3Key] = useState('');
   const [isPending, setIsPending] = useState(false);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadingSlots, setUploadingSlots] = useState<number[]>([]);
 
   const bottomRef = useRef<HTMLDivElement>(null);
   const { mutateAsync: requestSolutionMutate } = usePostAiChat();
@@ -37,10 +52,11 @@ const Solve = () => {
     requestAnimationFrame(() =>
       bottomRef.current?.scrollIntoView({ behavior: 'smooth' }),
     );
-  }, [chatList, isPending]);
+  }, [chatList, isPending, isUploading]);
 
   const addChat = (chat: Chat) => setChatList((prev) => [...prev, chat]);
   const addServerMessage = (text: string) => addChat({ from: 'server', text });
+
   const handleImageSelect = (url: string) =>
     addChat({ from: 'me', imageUrl: url });
 
@@ -53,7 +69,7 @@ const Solve = () => {
 
   // 토글 클릭 핸들러
   const handleTextSelect = (text: string) => {
-    if (isPending) {
+    if (isPending || isUploading) {
       return;
     }
     addChat({ from: 'me', text });
@@ -62,7 +78,12 @@ const Solve = () => {
       text !== '해결했어요!' &&
       (!imageUploaded || !s3Key || !downloadUrls.length)
     ) {
-      return addServerMessage('문제 이미지를 먼저 업로드 해주세요!');
+      return setTimeout(() => {
+        addChat({
+          from: 'server',
+          text: '문제 이미지를 먼저 업로드 해주세요!',
+        });
+      }, 300);
     }
 
     switch (text) {
@@ -149,7 +170,12 @@ const Solve = () => {
   };
 
   const handleSolved = () => {
-    addChat({ from: 'server', text: '문제 해결을 축하합니다!' });
+    setTimeout(() => {
+      addChat({
+        from: 'server',
+        text: '문제 해결을 축하합니다!',
+      });
+    }, 300);
     setTimeout(() => {
       addChat({
         from: 'server',
@@ -177,6 +203,13 @@ const Solve = () => {
         text: solutionStepsRef.current.map((s) => s.text).join('\n\n'),
       });
 
+      setTimeout(() => {
+        addChat({
+          from: 'server',
+          text: '새로운 문제를 질문하려면 카메라를 눌러주세요.',
+        });
+      }, 1000);
+
       // 토글 그대로 유지
       setToggleItems([
         '단계별 풀이를 알려줘',
@@ -194,49 +227,74 @@ const Solve = () => {
 
   // 파일 선택 핸들러
   const handleFileChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
+    // 1. 파일 선택 즉시 모달 닫기
+    setIsOpen(false);
+
     const files = e.target.files;
     if (!files || files.length < expectedCount) {
       addServerMessage(
         expectedCount === 1
           ? '문제 이미지 1장을 선택해주세요.'
           : '문제 이미지 1장, 풀이 이미지 1장을 선택해주세요.',
       );
+      e.target.value = '';
       return;
     }
 
+    // 2. 'me' 로딩 UI 시작 및 초기화
+    setUploadingSlots(Array.from({ length: expectedCount }, (_, i) => i));
+    setIsUploading(true);
+    const uploadedUrls: string[] = [];
+
     try {
       const {
         uploadUrls,
         downloadUrls: presignedUrls,
         s3Key: presignedKey,
       } = await getPresignedUrl(expectedCount);
-      const sortedFiles = Array.from(files).sort(
-        (a, b) => a.lastModified - b.lastModified,
-      );
 
+      // lastModified 정렬 로직 제거
+      const filesArray = Array.from(files);
+
+      // S3 업로드 루프: filesArray의 순서를 그대로 사용
+      // filesArray의 순서가 곧 사용자가 선택한 순서
       for (let i = 0; i < expectedCount; i++) {
         const response = await uploadToPresignedUrl(
           uploadUrls[i],
-          sortedFiles[i]!,
+          filesArray[i]!,
         );
         if (!response.ok) {
           throw new Error('S3 업로드 실패');
         }
-        handleImageSelect(presignedUrls[i]);
+        uploadedUrls.push(presignedUrls[i]);
       }
 
+      // 3. S3 업로드 완료 후, 로딩을 끄지 않고 프리로딩 시작
+      await preloadImages(uploadedUrls);
+
+      // 4. 프리로딩 완료 후, 로딩 제거하고 동시에 이미지 추가
+      setUploadingSlots([]);
+      setIsUploading(false);
+
+      // uploadedUrls는 사용자가 선택한 순서대로
+      uploadedUrls.forEach((url) => {
+        handleImageSelect(url);
+      });
+
       setS3Key(presignedKey);
       setDownloadUrls(presignedUrls);
       setImageUploaded(true);
     } catch {
+      // 5. 실패 시
       addServerMessage(
         '이미지 업로드 중 오류가 발생했습니다. 다시 시도해 주세요.',
       );
+      // 실패해도 로딩 상태는 초기화
+      setUploadingSlots([]);
+      setIsUploading(false);
     } finally {
-      // input 초기화 (같은 파일 다시 선택 가능하게)
+      // 6. 모든 작업이 끝나면 input 초기화
       e.target.value = '';
-      // 모달 닫기
-      setIsOpen(false);
     }
   };
 
@@ -282,14 +340,27 @@ const Solve = () => {
           </div>
         )}
 
+        {isUploading &&
+          uploadingSlots.map((_, index) => (
+            <div key={index} className={styles.chatBubbleRight}>
+              <div className={styles.chatMyText}>
+                <div className={styles.dots}>
+                  <span className={styles.dot} />
+                  <span className={styles.dot} />
+                  <span className={styles.dot} />
+                </div>
+              </div>
+            </div>
+          ))}
+
         <div ref={bottomRef} />
       </div>
 
       <Toggle
         items={toggleItems}
         onTextSelect={handleTextSelect}
         onCameraClick={() => setIsOpen(true)}
-        disabled={isPending}
+        disabled={isPending || isUploading}
       />
       <Modal
         isOpen={isOpen}

src/pages/solve/solve.css.ts

@@ -59,6 +59,12 @@ const chatServerText = style({
   ...themeVars.font.bodySmall,
 });
 
+const chatMyText = style({
+  color: themeVars.color.point,
+  wordBreak: 'break-word',
+  ...themeVars.font.bodySmall,
+});
+
 export {
   wrapper,
   chatContainer,
@@ -67,6 +73,7 @@ export {
   chatImage,
   chatText,
   chatServerText,
+  chatMyText,
 };
 
 const bounce = keyframes({
@@ -87,6 +94,9 @@ export const dot = style({
   backgroundColor: themeVars.color.point,
   animation: `${bounce} 1.2s infinite ease-in-out both`,
   selectors: {
+    [`${chatBubbleRight} &`]: {
+      backgroundColor: themeVars.color.white000,
+    },
     '&:nth-child(1)': { animationDelay: '0s' },
     '&:nth-child(2)': { animationDelay: '0.2s' },
     '&:nth-child(3)': { animationDelay: '0.4s' },