diff --git a/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts
new file mode 100644
index 0000000..fe87f62
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.css.ts
@@ -0,0 +1,48 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const cardWrapper = style({
+ padding: '24px',
+ paddingTop: '22px',
+});
+
+// SurveyItem
+export const itemTitle = style({
+ display: 'flex',
+ gap: '0.25em',
+});
+
+export const asterisk = style({
+ color: vars.color.red500,
+});
+
+//radioOptions
+export const optionContainer = style({
+ width: '100%',
+ minHeight: '24px',
+ padding: '0.5em 0.5em 0.5em 0',
+});
+export const optionWrapper = style({
+ width: '100%',
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.75em',
+});
+
+// selectOptions
+export const selectBox = style({
+ position: 'relative',
+ width: '150px',
+ height: '45px',
+ borderRadius: '4px',
+ border: `1px solid ${vars.color.grayScale100}`,
+});
+
+export const select = style({
+ width: '100%',
+ height: '100%',
+ backgroundColor: 'transparent',
+ border: 0,
+ outline: 0,
+ padding: '6px',
+});
diff --git a/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx
new file mode 100644
index 0000000..ecf4c07
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyItem/SurveyItem.tsx
@@ -0,0 +1,78 @@
+import { Options } from '../../hooks/useSurvey';
+import { Block, Card, Checkbox, Radio } from '@ssoon-servey/shared-ui';
+import * as $ from './SurveyItem.css';
+
+const SurveyItem = ({
+ title,
+ type,
+ options,
+ isRequired,
+}: {
+ title: string;
+ type: 'radio' | 'select' | 'checkbox';
+ options: Options[];
+ isRequired: boolean;
+}) => {
+ return (
+
+
+
+ {title}
+ {isRequired && *}
+
+
+
+ {type === 'radio' && }
+ {type === 'checkbox' && }
+ {type === 'select' && }
+
+
+
+ );
+};
+
+export default SurveyItem;
+
+const RadioOptions = ({ options }: { options: Options[] }) => {
+ return (
+ <>
+ {options.map((option) => (
+
+
+
+ ))}
+ >
+ );
+};
+
+const CheckboxOptions = ({ options }: { options: Options[] }) => {
+ return (
+ <>
+ {options.map((option) => (
+
+
+
+ ))}
+ >
+ );
+};
+
+const SelectOptions = ({ options }: { options: Options[] }) => {
+ return (
+
+
+
+ );
+};
diff --git a/apps/survey-web/src/app/survey/components/SurveyItem/index.tsx b/apps/survey-web/src/app/survey/components/SurveyItem/index.tsx
new file mode 100644
index 0000000..77597a1
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyItem/index.tsx
@@ -0,0 +1 @@
+export { default } from './SurveyItem';
diff --git a/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts
new file mode 100644
index 0000000..b3e3d8e
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.css.ts
@@ -0,0 +1,50 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const surveyNavContainer = style({
+ display: 'flex',
+ width: '100%',
+ justifyContent: 'space-between',
+});
+
+export const nextButton = style({
+ marginRight: '14px',
+ boxShadow:
+ '0 2px 1px -1px rgba(0, 0, 0, 0.2),0 1px 1px 0 rgba(0, 0, 0, 0.141), 0 1px 3px 0 rgba(0, 0, 0, 0.122)',
+ backgroundColor: vars.color.grayScale00,
+ fontSize: '14px',
+ borderRadius: '4px',
+ lineHeight: '36px',
+ padding: '0 24px',
+ color: vars.color.primary500,
+ ':hover': {
+ backgroundColor: '#f9f7fc',
+ },
+});
+
+export const backButton = style([nextButton]);
+
+export const submitButton = style({
+ fontSize: '14px',
+ borderRadius: '4px',
+ backgroundColor: vars.color.primary500,
+ color: vars.color.grayScale00,
+ lineHeight: '36px',
+ padding: '0 24px',
+ ':hover': {
+ backgroundColor: '#7654b4',
+ boxShadow:
+ '0px 2px 1px -1px rgba(103, 58, 183, 0.2),0px 1px 1px 0px rgba(103, 58, 183, 0.14),0px 1px 3px 0px rgba(103, 58, 183, 0.12)',
+ },
+});
+
+export const resetButton = style({
+ padding: '0px 8px',
+ fontSize: '14px',
+ borderRadius: '4px',
+ lineHeight: '36px',
+ color: vars.color.primary500,
+ ':hover': {
+ backgroundColor: vars.color.primary200,
+ },
+});
diff --git a/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx
new file mode 100644
index 0000000..44f143f
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyNav/SurveyNav.tsx
@@ -0,0 +1,42 @@
+import * as $ from './SurveyNav.css';
+
+const SectionNav = ({
+ isPrevious,
+ isNext,
+ goNext,
+ goBack,
+ onSubmit,
+}: {
+ isPrevious: boolean;
+ isNext: boolean;
+ goNext: () => void;
+ goBack: () => void;
+ onSubmit: () => void;
+}) => {
+ return (
+
+
+ {isPrevious && (
+
+ )}
+ {isNext && (
+
+ )}
+ {!isNext && (
+
+ )}
+
+
+
+
+
+ );
+};
+
+export default SectionNav;
diff --git a/apps/survey-web/src/app/survey/components/SurveyNav/index.ts b/apps/survey-web/src/app/survey/components/SurveyNav/index.ts
new file mode 100644
index 0000000..3f2159f
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyNav/index.ts
@@ -0,0 +1 @@
+export { default } from './SurveyNav';
diff --git a/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts
new file mode 100644
index 0000000..d543369
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.css.ts
@@ -0,0 +1,31 @@
+import { vars } from '@ssoon-servey/shared-ui';
+import { style } from '@vanilla-extract/css';
+
+export const borderTop = style({
+ backgroundColor: vars.color.primary500,
+ borderTopLeftRadius: '8px',
+ borderTopRightRadius: '8px',
+ height: '10px',
+ position: 'absolute',
+ top: 0,
+ left: 0,
+ right: 0,
+});
+
+export const surveyTitle = style({
+ fontSize: '24pt',
+ fontWeight: 400,
+ paddingBottom: '12px',
+});
+
+export const cardWrapper = style({
+ padding: '24px',
+ paddingTop: '22px',
+});
+
+export const emphasize = style({
+ fontSize: '14px',
+ fontWeight: 400,
+ marginTop: '14px',
+ color: vars.color.red500,
+});
diff --git a/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx
new file mode 100644
index 0000000..1606b48
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyTitle/SurveyTitle.tsx
@@ -0,0 +1,16 @@
+import { Card } from '@ssoon-servey/shared-ui';
+import * as $ from './SurveyTitle.css';
+
+const SurveyTitle = ({ title }: { title: string }) => {
+ return (
+
+
+
+
{title}
+
* 표시는 필수 질문임
+
+
+ );
+};
+
+export default SurveyTitle;
diff --git a/apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx b/apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx
new file mode 100644
index 0000000..91713c6
--- /dev/null
+++ b/apps/survey-web/src/app/survey/components/SurveyTitle/index.tsx
@@ -0,0 +1 @@
+export { default } from './SurveyTitle';
diff --git a/apps/survey-web/src/app/survey/hooks/useSurvey.ts b/apps/survey-web/src/app/survey/hooks/useSurvey.ts
index 8c95d88..2efaa94 100644
--- a/apps/survey-web/src/app/survey/hooks/useSurvey.ts
+++ b/apps/survey-web/src/app/survey/hooks/useSurvey.ts
@@ -4,18 +4,18 @@ import {
} from '@ssoon-servey/supabase';
import { useEffect, useState } from 'react';
-type Options = {
+export type Options = {
id: number;
option_text: string;
item_id: number | null;
};
-type SurveyItems = {
+export type SurveyItems = {
id: number;
options: Options[];
question_required: boolean;
question_title: string;
- question_type: string;
+ question_type: 'radio' | 'select' | 'checkbox';
section_id: number | null;
};
@@ -76,7 +76,15 @@ const getSurvey = async (supabase: SupabaseContextValue['supabase']) => {
...section,
isNext: i !== sections.length - 1,
isPrevious: i !== 0,
- items: items
+ items: (
+ items as {
+ id: number;
+ question_required: boolean;
+ question_title: string;
+ question_type: 'radio' | 'select' | 'checkbox';
+ section_id: number | null;
+ }[]
+ )
.filter((item) => item.section_id === section.id)
.map((items) => ({
...items,
diff --git a/apps/survey-web/src/app/survey/page.css.ts b/apps/survey-web/src/app/survey/page.css.ts
index a3f0f7b..97432b9 100644
--- a/apps/survey-web/src/app/survey/page.css.ts
+++ b/apps/survey-web/src/app/survey/page.css.ts
@@ -1,4 +1,3 @@
-import { vars } from '@ssoon-servey/shared-ui';
import { style } from '@vanilla-extract/css';
export const cardContainer = style({
@@ -7,17 +6,6 @@ export const cardContainer = style({
gap: '10px',
});
-export const borderTop = style({
- backgroundColor: vars.color.primary500,
- borderTopLeftRadius: '8px',
- borderTopRightRadius: '8px',
- height: '10px',
- position: 'absolute',
- top: 0,
- left: 0,
- right: 0,
-});
-
export const cardWrapper = style({
padding: '24px',
paddingTop: '22px',
diff --git a/apps/survey-web/src/app/survey/page.tsx b/apps/survey-web/src/app/survey/page.tsx
index 548486b..69e223a 100644
--- a/apps/survey-web/src/app/survey/page.tsx
+++ b/apps/survey-web/src/app/survey/page.tsx
@@ -1,8 +1,10 @@
import { useGetSurvey } from './hooks/useSurvey';
-import { Block, Card } from '@ssoon-servey/shared-ui';
import * as $ from './page.css';
import { useNavigate, useParams } from 'react-router-dom';
import { useEffect } from 'react';
+import SurveyTitle from './components/SurveyTitle';
+import SurveyItem from './components/SurveyItem';
+import SurveyNav from './components/SurveyNav';
const INITIAL_ID = 1;
@@ -33,31 +35,32 @@ const SurveyPage = () => {
navigate(-1);
};
- const sections = data.sections[sectionId - 1];
+ const onSubmit = () => {
+ navigate('');
+ };
+
+ const section = data.sections[sectionId - 1];
return (
-
-
-
-
{data?.title}
-
* 표시는 필수 질문임
-
-
- {sections.items.map((item) => (
-
-
-
{item.question_title}
- {item.options.map((option) => (
-
{option.option_text}
- ))}
-
-
+
+ {section.items.map((item) => (
+
))}
-
- {sections.isPrevious && }
- {sections.isNext && }
+
);