feat: MVP v2

apps/web/app/[meetingId]/about/[meetingMemberId]/page.tsx

@@ -0,0 +1,11 @@
+import { AboutMeScreen } from '@/about-me';
+
+interface AboutMemberPageParams {
+  params: { meetingId: string; meetingMemberId?: string };
+}
+
+const AboutMemberPage = ({ params }: AboutMemberPageParams) => {
+  return <AboutMeScreen {...params} />;
+};
+
+export default AboutMemberPage;

apps/web/app/[meetingId]/about/me/modify/page.tsx

@@ -0,0 +1,10 @@
+import { AboutMeModifyScreen } from '@/about-me';
+
+interface AboutMeModifyPageParams {
+  params: { meetingId: string };
+}
+
+const AboutMeModifyPage = ({ params }: AboutMeModifyPageParams) => {
+  return <AboutMeModifyScreen {...params} />;
+};
+export default AboutMeModifyPage;

apps/web/app/[meetingId]/about/me/page.tsx

@@ -0,0 +1,11 @@
+import { AboutMeScreen } from '@/about-me';
+
+interface AboutMePageParams {
+  params: { meetingId: string };
+}
+
+const AboutMePage = ({ params }: AboutMePageParams) => {
+  return <AboutMeScreen {...params} />;
+};
+
+export default AboutMePage;

apps/web/app/question-result/[questionId]/answers/most-selected/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/answers/most-selected/page.tsx

@@ -2,16 +2,15 @@ import { MostSelectedListScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const QuestionResultPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <MostSelectedListScreen questionId={Number(questionId)} />;
+  return <MostSelectedListScreen {...params} />;
 };
 
 export default QuestionResultPage;

apps/web/app/question-result/[questionId]/answers/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/answers/page.tsx

@@ -2,16 +2,15 @@ import { AnswerListScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const AnswersPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <AnswerListScreen questionId={Number(questionId)} />;
+  return <AnswerListScreen {...params} />;
 };
 
 export default AnswersPage;

apps/web/app/question-result/[questionId]/answers/same-selected/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/answers/same-selected/page.tsx

@@ -2,16 +2,15 @@ import { SelectedSameListScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const QuestionResultPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <SelectedSameListScreen questionId={Number(questionId)} />;
+  return <SelectedSameListScreen {...params} />;
 };
 
 export default QuestionResultPage;

apps/web/app/question-result/[questionId]/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/page.tsx

@@ -2,16 +2,15 @@ import { ResultMainScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const QuestionResultPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <ResultMainScreen questionId={Number(questionId)} />;
+  return <ResultMainScreen {...params} />;
 };
 
 export default QuestionResultPage;

apps/web/app/question-result/[questionId]/statistics/page.tsx → apps/web/app/[meetingId]/question-result/[questionId]/statistics/page.tsx

@@ -2,16 +2,15 @@ import { StatisticsScreen } from '@sambad/web-domains/result';
 
 interface QuestionResultPageProps {
   params: {
+    meetingId: string;
     questionId: string;
   };
 }
 
 const StatisticsPage = (props: QuestionResultPageProps) => {
-  const {
-    params: { questionId },
-  } = props;
+  const { params } = props;
 
-  return <StatisticsScreen questionId={Number(questionId)} />;
+  return <StatisticsScreen {...params} />;
 };
 
 export default StatisticsPage;

apps/web/app/[meetingId]/start-relay-question/page.tsx

@@ -0,0 +1,3 @@
+import { StartRelayQuestionScreen } from '@/relay-question';
+
+export default StartRelayQuestionScreen;

apps/web/app/[meetingId]/user/modify/page.tsx

@@ -0,0 +1,3 @@
+import { ModifyUserInfoScreen } from '@/user';
+
+export default ModifyUserInfoScreen;

apps/web/app/home/me/modify/page.tsx

@@ -0,0 +1,8 @@
+import HomeMeScreen from '../page';
+
+export const dynamic = 'force-dynamic';
+
+const HomeMeModifyPage = () => {
+  return <HomeMeScreen />;
+};
+export default HomeMeModifyPage;

apps/web/app/home/me/page.tsx

@@ -0,0 +1,5 @@
+import { HomeMeScreen } from '@/home';
+
+export const dynamic = 'force-dynamic';
+
+export default HomeMeScreen;

apps/web/app/home/notification/page.tsx

@@ -0,0 +1,5 @@
+import { AlarmScreen } from '@/home';
+
+export const dynamic = 'force-dynamic';
+
+export default AlarmScreen;

apps/web/app/home/question/page.tsx

@@ -0,0 +1,5 @@
+import { QuestionScreen } from '@sambad/web-domains/home';
+
+export const dynamic = 'force-dynamic';
+
+export default QuestionScreen;

apps/web/app/onboarding/page.tsx

@@ -0,0 +1,17 @@
+import { OnBoardingScreen, StepType } from '@/onboarding';
+
+interface OnBoardingPageProps {
+  searchParams: {
+    step: StepType;
+  };
+}
+
+const OnBoardingPage = async (props: OnBoardingPageProps) => {
+  const {
+    searchParams: { step },
+  } = props;
+
+  return <OnBoardingScreen step={step} />;
+};
+
+export default OnBoardingPage;

package.json

@@ -18,12 +18,14 @@
     "@tanstack/react-query": "^5.50.1",
     "dayjs": "^1.11.12",
     "jotai": "^2.9.1",
+    "lodash-es": "^4.17.21",
     "next": "14.2.4",
     "react": "18.2.0",
     "react-dom": "18.2.0"
   },
   "devDependencies": {
     "@turbo/gen": "^1.12.4",
+    "@types/lodash-es": "^4.17.12",
     "cspell": "^8.10.0",
     "husky": "^9.0.11",
     "prettier": "^3.2.5",

packages/core/react-utils/src/If.tsx

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+
+interface IfProps {
+  condition: boolean;
+  children?: ReactNode;
+}
+
+export const If = (props: IfProps) => {
+  const { condition, children } = props;
+
+  return condition ? <>{children}</> : null;
+};

packages/core/react-utils/src/index.ts

@@ -1 +1,2 @@
 export { useId } from './useId';
+export { If } from './If';

packages/core/sds/src/components/Accordion/Trigger.tsx

@@ -7,7 +7,7 @@ import { Icon } from '../Icon';
 
 import { arrowIconAttribute } from './constants';
 import { useAccordionContext, useAccordionItemContext } from './context';
-import { triggerCss } from './styles';
+import { triggerChildCss, triggerCss } from './styles';
 
 export interface AccordionTriggerProps extends HTMLAttributes<HTMLDivElement> {}
 
@@ -32,7 +32,7 @@ export const AccordionTrigger = forwardRef<HTMLDivElement, AccordionTriggerProps
       onClick={composeEventHandlers(onClick, handleItemOpen)}
       {...restProps}
     >
-      {children}
+      <span css={triggerChildCss}>{children}</span>
       <Icon name="angle-small-up" color={colors.grey600} {...arrowIconAttribute.attribute} />
     </div>
   );

packages/core/sds/src/components/Accordion/styles.ts

@@ -6,6 +6,7 @@ import { accordionItemStateAttribute, arrowIconAttribute, contentAttribute } fro
 
 export const triggerCss = css({
   display: 'flex',
+  width: '100%',
   alignItems: 'center',
   position: 'relative',
   padding: `${size['4xs']} 0`,
@@ -14,9 +15,15 @@ export const triggerCss = css({
   [`& ${arrowIconAttribute.querySelector}`]: {
     position: 'absolute',
     right: 0,
+    // NOTE: 상단 여백만큼 top 부여하여 정렬에 맞게 상단에 붙도록 top 부여
+    top: size['4xs'],
   },
 });
 
+export const triggerChildCss = css({
+  maxWidth: '93%',
+});
+
 export const itemCss = css({
   overflow: 'hidden',
 

packages/core/sds/src/components/Checkbox/Checkbox.tsx

@@ -16,9 +16,18 @@ export interface CheckboxProps extends InputHTMLAttributes<HTMLInputElement> {
 }
 
 export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
-  const { label, checked: checkedFromProps, defaultChecked, onCheckedChange, disabled, ...restProps } = props;
+  const {
+    id: idFromProps,
+    label,
+    checked: checkedFromProps,
+    defaultChecked,
+    onCheckedChange,
+    disabled,
+    style: styleFromProps,
+    ...restProps
+  } = props;
 
-  const id = useId();
+  const id = idFromProps ?? useId();
 
   const [checked = false, setChecked] = useControllableState({
     prop: checkedFromProps,
@@ -28,10 +37,11 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
 
   const rootStyle = {
     ...checkedVariants[checked ? 'checked' : 'default'],
+    ...styleFromProps,
   } as CSSProperties;
 
   return (
-    <div css={checkboxRootCss} style={rootStyle}>
+    <div css={checkboxRootCss} style={rootStyle} {...restProps}>
       <input
         ref={ref}
         id={id}
@@ -46,7 +56,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref)
         aria-checked={checked}
         aria-disabled={disabled}
         tabIndex={0}
-        {...restProps}
       />
       <span css={indicatorCss} />
       {checked && <Icon css={iconCss} name="check" size={12} color={colors.white} />}

packages/core/sds/src/components/Icon/assets/AddMeeting.tsx

@@ -0,0 +1,21 @@
+import { IconAssetProps } from '../types';
+
+export const AddMeeting = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_5317_18341)">
+        <path
+          d="M10 0C8.02219 0 6.08879 0.58649 4.4443 1.6853C2.79981 2.78412 1.51809 4.3459 0.761209 6.17317C0.00433286 8.00043 -0.193701 10.0111 0.192152 11.9509C0.578004 13.8907 1.53041 15.6725 2.92894 17.0711C4.32746 18.4696 6.10929 19.422 8.0491 19.8079C9.98891 20.1937 11.9996 19.9957 13.8268 19.2388C15.6541 18.4819 17.2159 17.2002 18.3147 15.5557C19.4135 13.9112 20 11.9778 20 10C19.9971 7.34872 18.9426 4.80684 17.0679 2.9321C15.1932 1.05736 12.6513 0.00286757 10 0V0ZM10 18.3333C8.35183 18.3333 6.74066 17.8446 5.37025 16.9289C3.99984 16.0132 2.93174 14.7117 2.30101 13.189C1.67028 11.6663 1.50525 9.99076 1.82679 8.37425C2.14834 6.75774 2.94201 5.27288 4.10745 4.10744C5.27289 2.94201 6.75774 2.14833 8.37425 1.82679C9.99076 1.50525 11.6663 1.67027 13.189 2.301C14.7118 2.93173 16.0132 3.99984 16.9289 5.37025C17.8446 6.74066 18.3333 8.35182 18.3333 10C18.3309 12.2094 17.4522 14.3276 15.8899 15.8899C14.3276 17.4522 12.2094 18.3309 10 18.3333ZM14.1667 10C14.1667 10.221 14.0789 10.433 13.9226 10.5893C13.7663 10.7455 13.5544 10.8333 13.3333 10.8333H10.8333V13.3333C10.8333 13.5543 10.7455 13.7663 10.5893 13.9226C10.433 14.0789 10.221 14.1667 10 14.1667C9.77899 14.1667 9.56703 14.0789 9.41075 13.9226C9.25447 13.7663 9.16667 13.5543 9.16667 13.3333V10.8333H6.66667C6.44566 10.8333 6.2337 10.7455 6.07742 10.5893C5.92113 10.433 5.83334 10.221 5.83334 10C5.83334 9.77899 5.92113 9.56703 6.07742 9.41074C6.2337 9.25447 6.44566 9.16667 6.66667 9.16667H9.16667V6.66667C9.16667 6.44565 9.25447 6.23369 9.41075 6.07741C9.56703 5.92113 9.77899 5.83333 10 5.83333C10.221 5.83333 10.433 5.92113 10.5893 6.07741C10.7455 6.23369 10.8333 6.44565 10.8333 6.66667V9.16667H13.3333C13.5544 9.16667 13.7663 9.25447 13.9226 9.41074C14.0789 9.56703 14.1667 9.77899 14.1667 10Z"
+          fill="black"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_5317_18341">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};

packages/core/sds/src/components/Icon/assets/AddUser.tsx

@@ -0,0 +1,29 @@
+import { IconAssetProps } from '../types';
+
+export const AddUser = (props: IconAssetProps) => {
+  const { size } = props;
+
+  return (
+    <svg width={size} height={size} viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g clipPath="url(#clip0_4950_43154)">
+        <path
+          d="M22.9997 11H20.9997V9C20.9997 8.73478 20.8944 8.48043 20.7069 8.29289C20.5193 8.10536 20.265 8 19.9997 8C19.7345 8 19.4802 8.10536 19.2926 8.29289C19.1051 8.48043 18.9998 8.73478 18.9998 9V11H16.9998C16.7345 11 16.4802 11.1054 16.2926 11.2929C16.1051 11.4804 15.9998 11.7348 15.9998 12C15.9998 12.2652 16.1051 12.5196 16.2926 12.7071C16.4802 12.8946 16.7345 13 16.9998 13H18.9998V15C18.9998 15.2652 19.1051 15.5196 19.2926 15.7071C19.4802 15.8946 19.7345 16 19.9997 16C20.265 16 20.5193 15.8946 20.7069 15.7071C20.8944 15.5196 20.9997 15.2652 20.9997 15V13H22.9997C23.265 13 23.5193 12.8946 23.7068 12.7071C23.8944 12.5196 23.9997 12.2652 23.9997 12C23.9997 11.7348 23.8944 11.4804 23.7068 11.2929C23.5193 11.1054 23.265 11 22.9997 11Z"
+          fill="#374957"
+        />
+        <path
+          d="M9 12C10.1867 12 11.3467 11.6481 12.3334 10.9888C13.3201 10.3295 14.0892 9.39246 14.5433 8.2961C14.9974 7.19975 15.1162 5.99335 14.8847 4.82946C14.6532 3.66558 14.0818 2.59648 13.2426 1.75736C12.4035 0.918247 11.3344 0.346802 10.1705 0.115291C9.00666 -0.11622 7.80026 0.00259972 6.7039 0.456726C5.60754 0.910851 4.67047 1.67989 4.01118 2.66658C3.35189 3.65328 3 4.81331 3 6C3.00159 7.59081 3.63424 9.11602 4.75911 10.2409C5.88399 11.3658 7.40919 11.9984 9 12ZM9 2C9.79113 2 10.5645 2.2346 11.2223 2.67412C11.8801 3.11365 12.3928 3.73836 12.6955 4.46927C12.9983 5.20017 13.0775 6.00444 12.9231 6.78036C12.7688 7.55629 12.3878 8.26902 11.8284 8.82843C11.269 9.38784 10.5563 9.7688 9.78036 9.92314C9.00444 10.0775 8.20017 9.99827 7.46927 9.69552C6.73836 9.39277 6.11365 8.88008 5.67412 8.22228C5.2346 7.56449 5 6.79113 5 6C5 4.93914 5.42143 3.92172 6.17157 3.17158C6.92172 2.42143 7.93913 2 9 2Z"
+          fill="#374957"
+        />
+        <path
+          d="M9 14C6.61386 14.0026 4.32622 14.9517 2.63896 16.639C0.951708 18.3262 0.00264685 20.6139 0 23C0 23.2652 0.105357 23.5196 0.292893 23.7071C0.48043 23.8946 0.734784 24 1 24C1.26522 24 1.51957 23.8946 1.70711 23.7071C1.89464 23.5196 2 23.2652 2 23C2 21.1435 2.7375 19.363 4.05025 18.0503C5.36301 16.7375 7.14348 16 9 16C10.8565 16 12.637 16.7375 13.9497 18.0503C15.2625 19.363 16 21.1435 16 23C16 23.2652 16.1054 23.5196 16.2929 23.7071C16.4804 23.8946 16.7348 24 17 24C17.2652 24 17.5196 23.8946 17.7071 23.7071C17.8946 23.5196 18 23.2652 18 23C17.9974 20.6139 17.0483 18.3262 15.361 16.639C13.6738 14.9517 11.3861 14.0026 9 14Z"
+          fill="#374957"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_4950_43154">
+          <rect width="24" height="24" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};