Merge pull request #54 from junotb/refactor/2026-02-16

refactor: study/teach/admin 라우트 분리 및 공통 컴포넌트 정리

Author: junotb

web/src/app/(landing)/page.tsx

@@ -1,10 +1,16 @@
 "use client";
 
 import AuthModalContainer from "@/components/auth/AuthModalContainer";
+import LandingServiceMockup from "@/components/landing/LandingServiceMockup";
 import { useAuthModalStore } from "@/stores/useAuthModalStore";
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
+import { LANDING_FEATURES } from "@/constants/landing";
 
+/**
+ * 랜딩 페이지.
+ * 서비스 소개, CTA, 인증 모달.
+ */
 export default function LandingPage() {
   const { openModal } = useAuthModalStore();
 
@@ -31,14 +37,16 @@ export default function LandingPage() {
               </h1>
 
               <p className="mt-8 text-lg font-medium text-pretty text-muted-foreground sm:text-xl/8">
-                휘발되는 수업은 이제 그만. 1:1 대면 수업의 몰입감과 LLM이 분석한
-                데이터 기반 피드백으로 당신의 언어를 완성하세요.
+                수업이 끝나도 사라지지 않습니다.
+                <br className="hidden sm:block" />
+                Google Meet 1:1 화상 수업 후, 녹화본 업로드 시 자동 자막과 LLM
+                교정 피드백으로 당신의 언어를 완성하세요.
               </p>
 
               <div className="mt-12 flex flex-col items-center gap-y-4 sm:flex-row sm:gap-x-6 lg:justify-start">
                 <Button
-                  onClick={() => openModal("signin")}
-                  aria-label="로그인 페이지로 이동"
+                  onClick={() => openModal("signup")}
+                  aria-label="무료 회원가입으로 시작하기"
                   className={cn(
                     "rounded-2xl px-8 py-4 text-lg font-bold shadow-xl shadow-primary/20 transition-transform hover:-translate-y-1"
                   )}
@@ -47,11 +55,7 @@ export default function LandingPage() {
                 </Button>
               </div>
               <dl className="mt-16 grid grid-cols-2 gap-8 border-t border-border pt-8 sm:grid-cols-3">
-                {[
-                  ["WebRTC 1:1", "초저지연 대면 수업"],
-                  ["STT Analysis", "모든 대화의 기록"],
-                  ["LLM Feedback", "AI 정밀 교정 보고서"],
-                ].map(([title, desc]) => (
+                {LANDING_FEATURES.map(([title, desc]) => (
                   <div key={title} className="flex flex-col gap-y-1">
                     <dt className="text-sm font-bold text-foreground uppercase tracking-wider">
                       {title}
@@ -62,79 +66,7 @@ export default function LandingPage() {
               </dl>
             </div>
 
-            <div className="relative lg:ml-auto">
-              <div className="relative z-10 w-full overflow-hidden rounded-2xl border border-border/50 bg-background shadow-2xl shadow-foreground/5 lg:w-[520px]">
-                <div className="flex items-center gap-2 border-b border-border/50 bg-muted/30 px-4 py-2.5">
-                  <div className="flex gap-1.5">
-                    <span className="h-2.5 w-2.5 rounded-full bg-zinc-400" />
-                    <span className="h-2.5 w-2.5 rounded-full bg-zinc-400" />
-                    <span className="h-2.5 w-2.5 rounded-full bg-zinc-400" />
-                  </div>
-                  <span className="ml-2 truncate text-[11px] text-muted-foreground">
-                    classroom.nexlang.io
-                  </span>
-                </div>
-
-                <div className="grid gap-3 p-3 sm:grid-cols-[1fr_200px]">
-                  <div className="relative overflow-hidden rounded-lg bg-zinc-950 aspect-[4/3] flex items-center justify-center">
-                    <div className="absolute inset-0 bg-[radial-gradient(ellipse_80%_60%_at_50%_50%,var(--color-primary)/8,transparent)]" />
-                    <div className="relative text-center">
-                      <div className="mx-auto mb-3 flex h-14 w-14 items-center justify-center rounded-full bg-zinc-800/90 ring-1 ring-zinc-700/50">
-                        <div className="h-6 w-6 rounded bg-primary/30" />
-                      </div>
-                      <p className="text-xs font-medium text-zinc-500">
-                        Google Meet 연결됨
-                      </p>
-                      <p className="mt-1 text-[10px] text-zinc-600">
-                        1:1 대면 수업 진행 중
-                      </p>
-                    </div>
-                    <div className="absolute right-2 bottom-2 h-16 w-20 overflow-hidden rounded-md bg-zinc-800/95 ring-1 ring-zinc-700/60">
-                      <div className="flex h-full w-full items-center justify-center">
-                        <span className="text-[10px] text-zinc-600">강사</span>
-                      </div>
-                    </div>
-                  </div>
-
-                  <div className="rounded-lg border border-primary/20 bg-gradient-to-br from-primary/5 to-transparent p-4">
-                    <div className="mb-2.5 flex items-center gap-1.5">
-                      <span className="h-1.5 w-1.5 rounded-full bg-primary animate-pulse" />
-                      <span className="text-[10px] font-bold uppercase tracking-widest text-primary">
-                        AI 교정 피드백
-                      </span>
-                    </div>
-                    <p className="text-xs italic text-foreground/90">
-                      &quot;I have a plan to go there...&quot;
-                    </p>
-                    <div className="mt-2 rounded border-l-2 border-primary bg-muted/50 px-2 py-1.5">
-                      <p className="text-[11px] leading-relaxed text-muted-foreground">
-                        비즈니스 상황에서는{" "}
-                        <strong className="font-semibold text-foreground">
-                          &quot;I intend to visit...&quot;
-                        </strong>{" "}
-                        가 더 전문적입니다.
-                      </p>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="flex items-center justify-between border-t border-border/50 bg-zinc-900/80 px-4 py-2.5">
-                  <div className="flex items-center gap-2">
-                    <span className="text-[11px] text-zinc-500">남은 시간</span>
-                    <span className="font-mono text-sm font-medium tabular-nums text-zinc-300">
-                      00:45:22
-                    </span>
-                  </div>
-                  <div className="flex gap-2">
-                    <div className="h-7 w-16 rounded-md bg-zinc-700/60" />
-                    <div className="h-7 w-14 rounded-md border border-zinc-600/80 bg-zinc-800/60" />
-                  </div>
-                </div>
-              </div>
-
-              <div className="absolute -top-16 -right-16 -z-10 h-64 w-64 rounded-full bg-muted blur-3xl opacity-50" />
-              <div className="absolute -bottom-16 -left-16 -z-10 h-64 w-64 rounded-full bg-muted blur-3xl opacity-50" />
-            </div>
+            <LandingServiceMockup />
           </div>
         </div>
       </section>

web/src/app/admin/settings/layout.tsx

@@ -0,0 +1,27 @@
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import SettingsLayoutContent from "@/components/settings/SettingsLayoutContent";
+
+export default async function AdminSettingsLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
+
+  if (!session) {
+    redirect("/");
+  }
+
+  return (
+    <SettingsLayoutContent
+      dashboardPath="/admin"
+      settingsBasePath="/admin/settings"
+    >
+      {children}
+    </SettingsLayoutContent>
+  );
+}

web/src/app/admin/settings/page.tsx

@@ -0,0 +1,5 @@
+import { redirect } from "next/navigation";
+
+export default function AdminSettingsPage() {
+  redirect("/admin/settings/profile");
+}

web/src/app/admin/settings/password/page.tsx

@@ -0,0 +1,5 @@
+import PasswordForm from "@/components/settings/PasswordForm";
+
+export default function AdminPasswordPage() {
+  return <PasswordForm />;
+}

web/src/app/admin/settings/profile/page.tsx

@@ -0,0 +1,5 @@
+import ProfileForm from "@/components/settings/ProfileForm";
+
+export default function AdminProfilePage() {
+  return <ProfileForm />;
+}

web/src/app/auth/complete/page.tsx

@@ -4,6 +4,7 @@ import { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import { authClient } from "@/lib/auth-client";
 import { ROLE_REDIRECT_MAP } from "@/constants/auth";
+import type { SessionUser } from "@/types/auth";
 import Loader from "@/components/common/Loader";
 
 /**
@@ -16,8 +17,8 @@ export default function AuthCompletePage() {
   useEffect(() => {
     const redirect = async () => {
       const { data } = await authClient.getSession();
-      const role = data?.user ? (data.user as { role?: string }).role : undefined;
-      const path = role ? ROLE_REDIRECT_MAP[role] || "/" : "/";
+      const user = data?.user as SessionUser | undefined;
+      const path = user?.role ? ROLE_REDIRECT_MAP[user.role] : "/";
       router.replace(path);
     };
 

web/src/app/classroom/[id]/page.tsx

@@ -1,74 +1,39 @@
-"use client";
-
-import { useParams, useRouter } from "next/navigation";
-import ClassroomSkeleton from "@/components/classroom/ClassroomSkeleton";
-import MeetLinkArea from "@/components/classroom/MeetLinkArea";
-import LessonController from "@/components/classroom/LessonController";
-import { useLessonAccess } from "@/hooks/useLesson";
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-
-export default function ClassroomPage() {
-  const params = useParams();
-  const router = useRouter();
-  const id = typeof params.id === "string" ? parseInt(params.id, 10) : null;
-
-  const { data, isLoading, isError } = useLessonAccess(id, { enabled: id != null && !Number.isNaN(id) });
+import { redirect } from "next/navigation";
+import { auth } from "@/lib/auth";
+import { headers } from "next/headers";
+import { getClassroomPath } from "@/lib/routes";
+import { USER_ROLE } from "@/constants/auth";
+import type { UserRole } from "@/schemas/user/user-role";
+
+interface LegacyClassroomPageProps {
+  params: Promise<{ id: string }>;
+}
 
-  if (id == null || Number.isNaN(id)) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-zinc-500">
-        잘못된 수업 번호입니다.
-      </div>
-    );
+/**
+ * 기존 /classroom/[id] URL 호환. TEACHER|STUDENT만 역할별 경로로 리다이렉트.
+ */
+export default async function LegacyClassroomPage({
+  params,
+}: LegacyClassroomPageProps) {
+  const { id } = await params;
+  const scheduleId = parseInt(id, 10);
+
+  if (Number.isNaN(scheduleId)) {
+    redirect("/");
   }
 
-  if (isLoading) {
-    return <ClassroomSkeleton />;
-  }
+  const session = await auth.api.getSession({
+    headers: await headers(),
+  });
 
-  if (isError || !data) {
-    return (
-      <div className="flex-1 flex items-center justify-center text-zinc-500">
-        수업 정보를 불러올 수 없습니다.
-      </div>
-    );
+  if (!session) {
+    redirect("/");
   }
 
-  if (!data.allowed) {
-    return null;
+  const role = session.user.role as UserRole;
+  if (role !== USER_ROLE.TEACHER && role !== USER_ROLE.STUDENT) {
+    redirect("/");
   }
 
-  const { course } = data;
-
-  return (
-    <div className="flex-1 flex flex-col min-h-0">
-      <div className="flex-1 flex min-h-0 flex-col gap-2 p-2">
-        <Accordion type="single" collapsible defaultValue="course" className="shrink-0 rounded-lg border border-zinc-800 bg-zinc-900/50">
-          <AccordionItem value="course" className="border-zinc-800">
-            <AccordionTrigger className="px-4 py-3 text-sm font-semibold text-zinc-200 hover:text-white hover:no-underline">
-              {course.title}
-            </AccordionTrigger>
-            <AccordionContent className="px-4 text-zinc-400">
-              {course.description ?? "설명이 없습니다."}
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-        <div className="flex-1 flex min-h-0">
-          <MeetLinkArea meetLink={data.meetLink} />
-        </div>
-      </div>
-      <LessonController
-        scheduleId={id}
-        role={data.role}
-        startsAt={data.schedule.startsAt}
-        endsAt={data.schedule.endsAt}
-        onExit={() => router.back()}
-      />
-    </div>
-  );
+  redirect(getClassroomPath(role, scheduleId));
 }