Merge pull request #64 from DeveloperBlog-Devflow/dev

feat: v1.0.0 릴리즈

Author: GamjaIsMine02

animations/landingGSAP.ts

@@ -0,0 +1,106 @@
+import { gsap } from 'gsap';
+import { ScrollTrigger } from 'gsap/ScrollTrigger';
+
+let pluginsRegistered = false;
+
+interface AnimateOptions {
+  trigger: HTMLElement; // 스크롤 트리거 기준 요소
+  targets: gsap.TweenTarget; // 애니메이션 대상
+  stagger?: number; // 순차 재생 간격
+  start?: string; // 스크롤 시작 지점
+  yOffset?: number; // y축 이동 거리
+}
+
+/* Fade Up 함수 */
+const animateFadeUp = ({
+  trigger,
+  targets,
+  stagger = 0,
+  start = 'top center-=50',
+  yOffset = 24,
+}: AnimateOptions) => {
+  if (!pluginsRegistered) {
+    gsap.registerPlugin(ScrollTrigger);
+    pluginsRegistered = true;
+  }
+
+  const ctx = gsap.context(() => {
+    gsap.fromTo(
+      targets,
+      { opacity: 0, y: yOffset },
+      {
+        opacity: 1,
+        y: 0,
+        duration: 0.6,
+        ease: 'power2.out',
+        stagger: stagger,
+        scrollTrigger: {
+          trigger: trigger,
+          start: start,
+          toggleActions: 'play none none reverse',
+          // markers: true,
+        },
+      }
+    );
+  });
+
+  return () => ctx.revert();
+};
+
+/* --- 1. Hero Section --- */
+export type HeroSectionRefs = {
+  titleEl: HTMLHeadingElement;
+  subTextEl: HTMLDivElement;
+};
+
+export const initHeroSectionAnimation = ({
+  titleEl,
+  subTextEl,
+}: HeroSectionRefs) => {
+  return animateFadeUp({
+    trigger: titleEl,
+    targets: subTextEl,
+    start: 'top center-=150',
+    yOffset: 40,
+  });
+};
+
+/* --- 2. Feature List Section --- */
+export type FeatureListRefs = {
+  titleEl: HTMLHeadingElement;
+  subTextEl: HTMLDivElement;
+  cardsContainerEl: HTMLDivElement;
+};
+
+export const initFeatureListAnimation = ({
+  titleEl,
+  subTextEl,
+  cardsContainerEl,
+}: FeatureListRefs) => {
+  const cards = Array.from(cardsContainerEl.children);
+
+  return animateFadeUp({
+    trigger: titleEl,
+    targets: [subTextEl, ...cards],
+    stagger: 0.12,
+  });
+};
+
+/* --- 3. Landing Preview Section --- */
+export type LandingPreviewRefs = {
+  titleEl: HTMLHeadingElement;
+  contentContainerEl: HTMLDivElement;
+};
+
+export const initLandingPreviewAnimation = ({
+  titleEl,
+  contentContainerEl,
+}: LandingPreviewRefs) => {
+  const items = contentContainerEl.querySelectorAll('.fc-item');
+
+  return animateFadeUp({
+    trigger: titleEl,
+    targets: items,
+    stagger: 0.2,
+  });
+};

app/(auth)/login/page.tsx

@@ -0,0 +1,30 @@
+'use client';
+
+import AuthCard from '@/components/auth/AuthCard';
+import FindPasswordModal from '@/components/auth/FindPasswordModal';
+import LoginForm from '@/components/auth/LoginForm';
+import { useState } from 'react';
+
+const Page = () => {
+  // 비밀번호 재설정 모달 state
+  const [isModalOpen, setIsModalOpen] = useState(false);
+
+  // 모달 열기 & 닫기 메서드
+  const handleOpenModal = () => {
+    setIsModalOpen(true);
+  };
+  const handleCloseModal = () => {
+    setIsModalOpen(false);
+  };
+
+  return (
+    <div className="bg-background">
+      <AuthCard title="로그인" description="로그인해서 학습을 이어가세요">
+        <LoginForm handleOpenModal={handleOpenModal} />
+      </AuthCard>
+      {isModalOpen && <FindPasswordModal onClose={handleCloseModal} />}
+    </div>
+  );
+};
+
+export default Page;

app/(auth)/signup/page.tsx

@@ -0,0 +1,14 @@
+import AuthCard from '@/components/auth/AuthCard';
+import SignupForm from '@/components/auth/SignupForm/SignupForm';
+
+const Page = () => {
+  return (
+    <div className="bg-background">
+      <AuthCard title="회원가입" description="회원가입하여 계정을 생성하세요">
+        <SignupForm />
+      </AuthCard>
+    </div>
+  );
+};
+
+export default Page;

app/(with-sidebar)/(home)/page.tsx

@@ -0,0 +1,95 @@
+'use client';
+
+import BottomSection from '@/components/home/BottomSection';
+import GraphSection from '@/components/home/GraphSection';
+import HeaderSection from '@/components/home/HeaderSection';
+import ProfileSection from '@/components/home/ProfileSection';
+import ButtonSection from '@/components/home/ButtonSection';
+
+import { useEffect, useState } from 'react';
+import { useAuthUser } from '@/hooks/useAuthUser';
+import { useTodayPlanItems } from '@/hooks/useTodayPlanItems';
+import { getProfile, Profile } from '@/services/home/profileService.service';
+
+const Page = () => {
+  // 현재 사용자 정보
+  const { user: currentUser, authLoading } = useAuthUser();
+  const [profile, setProfile] = useState<Profile | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  const {
+    items,
+    loading: planLoading,
+    error: planError,
+    toggle,
+    progressText,
+    total,
+  } = useTodayPlanItems(currentUser?.uid);
+
+  // 사용자가 존재하면 데이터 불러옴
+  useEffect(() => {
+    if (!currentUser) return;
+    (async () => {
+      try {
+        const userProfile = await getProfile(currentUser.uid);
+        setProfile(userProfile);
+      } catch (err) {
+        console.error(err);
+        setError('프로필 정보를 불러오는 데 실패하였습니다');
+      }
+    })();
+  }, [currentUser]);
+
+  // 유저 정보 로딩 처리
+  if (authLoading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>로그인 확인 중...</p>
+      </div>
+    );
+  }
+
+  // 유저 정보가 없을 시
+  if (!currentUser) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p>로그인이 필요합니다.</p>
+      </div>
+    );
+  }
+
+  // 유저 정보가 있을 시
+  return (
+    <div className="bg-background flex min-h-screen flex-col gap-4 font-sans md:p-[137px]">
+      {/* 1. Header */}
+      <HeaderSection />
+
+      {/* 2-1. ProfileSection */}
+      <ProfileSection
+        className="grid grid-cols-1 gap-4 md:grid-cols-3"
+        profile={profile}
+        uid={currentUser.uid}
+        progressText={progressText}
+      />
+
+      {/* 2-2. GraphSection */}
+      <GraphSection uid={currentUser.uid}></GraphSection>
+
+      {/* 2-3. BottomSection */}
+      <BottomSection
+        uid={currentUser.uid}
+        className="grid grid-cols-1 gap-4 md:grid-cols-2"
+        items={items}
+        loading={planLoading}
+        error={planError}
+        onToggle={toggle}
+        todoTotal={total}
+      />
+
+      {/* 3. ButtonSection */}
+      <ButtonSection />
+    </div>
+  );
+};
+
+export default Page;

app/(with-sidebar)/edit/[tilId]/page.tsx

@@ -0,0 +1,16 @@
+import Editor from '@/components/write/Editor';
+
+type Props = {
+  params: Promise<{ tilId: string }>;
+};
+
+const Page = async ({ params }: Props) => {
+  const { tilId } = await params;
+  return (
+    <div className="bg-background flex min-h-screen flex-col gap-8 p-4">
+      <Editor tilId={tilId} />
+    </div>
+  );
+};
+
+export default Page;

app/(with-sidebar)/layout.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import Sidebar from '@/components/common/Sidebar';
+import { useAuthGuard } from '@/hooks/useAuthGuard';
+
+import '@uiw/react-md-editor/markdown-editor.css';
+import '@uiw/react-markdown-preview/markdown.css';
+
+export default function SidebarLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const { loading, isAuthed } = useAuthGuard({ redirectTo: '/login' });
+
+  if (loading) return <div>로딩중...</div>;
+  if (!isAuthed) {
+    return null;
+  }
+
+  return (
+    <div className="flex">
+      <Sidebar />
+      <main className="bg-background flex-1 pl-48">{children}</main>
+    </div>
+  );
+}