fix(web-domains): 유저, 모임 생성, 모임 참여 1차 QA 수정 (#116)

* fix: 1차 QA 수정 * fix: 로그인 버튼 Hover 수정
depromeet · Aug 24, 2024 · 6809fb8 · 6809fb8
1 parent 86d43d4
commit 6809fb8
Show file tree

Hide file tree

Showing 16 changed files with 173 additions and 48 deletions.
diff --git a/...es/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/Checkbox.tsx b/...es/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/Checkbox.tsx
@@ -1,31 +1,35 @@
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import { forwardRef, InputHTMLAttributes, useId } from 'react';
+import { forwardRef, InputHTMLAttributes, ReactNode, useId } from 'react';
 
 import { CheckboxGroupImpl, useCheckboxContext } from './CheckboxGroupImpl';
+import { CheckboxLabel } from './CheckboxLabel';
 import { checkboxCss } from './styles';
 
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string | number;
-  label: string;
+  label: string | ((isChecked?: boolean) => ReactNode);
   required?: boolean;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, label, value, required, ...restProps } = props;
+  const { label, value, required, ...restProps } = props;
 
   const checkboxCtx = useCheckboxContext();
 
   const isChecked = checkboxCtx.value?.includes(value);
 
-  const checkboxId = `${useId()}-${label}`;
+  const checkboxId = useId();
 
   return (
     <label htmlFor={checkboxId} css={[checkboxCss.base, isChecked ? checkboxCss.selected : checkboxCss.default]}>
-      <Txt typography="subTitle2" color={isChecked ? colors.primary500 : colors.black}>
-        {label}
-      </Txt>
-      {children}
+      {typeof label === 'string' ? (
+        <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+          {label}
+        </Txt>
+      ) : (
+        label(isChecked)
+      )}
       <input
         id={checkboxId}
         ref={ref}
@@ -52,4 +56,5 @@ Checkbox.displayName = 'CheckboxGroup.item';
 
 export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
   Item: Checkbox,
+  Label: CheckboxLabel,
 });
diff --git a/...b-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/CheckboxLabel.tsx b/...b-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/CheckboxLabel.tsx
@@ -0,0 +1,24 @@
+import { Txt } from '@sds/components';
+import { colors } from '@sds/theme';
+
+import { itemCss } from './styles';
+
+export interface CheckboxLabelProps {
+  title: string;
+  isChecked?: boolean;
+}
+
+export const CheckboxLabel = (props: CheckboxLabelProps) => {
+  const { title, isChecked } = props;
+
+  const [emoji, text] = title.split(' ');
+
+  return (
+    <span css={itemCss}>
+      <Txt typography="title3">{emoji}</Txt>
+      <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+        {text}
+      </Txt>
+    </span>
+  );
+};
diff --git a/packages/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/styles.ts b/packages/web-domains/src/new-meeting/features/get-meeting-info/components/Checkbox/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { borderRadiusVariants, colors } from '@sambad/sds/theme';
+import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';
 
 export const checkboxCss = {
   base: css({
@@ -20,3 +20,9 @@ export const checkboxCss = {
     borderColor: colors.primary500,
   },
 };
+
+export const itemCss = css({
+  '& > * + *': {
+    paddingLeft: size['6xs'],
+  },
+});
diff --git a/...ns/src/new-meeting/features/get-meeting-info/components/GetMeetingInfo/GetMeetingInfo.tsx b/...ns/src/new-meeting/features/get-meeting-info/components/GetMeetingInfo/GetMeetingInfo.tsx
@@ -57,9 +57,9 @@ export const GetMeetingInfo = (props: GetMeetingInfoProps) => {
           <Label title="#01" subTitle="모임의 이름은 무엇인가요?" />
           <TextField
             {...register('meetingName', {
-              required: '이름은 필수 입력 사항입니다.',
-              minLength: { value: 2, message: '2자 이상 입력해주세요.' },
-              maxLength: { value: 10, message: '10자 이하로 입력해주세요.' },
+              required: '이름은 필수 입력 사항입니다',
+              minLength: { value: 2, message: '2자 이상 입력해주세요' },
+              maxLength: { value: 10, message: '10자 이하로 입력해주세요' },
             })}
             errorMessage="2자 이상, 10자 이하로 입력해주세요"
             placeholder="모임의 이름을 입력해주세요"
@@ -73,19 +73,23 @@ export const GetMeetingInfo = (props: GetMeetingInfoProps) => {
               name="meetingTypeIds"
               control={control}
               rules={{
-                validate: (value) => value.length <= 2 || '최대 2개까지 선택해주세요.',
+                validate: (value) => value.length <= 2 || '최대 2개까지 선택해주세요',
               }}
               render={({ field: { value, onChange } }) => (
                 <CheckboxGroup value={value} onValueChange={onChange}>
                   {meetingTypes?.map((type, idx) => (
-                    <CheckboxGroup.Item key={idx} label={type.content} value={type.meetingTypeId} />
+                    <CheckboxGroup.Item
+                      key={idx}
+                      value={type.meetingTypeId}
+                      label={(isChecked) => <CheckboxGroup.Label title={type.content} isChecked={isChecked} />}
+                    />
                   ))}
                 </CheckboxGroup>
               )}
             />
           </div>
-          <Txt as="p" typography="body4" color={colors.grey500} css={{ marginTop: size['7xs'] }}>
-            최대 2개까지만 선택해주세요.
+          <Txt as="p" typography="body4" color={colors.grey600} css={{ marginTop: size['7xs'] }}>
+            최대 2개까지만 선택해주세요
           </Txt>
         </div>
         <div css={buttonWrapperCss}>

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Checkbox/Checkbox.tsx b/packages/web-domains/src/user/features/get-user-info/components/Checkbox/Checkbox.tsx
@@ -1,31 +1,35 @@
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import { forwardRef, InputHTMLAttributes, useId } from 'react';
+import { forwardRef, InputHTMLAttributes, ReactNode, useId } from 'react';
 
 import { CheckboxGroupImpl, useCheckboxContext } from './CheckboxGroupImpl';
+import { CheckboxLabel } from './CheckboxLabel';
 import { checkboxCss } from './styles';
 
 export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
   value: string | number;
-  label: string;
+  label: string | ((isChecked?: boolean) => ReactNode);
   required?: boolean;
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { children, label, value, required, ...restProps } = props;
+  const { label, value, required, ...restProps } = props;
 
   const checkboxCtx = useCheckboxContext();
 
   const isChecked = checkboxCtx.value?.includes(value);
 
-  const checkboxId = `${useId()}-${label}`;
+  const checkboxId = useId();
 
   return (
     <label htmlFor={checkboxId} css={[checkboxCss.base, isChecked ? checkboxCss.selected : checkboxCss.default]}>
-      <Txt typography="subTitle2" color={isChecked ? colors.primary500 : colors.black}>
-        {label}
-      </Txt>
-      {children}
+      {typeof label === 'string' ? (
+        <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+          {label}
+        </Txt>
+      ) : (
+        label(isChecked)
+      )}
       <input
         id={checkboxId}
         ref={ref}
@@ -52,4 +56,5 @@ Checkbox.displayName = 'CheckboxGroup.item';
 
 export const CheckboxGroup = Object.assign(CheckboxGroupImpl, {
   Item: Checkbox,
+  Label: CheckboxLabel,
 });
diff --git a/packages/web-domains/src/user/features/get-user-info/components/Checkbox/CheckboxLabel.tsx b/packages/web-domains/src/user/features/get-user-info/components/Checkbox/CheckboxLabel.tsx
@@ -0,0 +1,24 @@
+import { Txt } from '@sds/components';
+import { colors } from '@sds/theme';
+
+import { itemCss } from './styles';
+
+export interface CheckboxLabelProps {
+  title: string;
+  isChecked?: boolean;
+}
+
+export const CheckboxLabel = (props: CheckboxLabelProps) => {
+  const { title, isChecked } = props;
+
+  const [emoji, text] = title.split(' ');
+
+  return (
+    <span css={itemCss}>
+      <Txt typography="title3">{emoji}</Txt>
+      <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+        {text}
+      </Txt>
+    </span>
+  );
+};
diff --git a/packages/web-domains/src/user/features/get-user-info/components/Checkbox/styles.ts b/packages/web-domains/src/user/features/get-user-info/components/Checkbox/styles.ts
@@ -1,5 +1,5 @@
 import { css } from '@emotion/react';
-import { borderRadiusVariants, colors } from '@sambad/sds/theme';
+import { borderRadiusVariants, colors, size } from '@sambad/sds/theme';
 
 export const checkboxCss = {
   base: css({
@@ -20,3 +20,9 @@ export const checkboxCss = {
     borderColor: colors.primary500,
   },
 };
+
+export const itemCss = css({
+  '& > * + *': {
+    paddingLeft: size['6xs'],
+  },
+});
diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/BasicInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/BasicInfoForm.tsx
@@ -55,19 +55,19 @@ export const BasicInfoForm = () => {
         label="이름이 무엇인가요?"
         answerNumber={1}
         placeholder="이름을 입력해주세요"
-        errorMessage="2자 이상, 5자 이하로 입력해주세요."
+        errorMessage="2자 이상, 5자 이하로 입력해주세요"
         {...register('userName', { required: true, minLength: 2, maxLength: 5 })}
       />
       <TextInput
-        label="생년월일이 언제이신가요?"
+        label="나이가 어떻게 되나요?"
         answerNumber={2}
-        placeholder="생년월일 8자리를 입력해주세요."
+        placeholder="생년월일 8자리를 입력해주세요"
         {...register('birth', {
           required: true,
           maxLength: 8,
           pattern: {
             value: /^\d{8}$/,
-            message: '생년월일은 숫자 8자리여야 합니다.',
+            message: '생년월일은 숫자 8자리여야 합니다',
           },
         })}
       />
@@ -87,8 +87,14 @@ export const BasicInfoForm = () => {
             rules={{ validate: (value) => value === 'MALE' || value === 'FEMALE' }}
             render={({ field: { onChange, value } }) => (
               <RadioGroup value={value} onChange={onChange}>
-                <RadioGroup.Item label="🙋‍♂️ 남자" value="MALE" />
-                <RadioGroup.Item label="🙋‍♀️ 여자" value="FEMALE" />
+                <RadioGroup.Item
+                  value="MALE"
+                  label={(isChecked) => <RadioGroup.Label title="🙋‍♂️ 남자" isChecked={isChecked} />}
+                />
+                <RadioGroup.Item
+                  value="FEMALE"
+                  label={(isChecked) => <RadioGroup.Label title="🙋‍♀️ 여자" isChecked={isChecked} />}
+                />
               </RadioGroup>
             )}
           />

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/ExtraInfoForm.tsx
@@ -50,14 +50,14 @@ export const ExtraInfoForm = () => {
         label="직업이 무엇인가요?"
         answerNumber={4}
         placeholder="예) 돈 많은 백수"
-        errorMessage="1자 이상, 15자 이하로 입력해주세요."
+        errorMessage="1자 이상, 15자 이하로 입력해주세요"
         {...register('job', { required: true, minLength: 1, maxLength: 15 })}
       />
       <TextInput
         answerNumber={5}
         label="어디에 거주하고 계신가요?"
         placeholder="예) 사랑시 고백구 행복동"
-        errorMessage="1자 이상, 15자 이하로 입력해주세요."
+        errorMessage="1자 이상, 15자 이하로 입력해주세요"
         {...register('location', { required: true, minLength: 1, maxLength: 15 })}
       />
       <div css={buttonWrapperCss}>

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/HobbiesInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/HobbiesInfoForm.tsx
@@ -48,12 +48,16 @@ export const HobbiesInfoForm = ({ hobbyList }: HobbiesFormProps) => {
           name="hobbyIds"
           control={control}
           rules={{
-            validate: (value) => value.length <= 3 || '최대 3개까지 선택할 수 있습니다.',
+            validate: (value) => value.length <= 3 || '최대 3개까지 선택할 수 있습니다',
           }}
           render={({ field: { value, onChange } }) => (
             <CheckboxGroup value={value} onValueChange={onChange}>
               {hobbyList?.map(({ hobbyId, content }) => (
-                <CheckboxGroup.Item key={hobbyId} label={content} value={hobbyId} />
+                <CheckboxGroup.Item
+                  key={hobbyId}
+                  label={(isChecked) => <CheckboxGroup.Label isChecked={isChecked} title={content} />}
+                  value={hobbyId}
+                />
               ))}
             </CheckboxGroup>
           )}

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/IntroInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/IntroInfoForm.tsx
@@ -67,7 +67,7 @@ export const IntroInfoForm = () => {
     <form onSubmit={handleSubmit(handleParticipateMeeting)} css={{ padding: '0 20px', marginTop: '48px' }}>
       <TextArea
         maxLength={MAX_LENGTH}
-        placeholder="저는 이런 사람이에요."
+        placeholder="저는 이런 사람이에요"
         {...register('introduction', { maxLength: MAX_LENGTH })}
       />
       <Txt as="p" typography="body4" color={colors.grey600}>

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Form/MbtiInfoForm.tsx b/packages/web-domains/src/user/features/get-user-info/components/Form/MbtiInfoForm.tsx
@@ -38,7 +38,11 @@ export const MbtiInfoForm = () => {
           render={({ field: { onChange, value } }) => (
             <RadioGroup value={value} onChange={onChange}>
               {MBTI_TYPE.map(({ label, value }) => (
-                <RadioGroup.Item key={value} label={label} value={value} />
+                <RadioGroup.Item
+                  key={value}
+                  value={value}
+                  label={(isChecked) => <RadioGroup.Label title={label} isChecked={isChecked} />}
+                />
               ))}
             </RadioGroup>
           )}

diff --git a/packages/web-domains/src/user/features/get-user-info/components/Radio/Radio.tsx b/packages/web-domains/src/user/features/get-user-info/components/Radio/Radio.tsx
@@ -2,13 +2,14 @@
 
 import { Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
-import { forwardRef, InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes, ReactNode, useId } from 'react';
 
 import { RadioGroupImpl, useRadioContext } from './RadioGroupImpl';
-import { radioCss } from './styled';
+import { RadioLabel } from './RadioLabel';
+import { radioCss } from './styles';
 
 export interface RadioProps extends InputHTMLAttributes<HTMLInputElement> {
-  label: string;
+  label: string | ((isChecked?: boolean) => ReactNode);
 }
 
 export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
@@ -18,21 +19,26 @@ export const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
 
   const isChecked = checkedValue === value;
 
+  const radioId = useId();
+
   return (
-    <label htmlFor={label} css={[radioCss.base, isChecked ? radioCss.selected : radioCss.default]}>
-      <Txt typography="subTitle2" color={isChecked ? colors.primary500 : colors.black}>
-        {label}
-      </Txt>
+    <label htmlFor={radioId} css={[radioCss.base, isChecked ? radioCss.selected : radioCss.default]}>
+      {typeof label === 'string' ? (
+        <Txt typography="body3" color={isChecked ? colors.primary500 : colors.black}>
+          {label}
+        </Txt>
+      ) : (
+        label(isChecked)
+      )}
       {children}
       <input
         css={{ display: 'none' }}
         type="radio"
-        id={label}
+        id={radioId}
         ref={ref}
         value={value}
         checked={isChecked}
         aria-checked={isChecked}
-        aria-label={label}
         onChange={(event) => handleChange(event.target.value)}
         {...restProps}
       />
@@ -44,4 +50,5 @@ Radio.displayName = 'RadioGroup.item';
 
 export const RadioGroup = Object.assign(RadioGroupImpl, {
   Item: Radio,
+  Label: RadioLabel,
 });