From 9353a6e5dd9f6e6acf76557b6d9fd533ecb3c836 Mon Sep 17 00:00:00 2001
From: gaeun220 <gaeun2701@gmail.com>
Date: Mon, 10 Feb 2025 16:24:16 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=EC=8B=A0=EC=B2=AD=20=ED=8F=BC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

# Conflicts:
#	frontend/src/app/groups/[groupId]/ClientPage.tsx
---
 .../app/groups/[groupId]/apply/ClientPage.tsx | 110 ++++++++++++++++++
 .../src/app/groups/[groupId]/apply/page.tsx   |  11 ++
 2 files changed, 121 insertions(+)
 create mode 100644 frontend/src/app/groups/[groupId]/apply/ClientPage.tsx
 create mode 100644 frontend/src/app/groups/[groupId]/apply/page.tsx

diff --git a/frontend/src/app/groups/[groupId]/apply/ClientPage.tsx b/frontend/src/app/groups/[groupId]/apply/ClientPage.tsx
new file mode 100644
index 00000000..e0b948b5
--- /dev/null
+++ b/frontend/src/app/groups/[groupId]/apply/ClientPage.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+
+interface ClientPageProps {
+    groupId: string;
+}
+
+const ClientPage = ({ groupId }: ClientPageProps) => {
+    const router = useRouter();
+    const [formData, setFormData] = useState({ reason: "" });
+    const [token, setToken] = useState<string | undefined>(undefined);
+    const [loading, setLoading] = useState(true);
+
+    // 클라이언트에서 localStorage 접근하도록 useEffect 사용
+    useEffect(() => {
+        if (typeof window !== "undefined") {
+            const storedToken = localStorage.getItem("token");
+            setToken(storedToken || null);
+        }
+        setLoading(false);
+    }, []);
+
+    // 입력값 변경 핸들러
+    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        setFormData({ ...formData, [e.target.name]: e.target.value });
+    };
+
+    // 신청 폼 제출 핸들러
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+
+        // useEffect 실행이 끝나기 전에 submit되었을 경우, 다시 localStorage에서 확인
+        const currentToken = token ?? localStorage.getItem("token");
+
+        if (!currentToken) {
+            alert("로그인이 필요합니다.");
+            router.push("/login");
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/v1/groups/${groupId}`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    Authorization: `Bearer ${currentToken}`,
+                },
+                credentials: "include", // 인증 정보 포함 (CORS 문제 방지)
+                body: JSON.stringify(formData),
+            });
+
+            const contentType = response.headers.get("content-type");
+
+            console.log("Response Status:", response.status);
+            console.log("Response Content-Type:", contentType);
+
+            if (!response.ok) {
+                const errorMessage = contentType?.includes("application/json")
+                    ? (await response.json()).message
+                    : await response.text(); // HTML 에러 페이지일 경우
+
+                throw new Error(errorMessage || "신청에 실패했습니다.");
+            }
+
+            const data = await response.json();
+            alert(data.message);
+            router.push(`/groups/${groupId}`);
+        } catch (error) {
+            console.error("Error submitting application:", error);
+            alert(`오류 발생: ${error.message || "알 수 없는 오류"}`);
+        }
+    };
+
+    if (loading) {
+        return <p className="text-center text-gray-500 dark:text-gray-400">로딩 중...</p>;
+    }
+
+    return (
+        <div className="max-w-4xl mx-auto p-16 bg-white dark:bg-gray-900 rounded-xl shadow-xl">
+            <h2 className="text-3xl font-bold mb-10 text-gray-900 dark:text-gray-100">모임 신청</h2>
+            <form onSubmit={handleSubmit} className="space-y-8">
+                <div>
+                    <label className="block text-gray-700 dark:text-gray-300 text-lg font-bold mb-3">
+                        자기 소개
+                    </label>
+                    <textarea
+                        name="reason"
+                        value={formData.reason}
+                        onChange={handleChange}
+                        className="w-full h-52 px-5 py-4 border rounded-xl text-lg text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700"
+                        placeholder="성별, 나이 등 본인의 대한 소개를 자유롭게 작성해주세요."
+                        required
+                    />
+                </div>
+                <div className="flex">
+                    <button
+                        type="submit"
+                        className="px-6 py-3 border border-gray-700 dark:border-gray-400 text-gray-700 dark:text-gray-300 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600 transition"
+                    >
+                        신청하기
+                    </button>
+                </div>
+            </form>
+        </div>
+    );
+};
+
+export default ClientPage;
diff --git a/frontend/src/app/groups/[groupId]/apply/page.tsx b/frontend/src/app/groups/[groupId]/apply/page.tsx
new file mode 100644
index 00000000..eb1443e0
--- /dev/null
+++ b/frontend/src/app/groups/[groupId]/apply/page.tsx
@@ -0,0 +1,11 @@
+import ClientPage from "./ClientPage";
+
+interface Props {
+    params: {
+        groupId: string;
+    };
+}
+
+export default function ApplyPage({ params }: Props) {
+    return <ClientPage groupId={params.groupId} />;
+}

From b30dac61b0ca4d07b68d8367fc77bd79b8c844bb Mon Sep 17 00:00:00 2001
From: gaeun220 <gaeun2701@gmail.com>
Date: Tue, 11 Feb 2025 09:22:16 +0900
Subject: [PATCH 2/2] =?UTF-8?q?feat:=20=EB=AA=A8=EC=9D=B8=EC=8B=A0?=
 =?UTF-8?q?=EC=B2=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/groups/[groupId]/apply/ClientPage.tsx | 110 ------------------
 .../src/app/groups/[groupId]/apply/page.tsx   |  11 --
 .../app/groups/[groupId]/join/ClientPage.tsx  |  88 ++++++++++++++
 .../src/app/groups/[groupId]/join/page.tsx    |  14 +++
 4 files changed, 102 insertions(+), 121 deletions(-)
 delete mode 100644 frontend/src/app/groups/[groupId]/apply/ClientPage.tsx
 delete mode 100644 frontend/src/app/groups/[groupId]/apply/page.tsx
 create mode 100644 frontend/src/app/groups/[groupId]/join/ClientPage.tsx
 create mode 100644 frontend/src/app/groups/[groupId]/join/page.tsx

diff --git a/frontend/src/app/groups/[groupId]/apply/ClientPage.tsx b/frontend/src/app/groups/[groupId]/apply/ClientPage.tsx
deleted file mode 100644
index e0b948b5..00000000
--- a/frontend/src/app/groups/[groupId]/apply/ClientPage.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-"use client";
-
-import { useState, useEffect } from "react";
-import { useRouter } from "next/navigation";
-
-interface ClientPageProps {
-    groupId: string;
-}
-
-const ClientPage = ({ groupId }: ClientPageProps) => {
-    const router = useRouter();
-    const [formData, setFormData] = useState({ reason: "" });
-    const [token, setToken] = useState<string | undefined>(undefined);
-    const [loading, setLoading] = useState(true);
-
-    // 클라이언트에서 localStorage 접근하도록 useEffect 사용
-    useEffect(() => {
-        if (typeof window !== "undefined") {
-            const storedToken = localStorage.getItem("token");
-            setToken(storedToken || null);
-        }
-        setLoading(false);
-    }, []);
-
-    // 입력값 변경 핸들러
-    const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        setFormData({ ...formData, [e.target.name]: e.target.value });
-    };
-
-    // 신청 폼 제출 핸들러
-    const handleSubmit = async (e: React.FormEvent) => {
-        e.preventDefault();
-
-        // useEffect 실행이 끝나기 전에 submit되었을 경우, 다시 localStorage에서 확인
-        const currentToken = token ?? localStorage.getItem("token");
-
-        if (!currentToken) {
-            alert("로그인이 필요합니다.");
-            router.push("/login");
-            return;
-        }
-
-        try {
-            const response = await fetch(`/api/v1/groups/${groupId}`, {
-                method: "POST",
-                headers: {
-                    "Content-Type": "application/json",
-                    Authorization: `Bearer ${currentToken}`,
-                },
-                credentials: "include", // 인증 정보 포함 (CORS 문제 방지)
-                body: JSON.stringify(formData),
-            });
-
-            const contentType = response.headers.get("content-type");
-
-            console.log("Response Status:", response.status);
-            console.log("Response Content-Type:", contentType);
-
-            if (!response.ok) {
-                const errorMessage = contentType?.includes("application/json")
-                    ? (await response.json()).message
-                    : await response.text(); // HTML 에러 페이지일 경우
-
-                throw new Error(errorMessage || "신청에 실패했습니다.");
-            }
-
-            const data = await response.json();
-            alert(data.message);
-            router.push(`/groups/${groupId}`);
-        } catch (error) {
-            console.error("Error submitting application:", error);
-            alert(`오류 발생: ${error.message || "알 수 없는 오류"}`);
-        }
-    };
-
-    if (loading) {
-        return <p className="text-center text-gray-500 dark:text-gray-400">로딩 중...</p>;
-    }
-
-    return (
-        <div className="max-w-4xl mx-auto p-16 bg-white dark:bg-gray-900 rounded-xl shadow-xl">
-            <h2 className="text-3xl font-bold mb-10 text-gray-900 dark:text-gray-100">모임 신청</h2>
-            <form onSubmit={handleSubmit} className="space-y-8">
-                <div>
-                    <label className="block text-gray-700 dark:text-gray-300 text-lg font-bold mb-3">
-                        자기 소개
-                    </label>
-                    <textarea
-                        name="reason"
-                        value={formData.reason}
-                        onChange={handleChange}
-                        className="w-full h-52 px-5 py-4 border rounded-xl text-lg text-gray-900 dark:text-gray-100 bg-white dark:bg-gray-800 border-gray-300 dark:border-gray-700"
-                        placeholder="성별, 나이 등 본인의 대한 소개를 자유롭게 작성해주세요."
-                        required
-                    />
-                </div>
-                <div className="flex">
-                    <button
-                        type="submit"
-                        className="px-6 py-3 border border-gray-700 dark:border-gray-400 text-gray-700 dark:text-gray-300 rounded-lg bg-white dark:bg-gray-800 hover:bg-gray-700 hover:text-white dark:hover:bg-gray-600 transition"
-                    >
-                        신청하기
-                    </button>
-                </div>
-            </form>
-        </div>
-    );
-};
-
-export default ClientPage;
diff --git a/frontend/src/app/groups/[groupId]/apply/page.tsx b/frontend/src/app/groups/[groupId]/apply/page.tsx
deleted file mode 100644
index eb1443e0..00000000
--- a/frontend/src/app/groups/[groupId]/apply/page.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import ClientPage from "./ClientPage";
-
-interface Props {
-    params: {
-        groupId: string;
-    };
-}
-
-export default function ApplyPage({ params }: Props) {
-    return <ClientPage groupId={params.groupId} />;
-}
diff --git a/frontend/src/app/groups/[groupId]/join/ClientPage.tsx b/frontend/src/app/groups/[groupId]/join/ClientPage.tsx
new file mode 100644
index 00000000..5ef10695
--- /dev/null
+++ b/frontend/src/app/groups/[groupId]/join/ClientPage.tsx
@@ -0,0 +1,88 @@
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { Button } from '@/components/ui/button';
+
+interface Props {
+    groupId: string;
+}
+
+export default function ClientPage({ groupId }: Props) {
+    const router = useRouter();
+    const [context, setContext] = useState('');
+    const [error, setError] = useState<string | null>(null);
+    const [isSubmitting, setIsSubmitting] = useState(false);
+
+    const handleSubmit = async (e: React.FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        setError(null);
+
+        try {
+            const token = localStorage.getItem('accessToken');
+            if (!token) {
+                setError('로그인이 필요합니다.');
+                setIsSubmitting(false);
+                return;
+            }
+
+            const response = await fetch(`http://localhost:8080/api/v1/groups/${groupId}`, {
+                method: 'POST',
+                headers: {
+                    'Accept': 'application/json',
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${token}`,
+                },
+                body: JSON.stringify({ context }),
+            });
+
+            const result = await response.json();
+
+            if (!response.ok) {
+                if (result.code === 'MA006') {
+                    setError('이미 가입 신청된 회원입니다.');
+                } else {
+                    throw new Error(result.message || '모임 가입 신청에 실패했습니다.');
+                }
+                return;
+            }
+
+            alert('가입 신청이 완료되었습니다.');
+            router.push(`/groups/${groupId}`);
+        } catch (error) {
+            setError(error instanceof Error ? error.message : '모임 가입 신청 중 오류가 발생했습니다.');
+        } finally {
+            setIsSubmitting(false);
+        }
+    };
+
+    return (
+        <div className='max-w-xl mx-auto px-6 py-12'>
+            <h1 className='text-2xl font-bold mb-6'>모임 가입 신청</h1>
+            <form onSubmit={handleSubmit} className='space-y-6 bg-white dark:bg-gray-800 p-8 rounded-lg shadow-lg'>
+                <label className='block'>
+                    <span className='text-gray-700 dark:text-gray-200'>가입 신청 메시지</span>
+                    <textarea
+                        className='mt-2 w-full p-3 border rounded-md dark:bg-gray-700 dark:border-gray-600 dark:text-white'
+                        rows={6}
+                        value={context}
+                        onChange={(e) => setContext(e.target.value)}
+                        placeholder='간단한 자기소개나 가입 이유를 적어주세요.'
+                        required
+                    />
+                </label>
+
+                {error && <div className='text-red-600'>{error}</div>}
+
+                <Button
+                    type='submit'
+                    disabled={isSubmitting}
+                    className='text-sm px-5 py-2.5 bg-emerald-600 hover:bg-emerald-700 self-start'
+                >
+                    {isSubmitting ? '신청 중...' : '가입 신청'}
+                </Button>
+            </form>
+        </div>
+    );
+}
diff --git a/frontend/src/app/groups/[groupId]/join/page.tsx b/frontend/src/app/groups/[groupId]/join/page.tsx
new file mode 100644
index 00000000..6e22cf01
--- /dev/null
+++ b/frontend/src/app/groups/[groupId]/join/page.tsx
@@ -0,0 +1,14 @@
+'use client';
+
+import { useParams } from 'next/navigation';
+import ClientPage from './ClientPage';
+
+export default function Page() {
+    const { groupId } = useParams<{ groupId: string }>();
+
+    if (!groupId) {
+        return <div>잘못된 접근입니다.</div>;
+    }
+
+    return <ClientPage groupId={groupId} />;
+}