Merge pull request #209 from choooz/JR-888-qa-register-page

[JR-888] 회원가입 페이지 qa 작업

apps/jurumarble/src/app/main/components/Banner.tsx

@@ -1,31 +1,22 @@
 'use client';
 
-import { useEffect } from 'react';
-
 import Path from 'lib/Path';
-import userStorage from 'lib/utils/userStorage';
 import Image from 'next/image';
-import { useRouter } from 'next/navigation';
+import Link from 'next/link';
 import { mainBanner } from 'public/images';
 import styled from 'styled-components';
 
 function Banner() {
-  const router = useRouter();
-  useEffect(() => {
-    if (!userStorage.get() || !!localStorage.getItem('visited_home')) {
-      return;
-    }
-    router.push(Path.ONBOARDING_PAGE);
-    localStorage.setItem('visited_home', 'false');
-  }, []);
   return (
     <Container>
-      <Image
-        alt="배너"
-        src={mainBanner}
-        fill
-        style={{ borderRadius: '16px' }}
-      />
+      <Link href={Path.ONBOARDING_PAGE}>
+        <Image
+          alt="배너"
+          src={mainBanner}
+          fill
+          style={{ borderRadius: '16px' }}
+        />
+      </Link>
     </Container>
   );
 }

apps/jurumarble/src/app/onboarding/components/BottomButton.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { Button } from 'components/button';
+import Path from 'lib/Path';
 import { getClassNames } from 'lib/styles/getClassNames';
 import { useRouter } from 'next/navigation';
 
@@ -15,7 +16,7 @@ const BottomButton = () => {
         width="100%"
         height="56px"
         variant="primary"
-        onClick={() => router.push('/')}
+        onClick={() => router.push(Path.MAIN_PAGE)}
       >
         시작하기
       </Button>

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

@@ -26,8 +26,10 @@ const Wrapper = styled.div``;
 const Title = styled.h2`
   margin-bottom: 8px;
   ${({ theme }) => theme.typography.headline02}
+  color : ${({ theme }) => theme.colors.black_01};
 `;
 
 const SubTitle = styled.h3`
   ${({ theme }) => theme.typography.subhead02}
+  color : ${({ theme }) => theme.colors.black_03};
 `;

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

@@ -25,7 +25,7 @@ function WarningModal() {
   return (
     <ModalTemplate
       width="335px"
-      height="510px"
+      height="512px"
       onToggleModal={onToggleWarningModal}
     >
       <Container>
@@ -149,7 +149,7 @@ const ButtonContainer = styled.div`
     ${theme.typography.body01}
     display: flex;
     gap: 8px;
-    margin-top: 40px;
+    margin-top: 24px;
     width: 100%;
   `};
 `;

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

@@ -94,7 +94,7 @@ export const RegisterProvider = ({ children }: PropsWithChildren) => {
       toast.error('2004년 이후 출생자는 가입이 불가능합니다.');
       setYearOfBirth('');
       return;
-    } else if (999 < Number(yearOfBirth) && Number(yearOfBirth) < 1900) {
+    } else if (yearOfBirth !== '' && Number(yearOfBirth) < 1900) {
       toast.error('출생년도를 다시 한번 확인해주세요.');
       setYearOfBirth('');
       return;
@@ -183,7 +183,7 @@ export const RegisterProvider = ({ children }: PropsWithChildren) => {
     {
       onSuccess: () => {
         toast.success('회원가입이 완료되었습니다.');
-        router.replace(Path.MAIN_PAGE);
+        router.replace(Path.ONBOARDING_PAGE);
       },
       onError: (error) => alert(error),
     },

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

@@ -62,6 +62,10 @@ const Item = styled.div<{
         background: rgba(255, 92, 0, 0.2);
         border: 1px solid ${theme.colors.main_01};
         border-radius: 8px;
+        color: ${theme.colors.black_01};
+        p {
+          color: ${theme.colors.black_01};
+        }
       }
     `}
   &:hover {
@@ -80,7 +84,7 @@ const Title = styled.div`
 
 const Label = styled.p`
   margin-left: 6px;
-  ${({ theme }) => theme.typography.body02}; // TODO: body 04  생기면  수정
+  ${({ theme }) => theme.typography.body04}; // TODO: body 04  생기면  수정
   color: ${({ theme }) => theme.colors.black_02};
   font-weight: bold;
 `;

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

@@ -1,29 +1,55 @@
 import { GENDER_LIST } from 'lib/constants';
-import Image from 'next/image';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 
 import { useRegisterContext } from '../contexts';
 
+type ActiveType = 'active' | 'inactive' | null;
+
 export const RegisterGenderSection = () => {
   const { gender, onChangeGender } = useRegisterContext();
 
   return (
-    <Wrapper>
-      {GENDER_LIST.map((item) => (
-        <Item
-          key={item.id}
-          $width={gender === null ? 50 : gender === item.id ? 70 : 30}
-          $selected={gender === item.id}
-          onClick={() => onChangeGender(item.id)}
-        >
-          <Image alt="남성" height={100} src={item.src} />
-          {item.label}
-        </Item>
-      ))}
-    </Wrapper>
+    <>
+      <Wrapper>
+        {GENDER_LIST.map(({ id, label, image }) => (
+          <Item
+            key={id}
+            $selected={
+              gender === null ? null : gender === id ? 'active' : 'inactive'
+            }
+            onClick={() => onChangeGender(id)}
+          >
+            {image()}
+            {label}
+          </Item>
+        ))}
+      </Wrapper>
+    </>
   );
 };
 
+const variantStyles = {
+  active: css`
+    ${({ theme }) => css`
+      border: 1px solid ${theme.colors.main_01};
+      color: ${theme.colors.black_01};
+      background: rgba(255, 92, 0, 0.2);
+      width: 70%;
+    `}
+  `,
+  inactive: css`
+    opacity: 0.5;
+    width: 30%;
+  `,
+};
+
+const typeGuardVariantStyle = ($selected: ActiveType) => {
+  if (!$selected) {
+    return null;
+  }
+  return variantStyles[$selected];
+};
+
 const Wrapper = styled.div`
   display: flex;
   align-items: center;
@@ -34,22 +60,29 @@ const Wrapper = styled.div`
 `;
 
 const Item = styled.div<{
-  $width: number;
-  $selected: boolean;
+  $selected: ActiveType;
 }>`
-  border-radius: 12px;
-  height: 280px;
-  background: ${({ theme, $selected }) =>
-    $selected ? 'rgba(255, 92, 0, 0.50)' : theme.colors.white};
-
-  cursor: pointer;
-  display: flex;
-  transition: width 0.3s ease-in-out;
-  flex-direction: column;
-  align-items: center;
-  width: ${({ $width }) => ($width ? $width : 0)}%;
-  border: 1px solid ${({ theme }) => theme.colors.line_01};
-  > img {
+  ${({ theme, $selected }) => css`
+    ${theme.typography.headline03};
+    background: ${theme.colors.white};
+    color: ${theme.colors.black_03};
+    width: 50%;
+    border: 1px solid ${theme.colors.line_01};
+    border-radius: 12px;
+    height: 280px;
+    cursor: pointer;
+    display: flex;
+    transition: width 0.3s ease-in-out;
+    flex-direction: column;
+    align-items: center;
+    ${typeGuardVariantStyle($selected)}
+    :hover {
+      background: rgba(255, 92, 0, 0.2);
+      border: 1px solid ${theme.colors.main_01};
+      width: 70%;
+    }
+  `}
+  > svg {
     padding: 64px 0 72px;
     box-sizing: content-box;
   }

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

@@ -157,11 +157,16 @@ const variantStyles = {
     background: rgba(255, 92, 0, 0.2);
     font-size: 16px;
     font-weight: 700;
-    color: ${({ theme }) => theme.colors.black_02};
+    div {
+      color: ${({ theme }) => theme.colors.black_01};
+    }
   `,
   inactive: css`
     width: 23%;
     opacity: 0.5;
+    div {
+      color: ${({ theme }) => theme.colors.black_01};
+    }
   `,
 };
 
@@ -201,6 +206,7 @@ const MbtiType = styled.div`
 
 const MbtiText = styled.div`
   ${({ theme }) => theme.typography.caption_chip}
+  color: ${({ theme }) => theme.colors.black_03};
 `;
 
 export default RegisterMBTISection;