From de68a8a331f2e04dbea11d03cb7a3a10a8ed2993 Mon Sep 17 00:00:00 2001 From: stakbucks Date: Fri, 27 Sep 2024 23:10:12 +0900 Subject: [PATCH 01/11] fix(bottle): removed deprecated code --- apps/bottle/src/app/intro/create/page.tsx | 0 apps/bottle/src/app/profile/create/layout.tsx | 7 +------ 2 files changed, 1 insertion(+), 6 deletions(-) create mode 100644 apps/bottle/src/app/intro/create/page.tsx diff --git a/apps/bottle/src/app/intro/create/page.tsx b/apps/bottle/src/app/intro/create/page.tsx new file mode 100644 index 0000000..e69de29 diff --git a/apps/bottle/src/app/profile/create/layout.tsx b/apps/bottle/src/app/profile/create/layout.tsx index 0bfe6cc..44e11ae 100644 --- a/apps/bottle/src/app/profile/create/layout.tsx +++ b/apps/bottle/src/app/profile/create/layout.tsx @@ -1,5 +1,4 @@ import { getServerSideTokens } from '@/features/server/serverSideTokens'; -import { StepProvider } from '@/features/steps/StepProvider'; import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary'; import { regionsQueryOptions } from '@/store/query/useRegionsQuery'; import { userInfoQueryOptions } from '@/store/query/useUserInfoQuery'; @@ -12,11 +11,7 @@ export default async function CreateProfileLayout({ children }: { children: Reac return ( - - - {children} - - + {children} ); } From 0cff32d1001b231046edd17e5e660966b6e3d624 Mon Sep 17 00:00:00 2001 From: stakbucks Date: Fri, 27 Sep 2024 23:25:38 +0900 Subject: [PATCH 02/11] fix(bottle): removed deprecated code --- apps/bottle/src/app/intro/create/page.tsx | 10 ++++++++++ .../src/app/profile/create/CreateProfileProvider.tsx | 10 ---------- apps/bottle/src/app/profile/create/layout.tsx | 8 ++------ apps/bottle/src/app/profile/create/page.tsx | 3 +-- 4 files changed, 13 insertions(+), 18 deletions(-) delete mode 100644 apps/bottle/src/app/profile/create/CreateProfileProvider.tsx diff --git a/apps/bottle/src/app/intro/create/page.tsx b/apps/bottle/src/app/intro/create/page.tsx index e69de29..b511c9b 100644 --- a/apps/bottle/src/app/intro/create/page.tsx +++ b/apps/bottle/src/app/intro/create/page.tsx @@ -0,0 +1,10 @@ +import { getServerSideTokens } from '@/features/server/serverSideTokens'; +import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary'; +import { currentUserProfileQueryOptions } from '@/store/query/useCurrentUserProfileQuery'; +import type { ReactNode } from 'react'; + +export default async function CreateIntroLayout({ children }: { children: ReactNode }) { + const tokens = getServerSideTokens(); + + return {children}; +} diff --git a/apps/bottle/src/app/profile/create/CreateProfileProvider.tsx b/apps/bottle/src/app/profile/create/CreateProfileProvider.tsx deleted file mode 100644 index 1004133..0000000 --- a/apps/bottle/src/app/profile/create/CreateProfileProvider.tsx +++ /dev/null @@ -1,10 +0,0 @@ -'use client'; - -import { createFunnelValuesContext } from '@/features/funnel-values/createFunnelValuesContext'; -import { Profile } from '@/models/profile'; - -export interface CreateProfileValues extends Profile { - kakaoId: string; -} - -export const [CreateProfileProvider, useCreateProfileValues] = createFunnelValuesContext(); diff --git a/apps/bottle/src/app/profile/create/layout.tsx b/apps/bottle/src/app/profile/create/layout.tsx index 44e11ae..a817ece 100644 --- a/apps/bottle/src/app/profile/create/layout.tsx +++ b/apps/bottle/src/app/profile/create/layout.tsx @@ -2,16 +2,12 @@ import { getServerSideTokens } from '@/features/server/serverSideTokens'; import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary'; import { regionsQueryOptions } from '@/store/query/useRegionsQuery'; import { userInfoQueryOptions } from '@/store/query/useUserInfoQuery'; -import { ReactNode, Suspense } from 'react'; +import type { ReactNode } from 'react'; export default async function CreateProfileLayout({ children }: { children: ReactNode }) { const tokens = getServerSideTokens(); const serverFetchOptions = [regionsQueryOptions(tokens), userInfoQueryOptions(tokens)]; - return ( - - {children} - - ); + return {children}; } diff --git a/apps/bottle/src/app/profile/create/page.tsx b/apps/bottle/src/app/profile/create/page.tsx index bc011f7..5ac856c 100644 --- a/apps/bottle/src/app/profile/create/page.tsx +++ b/apps/bottle/src/app/profile/create/page.tsx @@ -18,7 +18,6 @@ import { Profile } from '@/models/profile'; import { User } from '@/models/user'; import { useProfileMutation } from '@/store/mutation/useProfileMuatation'; import { useRouter } from 'next/navigation'; -import { CreateProfileProvider } from './CreateProfileProvider'; const MAX_STEPS = 10; @@ -142,5 +141,5 @@ export default function CreateProfilePage() { , ]; - return {steps[currentStep - 1]}; + return <>{steps[currentStep - 1]}; } From 29eff5a6a9a462e74f6bae4338c8eb37c0e19462 Mon Sep 17 00:00:00 2001 From: stakbucks Date: Fri, 27 Sep 2024 23:51:35 +0900 Subject: [PATCH 03/11] feat(bottle): funnel setup --- apps/bottle/src/app/intro/create/layout.tsx | 10 ++++ apps/bottle/src/app/intro/create/page.tsx | 54 ++++++++++++++++--- .../src/components/intro/images/index.tsx | 12 +++++ .../components/intro/introduction/index.tsx | 22 ++++++++ 4 files changed, 91 insertions(+), 7 deletions(-) create mode 100644 apps/bottle/src/app/intro/create/layout.tsx create mode 100644 apps/bottle/src/components/intro/images/index.tsx create mode 100644 apps/bottle/src/components/intro/introduction/index.tsx diff --git a/apps/bottle/src/app/intro/create/layout.tsx b/apps/bottle/src/app/intro/create/layout.tsx new file mode 100644 index 0000000..b511c9b --- /dev/null +++ b/apps/bottle/src/app/intro/create/layout.tsx @@ -0,0 +1,10 @@ +import { getServerSideTokens } from '@/features/server/serverSideTokens'; +import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary'; +import { currentUserProfileQueryOptions } from '@/store/query/useCurrentUserProfileQuery'; +import type { ReactNode } from 'react'; + +export default async function CreateIntroLayout({ children }: { children: ReactNode }) { + const tokens = getServerSideTokens(); + + return {children}; +} diff --git a/apps/bottle/src/app/intro/create/page.tsx b/apps/bottle/src/app/intro/create/page.tsx index b511c9b..c0795fb 100644 --- a/apps/bottle/src/app/intro/create/page.tsx +++ b/apps/bottle/src/app/intro/create/page.tsx @@ -1,10 +1,50 @@ -import { getServerSideTokens } from '@/features/server/serverSideTokens'; -import { ServerFetchBoundary } from '@/store/query/ServerFetchBoundary'; -import { currentUserProfileQueryOptions } from '@/store/query/useCurrentUserProfileQuery'; -import type { ReactNode } from 'react'; +'use client'; -export default async function CreateIntroLayout({ children }: { children: ReactNode }) { - const tokens = getServerSideTokens(); +import { Header } from '@/components/common/header'; +import { Stepper } from '@/components/common/stepper'; +import { Images } from '@/components/intro/images'; +import { Introduction } from '@/components/intro/introduction'; +import { ProfileLayout } from '@/components/profile/layout'; +import { AppBridgeMessageType, useAppBridge } from '@/features/app-bridge'; +import { useFunnel } from '@/features/funnel'; +import { useRouter } from 'next/navigation'; - return {children}; +const MAX_STEPS = 2; + +type CreateIntroFunnelValues = { + introduction: [{ question: string; answer: string }]; + // FIXME: depends on server API + imageUrl: string; +}; + +export default function CreateIntroPage() { + const { send } = useAppBridge(); + const router = useRouter(); + + const { onNextStep, currentStep, getValue } = useFunnel('/intro/create'); + + const steps = [ + +
{ + send({ type: AppBridgeMessageType.WEB_VIEW_CLOSE }); + }} + /> + + { + onNextStep('introduction', [{ answer: '', question: '' }]); + }} + ctaButtonText="다음" + /> + , + +
+ + {}} ctaButtonText="완료" /> + , + ]; + + return <>{steps[currentStep - 1]}; } diff --git a/apps/bottle/src/components/intro/images/index.tsx b/apps/bottle/src/components/intro/images/index.tsx new file mode 100644 index 0000000..afe838e --- /dev/null +++ b/apps/bottle/src/components/intro/images/index.tsx @@ -0,0 +1,12 @@ +import { ProfileLayout } from '@/components/profile/layout'; +import { BaseProfileComponentProps } from '@/components/profile/types'; +import { CurrentUser } from '@/models/user'; + +export function Images({ initialValue, onNext, ctaButtonText }: BaseProfileComponentProps) { + return ( + <> + {'보틀에 담을 나의\n사진을 골라주세요'} + {}}>{ctaButtonText} + + ); +} diff --git a/apps/bottle/src/components/intro/introduction/index.tsx b/apps/bottle/src/components/intro/introduction/index.tsx new file mode 100644 index 0000000..74946ca --- /dev/null +++ b/apps/bottle/src/components/intro/introduction/index.tsx @@ -0,0 +1,22 @@ +import { ProfileLayout } from '@/components/profile/layout'; +import { BaseProfileComponentProps } from '@/components/profile/types'; +import { CurrentUser } from '@/models/user'; + +export function Introduction({ + initialValue, + onNext, + ctaButtonText, +}: BaseProfileComponentProps) { + return ( + <> + {'보틀에 담을\n소개를 작성해 주세요'} + { + onNext(introduction => {}); + }} + > + {ctaButtonText} + + + ); +} From e2f6d62cd6a8afb4019dd26a580a9cd860d79081 Mon Sep 17 00:00:00 2001 From: stakbucks Date: Sat, 28 Sep 2024 13:57:06 +0900 Subject: [PATCH 04/11] refactor(bottle, ui): change texfield component name to input --- apps/bottle/src/app/admin/login/page.tsx | 8 ++++---- .../[...slug]/ExpressInterestBottomSheet.tsx | 6 +++--- .../create-profile/_steps/information/index.tsx | 10 +++++----- .../app/create-profile/_steps/kakao-id/index.tsx | 6 +++--- apps/bottle/src/app/login/page.tsx | 10 +++++----- .../src/app/profile/create/SignupProvider.tsx | 13 ------------- .../src/app/signup/_steps/authorize/index.tsx | 10 +++++----- .../src/app/signup/_steps/information/index.tsx | 10 +++++----- apps/bottle/src/components/intro/images/index.tsx | 2 +- .../src/components/intro/introduction/index.tsx | 14 ++------------ .../src/components/profile/information/index.tsx | 10 +++++----- .../src/components/profile/kakao-id/index.tsx | 6 +++--- packages/ui/src/components/index.ts | 4 ++-- .../components/{text-field => input}/Caption.tsx | 0 .../{text-field/TextField.tsx => input/Input.tsx} | 8 ++++---- .../{text-field => input}/captionStyle.css.ts | 0 packages/ui/src/components/input/index.ts | 2 ++ .../inputStyle.css.ts} | 0 packages/ui/src/components/text-field/index.ts | 2 -- packages/ui/src/index.ts | 4 ++-- 20 files changed, 51 insertions(+), 74 deletions(-) delete mode 100644 apps/bottle/src/app/profile/create/SignupProvider.tsx rename packages/ui/src/components/{text-field => input}/Caption.tsx (100%) rename packages/ui/src/components/{text-field/TextField.tsx => input/Input.tsx} (78%) rename packages/ui/src/components/{text-field => input}/captionStyle.css.ts (100%) create mode 100644 packages/ui/src/components/input/index.ts rename packages/ui/src/components/{text-field/textFieldStyle.css.ts => input/inputStyle.css.ts} (100%) delete mode 100644 packages/ui/src/components/text-field/index.ts diff --git a/apps/bottle/src/app/admin/login/page.tsx b/apps/bottle/src/app/admin/login/page.tsx index abc1a33..a135c22 100644 --- a/apps/bottle/src/app/admin/login/page.tsx +++ b/apps/bottle/src/app/admin/login/page.tsx @@ -3,7 +3,7 @@ import { Header } from '@/components/common/header'; import { POST } from '@/features/server'; import { Step } from '@/features/steps/StepContainer'; -import { spacings, TextField } from '@bottlesteam/ui'; +import { spacings, Input } from '@bottlesteam/ui'; import { setCookie } from 'cookies-next'; import { useRouter } from 'next/navigation'; import { useState } from 'react'; @@ -57,7 +57,7 @@ export default function LoginPage() {
아이디 - { @@ -67,14 +67,14 @@ export default function LoginPage() {
비밀번호 - { setPassword(e.currentTarget.value); }} type="password" placeholder="비밀번호를 입력해 주세요" - caption={isError && {ERROR_MESSAGE}} + caption={isError && {ERROR_MESSAGE}} />
diff --git a/apps/bottle/src/app/bottles/[...slug]/ExpressInterestBottomSheet.tsx b/apps/bottle/src/app/bottles/[...slug]/ExpressInterestBottomSheet.tsx index 5ebc172..9483827 100644 --- a/apps/bottle/src/app/bottles/[...slug]/ExpressInterestBottomSheet.tsx +++ b/apps/bottle/src/app/bottles/[...slug]/ExpressInterestBottomSheet.tsx @@ -1,5 +1,5 @@ import { Control } from '@/components/common/control'; -import { Asset, BottomSheet, BottomSheetProps, Button, Paragraph, TextField, spacings } from '@bottlesteam/ui'; +import { Asset, BottomSheet, BottomSheetProps, Button, Paragraph, Input, spacings } from '@bottlesteam/ui'; import { useEffect, useState } from 'react'; import { deleteButtonStyle, emoticonsContainer } from './bottomSheetStyle.css'; @@ -32,7 +32,7 @@ export function ExpressInterestBottomSheet({ onExpress, ...bottomSheetProps }: P size="sm" body={ <> - setMessage(e.currentTarget.value)} @@ -50,7 +50,7 @@ export function ExpressInterestBottomSheet({ onExpress, ...bottomSheetProps }: P ) } /> - {isError && ERROR_CAPTION} + {isError && ERROR_CAPTION} 이모티콘으로 표현해보세요 diff --git a/apps/bottle/src/app/create-profile/_steps/information/index.tsx b/apps/bottle/src/app/create-profile/_steps/information/index.tsx index f2e5366..d470174 100644 --- a/apps/bottle/src/app/create-profile/_steps/information/index.tsx +++ b/apps/bottle/src/app/create-profile/_steps/information/index.tsx @@ -2,7 +2,7 @@ import { Control } from '@/components/common/control'; import { Step } from '@/features/steps/StepContainer'; import { useStep } from '@/features/steps/StepProvider'; import { useSignupProfileMutation } from '@/store/mutation/useSignupProfileMutation'; -import { Button, TextField } from '@bottlesteam/ui'; +import { Button, Input } from '@bottlesteam/ui'; import { useState } from 'react'; import { useSignupProfileValues, SignupProfileValues } from '../../SignupProvider'; import { birthDateWrapper, buttonsWrapper, containerStyle, fieldStyle } from './informationStyle.css'; @@ -37,28 +37,28 @@ export function Information() { - setName(e.currentTarget.value)} /> + setName(e.currentTarget.value)} />
- setYear(e.currentTarget.value)} /> - setMonth(e.currentTarget.value)} /> - {'연락처 공유를 위해\n카카오톡 아이디를 입력해 주세요'} 오타가 없는지 한 번 더 확인해 주세요 - setKakaoId(e.currentTarget.value)} style={{ marginTop: spacings.xxl }} /> - {isError && ERROR_CAPTION} + {isError && ERROR_CAPTION} { diff --git a/apps/bottle/src/app/login/page.tsx b/apps/bottle/src/app/login/page.tsx index 9175315..d7f0e59 100644 --- a/apps/bottle/src/app/login/page.tsx +++ b/apps/bottle/src/app/login/page.tsx @@ -7,7 +7,7 @@ import { useLeftTimeCaption } from '@/features/time/useLeftTimeCaption'; import { useSendAuthCodeMutation } from '@/store/mutation/useSendAuthCodeMutation'; import { useSignInUpMutation } from '@/store/mutation/useSignInUpMutation'; import { WRONG_AUTH_CODE_MESSAGE } from '@/store/mutation/useSignupMutation'; -import { Asset, Button, spacings, TextField } from '@bottlesteam/ui'; +import { Asset, Button, spacings, Input } from '@bottlesteam/ui'; import { useState } from 'react'; import { containerStyle, fieldStyle } from './loginStyle.css'; @@ -50,7 +50,7 @@ export default function LoginPage() {
휴대폰 번호 - { @@ -67,7 +67,7 @@ export default function LoginPage() {
인증 번호 - { setAuthCode(e.currentTarget.value); @@ -76,9 +76,9 @@ export default function LoginPage() { placeholder="번호를 입력해 주세요" caption={ isAuthCodeError ? ( - {WRONG_AUTH_CODE_MESSAGE} + {WRONG_AUTH_CODE_MESSAGE} ) : ( - isSMSSent && {timeCaption} + isSMSSent && {timeCaption} ) } /> diff --git a/apps/bottle/src/app/profile/create/SignupProvider.tsx b/apps/bottle/src/app/profile/create/SignupProvider.tsx deleted file mode 100644 index 5a93269..0000000 --- a/apps/bottle/src/app/profile/create/SignupProvider.tsx +++ /dev/null @@ -1,13 +0,0 @@ -'use client'; - -import { createFunnelValuesContext } from '@/features/funnel-values/createFunnelValuesContext'; - -export interface SignupProfileValues { - birthDay: number; - birthMonth: number; - birthYear: number; - gender: 'MALE' | 'FEMALE'; - name: string; -} - -export const [SignupProfileProvider, useSignupProfileValues] = createFunnelValuesContext(); diff --git a/apps/bottle/src/app/signup/_steps/authorize/index.tsx b/apps/bottle/src/app/signup/_steps/authorize/index.tsx index 1c785b7..6f70e4b 100644 --- a/apps/bottle/src/app/signup/_steps/authorize/index.tsx +++ b/apps/bottle/src/app/signup/_steps/authorize/index.tsx @@ -3,7 +3,7 @@ import { Step } from '@/features/steps/StepContainer'; import { useLeftTimeCaption } from '@/features/time/useLeftTimeCaption'; import { useSendAuthCodeMutation } from '@/store/mutation/useSendAuthCodeMutation'; import { useSignupMutation, WRONG_AUTH_CODE_MESSAGE } from '@/store/mutation/useSignupMutation'; -import { Button, TextField } from '@bottlesteam/ui'; +import { Button, Input } from '@bottlesteam/ui'; import { useState } from 'react'; import { SignupValues, useSignupValues } from '../../SignupProvider'; import { containerStyle, fieldStyle } from './authorizeStyle.css'; @@ -45,7 +45,7 @@ export function Authorize() {
휴대폰 번호 - { @@ -62,7 +62,7 @@ export function Authorize() {
인증 번호 - { setAuthCode(e.currentTarget.value); @@ -71,9 +71,9 @@ export function Authorize() { placeholder="번호를 입력해 주세요" caption={ isAuthCodeError ? ( - {WRONG_AUTH_CODE_MESSAGE} + {WRONG_AUTH_CODE_MESSAGE} ) : ( - isSMSSent && {timeCaption} + isSMSSent && {timeCaption} ) } /> diff --git a/apps/bottle/src/app/signup/_steps/information/index.tsx b/apps/bottle/src/app/signup/_steps/information/index.tsx index 4d35bd9..afdb430 100644 --- a/apps/bottle/src/app/signup/_steps/information/index.tsx +++ b/apps/bottle/src/app/signup/_steps/information/index.tsx @@ -2,7 +2,7 @@ import { Control } from '@/components/common/control'; import { Stepper } from '@/components/common/stepper'; import { Step } from '@/features/steps/StepContainer'; import { useStep } from '@/features/steps/StepProvider'; -import { Button, TextField } from '@bottlesteam/ui'; +import { Button, Input } from '@bottlesteam/ui'; import { useState } from 'react'; import { SignupValues, useSignupValues } from '../../SignupProvider'; import { birthDateWrapper, buttonsWrapper, containerStyle, fieldStyle } from './informationStyle.css'; @@ -37,28 +37,28 @@ export function Information() { - setName(e.currentTarget.value)} /> + setName(e.currentTarget.value)} />
- setYear(e.currentTarget.value)} /> - setMonth(e.currentTarget.value)} /> - ) { +export function Images({ ctaButtonText }: BaseProfileComponentProps) { return ( <> {'보틀에 담을 나의\n사진을 골라주세요'} diff --git a/apps/bottle/src/components/intro/introduction/index.tsx b/apps/bottle/src/components/intro/introduction/index.tsx index 74946ca..00d507a 100644 --- a/apps/bottle/src/components/intro/introduction/index.tsx +++ b/apps/bottle/src/components/intro/introduction/index.tsx @@ -2,21 +2,11 @@ import { ProfileLayout } from '@/components/profile/layout'; import { BaseProfileComponentProps } from '@/components/profile/types'; import { CurrentUser } from '@/models/user'; -export function Introduction({ - initialValue, - onNext, - ctaButtonText, -}: BaseProfileComponentProps) { +export function Introduction({ ctaButtonText }: BaseProfileComponentProps) { return ( <> {'보틀에 담을\n소개를 작성해 주세요'} - { - onNext(introduction => {}); - }} - > - {ctaButtonText} - + {}}>{ctaButtonText} ); } diff --git a/apps/bottle/src/components/profile/information/index.tsx b/apps/bottle/src/components/profile/information/index.tsx index 569f5c1..3b6681e 100644 --- a/apps/bottle/src/components/profile/information/index.tsx +++ b/apps/bottle/src/components/profile/information/index.tsx @@ -3,7 +3,7 @@ import { Control } from '@/components/common/control'; import { Step } from '@/features/steps/StepContainer'; import { useStep } from '@/features/steps/StepProvider'; import { useSignupProfileMutation } from '@/store/mutation/useSignupProfileMutation'; -import { Button, TextField } from '@bottlesteam/ui'; +import { Button, Input } from '@bottlesteam/ui'; import { useState } from 'react'; import { birthDateWrapper, buttonsWrapper, containerStyle, fieldStyle } from './informationStyle.css'; @@ -37,28 +37,28 @@ export function Information() { - setName(e.currentTarget.value)} /> + setName(e.currentTarget.value)} />
- setYear(e.currentTarget.value)} /> - setMonth(e.currentTarget.value)} /> - 오타가 없는지 한 번 더 확인해 주세요 - setKakaoId(e.currentTarget.value)} style={{ marginTop: spacings.xxl }} /> - {isError && ERROR_CAPTION} + {isError && ERROR_CAPTION} { diff --git a/packages/ui/src/components/index.ts b/packages/ui/src/components/index.ts index dce43d3..b0d493a 100644 --- a/packages/ui/src/components/index.ts +++ b/packages/ui/src/components/index.ts @@ -20,7 +20,7 @@ export { BottomSheet } from './bottom-sheet'; export type { BottomSheetProps } from './bottom-sheet'; export { Chip } from './chip'; export type { ChipProps } from './chip'; -export { TextField } from './text-field'; -export type { TextFieldProps } from './text-field'; +export { Input } from './input'; +export type { InputProps } from './input'; export { Agreement } from './agreement'; export type { AgreementProps, AgreementItemProps } from './agreement'; diff --git a/packages/ui/src/components/text-field/Caption.tsx b/packages/ui/src/components/input/Caption.tsx similarity index 100% rename from packages/ui/src/components/text-field/Caption.tsx rename to packages/ui/src/components/input/Caption.tsx diff --git a/packages/ui/src/components/text-field/TextField.tsx b/packages/ui/src/components/input/Input.tsx similarity index 78% rename from packages/ui/src/components/text-field/TextField.tsx rename to packages/ui/src/components/input/Input.tsx index 0e8f72d..348fb15 100644 --- a/packages/ui/src/components/text-field/TextField.tsx +++ b/packages/ui/src/components/input/Input.tsx @@ -1,14 +1,14 @@ import { ComponentPropsWithoutRef, ElementRef, ReactNode, forwardRef, useId, useState } from 'react'; import { Caption } from './Caption'; -import { labelStyle, inputStyle, containerStyle } from './textFieldStyle.css'; +import { labelStyle, inputStyle, containerStyle } from './inputStyle.css'; -export interface TextFieldProps extends ComponentPropsWithoutRef<'input'> { +export interface InputProps extends ComponentPropsWithoutRef<'input'> { rightButton?: ReactNode; caption?: ReactNode; error?: boolean; } -const TextFieldImpl = forwardRef, TextFieldProps>( +const InputImpl = forwardRef, InputProps>( ({ rightButton, caption, error = false, style, ...inputProps }, ref) => { const id = useId(); const [focused, setFocused] = useState(false); @@ -39,6 +39,6 @@ const TextFieldImpl = forwardRef, TextFieldProps>( } ); -export const TextField = Object.assign(TextFieldImpl, { +export const Input = Object.assign(InputImpl, { Caption, }); diff --git a/packages/ui/src/components/text-field/captionStyle.css.ts b/packages/ui/src/components/input/captionStyle.css.ts similarity index 100% rename from packages/ui/src/components/text-field/captionStyle.css.ts rename to packages/ui/src/components/input/captionStyle.css.ts diff --git a/packages/ui/src/components/input/index.ts b/packages/ui/src/components/input/index.ts new file mode 100644 index 0000000..785490f --- /dev/null +++ b/packages/ui/src/components/input/index.ts @@ -0,0 +1,2 @@ +export { Input } from './Input'; +export type { InputProps } from './Input'; diff --git a/packages/ui/src/components/text-field/textFieldStyle.css.ts b/packages/ui/src/components/input/inputStyle.css.ts similarity index 100% rename from packages/ui/src/components/text-field/textFieldStyle.css.ts rename to packages/ui/src/components/input/inputStyle.css.ts diff --git a/packages/ui/src/components/text-field/index.ts b/packages/ui/src/components/text-field/index.ts deleted file mode 100644 index 132aad0..0000000 --- a/packages/ui/src/components/text-field/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { TextField } from './TextField'; -export type { TextFieldProps } from './TextField'; diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts index 41b9dbe..5eab231 100644 --- a/packages/ui/src/index.ts +++ b/packages/ui/src/index.ts @@ -14,7 +14,7 @@ export { BottomSheet, Chip, Card, - TextField, + Input, Agreement, } from './components'; export type { @@ -32,7 +32,7 @@ export type { BottomSheetProps, ChipProps, CardProps, - TextFieldProps, + InputProps, AgreementProps, AgreementItemProps, } from './components'; From 4c4aef28f6e36d431e9406c5bb8307624b376eff Mon Sep 17 00:00:00 2001 From: stakbucks Date: Sat, 28 Sep 2024 15:51:16 +0900 Subject: [PATCH 05/11] =?UTF-8?q?feat(ui):=20textarea=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/intro/introduction/index.tsx | 23 +++++++ packages/ui/src/components/index.ts | 2 + .../ui/src/components/textarea/Caption.tsx | 12 ++++ .../ui/src/components/textarea/Textarea.tsx | 44 +++++++++++++ .../components/textarea/captionStyle.css.ts | 21 ++++++ packages/ui/src/components/textarea/index.ts | 2 + .../components/textarea/textareaStyle.css.ts | 64 +++++++++++++++++++ packages/ui/src/index.ts | 2 + 8 files changed, 170 insertions(+) create mode 100644 packages/ui/src/components/textarea/Caption.tsx create mode 100644 packages/ui/src/components/textarea/Textarea.tsx create mode 100644 packages/ui/src/components/textarea/captionStyle.css.ts create mode 100644 packages/ui/src/components/textarea/index.ts create mode 100644 packages/ui/src/components/textarea/textareaStyle.css.ts diff --git a/apps/bottle/src/components/intro/introduction/index.tsx b/apps/bottle/src/components/intro/introduction/index.tsx index 00d507a..20457f9 100644 --- a/apps/bottle/src/components/intro/introduction/index.tsx +++ b/apps/bottle/src/components/intro/introduction/index.tsx @@ -1,11 +1,34 @@ +'use client'; + import { ProfileLayout } from '@/components/profile/layout'; import { BaseProfileComponentProps } from '@/components/profile/types'; import { CurrentUser } from '@/models/user'; +import { spacings, Textarea } from '@bottlesteam/ui'; +import { useState } from 'react'; + +const MINIMUM_TEXT_LENGTH = 50; +const PLACEHOLDER = + '호기심 많고 새로운 경험을 즐깁니다. 주말엔 책을 읽거나 맛집을 찾아다니며 여유를 즐기고, 친구들과 소소한 모임으로 에너지를 충전해요'; export function Introduction({ ctaButtonText }: BaseProfileComponentProps) { + const [value, setValue] = useState(''); + + const isError = value.length < MINIMUM_TEXT_LENGTH && value.length > 0; + return ( <> {'보틀에 담을\n소개를 작성해 주세요'} +
+