feat(pages/intro): add ProfileFormIntroPage

.storybook/preview.tsx

@@ -5,9 +5,11 @@ import 'src/shared/styles/variables.css';
 import 'src/shared/styles/typography.css';
 import { MyProfileProvider } from 'src/entities/profile/model/myProfileStore';
 import { IdealPartnerProvider } from 'src/entities/ideal_partner/model/idealPartnerStore';
+import { MemoryRouter } from 'react-router';
 
 const preview: Preview = {
   parameters: {
+    layout: 'fullscreen',
     controls: {
       matchers: {
         color: /(background|color)$/i,
@@ -22,11 +24,15 @@ const preview: Preview = {
   },
   decorators: [
     (Story) => (
-      <IdealPartnerProvider>
-        <MyProfileProvider>
-          <Story />
-        </MyProfileProvider>
-      </IdealPartnerProvider>
+      <MemoryRouter initialEntries={['/']}>
+        <IdealPartnerProvider>
+          <MyProfileProvider>
+            <div style={{ height: '100vh' }}>
+              <Story />
+            </div>
+          </MyProfileProvider>
+        </IdealPartnerProvider>
+      </MemoryRouter>
     ),
   ],
 };

src/pages/form/intro/ProfileFormIntroPage.module.css

@@ -0,0 +1,54 @@
+.Wrapper {
+  height: 100%;
+  width: 100%;
+  padding: 0 20px 8px;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.Image {
+  width: 100%;
+}
+
+/** 바텀시트 **/
+.InfoTitle {
+  margin-bottom: 24px;
+}
+
+.ContentWrapper {
+  display: grid;
+  gap: 4px;
+}
+
+.CheckListItem {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  & a {
+    font-weight: 500;
+    font-size: 16px;
+    color: var(--color-neutral-50);
+    text-decoration: none;
+  }
+
+  & label {
+    font-weight: 600;
+    font-size: 18px;
+  }
+}
+
+.InfoList {
+  margin-left: 24px;
+
+  & > li:not(:last-child) {
+    margin-bottom: 16px;
+  }
+}
+
+.InfoListItem {
+  list-style-type: var(--marker);
+  padding-inline-start: 8px;
+}

src/pages/form/intro/ProfileFormIntroPage.stories.ts

@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ProfileFormIntroPage } from 'src/pages/form/intro/ProfileFormIntroPage';
+
+const meta: Meta<typeof ProfileFormIntroPage> = {
+  component: ProfileFormIntroPage,
+};
+
+export default meta;
+type Story = StoryObj<typeof ProfileFormIntroPage>;
+
+export const Default: Story = {
+  args: {},
+};

src/pages/form/intro/ProfileFormIntroPage.tsx

@@ -0,0 +1,67 @@
+import { Button } from 'src/shared/ui/Button/Button';
+import { CheckBox } from 'src/shared/ui/CheckBox/CheckBox';
+import { Link } from '@remix-run/react';
+import { useBoolean } from 'src/shared/functions/useBoolean';
+import styles from './ProfileFormIntroPage.module.css';
+import { BottomSheet } from 'src/shared/ui/BottomSheet/BottomSheet';
+
+export const ProfileFormIntroPage = () => {
+  const { value: isOpen, setTrue: open, setFalse: close } = useBoolean(false);
+
+  const { value: checkedPrivacy, toggle: togglePrivacy } = useBoolean(false);
+  const { value: checkedTerm, toggle: toggleTerm } = useBoolean(false);
+
+  const canGoNext = checkedPrivacy && checkedTerm;
+
+  return (
+    <>
+      <div className={styles.Wrapper}>
+        <div />
+        <h2>
+          성심 성의껏 답변해주신다면,
+          <br />
+          저도 꼭 좋은 인연으로 보답할게요!
+        </h2>
+        <img className={styles.Image} src={'/images/googoo_1.png'} alt={'종이를 든 구구'} />
+        <Button variant={'filled'} widthType={'fill'} color={'primary'} onClick={open}>
+          시작하기
+        </Button>
+      </div>
+      <BottomSheet isOpen={isOpen} onClose={close} detent={'content-height'}>
+        <BottomSheet.Header onClose={close} />
+        <BottomSheet.Content
+          footerSlot={
+            <Button variant={'filled'} widthType={'fill'} color={'primary'} disabled={!canGoNext}>
+              확인했어요
+            </Button>
+          }
+        >
+          <h2 className={styles.InfoTitle}>잠깐! 입력 전 먼저 확인해주세요.</h2>
+          <div className={styles.ContentWrapper}>
+            <div className={styles.CheckListItem}>
+              <CheckBox checked={checkedPrivacy} label={'개인정보 처리방침 동의'} onChange={togglePrivacy} />
+              <Link to="https://www.naver.com">보기</Link>
+            </div>
+            <div className={styles.CheckListItem}>
+              <CheckBox checked={checkedTerm} label={'안내사항을 모두 확인했습니다.'} onChange={toggleTerm} />
+            </div>
+            <ul className={styles.InfoList}>
+              <li className={styles.InfoListItem} style={{ '--marker': '"😎"' }}>
+                작성한 내용 그대로 다른 사람에게 보여져요.
+                <br />
+                진솔한 자기소개 기대할게요!
+              </li>
+              <li className={styles.InfoListItem} style={{ '--marker': '"🔒"' }}>
+                주선자가 지정한 사람에게만 공유되고
+                <br />그 외의 목적으로는 사용하지 않습니다.
+              </li>
+              <li className={styles.InfoListItem} style={{ '--marker': '"✏️"' }}>
+                완료 후 수정은 주선자에게 요청해주세요.
+              </li>
+            </ul>
+          </div>
+        </BottomSheet.Content>
+      </BottomSheet>
+    </>
+  );
+};

src/shared/functions/useBoolean.ts

@@ -0,0 +1,13 @@
+import { useCallback, useState } from 'react';
+
+export const useBoolean = (initialValue = false) => {
+  const [value, setValue] = useState(initialValue);
+
+  return {
+    value,
+    setTrue: useCallback(() => setValue(true), []),
+    setFalse: useCallback(() => setValue(false), []),
+    toggle: useCallback(() => setValue((prev) => !prev), []),
+    setValue,
+  };
+};

src/shared/ui/CheckBox/CheckBox.module.css

@@ -11,6 +11,8 @@
     display: flex;
     align-items: center;
     gap: 8px;
+
+    cursor: pointer;
 }
 
 .CheckMark {
@@ -28,7 +30,7 @@
 .CheckBox {
     display: none;
 
-     & + label::before {
+    & + label::before {
          content: '';
          display: inline-flex;
          justify-content: center;