Merge branch 'main' of https://github.com/depromeet/15th-Team2-Web

depromeet · Oct 8, 2024 · db8edde · db8edde
2 parents 346cec5 + 3d63746
commit db8edde
Show file tree

Hide file tree

Showing 26 changed files with 384 additions and 37 deletions.
diff --git a/app/analyzers/clarity.tsx b/app/analyzers/clarity.tsx
@@ -0,0 +1,15 @@
+import Script from 'next/script';
+
+export const Clarity = () => {
+  return (
+    <Script id="clarity" type="text/javascript">
+      {`
+          (function(c,l,a,r,i,t,y){
+            c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
+            t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
+            y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
+          })(window, document, "clarity", "script", "o2k3nk4cvl");
+        `}
+    </Script>
+  );
+};
diff --git a/app/analyzers/index.ts b/app/analyzers/index.ts
@@ -0,0 +1 @@
+export * from './clarity';
diff --git a/app/join/finish/page.tsx b/app/join/finish/page.tsx
@@ -14,8 +14,8 @@ export default function Page() {
   const router = useRouter();
   const authInfo = useAtomValue(AuthInfoAtom);
 
-  const handleGoToMain = () => {
-    router.push('/');
+  const handleStartClick = () => {
+    router.push('/on-boarding');
   };
 
   return (
@@ -41,7 +41,7 @@ export default function Page() {
           buttonType="primary"
           size="large"
           className={buttonStyles}
-          onClick={handleGoToMain}
+          onClick={handleStartClick}
         />
       </div>
     </div>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -9,6 +9,7 @@ import MetaTagImage from '@/public/images/meta-tag.png';
 import { css } from '@/styled-system/css';
 import { pretendard } from '@/styles/font';
 
+import { Clarity } from './analyzers';
 import ReactQueryProvider from './providers/ReactQueryProvider';
 
 export const metadata: Metadata = {
@@ -62,6 +63,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="ko" className={pretendard.className}>
+      <head>
+        <Clarity />
+      </head>
       <body className={rootStyle}>
         <ReactQueryProvider>
           <ReactQueryDevtools initialIsOpen={true} />

diff --git a/app/on-boarding/page.tsx b/app/on-boarding/page.tsx
@@ -0,0 +1,101 @@
+'use client';
+
+import '../../features/on-boarding/steps.css';
+
+import Link from 'next/link';
+import { cloneElement, ReactElement } from 'react';
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+
+import { Button } from '@/components/atoms';
+import { BackButton, HeaderBar } from '@/components/molecules';
+import {
+  ProgressIndicator,
+  SkipButton,
+  Steps,
+  stepsIntroduce,
+  useProgressIndicator,
+} from '@/features/on-boarding';
+import { css } from '@/styled-system/css';
+
+export default function OnBoarding() {
+  const { step, handlers } = useProgressIndicator();
+  return (
+    <div className={layoutStyles.total}>
+      <HeaderBar
+        className={css({
+          marginBottom: '43px',
+        })}
+        innerClassName={css({ backgroundColor: 'background.gray!' })}
+      >
+        <HeaderBar.LeftContent>
+          <BackButton />
+        </HeaderBar.LeftContent>
+        <HeaderBar.CenterContent>
+          <ProgressIndicator step={step} />
+        </HeaderBar.CenterContent>
+        <HeaderBar.RightContent>
+          {[
+            {
+              component: (
+                <SkipButton label="건너뛰기" onClick={handlers.skip} />
+              ),
+              key: 'skipButton',
+            },
+          ]}
+        </HeaderBar.RightContent>
+      </HeaderBar>
+      <TransitionGroup
+        component={null}
+        childFactory={(child: ReactElement) => {
+          return cloneElement(child, {
+            classNames: 'fade',
+          });
+        }}
+      >
+        <CSSTransition key={step} timeout={200}>
+          <Steps current={step} />
+        </CSSTransition>
+      </TransitionGroup>
+      <div className={layoutStyles.button}>
+        {step < stepsIntroduce.length - 1 ? (
+          <Button
+            buttonType="secondary"
+            variant="outlined"
+            size="large"
+            label="다음"
+            interaction="normal"
+            onClick={() => handlers.next()}
+            className={css({ w: 'full' })}
+          />
+        ) : (
+          <Link href="/">
+            <Button
+              buttonType="primary"
+              variant="solid"
+              size="large"
+              label="시작하기"
+              interaction="normal"
+              className={css({ w: 'full' })}
+            />
+          </Link>
+        )}
+      </div>
+    </div>
+  );
+}
+
+const layoutStyles = {
+  total: css({
+    display: 'flex',
+    justifyContent: 'center',
+    backgroundColor: 'background.gray',
+    height: '100dvh',
+  }),
+  button: css({
+    w: 'full',
+    maxWidth: 'maxWidth',
+    position: 'fixed',
+    bottom: 'calc(15px + env(safe-area-inset-bottom))',
+    padding: '0 20px',
+  }),
+};
diff --git a/components/molecules/header-bar/header-bar.tsx b/components/molecules/header-bar/header-bar.tsx
@@ -9,34 +9,36 @@ import {
 import { css, cx } from '@/styled-system/css';
 import { flex } from '@/styled-system/patterns';
 
-import { leftIconStyles } from './style';
-
-interface LeftContentProps {
+interface CommonProps {
   children?: ReactNode;
   className?: string;
 }
 
-function LeftContent({ children, className }: LeftContentProps) {
-  return <div className={cx(leftIconStyles, className)}>{children}</div>;
+function LeftContent({ children, className }: CommonProps) {
+  return (
+    <div className={cx(layoutStyles.leftContent, className)}>{children}</div>
+  );
 }
 
-interface TitleProps {
-  children?: ReactNode;
-  className?: string;
+function Title({ children, className }: CommonProps) {
+  return (
+    <h3 className={cx(layoutStyles.centerContent, className)}>{children}</h3>
+  );
 }
 
-function Title({ children, className }: TitleProps) {
-  return <h3 className={cx(titleStyles, className)}>{children}</h3>;
+function CenterContent({ children, className }: CommonProps) {
+  return (
+    <div className={cx(layoutStyles.centerContent, className)}>{children}</div>
+  );
 }
 
-interface RightContentProps {
+interface RightContentProps extends Pick<CommonProps, 'className'> {
   children?: { component: ReactNode; key: string | number }[];
-  className?: string;
 }
 
 function RightContent({ children, className }: RightContentProps) {
   return (
-    <div className={cx(layoutStyles.rightIcon, className)}>
+    <div className={cx(layoutStyles.rightContent, className)}>
       {children?.map((object) => (
         <div key={object.key}>{object.component}</div>
       ))}
@@ -61,14 +63,24 @@ const getChildrenArray = (
 interface HeaderBarProps {
   children?: ReactNode;
   className?: string;
+  innerClassName?: string;
 }
 
-function HeaderBarLayout({ children, className }: HeaderBarProps) {
+function HeaderBarLayout({
+  children,
+  className,
+  innerClassName,
+}: HeaderBarProps) {
   const leftContent = getChildrenArray(
     children,
     1,
     (<LeftContent />).type as FunctionComponent,
   );
+  const centerContent = getChildrenArray(
+    children,
+    1,
+    (<CenterContent />).type as FunctionComponent,
+  );
   const title = getChildrenArray(
     children,
     1,
@@ -82,9 +94,10 @@ function HeaderBarLayout({ children, className }: HeaderBarProps) {
   return (
     <>
       <div style={{ height: '44px' }} className={className} />
-      <header className={layoutStyles.header}>
-        <div className={layoutStyles.content}>
+      <header className={cx(layoutStyles.header, innerClassName)}>
+        <div className={layoutStyles.totalContent}>
           {leftContent}
+          {centerContent}
           {title}
           {rightContent}
         </div>
@@ -96,6 +109,7 @@ function HeaderBarLayout({ children, className }: HeaderBarProps) {
 export const HeaderBar = Object.assign(HeaderBarLayout, {
   LeftContent,
   Title,
+  CenterContent,
   RightContent,
 });
 
@@ -111,23 +125,27 @@ const layoutStyles = {
     backgroundColor: 'white',
     zIndex: 200,
   }),
-  content: css({
+  totalContent: css({
     position: 'relative',
     display: 'flex',
     alignItems: 'center',
     w: 'full',
   }),
-  rightIcon: flex({
+  leftContent: flex({
+    position: 'absolute',
+    alignItems: 'center',
+    left: '12px',
+  }),
+  centerContent: flex({
+    justifyContent: 'center',
+    alignItems: 'center',
+    w: 'full',
+    textStyle: 'heading6',
+    fontWeight: 500,
+  }),
+  rightContent: flex({
     position: 'absolute',
     right: '12px',
     gap: '24px',
   }),
 };
-
-const titleStyles = flex({
-  justifyContent: 'center',
-  alignItems: 'center',
-  w: 'full',
-  textStyle: 'heading6',
-  fontWeight: 500,
-});
diff --git a/components/molecules/header-bar/index.ts b/components/molecules/header-bar/index.ts
@@ -3,4 +3,3 @@ export * from './header-bar';
 export * from './header-bar-notification-button';
 export * from './header-bar-setting-button';
 export * from './header-logo-button';
-export * from './style';
diff --git a/components/molecules/header-bar/style.ts b/components/molecules/header-bar/style.ts
diff --git a/features/on-boarding/components/atoms/index.ts b/features/on-boarding/components/atoms/index.ts
@@ -0,0 +1 @@
+export * from './skip-button';
diff --git a/features/on-boarding/components/atoms/skip-button.tsx b/features/on-boarding/components/atoms/skip-button.tsx
@@ -0,0 +1,20 @@
+import { css } from '@/styled-system/css';
+
+interface SkipButtonProps {
+  label: string;
+  onClick: () => void;
+}
+
+export function SkipButton({ label, onClick }: SkipButtonProps) {
+  return (
+    <button onClick={onClick} className={skipButtonStyles}>
+      {label}
+    </button>
+  );
+}
+
+const skipButtonStyles = css({
+  textStyle: 'label1.normal',
+  color: 'text.alternative',
+  fontWeight: 500,
+});
diff --git a/features/on-boarding/components/index.ts b/features/on-boarding/components/index.ts
@@ -0,0 +1,2 @@
+export * from './atoms';
+export * from './molecules';
diff --git a/features/on-boarding/components/molecules/index.ts b/features/on-boarding/components/molecules/index.ts
@@ -0,0 +1,2 @@
+export * from './progress-indicator';
+export * from './steps';
diff --git a/features/on-boarding/components/molecules/progress-indicator.tsx b/features/on-boarding/components/molecules/progress-indicator.tsx
@@ -0,0 +1,40 @@
+import { css, cva } from '@/styled-system/css';
+import { flex } from '@/styled-system/patterns';
+
+import { stepsIntroduce } from '../../constants';
+
+interface ProgressIndicatorProps {
+  step: number;
+}
+
+export function ProgressIndicator({ step }: ProgressIndicatorProps) {
+  return (
+    <div className={progressIndicatorStyles}>
+      {Array.from({ length: stepsIntroduce.length }, (_, i) => (
+        <IndicatorDot key={i} selected={step === i} />
+      ))}
+    </div>
+  );
+}
+
+interface IndicatorDotProps {
+  selected: boolean;
+}
+
+function IndicatorDot({ selected }: IndicatorDotProps) {
+  return <div className={css(indicatorDotStyles.raw({ selected }))} />;
+}
+
+const progressIndicatorStyles = flex({
+  gap: '6px',
+});
+
+const indicatorDotStyles = cva({
+  base: { display: 'flex', width: '6px', height: '6px', borderRadius: 'full' },
+  variants: {
+    selected: {
+      true: { backgroundColor: 'blue.70' },
+      false: { backgroundColor: 'line.neutral' },
+    },
+  },
+});
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './atoms';
		export * from './molecules';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export * from './progress-indicator';
		export * from './steps';