FEAT/MM-188 성향 관련된 flow를 개선 및 간소화합니다.

.gitignore

@@ -38,6 +38,9 @@ yarn-error.log*
 .DS_Store
 *.pem
 
+# OMC
+.omc/
+
 # Expo
 apps/mobile/ios/
 apps/mobile/android/

apps/mobile/app/index.tsx

@@ -28,6 +28,7 @@ export default function App() {
   const [isAuthReady, setIsAuthReady] = useState(false)
 
   const webviewUrl = process.env.EXPO_PUBLIC_LOCAL_URL
+  // const webviewUrl = process.env.EXPO_PUBLIC_WEB_VIEW_URL
   if (!webviewUrl) throw new Error('Webview URL is not set')
 
   useEffect(() => {

apps/react/index.html

@@ -7,6 +7,7 @@
       content="width=device-width, viewport-fit=cover, initial-scale=1, maximum-scale=1, user-scalable=0"
     />
     <title>React</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/toss/tossface/dist/tossface.css" />
 
     <!-- AMPLITUDE_SCRIPT -->
   </head>

apps/react/src/app/attachment-test/page.tsx

@@ -14,6 +14,8 @@ import { DetailHeaderBar } from '@/shared/ui/header-bar'
 
 const searchSchema = z.object({
   from: z.string().optional(),
+  flow: z.enum(['my-personality', 'partner-personality', 'full-flow']).optional(),
+  chatId: z.number().optional(),
 })
 
 export const Route = createFileRoute('/attachment-test/')({
@@ -25,7 +27,7 @@ function AttachmentTestPage() {
   const navigate = useNavigate()
   const goBack = useGoBack()
   const { setStatusColor } = useTheme()
-  const { from } = useSearch({ from: Route.id })
+  const { from, flow, chatId } = useSearch({ from: Route.id })
   const { userInfo } = useAuth()
   const nickname = userInfo.nickname || '사용자'
 
@@ -38,7 +40,7 @@ function AttachmentTestPage() {
   }, [])
 
   const handleStartTest = wrapWithTracking(BUTTON_NAMES.START_TEST, CATEGORIES.ATTACHMENT, () =>
-    navigate({ to: '/attachment-test/question', search: { from }, replace: true })
+    navigate({ to: '/attachment-test/question', search: { from, flow, chatId }, replace: true })
   )
 
   return (

apps/react/src/app/attachment-test/question/page.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute, useSearch } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 import { useState } from 'react'
 import z from 'zod'
 
@@ -11,6 +11,7 @@ import {
   QUESTION_CONFIG,
 } from '@/features/attachment'
 import { useAuth } from '@/features/auth'
+import { usePersonalityFlow } from '@/features/profile/lib/personality-flow'
 import { wrapWithTracking } from '@/shared/analytics'
 import { BUTTON_NAMES, CATEGORIES } from '@/shared/analytics/constants'
 import { Screen } from '@/shared/layout/screen'
@@ -19,6 +20,8 @@ import { DetailHeaderBar } from '@/shared/ui/header-bar'
 
 const searchSchema = z.object({
   from: z.string().optional(),
+  flow: z.enum(['my-personality', 'partner-personality', 'full-flow']).optional(),
+  chatId: z.number().optional(),
 })
 
 export const Route = createFileRoute('/attachment-test/question/')({
@@ -28,8 +31,9 @@ export const Route = createFileRoute('/attachment-test/question/')({
 
 function AttachmentTestQuestionPage() {
   const [isGuideOpen, setIsGuideOpen] = useState(true)
-  const { from } = useSearch({ from: Route.id })
   const { userInfo } = useAuth()
+  const { from, flow, next } = usePersonalityFlow()
+
   const {
     loading,
     error,
@@ -43,7 +47,7 @@ function AttachmentTestQuestionPage() {
     handleNext,
     handleSelectAnswer,
     setQuestionRef,
-  } = useAttachmentQuestions({ from })
+  } = useAttachmentQuestions({ from, onComplete: flow ? () => next() : undefined })
 
   // 트래킹이 적용된 핸들러들
   const handleGoBackWithTracking = wrapWithTracking(BUTTON_NAMES.BACK_TEST, CATEGORIES.ATTACHMENT, handleGoBack)
@@ -56,7 +60,6 @@ function AttachmentTestQuestionPage() {
 
   const handleSelectAnswerWithTracking = wrapWithTracking(
     (_questionId: number, score: number) => {
-      // 선택한 옵션 번호에 따른 버튼 이름 결정 (1-5)
       const buttonNameMap = {
         1: BUTTON_NAMES.SELECT_OPTION_1,
         2: BUTTON_NAMES.SELECT_OPTION_2,
@@ -75,7 +78,6 @@ function AttachmentTestQuestionPage() {
     setIsGuideOpen(false)
   )
 
-  // 로딩 페이지 렌더링
   if (isSubmitting) {
     return <SubmissionLoading nickname={userInfo.nickname || '사용자'} />
   }

apps/react/src/app/attachment-test/result/my/page.tsx

@@ -1,14 +1,16 @@
 import { createFileRoute, redirect } from '@tanstack/react-router'
-import z from 'zod'
+import { z } from 'zod'
 
 import { AttachmentResultContent } from '@/features/attachment/ui/result/attachment-result-content'
 import { useAuth } from '@/features/auth'
 
 const searchSchema = z.object({
   from: z.string().optional(),
+  flow: z.enum(['my-personality', 'partner-personality', 'full-flow']).optional(),
 })
 
 export const Route = createFileRoute('/attachment-test/result/my/')({
+  validateSearch: searchSchema,
   beforeLoad: async ({ context }) => {
     // 인증되지 않은 경우 로그인 페이지로 리다이렉트
     if (!context.auth?.authenticated) {
@@ -18,13 +20,12 @@ export const Route = createFileRoute('/attachment-test/result/my/')({
     }
   },
   component: MyAttachmentResultPage,
-  validateSearch: searchSchema,
 })
 
 function MyAttachmentResultPage() {
   const { userInfo } = useAuth()
   const { from } = Route.useSearch()
-  const isFromChat = from === '/chat'
+  const fromProp = from === 'my-result-preview' ? 'my-result-preview' : from === 'my-page' ? 'my-page' : 'home'
 
-  return <AttachmentResultContent userInfo={userInfo} type="my" isFromChat={isFromChat} />
+  return <AttachmentResultContent userInfo={userInfo} type="my" from={fromProp} />
 }

apps/react/src/app/attachment-test/result/partner/page.tsx

@@ -1,9 +1,15 @@
 import { createFileRoute, redirect } from '@tanstack/react-router'
+import { z } from 'zod'
 
 import { AttachmentResultContent } from '@/features/attachment/ui/result/attachment-result-content'
-import { usePartnerInfo } from '@/features/member'
+import { useAuth } from '@/features/auth'
+
+const searchSchema = z.object({
+  from: z.string().optional(),
+})
 
 export const Route = createFileRoute('/attachment-test/result/partner/')({
+  validateSearch: searchSchema,
   beforeLoad: async ({ context }) => {
     // 인증되지 않은 경우 로그인 페이지로 리다이렉트
     if (!context.auth?.authenticated) {
@@ -16,7 +22,15 @@ export const Route = createFileRoute('/attachment-test/result/partner/')({
 })
 
 function PartnerAttachmentResultPage() {
-  const { data: partnerInfo } = usePartnerInfo()
+  const { userInfo } = useAuth()
+  const { from } = Route.useSearch()
+  const fromProp =
+    from === 'partner-result-preview' ? 'partner-result-preview' : from === 'my-page' ? 'my-page' : undefined
+
+  const partnerData = {
+    loveTypeCategory: userInfo.partnerLoveTypeCategory,
+    personalityType: userInfo.otherPersonalityType,
+  }
 
-  return <AttachmentResultContent userInfo={partnerInfo} type="partner" />
+  return <AttachmentResultContent userInfo={partnerData} type="partner" from={fromProp} />
 }

apps/react/src/app/chat/result/page.tsx

@@ -35,7 +35,6 @@ function RouteComponent() {
   const navigate = useNavigate()
   const goBack = useGoBack()
   const queryClient = useQueryClient()
-
   useEffect(() => {
     setStatusColor('#FDEDF0')
 

apps/react/src/app/mbti/page.tsx

@@ -1,9 +1,9 @@
-import { createFileRoute, useNavigate, useSearch } from '@tanstack/react-router'
+import { createFileRoute } from '@tanstack/react-router'
 
 import { useAuth } from '@/features/auth'
 import { MbtiForm } from '@/features/onboarding/ui/mbti-form'
 import { useMemberUpdateMutation } from '@/features/profile'
-import { personalityFlowSearchSchema } from '@/features/profile/lib/personality-flow'
+import { personalityFlowSearchSchema, usePersonalityFlow } from '@/features/profile/lib/personality-flow'
 import { wrapWithTracking } from '@/shared/analytics'
 import { BUTTON_NAMES, CATEGORIES } from '@/shared/analytics/constants'
 import { useGoBack } from '@/shared/navigation/use-go-back'
@@ -17,25 +17,18 @@ export const Route = createFileRoute('/mbti/')({
 })
 
 function MbtiEditPage() {
-  const navigate = useNavigate()
   const goBack = useGoBack()
   const { userInfo } = useAuth()
-  const { flow, chatId } = useSearch({ from: Route.id })
+  const { flow, next } = usePersonalityFlow()
 
   const updateMutation = useMemberUpdateMutation({
     onSuccess: () => {
-      if (flow === 'my-personality') {
-        navigate({ to: '/my-attachment-select', search: { flow } })
+      if (!flow) {
+        toast.success('내 성향이 변경되었어요!')
+        goBack()
         return
       }
-
-      if (flow === 'chat-entry') {
-        navigate({ to: '/my-attachment-select', search: { flow, chatId } })
-        return
-      }
-
-      toast.success('내 성향이 변경되었어요!')
-      goBack()
+      next()
     },
     errorMessage: '내 성향 변경 중 오류가 발생했습니다',
   })
@@ -53,7 +46,7 @@ function MbtiEditPage() {
   return (
     <MbtiForm
       headerTitle={isFlowMode ? undefined : '내 성향'}
-      navCenter={getChatEntryProgressBar(flow === 'chat-entry', 1)}
+      navCenter={getChatEntryProgressBar(flow === 'full-flow', 1)}
       contentTopSlot={getPersonalityStepDots(flow === 'my-personality', 1)}
       title={
         <>

apps/react/src/app/my-attachment-select/page.tsx

@@ -0,0 +1,94 @@
+import { createFileRoute, useNavigate } from '@tanstack/react-router'
+import { useState } from 'react'
+
+import { ATTACHMENT_OPTIONS } from '@/features/attachment'
+import { useAuth } from '@/features/auth'
+import { TitleSection } from '@/features/onboarding/ui/title-section'
+import { useMemberUpdateMutation } from '@/features/profile'
+import { personalityFlowSearchSchema, usePersonalityFlow } from '@/features/profile/lib/personality-flow'
+import { Screen } from '@/shared/layout/screen'
+import { Button } from '@/shared/ui'
+import { FixedBottom } from '@/shared/ui/fixed-bottom'
+import { getChatEntryProgressBar } from '@/shared/ui/flow-progress-bar'
+import { getPersonalityStepDots } from '@/shared/ui/flow-step-dots'
+import { DetailHeaderBar } from '@/shared/ui/header-bar'
+import { KeyMessageBanner } from '@/shared/ui/key-message-banner'
+import { SelectableButton } from '@/shared/ui/selectable-button'
+import { toast } from '@/shared/ui/toast'
+
+import type { MemberDataLoveTypeCategoryEnum } from '@data/user-api-axios/api'
+
+export const Route = createFileRoute('/my-attachment-select/')({
+  validateSearch: personalityFlowSearchSchema,
+  component: MyAttachmentSelectPage,
+})
+
+function MyAttachmentSelectPage() {
+  const navigate = useNavigate()
+  const { userInfo } = useAuth()
+  const { flow, from, next } = usePersonalityFlow()
+  const [selectedType, setSelectedType] = useState<MemberDataLoveTypeCategoryEnum | null>(
+    userInfo?.loveTypeCategory ?? null
+  )
+
+  const updateMutation = useMemberUpdateMutation({
+    onSuccess: () => {
+      if (from === 'profile') toast.success('내 성향이 변경되었어요!')
+      next()
+    },
+    errorMessage: '저장 중 오류가 발생했습니다',
+  })
+
+  const handleConfirm = () => {
+    if (!selectedType || updateMutation.isPending) return
+    updateMutation.mutate({ loveTypeCategory: selectedType })
+  }
+
+  const handleDontKnow = () => {
+    navigate({ to: '/attachment-test', search: { flow, from } })
+  }
+
+  return (
+    <Screen>
+      <Screen.Header behavior="overlay">
+        <DetailHeaderBar center={getChatEntryProgressBar(flow === 'full-flow', 2)} />
+      </Screen.Header>
+
+      <Screen.Content className="flex flex-1 flex-col bg-white">
+        {getPersonalityStepDots(flow === 'my-personality', 2)}
+        <TitleSection
+          title={
+            <>
+              나의 애착유형을
+              <br />
+              선택해주세요
+            </>
+          }
+        />
+        <div className="mt-4 px-5">
+          <KeyMessageBanner title="내 애착유형을 모른다면? 테스트 GO" onClick={handleDontKnow} />
+        </div>
+
+        <div className="mt-10 flex flex-col gap-3 px-5">
+          <div className="mt-3 flex flex-col gap-3">
+            {ATTACHMENT_OPTIONS.map((option) => (
+              <SelectableButton
+                key={option.value}
+                selected={selectedType === option.value}
+                onClick={() => setSelectedType(option.value)}
+                disabled={updateMutation.isPending}
+                className="w-full text-left"
+              >
+                {option.label}
+              </SelectableButton>
+            ))}
+          </div>
+        </div>
+
+        <FixedBottom>
+          <Button text="프로필 완성!" onClick={handleConfirm} disabled={!selectedType || updateMutation.isPending} />
+        </FixedBottom>
+      </Screen.Content>
+    </Screen>
+  )
+}