Merge pull request #242 from YAPP-Github/develop

[RELEASE] 1.4.5

Author: rbgksqkr

.husky/pre-push

@@ -0,0 +1 @@
+pnpm lint

sentry.edge.config.ts

@@ -1,19 +1,12 @@
-// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
-// The config you add here will be used whenever one of the edge features is loaded.
-// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
 import * as Sentry from '@sentry/nextjs';
 
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: 1,
-
-  // Enable logs to be sent to Sentry
-  enableLogs: true,
+const isProductionDomain = process.env.VERCEL_ENV === 'production';
 
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});
+if (isProductionDomain) {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1,
+    enableLogs: true,
+    debug: false,
+  });
+}

sentry.server.config.ts

@@ -1,18 +1,12 @@
-// This file configures the initialization of Sentry on the server.
-// The config you add here will be used whenever the server handles a request.
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/
-
 import * as Sentry from '@sentry/nextjs';
 
-Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
-
-  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
-  tracesSampleRate: 1,
-
-  // Enable logs to be sent to Sentry
-  enableLogs: true,
+const isProductionDomain = process.env.VERCEL_ENV === 'production';
 
-  // Setting this option to true will print useful information to the console while you're setting up Sentry.
-  debug: false,
-});
+if (isProductionDomain) {
+  Sentry.init({
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+    tracesSampleRate: 1,
+    enableLogs: true,
+    debug: false,
+  });
+}

src/app/home/hooks/useUserInfo.ts

@@ -1,25 +1,39 @@
 'use client';
 
-import { useSession } from 'next-auth/react';
+import { usePathname } from 'next/navigation';
+import { signOut, useSession } from 'next-auth/react';
+import { useEffect, useRef } from 'react';
 
 import useParticipantInfoQuery from './useParticipantInfoQuery';
 import useResearcherInfoQuery from './useResearcherInfoQuery';
 
 import { ROLE } from '@/constants/config';
+import { isUnauthorizedUser } from '@/lib/auth-utils';
 
 const useUserInfo = () => {
   const { data: session, status } = useSession();
+  const pathname = usePathname();
+  const isExecuted = useRef(false);
 
   const role = session?.role;
   const isSessionReady = status !== 'loading';
-  const isParticipant = isSessionReady && role === ROLE.participant;
-  const isResearcher = isSessionReady && role === ROLE.researcher;
+  const isParticipant = isSessionReady && !isUnauthorizedUser(session) && role === ROLE.participant;
+  const isResearcher = isSessionReady && !isUnauthorizedUser(session) && role === ROLE.researcher;
 
   const participantQuery = useParticipantInfoQuery({ enabled: isParticipant });
   const researcherQuery = useResearcherInfoQuery({ enabled: isResearcher });
 
   const isLoading = !isSessionReady || participantQuery.isLoading || researcherQuery.isLoading;
 
+  useEffect(() => {
+    if (isExecuted.current) return;
+
+    if (isUnauthorizedUser(session) && !pathname.startsWith('/join')) {
+      signOut({ redirect: false });
+      isExecuted.current = true;
+    }
+  }, [session, pathname]);
+
   return {
     userInfo: isParticipant ? participantQuery.data : researcherQuery.data,
     isLoading,

src/app/home/page.tsx

@@ -11,7 +11,7 @@ import type { ExperimentPostListFilters, ExperimentPostResponse } from '@/apis/p
 import DefaultLayout from '@/components/layout/DefaultLayout/DefaultLayout';
 import { queryKey } from '@/constants/queryKey';
 import { API_URL } from '@/constants/url';
-import { authOptions } from '@/lib/auth-utils';
+import { authOptions, isUnauthorizedUser } from '@/lib/auth-utils';
 import { getQueryClient } from '@/lib/getQueryClient';
 import { URLFilterSchema } from '@/schema/filter/URLFilterSchema';
 import { getQueryParamsToString } from '@/utils/getQueryParamsString';
@@ -31,11 +31,12 @@ export default async function Home({ searchParams }: HomePageProps) {
   const fetchClient = createSSRFetchClient(session?.accessToken);
   const hasQueryParams = Object.keys(searchParams).length > 0;
 
-  const initialUserInfo = session?.role
-    ? await fetchClient.get<ParticipantResponse | ResearcherResponse>(
-        API_URL.me(session.role.toLowerCase()),
-      )
-    : null;
+  const initialUserInfo =
+    !isUnauthorizedUser(session) && session?.role
+      ? await fetchClient.get<ParticipantResponse | ResearcherResponse>(
+          API_URL.me(session.role.toLowerCase()),
+        )
+      : null;
 
   const initialGender =
     initialUserInfo && isParticipantInfo(initialUserInfo) ? initialUserInfo.gender : undefined;
@@ -63,7 +64,7 @@ export default async function Home({ searchParams }: HomePageProps) {
     },
   );
 
-  if (session?.role) {
+  if (!isUnauthorizedUser(session) && session?.role) {
     await queryClient.prefetchQuery({
       queryKey: queryKey.userInfo(session.role),
       queryFn: () => Promise.resolve(initialUserInfo),

src/app/join/JoinPage.css.ts

@@ -45,12 +45,6 @@ export const contentContainer = style({
   width: '100%',
 });
 
-export const titleContainer = style({
-  display: 'flex',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-});
-
 export const joinContentContainer = style({
   backgroundColor: colors.field02,
   width: '100%',
@@ -61,26 +55,6 @@ export const joinContentContainer = style({
   padding: '3.2rem 4rem',
 });
 
-export const joinTitle = style({
-  ...fonts.title.medium.SB20,
-  color: colors.text06,
-});
-
-export const progressBarContainer = style({
-  width: '8rem',
-  height: '0.6rem',
-  backgroundColor: colors.field03,
-  borderRadius: '0.6rem',
-});
-
-export const progressBarFill = style({
-  width: 'var(--progress-width)',
-  height: '100%',
-  backgroundColor: colors.primaryMint,
-  borderRadius: '0.6rem',
-  transition: 'width 1s',
-});
-
 export const joinForm = style({
   width: '100%',
   height: '100%',

src/app/join/JoinPage.types.ts

@@ -1,8 +1,9 @@
-// TODO: 타입 좁히기
-// birthDate: '2025-01-22';
+import { STEP } from './JoinPage.constants';
+
 // region 타입, area 타입
 export type Gender = 'MALE' | 'FEMALE' | 'ALL';
 export type MatchType = 'ONLINE' | 'OFFLINE' | 'ALL';
+export type StepType = (typeof STEP)[keyof typeof STEP];
 
 export interface ServiceAgreeCheck {
   isTermOfService: boolean;

src/app/join/components/FormGuard/FormGuard.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { PropsWithChildren } from 'react';
+import { useFormContext } from 'react-hook-form';
+
+import ConfirmModal from '@/components/Modal/ConfirmModal/ConfirmModal';
+import useLeaveConfirmModal from '@/hooks/useLeaveConfirmModal';
+import { colors } from '@/styles/colors';
+
+const FormGuard = ({ children }: PropsWithChildren) => {
+  const { formState } = useFormContext();
+  const { isLeaveConfirmModalOpen, handleConfirmLeave, handleCancelLeave } = useLeaveConfirmModal({
+    isUserInputDirty: formState.isDirty,
+  });
+
+  return (
+    <>
+      {children}
+      <ConfirmModal
+        isOpen={isLeaveConfirmModalOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            handleCancelLeave();
+          }
+        }}
+        confirmTitle="페이지에서 나가시겠어요?"
+        descriptionText="입력한 내용은 따로 저장되지 않아요"
+        cancelText="취소"
+        confirmText="나가기"
+        confirmButtonColor={colors.field09}
+        onConfirm={() => handleConfirmLeave({ goHome: true })}
+      />
+    </>
+  );
+};
+
+export default FormGuard;

src/app/join/components/FunnelLayout/FunnelLayout.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { PropsWithChildren, useEffect } from 'react';
+
+import useFunnel from '../../hooks/useFunnel';
+import { STEP } from '../../JoinPage.constants';
+import { joinLayout } from '../../JoinPage.css';
+import { JoinLayout } from '../JoinLayout/JoinLayout';
+
+import { startRecording } from '@/lib/mixpanelClient';
+
+interface FunnelLayoutProps {
+  title: string;
+}
+
+const FunnelLayout = ({ children, title }: PropsWithChildren<FunnelLayoutProps>) => {
+  const { step } = useFunnel();
+
+  useEffect(() => {
+    startRecording();
+  }, []);
+
+  if (step === STEP.success) {
+    return <JoinLayout.Container>{children}</JoinLayout.Container>;
+  }
+
+  return (
+    <main className={joinLayout}>
+      <JoinLayout.Logo />
+      <JoinLayout.Container>
+        <JoinLayout.Header title={title} />
+        {children}
+      </JoinLayout.Container>
+    </main>
+  );
+};
+
+export default FunnelLayout;

src/app/join/components/JoinLayout/JoinLayout.tsx

@@ -0,0 +1,20 @@
+import { PropsWithChildren } from 'react';
+
+import { contentContainer } from '../../JoinPage.css';
+import FormGuard from '../FormGuard/FormGuard';
+import JoinTitleSection from '../JoinTitleSection/JoinTitleSection';
+
+import Logo from '@/components/Logo/Logo';
+
+interface JoinLayoutTitleProps {
+  title: string;
+}
+
+export const JoinLayout = {
+  Logo: () => <Logo />,
+  Header: ({ title }: JoinLayoutTitleProps) => <JoinTitleSection title={title} />,
+  Container: ({ children }: PropsWithChildren) => (
+    <div className={contentContainer}>{children}</div>
+  ),
+  FormGuard: ({ children }: PropsWithChildren) => <FormGuard>{children}</FormGuard>,
+};