[JR-836] 회원가입 qa 작업

apps/jurumarble/src/app/register/components/WarningModal.tsx

@@ -1,7 +1,6 @@
 import { Button, ModalTemplate } from "components/index";
 import { ALCOHOL_LEVEL_LIST, GENDER_LIST } from "lib/constants";
 import { SvgWarningIcon } from "src/assets/icons/components";
-
 import styled, { css } from "styled-components";
 import { useRegisterContext } from "../contexts";
 
@@ -19,7 +18,7 @@ function WarningModal() {
   return (
     <ModalTemplate width="335px" height="510px" onToggleModal={onToggleWarningModal}>
       <Container>
-        <WarningIconStyled width="56px" height="56px" />
+        <SvgWarningIcon width="56px" height="56px" />
         <GuideText>선택하신 항목을 확인해주세요.</GuideText>
         <UserInfoList>
           <ListItem>
@@ -67,14 +66,12 @@ const Container = styled.div`
   ${({ theme }) => css`
     ${theme.typography.body02}
     padding: 40px 20px 0 20px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
   `}
 `;
 
-const WarningIconStyled = styled(SvgWarningIcon)`
-  display: flex;
-  margin: 0 auto;
-`;
-
 const GuideText = styled.div`
   ${({ theme }) => css`
     ${theme.typography.headline02};
@@ -93,6 +90,7 @@ const UserInfoList = styled.ul`
     flex-direction: column;
     margin-top: 24px;
     padding: 20px;
+    width: 100%;
   `}
 `;
 
@@ -135,6 +133,7 @@ const ButtonContainer = styled.div`
     display: flex;
     gap: 8px;
     margin-top: 40px;
+    width: 100%;
   `};
 `;
 

apps/jurumarble/src/app/register/constants.tsx

@@ -8,17 +8,17 @@ import RegisterMBTISection from "./sections/RegisterMBTISection";
 export const REGISTER_STEPS_CONTENT = {
   STEP1: {
     title: "평소에 어떤 술을 즐기시나요?",
-    subTitle: "여행의 즐거움을 더할 우리술을 추천드릴게요.",
+    subTitle: "여행의 즐거움을 레벨업할 우리술을 추천드릴게요.",
     component: () => <RegisterDrinkCapacitySection />,
   },
   STEP2: {
     title: "여행자님의 성별은 무엇인가요?",
-    subTitle: "같은 성별이 선호하는 우리술이 무엇인지 추천드릴게요",
+    subTitle: "같은 성별의 여행자들이 선호하는 우리술을 추천드릴게요.",
     component: () => <RegisterGenderSection />,
   },
   STEP3: {
     title: "여행자님의 출생년도는 어떻게 되나요?",
-    subTitle: "비슷한 나이대의 여행자들이 선호하는 우리술이 무엇인지 추천드릴게요.",
+    subTitle: "비슷한 나이대의 여행자들이 선호하는 우리술을 추천드릴게요.",
     component: () => <RegisterBirthSection />,
   },
   STEP4: {

apps/jurumarble/src/app/register/contexts/RegisterProvider.tsx

@@ -172,7 +172,10 @@ export const RegisterProvider = ({ children }: PropsWithChildren) => {
         mbti: stringfiedMBTI,
       }),
     {
-      onSuccess: () => router.replace(Path.MAIN_PAGE),
+      onSuccess: () => {
+        toast.success("회원가입이 완료되었습니다.");
+        router.replace(Path.MAIN_PAGE);
+      },
       onError: (error) => alert(error),
     },
   );

apps/jurumarble/src/app/register/sections/RegisterDrinkCapacitySection.tsx

@@ -31,10 +31,10 @@ const Wrapper = styled.div`
   margin: 32px 0;
   background: ${({ theme }) => theme.colors.white};
   border: 1px solid ${({ theme }) => theme.colors.line_01};
+  border-radius: 8px;
   box-shadow: 2px 2px 20px 0px rgba(0, 0, 0, 0.04), 2px 2px 20px 0px rgba(0, 0, 0, 0.06);
 
   > div + div {
-    border-top: 1px solid ${({ theme }) => theme.colors.line_01};
   }
 `;
 
@@ -45,17 +45,20 @@ const Item = styled.div<{
   cursor: pointer;
   display: flex;
   transition: all 0.3s ease-in-out;
+  border-top: 1px solid ${({ theme }) => theme.colors.line_01};
 
-  ${({ $selected }) =>
+  ${({ theme, $selected }) =>
     $selected &&
     css`
       & {
         animation: ${transitions.blink} 0.7s ease-in-out;
-        background: rgba(255, 92, 0, 0.5);
+        background: rgba(255, 92, 0, 0.2);
+        border: 1px solid ${theme.colors.main_01};
+        border-radius: 8px;
       }
     `}
   &:hover {
-    background-color: ${({ theme }) => theme.colors.main_02};
+    background: rgba(255, 92, 0, 0.2);
   }
 `;
 

apps/jurumarble/src/app/register/sections/RegisterStepSection.tsx

@@ -14,7 +14,6 @@ export const RegisterStepSection = () => {
   return (
     <Wrapper>
       <>
-        {step === "STEP1" && <StyledTooltip>주루마블에 오신 여행자님 환영합니다!</StyledTooltip>}
         <ContentHeader title={title} subTitle={subTitle} />
         {component()}
       </>