-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: 타이포그래피 Detail 추가 * feat: 질문 타입 지정 * feat: 기본 질문 컴포넌트 생성 * feat: list props로 변경 * feat: 리뷰 반영
- Loading branch information
Showing
8 changed files
with
237 additions
and
62 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { type QuestionItem } from '~/features/createSurvey/types'; | ||
|
|
||
| export const BASIC_QUESTION_LIST: QuestionItem[] = [ | ||
| { | ||
| type: 'choice', | ||
| form_type: 'tendency', | ||
| title: '나와의 관계, 상대방의 포지션, 나의 성향', | ||
| order: 1, | ||
| choices: [], | ||
| max_selectable_count: 1, | ||
| }, | ||
| { | ||
| type: 'short', | ||
| form_type: 'strength', | ||
| title: '나의 직무적 강점은 무엇인가요?', | ||
| order: 2, | ||
| }, | ||
| { | ||
| type: 'short', | ||
| form_type: 'weakness', | ||
| title: '나의 직무적 약점은 무엇인가요?', | ||
| order: 3, | ||
| }, | ||
| ]; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,100 @@ | ||
| import { type ReactNode } from 'react'; | ||
| import { css, type Theme } from '@emotion/react'; | ||
|
|
||
| import EditIcon from '~/components/icons/EditIcon'; | ||
| import { type QuestionFormType, type QuestionItem, type QuestionType } from '~/features/createSurvey/types'; | ||
| import colors from '~/styles/color'; | ||
| import { DETAIL, HEAD_3_SEMIBOLD } from '~/styles/typo'; | ||
|
|
||
| interface Props { | ||
| item: QuestionItem; | ||
| rightElement?: ReactNode; | ||
| } | ||
|
|
||
| const Question = ({ item, rightElement }: Props) => { | ||
| const { tag, css: typeCss } = getType(item.type, item.form_type); | ||
|
|
||
| return ( | ||
| <li css={listItemCss}> | ||
| <div css={[iconContainerCss, typeCss]}> | ||
| <EditIcon color={colors.white} /> | ||
| </div> | ||
| <div css={textContainerCss}> | ||
| <p css={titleCss}>{item.title}</p> | ||
| <span css={tagCss}>{tag}</span> | ||
| </div> | ||
| {rightElement} | ||
| </li> | ||
| ); | ||
| }; | ||
|
|
||
| export default Question; | ||
|
|
||
| const listItemCss = css` | ||
| display: flex; | ||
| gap: 16px; | ||
| align-items: center; | ||
| padding: 8px 23px; | ||
| `; | ||
|
|
||
| const textContainerCss = css` | ||
| user-select: none; | ||
| flex-grow: 1; | ||
| `; | ||
|
|
||
| const titleCss = css` | ||
| ${HEAD_3_SEMIBOLD} | ||
| margin-bottom: 8px; | ||
| `; | ||
|
|
||
| const iconContainerCss = css` | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| width: 50px; | ||
| height: 50px; | ||
| border-radius: 10px; | ||
| `; | ||
|
|
||
| const getType = (type: QuestionType, formType: QuestionFormType) => { | ||
| if (formType === 'tendency') { | ||
| return { | ||
| tag: '기본정보', | ||
| css: css` | ||
| background-color: ${colors.bluegreen}; | ||
| `, | ||
| }; | ||
| } | ||
| if (type === 'short') { | ||
| return { | ||
| tag: '주관식', | ||
| css: css` | ||
| background-color: ${colors.yellowgreen}; | ||
| `, | ||
| }; | ||
| } | ||
|
|
||
| return { | ||
| tag: '객관식', | ||
| css: css` | ||
| background-color: ${colors.pink}; | ||
| `, | ||
| }; | ||
| }; | ||
|
|
||
| const tagCss = (theme: Theme) => css` | ||
| ${DETAIL} | ||
| gap: 10px; | ||
| order: 1; | ||
| padding: 2px 4px; | ||
| color: ${theme.colors.gray_400}; | ||
| background: ${theme.colors.primary_50}; | ||
| border-radius: 4px; | ||
| `; |
15 changes: 15 additions & 0 deletions
15
src/features/createSurvey/questionList/QuestionList.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { type Meta } from '@storybook/react'; | ||
|
|
||
| import { BASIC_QUESTION_LIST } from '~/features/createSurvey/constants'; | ||
| import QuestionList from '~/features/createSurvey/questionList/QuestionList'; | ||
|
|
||
| const meta: Meta<typeof QuestionList> = { | ||
| title: 'QuestionList', | ||
| component: QuestionList, | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| export function Default() { | ||
| return <QuestionList list={BASIC_QUESTION_LIST} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| import Question from '~/features/createSurvey/questionList/Question'; | ||
| import { type QuestionItem } from '~/features/createSurvey/types'; | ||
|
|
||
| interface Props { | ||
| list: QuestionItem[]; | ||
| } | ||
| const QuestionList = ({ list }: Props) => { | ||
| return ( | ||
| <section> | ||
| {list.map((item) => ( | ||
| <Question item={item} key={item.title} /> | ||
| ))} | ||
| </section> | ||
| ); | ||
| }; | ||
|
|
||
| export default QuestionList; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export type QuestionType = 'choice' | 'short'; | ||
| export type QuestionFormType = 'strength' | 'weakness' | 'tendency' | 'custom'; | ||
|
|
||
| interface Choice { | ||
| content: string; | ||
| order: number; | ||
| } | ||
|
|
||
| export interface ChoiceQuestionRequest { | ||
| type: 'choice'; | ||
| form_type: QuestionFormType; | ||
| title: string; | ||
| choices: Choice[]; | ||
| max_selectable_count: number; | ||
| order: number; | ||
| } | ||
|
|
||
| export interface ShortQuestionRequest { | ||
| type: 'short'; | ||
| form_type: QuestionFormType; | ||
| title: string; | ||
| order: number; | ||
| } | ||
|
|
||
| export type QuestionItem = ChoiceQuestionRequest | ShortQuestionRequest; |