[Feat] Login, Singup 페이지 GUI 반영

src/common/component/Modal/Modal.style.ts

@@ -22,11 +22,11 @@ export const dialogStyle = css({
   position: 'fixed',
   top: '50%',
   left: '50%',
-  width: '51.1rem',
 
   zIndex: theme.zIndex.overlayTop,
-  paddingTop: '4.8rem',
-  paddingBottom: '4.8rem',
+
+  padding: '3.2rem 2rem',
+
   borderRadius: '16px',
   border: 'none',
   outline: 'none',

src/common/component/SupportingText/SupportingText.style.ts

@@ -7,7 +7,7 @@ export const textStyle = (isError: boolean, isNotice: boolean) => {
     ? theme.colors.sementic_red
     : isNotice
       ? theme.colors.sementic_success
-      : theme.colors.gray_400;
+      : theme.colors.gray_500;
 
   return css({ color: textColor, paddingLeft: '0.8rem', wordBreak: 'break-word', ...theme.text.body09 });
 };

src/common/router/Router.tsx

@@ -18,6 +18,8 @@ import {
   TermPage,
 } from '@/common/router/lazy';
 
+import UnivFormPage from '@/page/signUp/info/UnivFormPage';
+
 import { PATH } from '@/shared/constant/path';
 
 const Public = () => {
@@ -67,15 +69,15 @@ const router = createBrowserRouter([
         ),
       },
       {
-        path: PATH.SIGNUP_INFO,
+        path: PATH.SIGNUP_UNIV,
         element: (
           <Suspense>
-            <InfoFormPage />
+            <UnivFormPage />
           </Suspense>
         ),
       },
       {
-        path: PATH.SIGNUP_PASSWORD,
+        path: PATH.SIGNUP_INFO,
         element: (
           <Suspense>
             <InfoFormPage />

src/page/login/index/LoginPage.style.ts

@@ -17,14 +17,11 @@ export const formStyle = css({
   display: 'flex',
   flexDirection: 'column',
 
-  width: '51.1rem',
-  height: '53rem',
+  width: '60rem',
 
-  padding: '6rem',
+  padding: '6rem 10.5rem',
   alignItems: 'center',
   justifyContent: 'center',
-
-  gap: '3.2rem',
 });
 
 export const findPasswordButtonStyle = css({

src/page/login/index/LoginPage.tsx

@@ -35,7 +35,7 @@ const LoginPage = () => {
 
   return (
     <section css={pageStyle}>
-      <Logo width={108} height={40} />
+      <Logo css={{ flexShrink: 0 }} width={108} height={40} />
       <form onSubmit={handleLogin} css={formStyle}>
         <Flex styles={{ direction: 'column', gap: '0.8rem', width: '100%' }}>
           <Input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="아이디" />
@@ -47,10 +47,15 @@ const LoginPage = () => {
           />
         </Flex>
         <Flex styles={{ marginTop: '3.6rem', direction: 'column', width: '100%', gap: '1.2rem' }}>
-          <Button type="submit" variant="primary">
+          <Button size="xLarge" css={{ width: '100%' }} type="submit" variant="primary">
             로그인
           </Button>
-          <Button type="button" variant="secondary" onClick={회원가입페이지로이동}>
+          <Button
+            size="xLarge"
+            css={{ width: '100%' }}
+            type="button"
+            variant="secondary"
+            onClick={회원가입페이지로이동}>
             학교 메일로 회원가입
           </Button>
         </Flex>

src/page/signUp/index/TermPage.tsx

@@ -1,102 +1,60 @@
-import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import Button from '@/common/component/Button/Button';
 import Flex from '@/common/component/Flex/Flex';
 import Heading from '@/common/component/Heading/Heading';
-import Text from '@/common/component/Text/Text';
-import { scrollStyle } from '@/common/style/scroll';
 
-import { detailStyle } from '@/page/signUp/index/TermPage.style';
-import TermArea from '@/page/signUp/index/component/TermArea/TermArea';
+import TermItem from '@/page/signUp/index/component/TermItem/TermItem';
 import TermsAgreeButton from '@/page/signUp/index/component/TermsAgreeButton/TermsAgreeButton';
-import { pageStyle } from '@/page/signUp/info/InfoFormPage.style';
-import { formStyle } from '@/page/signUp/info/component/InfoForm/InfoForm.style';
+import { useTermForm } from '@/page/signUp/index/hook/useTermForm';
+import { formStyle, pageStyle } from '@/page/signUp/info/InfoFormPage.style';
 
 import { PATH } from '@/shared/constant/path';
 
 import { PERSONAL, TERM } from '@/mock/data/term';
 
 const TermPage = () => {
-  const [totalAgreeClicked, setTotalAgreeClicked] = useState(false);
-  const [requiredTermsStatus, setRequiredTermsStatus] = useState({
-    serviceTerm: false,
-    privatePolicy: false,
-  });
-  const [optionalTermsStatus, setOptionalTermsStatus] = useState({ collectionAgree: false });
+  const { totalAgreeClicked, termStatus, isConfirmed, handleAllTermsAgree, handleTermAgree } = useTermForm();
 
   const navigate = useNavigate();
 
-  const isConfirmed = Object.values(requiredTermsStatus).every((item) => item === true);
-
-  useEffect(() => {
-    if (
-      !requiredTermsStatus.serviceTerm ||
-      !requiredTermsStatus.privatePolicy ||
-      !optionalTermsStatus.collectionAgree
-    ) {
-      setTotalAgreeClicked(false);
-    }
-  }, [optionalTermsStatus, requiredTermsStatus, totalAgreeClicked]);
-
-  const 약관전체동의클릭 = () => {
-    setTotalAgreeClicked((prev) => !prev);
-
-    setRequiredTermsStatus({
-      serviceTerm: totalAgreeClicked ? false : true,
-      privatePolicy: totalAgreeClicked ? false : true,
-    });
-
-    setOptionalTermsStatus({ collectionAgree: !optionalTermsStatus.collectionAgree });
-  };
-
-  const handleNextStep = () => {
-    navigate(PATH.SIGNUP_INFO);
-  };
+  const handleNextStep = () => navigate(PATH.SIGNUP_UNIV);
 
   return (
     <Flex tag="main" css={pageStyle}>
-      <Flex tag="section" styles={{ direction: 'column', width: '51.1rem', gap: '3.2rem' }}>
-        <Heading tag="H3" css={{ padding: '1.6rem 0' }}>
-          이용 약관 동의
-        </Heading>
-        <form css={formStyle}>
-          <Flex styles={{ direction: 'column', width: '100%', gap: '3.2rem' }}>
-            <TermsAgreeButton isClicked={totalAgreeClicked} onClick={약관전체동의클릭} />
-
-            <TermArea
-              term="이용 약관"
-              onCheck={() => setRequiredTermsStatus((prev) => ({ ...prev, serviceTerm: !prev.serviceTerm }))}
-              isChecked={requiredTermsStatus.serviceTerm}>
-              <Text tag="body5" css={[detailStyle, scrollStyle]}>
-                {TERM}
-              </Text>
-            </TermArea>
-
-            <TermArea
-              term="개인정보 처리방침"
-              onCheck={() => setRequiredTermsStatus((prev) => ({ ...prev, privatePolicy: !prev.privatePolicy }))}
-              isChecked={requiredTermsStatus.privatePolicy}>
-              <Text tag="body5" css={[detailStyle, scrollStyle]}>
-                {PERSONAL}
-              </Text>
-            </TermArea>
-
-            <TermArea
-              term="개인정보 수집 및 이용"
-              onCheck={() => setOptionalTermsStatus((prev) => ({ ...prev, collectionAgree: !prev.collectionAgree }))}
-              isChecked={optionalTermsStatus.collectionAgree}
-              isRequired={false}>
-              <Text tag="body4" css={{ fontWeight: 400, marginLeft: '3.2rem' }}>
-                이벤트 혜택 정보 수신
-              </Text>
-            </TermArea>
-          </Flex>
-          <Button disabled={!isConfirmed} onClick={handleNextStep} variant="primary" size="large">
-            다음
-          </Button>
-        </form>
-      </Flex>
+      <form css={formStyle}>
+        <Heading tag="H4">이용 약관 동의</Heading>
+        <Flex styles={{ direction: 'column', width: '100%', gap: '1.6rem' }}>
+          <TermsAgreeButton isClicked={totalAgreeClicked} onClick={handleAllTermsAgree} />
+
+          <TermItem
+            term="이용 약관"
+            content={TERM}
+            description="티키 서비스 이용약관은 다음과 같은 내용을 담고 있습니다."
+            isRequired
+            isSelected={termStatus.serviceTerm}
+            onSelect={() => handleTermAgree('serviceTerm')}
+          />
+          <TermItem
+            term="개인정보 처리 방침"
+            content={PERSONAL}
+            description="티키 서비스 이용약관은 다음과 같은 내용을 담고 있습니다."
+            isRequired
+            isSelected={termStatus.privatePolicy}
+            onSelect={() => handleTermAgree('privatePolicy')}
+          />
+          <TermItem
+            term="개인정보 수집 및 이용"
+            content={PERSONAL}
+            description="티키 서비스 이용약관은 다음과 같은 내용을 담고 있습니다."
+            isSelected={termStatus.personalInfo}
+            onSelect={() => handleTermAgree('personalInfo')}
+          />
+        </Flex>
+        <Button disabled={!isConfirmed} onClick={handleNextStep} variant="primary" size="xLarge">
+          다음
+        </Button>
+      </form>
     </Flex>
   );
 };

src/page/signUp/index/component/TermItem/TermItem.style.ts

@@ -0,0 +1,48 @@
+import { css } from '@emotion/react';
+
+import { theme } from '@/common/style/theme/theme';
+
+export const containerStyle = (isSelected: boolean) =>
+  css({
+    display: 'flex',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+
+    width: '100%',
+    height: '4rem',
+
+    padding: '1.2rem',
+
+    backgroundColor: 'transparent',
+    borderRadius: '8px',
+    border: `1px solid ${isSelected ? theme.colors.key_500 : theme.colors.gray_300}`,
+
+    cursor: 'pointer',
+  });
+
+export const iconStyle = (isSelected: boolean) =>
+  css({
+    '& > path': {
+      fill: isSelected ? theme.colors.key_500 : theme.colors.gray_800,
+    },
+  });
+
+export const termTextStyle = css({
+  ...theme.text.body08,
+  fontWeight: 500,
+
+  color: theme.colors.gray_800,
+});
+
+export const contentStyle = css({
+  height: '37.8rem',
+
+  overflowY: 'scroll',
+});
+
+export const expandButtonStyle = css({
+  ...theme.text.body10,
+  fontWeight: 500,
+
+  borderRadius: '4px',
+});