Skip to content

Commit

Permalink
feat(bottle): profile component layout
Browse files Browse the repository at this point in the history
  • Loading branch information
stakbucks committed Sep 17, 2024
1 parent d17ae62 commit 2d38914
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 52 deletions.
75 changes: 43 additions & 32 deletions apps/bottle/src/app/profile/create/page.tsx
Original file line number Diff line number Diff line change
@@ -1,22 +1,22 @@
'use client';

import { Header } from '@/components/common/header';
import { Stepper } from '@/components/common/stepper';
import { MBTI } from '@/components/profile/MBTI';
import { Alcohol } from '@/components/profile/alcohol';
import { Height } from '@/components/profile/height';
import { Interests } from '@/components/profile/interests';
import { Job } from '@/components/profile/job';
import { KakaoId } from '@/components/profile/kakao-id';
import { Keywords } from '@/components/profile/keywords';
import { ProfileLayout } from '@/components/profile/layout';
import { Region } from '@/components/profile/region';
import { Religion } from '@/components/profile/religion';
import { Smoking } from '@/components/profile/smoking';
import { useFunnel } from '@/features/funnel';
import { createInit, POST } from '@/features/server';
import { getClientSideTokens } from '@/features/server/clientSideTokens';
import { Step } from '@/features/steps/StepContainer';
import { Profile } from '@/models/profile';
import { Asset } from '@bottlesteam/ui';
import { useRouter } from 'next/navigation';
import { CreateProfileProvider } from './CreateProfileProvider';

Expand All @@ -32,88 +32,108 @@ export default function CreateProfilePage() {
const { onNextStep, currentStep, getValue, getValues } = useFunnel<CreateProfileFunnel>('/profile/create');

const steps = [
<Step stepper={{ current: 1, max: MAX_STEPS }} key={2}>
<ProfileLayout key={1}>
<Header />
<Stepper current={1} max={MAX_STEPS} />
<MBTI
initialValue={getValue('mbti')}
onNext={mbti => {
onNextStep('mbti', mbti);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 2, max: MAX_STEPS }} key={3}>
</ProfileLayout>,
<ProfileLayout key={2}>
<Header onGoBack={router.back} />
<Stepper current={2} max={MAX_STEPS} />
<Keywords
initialValue={getValue('keyword')}
onNext={keyword => {
onNextStep('keyword', keyword);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 3, max: MAX_STEPS }} key={4}>
</ProfileLayout>,
<ProfileLayout key={3}>
<Header onGoBack={router.back} />
<Stepper current={3} max={MAX_STEPS} />
<Interests
initialValue={getValue('interest')}
onNext={interest => {
onNextStep('interest', interest);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 4, max: MAX_STEPS }} key={5}>
</ProfileLayout>,
<ProfileLayout key={4}>
<Header onGoBack={router.back} />
<Stepper current={4} max={MAX_STEPS} />
<Job
initialValue={getValue('job')}
onNext={job => {
onNextStep('job', job);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 5, max: MAX_STEPS }} key={6}>
</ProfileLayout>,
<ProfileLayout key={5}>
<Header onGoBack={router.back} />
<Stepper current={5} max={MAX_STEPS} />
<Height
initialValue={getValue('height')}
onNext={height => {
onNextStep('height', height);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 6, max: MAX_STEPS }} key={7}>
</ProfileLayout>,
<ProfileLayout key={6}>
<Header onGoBack={router.back} />
<Stepper current={6} max={MAX_STEPS} />
<Smoking
initialValue={getValue('smoking')}
onNext={smoking => {
onNextStep('smoking', smoking);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 7, max: MAX_STEPS }} key={8}>
</ProfileLayout>,
<ProfileLayout key={7}>
<Header onGoBack={router.back} />
<Stepper current={7} max={MAX_STEPS} />
<Alcohol
initialValue={getValue('alcohol')}
onNext={alcohol => {
onNextStep('alcohol', alcohol);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 8, max: MAX_STEPS }} key={9}>
</ProfileLayout>,
<ProfileLayout key={8}>
<Header onGoBack={router.back} />
<Stepper current={8} max={MAX_STEPS} />
<Religion
initialValue={getValue('religion')}
onNext={religion => {
onNextStep('religion', religion);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 9, max: MAX_STEPS }} key={10}>
</ProfileLayout>,
<ProfileLayout key={9}>
<Header onGoBack={router.back} />
<Stepper current={9} max={MAX_STEPS} />
<Region
initialValue={getValue('region')}
onNext={region => {
onNextStep('region', region);
}}
ctaButtonText="다음"
/>
</Step>,
<Step stepper={{ current: 10, max: MAX_STEPS }} key={11}>
</ProfileLayout>,
<ProfileLayout key={10}>
<Header onGoBack={router.back} />
<Stepper current={10} max={MAX_STEPS} />
<KakaoId
initialValue={getValue('kakaoId')}
onNext={async kakaoId => {
Expand All @@ -124,21 +144,12 @@ export default function CreateProfilePage() {
);
}}
/>
</Step>,
</ProfileLayout>,
];

return (
<>
<CreateProfileProvider>
<Header>
{currentStep > 1 && (
<button style={{ background: 'none', border: 'none' }}>
<Asset onClick={() => router.back()} type="icon-arrow-left" aria-label="go-back-icon" />
</button>
)}
</Header>
{steps[currentStep - 1]}
</CreateProfileProvider>
<CreateProfileProvider>{steps[currentStep - 1]}</CreateProfileProvider>
</>
);
}
3 changes: 3 additions & 0 deletions apps/bottle/src/app/profile/edit/(items)/kakao-id/page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export default function KakaoIdEditPage() {
return <></>;
}
15 changes: 13 additions & 2 deletions apps/bottle/src/components/common/header/index.tsx
Original file line number Diff line number Diff line change
@@ -1,10 +1,21 @@
import { Asset } from '@bottlesteam/ui';
import { ReactNode } from 'react';
import { headerStyle } from './headerStyle.css';

interface HeaderProps {
children?: ReactNode;
onGoBack?: () => void;
}

export function Header({ children }: HeaderProps) {
return <header className={headerStyle}>{children}</header>;
export function Header({ children, onGoBack }: HeaderProps) {
return (
<header className={headerStyle}>
{onGoBack != null && (
<button style={{ background: 'none', border: 'none' }}>
<Asset onClick={onGoBack} type="icon-arrow-left" aria-label="go-back-icon" />
</button>
)}
{children}
</header>
);
}
45 changes: 45 additions & 0 deletions apps/bottle/src/components/profile/layout/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import { FixedBottomCTAButton, Paragraph, ParagraphProps, VariantOneProps } from '@bottlesteam/ui';
import { ReactNode } from 'react';
import { containerStyle } from './profileLayoutStyle.css';

interface Props {
children: ReactNode;
}

function ProfileContainer({ children }: Props) {
return <div className={containerStyle}>{children}</div>;
}

function Title({ children, ...rest }: Omit<ParagraphProps, 'typography' | 'color'>) {
return (
<Paragraph typography="t1" color="black100" {...rest}>
{children}
</Paragraph>
);
}

function Description({ children, ...rest }: Omit<ParagraphProps, 'typography' | 'color'>) {
return (
<Paragraph typography="bo" color="neutral600" {...rest}>
{children}
</Paragraph>
);
}
function Subtitle({ children, ...rest }: Omit<ParagraphProps, 'typography' | 'color'>) {
return (
<Paragraph typography="st2" color="neutral600" {...rest}>
{children}
</Paragraph>
);
}

function FixedButton(props: VariantOneProps) {
return <FixedBottomCTAButton variant="one" {...props} />;
}

export const ProfileLayout = Object.assign(ProfileContainer, {
Title,
Description,
Subtitle,
FixedButton,
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
import { CTA_HEIGHT, spacings } from '@bottlesteam/ui';
import { style } from '@vanilla-extract/css';

/**
* NOTE: This is a trick to make sure that
* the Bottom CTA's gradient overlaps with the body of the Step Container.
*/
export const OVERLAP_HEIGHT = 20;
export const CONTAINER_OFFSET_HEIGHT = CTA_HEIGHT;

export const buttonContainer = style({
position: 'fixed',
bottom: 0,
left: 0,
width: '100%',
height: `${CTA_HEIGHT}px`,
paddingTop: spacings.xl,
display: 'flex',
justifyContent: 'center',
background: 'linear-gradient(180deg, rgba(251, 251, 251, 0) 0%, #FBFBFB 25%)',
});

export const containerStyle = style({
height: `calc(100vh - ${CONTAINER_OFFSET_HEIGHT - OVERLAP_HEIGHT}px)`,
overflow: 'scroll',
msOverflowStyle: 'none',
scrollbarWidth: 'none',
'::-webkit-scrollbar': {
display: 'none',
},
});

export const buttonStyle = style({
width: '100%',
'@media': {
'screen and (min-width: 500px)': {
width: '360px',
},
},
});
18 changes: 0 additions & 18 deletions apps/bottle/src/middleware.ts
Original file line number Diff line number Diff line change
Expand Up @@ -20,24 +20,6 @@ export async function middleware(request: NextRequest) {
return response;
}

// FIXME: uncomment after app store approval
// if (String(url).includes('create-profile') && !String(url).includes('create-profile/bottle')) {
// const tokens = getServerSideTokens();

// try {
// const userInfo = await GET<GetUserInfoData>(`/api/v1/profile/info`, tokens, createInit(tokens.accessToken));

// console.log('[signInUp]', userInfo);

// if (userInfo.signInUpStep === SignInUpState.SIGN_UP_APPLE_LOGIN_FINISHED) {
// const response = NextResponse.redirect(`${String(url)}/bottle`);
// return response;
// }
// } catch (error) {
// const response = NextResponse.next();
// return response;
// }
// }
const response = NextResponse.next();
return response;
}
Expand Down

0 comments on commit 2d38914

Please sign in to comment.