Merge pull request #55 from TreeNut-KR/develop

Develop

Author: CutTheWire

mysql/migrations/V1.1.4__init.sql

@@ -0,0 +1,2 @@
+ALTER TABLE users
+MODIFY COLUMN login_type ENUM('LOCAL', 'KAKAO', 'GOOGLE', 'NAVER') DEFAULT 'LOCAL';

mysql/migrations/V1.1.5__init.sql

@@ -0,0 +1,29 @@
+-- 기존 소셜 로그인 사용자들을 VIP로 업데이트
+UPDATE users 
+SET membership = 'VIP' 
+WHERE login_type IN ('KAKAO', 'GOOGLE', 'NAVER');
+
+-- 새로 가입하는 소셜 로그인 사용자들을 자동으로 VIP로 설정하는 트리거
+DELIMITER $$
+
+CREATE TRIGGER update_membership_on_insert
+    BEFORE INSERT ON users
+    FOR EACH ROW
+BEGIN
+    IF NEW.login_type IN ('KAKAO', 'GOOGLE', 'NAVER') THEN
+        SET NEW.membership = 'VIP';
+    END IF;
+END$$
+
+CREATE TRIGGER update_membership_on_update
+    BEFORE UPDATE ON users
+    FOR EACH ROW
+BEGIN
+    IF NEW.login_type IN ('KAKAO', 'GOOGLE', 'NAVER') THEN
+        SET NEW.membership = 'VIP';
+    ELSEIF NEW.login_type = 'LOCAL' AND OLD.login_type IN ('KAKAO', 'GOOGLE', 'NAVER') THEN
+        SET NEW.membership = 'BASIC';
+    END IF;
+END$$
+
+DELIMITER ;

nginx/nginx.conf

@@ -142,6 +142,34 @@ http {
             add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
             add_header 'Access-Control-Allow-Headers' '*' always;
         }
+
+        # 네이버 로그인 처리
+        location /server/user/social/naver/login {
+            proxy_pass http://springboot:8080;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            add_header 'Access-Control-Allow-Origin' '$http_origin' always;
+            add_header 'Access-Control-Allow-Credentials' 'true' always;
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' '*' always;
+        }
+
+        # 네이버 OAuth 콜백 처리 (필요시)
+        location /server/user/social/naver/redirect {
+            proxy_pass http://springboot:8080;
+            proxy_set_header Host $host;
+            proxy_set_header X-Real-IP $remote_addr;
+            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+            proxy_set_header X-Forwarded-Proto $scheme;
+
+            add_header 'Access-Control-Allow-Origin' '$http_origin' always;
+            add_header 'Access-Control-Allow-Credentials' 'true' always;
+            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
+            add_header 'Access-Control-Allow-Headers' '*' always;
+        }
     }
 }
 

nginx/react-frontpage/src/App.tsx

@@ -65,6 +65,7 @@ const AppRoutes: React.FC = () => {
             <Route index element={<Login />} /> {/* / 경로에서 Login */}
             <Route path="loginMain" element={<Login />} />
             <Route path="/social/kakao/redirect" element={<KakaoCallback />} />
+            <Route path="/social/naver/redirect" element={<Login />} /> 
             <Route path="/register" element={<Register />} /> {/* 회원가입 단독 페이지 */}
           </Route>
         </Routes>

nginx/react-frontpage/src/Component/Chatting/Chatting.tsx

@@ -576,7 +576,7 @@ const Chatting: React.FC<ChattingProps> = ({ messages, setMessages, onSend }) =>
 
       <div
         className={[
-          "flex flex-col text-white w-full max-w-3xl bg-gray-900",
+          "flex flex-col text-white w-full max-w-5xl bg-gray-900",
           isIOS() ? "h-full" : "h-full"
         ].join(" ")}
         style={isIOS() ? { minHeight: "100dvh", maxHeight: "100dvh" } : {}}

nginx/react-frontpage/src/Component/Chatting/Components/ChatMessage.tsx

@@ -34,34 +34,6 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ text, className, user, retry,
     });
   };
 
-  // 꼬리표 색상 추출 함수
-  const getTailColorClass = (className: string | undefined, direction: 'left' | 'right') => {
-    if (!className) return '';
-    const bgClass = className.split(' ').find(c => c.startsWith('bg-'));
-    if (!bgClass) return '';
-    // bg-indigo-500 -> border-l-indigo-500 또는 border-r-indigo-500
-    return direction === 'left'
-      ? bgClass.replace('bg-', 'border-r-')
-      : bgClass.replace('bg-', 'border-l-');
-  };
-
-  // 꼬리표 색상 추출 함수 (bg- 색상값을 실제 hex로 변환)
-  const getTailColorStyle = (className: string | undefined) => {
-    if (!className) return {};
-    const bgClass = className.split(' ').find(c => c.startsWith('bg-'));
-    if (!bgClass) return {};
-    // Tailwind의 주요 색상만 매핑 (필요시 추가)
-    const colorMap: { [key: string]: string } = {
-      'bg-indigo-500': '#4F46E5',
-      'bg-blue-500': '#3b82f6',
-      'bg-gray-600': '#4b5563',
-      'bg-purple-500': '#a21caf',
-      'bg-green-500': '#22c55e',
-      // 필요시 추가
-    };
-    return { borderLeftColor: colorMap[bgClass] || '#6366f1', borderRightColor: colorMap[bgClass] || '#6366f1' };
-  };
-
   if (isIntroMessage) {
     // 환영 메시지는 별도 레이아웃으로 분리 (배경색 제거)
     return (
@@ -77,11 +49,11 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ text, className, user, retry,
     <div
       ref={messageRef}
       className={`
-        relative p-3 rounded-lg
-        max-w-[70%] max-sm:max-w-[80%]
-        break-words mb-6
-        text-[1rem] max-sm:text-[0.95rem]
-        ${className}
+        ${user === "나" 
+          ? "relative p-3 rounded-lg max-w-[80%] max-sm:max-w-[85%] break-words mb-6 text-[1rem] max-sm:text-[0.95rem]"
+          : "relative p-0 max-w-[90%] max-sm:max-w-[95%] break-words mb-6 text-[1rem] max-sm:text-[0.95rem] bg-transparent border-none"
+        }
+        ${user === "나" ? className : ""}
       `}
     >
       {/* 유저 메시지면 메시지 외부 좌측에 재전송 버튼 항상 표시 */}
@@ -94,111 +66,115 @@ const ChatMessage: React.FC<ChatMessageProps> = ({ text, className, user, retry,
           ↻
         </button>
       )}
-      <ReactMarkdown
-        remarkPlugins={[remarkGfm, remarkBreaks]}
-        rehypePlugins={[rehypeRaw]}
-        components={{
-          // 모바일에서 마크다운 요소들의 텍스트 크기를 더 작게
-          p: ({ node, ...props }) => <p className="text-[1.05rem] max-sm:text-[0.8rem]" {...props} />,
-          h1: ({ node, ...props }) => <h1 className="text-[1.5rem] max-sm:text-[1.05rem] font-bold my-2" {...props} />,
-          h2: ({ node, ...props }) => <h2 className="text-[1.3rem] max-sm:text-[1rem] font-bold my-2" {...props} />,
-          h3: ({ node, ...props }) => <h3 className="text-[1.1rem] max-sm:text-[0.95rem] font-bold my-1" {...props} />,
-          h4: ({ node, ...props }) => <h4 className="text-[1rem] max-sm:text-[0.9rem] font-bold my-1" {...props} />,
-          ul: ({ node, ...props }) => <ul className="pl-5 max-sm:text-[0.8rem] list-disc my-2" {...props} />,
-          ol: ({ node, ...props }) => <ol className="pl-5 max-sm:text-[0.8rem] list-decimal my-2" {...props} />,
-          li: ({ node, ...props }) => <li className="my-1 max-sm:my-[0.15rem]" {...props} />,
-          blockquote: ({ node, ...props }) => <blockquote className="border-l-4 pl-3 italic border-gray-400 max-sm:text-[0.8rem]" {...props} />,
-          code: ({ node, children, className, ...props }) => {
-            const isInline = !(className && className.includes("language-"));
-            const codeString = String(children).trim();
-            const language = className?.replace("language-", "") || "javascript";
-            if (isInline) {
+      
+      {/* AI 답변용 아바타 및 컨테이너 */}
+      {user !== "나" && (
+        <div className="flex items-start gap-3 mb-2">
+          <div className="w-8 h-8 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold flex-shrink-0">
+            AI
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-gray-300 text-sm font-medium mb-1">Assistant</div>
+          </div>
+        </div>
+      )}
+      
+      <div className={user === "나" ? "" : "ml-11"}>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm, remarkBreaks]}
+          rehypePlugins={[rehypeRaw]}
+          components={{
+            // 모바일에서 마크다운 요소들의 텍스트 크기를 더 작게
+            p: ({ node, ...props }) => <p className={`${user === "나" ? "text-[1.05rem] max-sm:text-[0.8rem]" : "text-gray-100 text-[1rem] max-sm:text-[0.9rem] leading-relaxed mb-3"}`} {...props} />,
+            h1: ({ node, ...props }) => <h1 className={`${user === "나" ? "text-[1.5rem] max-sm:text-[1.05rem] font-bold my-2" : "text-gray-100 text-[1.4rem] max-sm:text-[1.2rem] font-bold my-3"}`} {...props} />,
+            h2: ({ node, ...props }) => <h2 className={`${user === "나" ? "text-[1.3rem] max-sm:text-[1rem] font-bold my-2" : "text-gray-100 text-[1.2rem] max-sm:text-[1.1rem] font-bold my-3"}`} {...props} />,
+            h3: ({ node, ...props }) => <h3 className={`${user === "나" ? "text-[1.1rem] max-sm:text-[0.95rem] font-bold my-1" : "text-gray-100 text-[1.1rem] max-sm:text-[1rem] font-bold my-2"}`} {...props} />,
+            h4: ({ node, ...props }) => <h4 className={`${user === "나" ? "text-[1rem] max-sm:text-[0.9rem] font-bold my-1" : "text-gray-100 text-[1rem] max-sm:text-[0.95rem] font-bold my-2"}`} {...props} />,
+            ul: ({ node, ...props }) => <ul className={`pl-5 list-disc my-2 ${user === "나" ? "max-sm:text-[0.8rem]" : "text-gray-100 max-sm:text-[0.9rem]"}`} {...props} />,
+            ol: ({ node, ...props }) => <ol className={`pl-5 list-decimal my-2 ${user === "나" ? "max-sm:text-[0.8rem]" : "text-gray-100 max-sm:text-[0.9rem]"}`} {...props} />,
+            li: ({ node, ...props }) => <li className={`my-1 max-sm:my-[0.15rem] ${user !== "나" ? "text-gray-100" : ""}`} {...props} />,
+            blockquote: ({ node, ...props }) => <blockquote className={`border-l-4 pl-3 italic my-2 ${user === "나" ? "border-gray-400 max-sm:text-[0.8rem]" : "border-blue-400 text-gray-200 max-sm:text-[0.9rem]"}`} {...props} />,
+            code: ({ node, children, className, ...props }) => {
+              const isInline = !(className && className.includes("language-"));
+              const codeString = String(children).trim();
+              const language = className?.replace("language-", "") || "javascript";
+              if (isInline) {
+                return (
+                  <code className={`px-1 py-[0.5px] rounded-sm max-sm:text-[0.7rem] ${user === "나" ? "bg-[#222]" : "bg-gray-700 text-gray-100"}`} {...props}>
+                    {children}
+                  </code>
+                );
+              }
               return (
-                <code className="bg-[#222] px-1 py-[0.5px] rounded-sm max-sm:text-[0.7rem]" {...props}>
-                  {children}
-                </code>
-              );
-            }
-            return (
-              <div className="relative my-2">
-                <div
-                  className="rounded-lg"
-                  style={{
-                    overflowX: 'auto',
-                    width: '100%',
-                    maxWidth: '100%',
-                  }}
-                >
-                  <SyntaxHighlighter
-                    language={language}
-                    style={atomDark}
-                    customStyle={{
-                      borderRadius: 8,
-                      fontSize: window.innerWidth <= 640 ? '0.92rem' : '0.98rem',
-                      padding: window.innerWidth <= 640 ? '0.8em 0.7em' : '0.7em 0.8em',
-                      margin: 0,
-                      background: window.innerWidth <= 640 ? '#23232b' : '#18181b',
+                <div className="relative my-4">
+                  <div
+                    className="rounded-lg overflow-hidden"
+                    style={{
                       overflowX: 'auto',
-                      minWidth: 600, // 코드블럭이 컨테이너보다 넓게
-                      width: 'fit-content', // 코드 길이에 따라 넓이 결정
-                      maxWidth: 'none',     // 최대 넓이 제한 해제
+                      width: '100%',
+                      maxWidth: '100%',
+                    }}
+                  >
+                    <SyntaxHighlighter
+                      language={language}
+                      style={atomDark}
+                      customStyle={{
+                        borderRadius: 8,
+                        fontSize: window.innerWidth <= 640 ? '0.92rem' : '0.98rem',
+                        padding: window.innerWidth <= 640 ? '0.8em 0.7em' : '0.7em 0.8em',
+                        margin: 0,
+                        background: '#1a1a1a',
+                        overflowX: 'auto',
+                        minWidth: 600,
+                        width: 'fit-content',
+                        maxWidth: 'none',
+                      }}
+                      className="whitespace-pre break-normal"
+                      wrapLongLines={false}
+                      showLineNumbers={window.innerWidth <= 640}
+                    >
+                      {codeString}
+                    </SyntaxHighlighter>
+                  </div>
+                  <button
+                    type="button"
+                    onClick={() => copyToClipboard(codeString)}
+                    className="absolute top-2 right-2 bg-gray-700 text-white px-2 py-1 text-xs rounded-md hover:bg-gray-600 transition"
+                    style={{
+                      fontSize: window.innerWidth <= 640 ? '0.7rem' : '0.8rem',
+                      padding: window.innerWidth <= 640 ? '2px 6px' : undefined,
                     }}
-                    className="whitespace-pre break-normal"
-                    wrapLongLines={false}
-                    showLineNumbers={window.innerWidth <= 640}
                   >
-                    {codeString}
-                  </SyntaxHighlighter>
+                    {copied ? "✅ 복사됨" : "📋 복사"}
+                  </button>
                 </div>
-                <button
-                  type="button"
-                  onClick={() => copyToClipboard(codeString)}
-                  className="absolute top-2 right-2 bg-gray-700 text-white px-2 py-1 text-xs rounded-md hover:bg-gray-600 transition"
-                  style={{
-                    fontSize: window.innerWidth <= 640 ? '0.7rem' : '0.8rem',
-                    padding: window.innerWidth <= 640 ? '2px 6px' : undefined,
-                  }}
-                >
-                  {copied ? "✅ 복사됨" : "📋 복사"}
-                </button>
-              </div>
-            );
-          },
-          a: ({ node, ...props }) => (
-            <a
-              style={{ color: "lightblue" }}
-              target="_blank"
-              rel="noopener noreferrer"
-              className="max-sm:text-[0.8rem]"
-              {...props}
-            />
-          ),
-          img: ({ node, ...props }) => <img style={{ maxWidth: "100%", borderRadius: "8px" }} {...props} />,
-        }}
-      >
-        {String(text)}
-      </ReactMarkdown>
-      {/* 꼬리표를 메시지 박스 뒤에 출력 */}
-      {!isIntroMessage && (
-        user === "나" ? (
-          <div
-            className="absolute right-[-12px] bottom-2 w-0 h-0 border-t-[12px] border-b-[12px] border-l-[14px]"
-            style={{ 
-              borderTopColor: "transparent", 
-              borderBottomColor: "transparent",
-              borderLeftColor: messageBgColor || "currentColor"
-            }}
-          ></div>
-        ) : (
-          <div
-            className="absolute left-[-12px] bottom-2 w-0 h-0 border-t-[12px] border-b-[12px] border-r-[14px]"
-            style={{ 
-              borderTopColor: "transparent", 
-              borderBottomColor: "transparent",
-              borderRightColor: messageBgColor || "currentColor"
-            }}
-          ></div>
-        )
+              );
+            },
+            a: ({ node, ...props }) => (
+              <a
+                className={`underline hover:no-underline transition-all max-sm:text-[0.8rem] ${user === "나" ? "text-blue-400" : "text-blue-300"}`}
+                target="_blank"
+                rel="noopener noreferrer"
+                {...props}
+              />
+            ),
+            img: ({ node, ...props }) => <img className="max-w-full rounded-lg my-2" alt="" {...props} />,
+          }}
+        >
+          {String(text)}
+        </ReactMarkdown>
+      </div>
+      
+      {/* 꼬리표를 유저 메시지에만 표시 */}
+      {!isIntroMessage && user === "나" && (
+        <div
+          className="absolute right-[-12px] bottom-2 w-0 h-0 border-t-[12px] border-b-[12px] border-l-[14px]"
+          style={{ 
+            borderTopColor: "transparent", 
+            borderBottomColor: "transparent",
+            borderLeftColor: messageBgColor || "currentColor"
+          }}
+        ></div>
       )}
     </div>
   );