-
Notifications
You must be signed in to change notification settings - Fork 0
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature(admin): survey를 위한 viewmodel 작업 #2
Open
Ssoon-m
wants to merge
2
commits into
feat/admin
Choose a base branch
from
feat/admin-data
base: feat/admin
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
2 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| import { vars } from '@ssoon-servey/shared-ui'; | ||
| import { style } from '@vanilla-extract/css'; | ||
|
|
||
| export const container = style({ | ||
| margin: 'auto', | ||
| maxWidth: '90vw', | ||
| width: '640px', | ||
| marginTop: '12px', | ||
| marginBottom: '12px', | ||
| }); | ||
| export const wrapper = style({ | ||
| width: '100%', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '12px', | ||
| position: 'relative', | ||
| }); | ||
|
|
||
| export const cardWrapper = style({ | ||
| padding: '24px', | ||
| paddingTop: '22px', | ||
| }); | ||
|
|
||
| export const borderTop = style({ | ||
| backgroundColor: vars.color.primary500, | ||
| borderTopLeftRadius: '8px', | ||
| borderTopRightRadius: '8px', | ||
| height: '10px', | ||
| position: 'absolute', | ||
| top: 0, | ||
| left: 0, | ||
| right: 0, | ||
| }); | ||
|
|
||
| export const toolbar = style({ | ||
| position: 'absolute', | ||
| top: '106px', | ||
| right: '-50px', | ||
| }); | ||
|
|
||
| export const surveyTitleInput = style({}); | ||
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 |
|---|---|---|
| @@ -1,68 +1,70 @@ | ||
| import { Survey, useCreateSurvey } from '../hooks/query/useServey'; | ||
| import { borderTop, wrapper, container, cardWrapper, toolbar } from './app.css'; | ||
| import { Card } from '@ssoon-servey/shared-ui'; | ||
| import ToolBar from './components/ToolBar'; | ||
| import SurveyItem from './components/SurveyItem'; | ||
| import useSurveyViewModel from './hooks/viewmodel/useSurveyViewModel'; | ||
|
|
||
| const payload: Survey = { | ||
| title: '설문입니다.', | ||
| sections: [ | ||
| { | ||
| items: [ | ||
| { | ||
| title: 'radio input 1번째', | ||
| type: 'radio', | ||
| required: true, | ||
| options: [ | ||
| { text: 'radio option1 1번째' }, | ||
| { text: 'radio option2 1번째' }, | ||
| { text: 'radio option3 1번째' }, | ||
| ], | ||
| }, | ||
| { | ||
| title: 'checkbox input 1번째', | ||
| type: 'radio', | ||
| required: true, | ||
| options: [ | ||
| { text: 'checkbox option1 1번째' }, | ||
| { text: 'checkbox option2 1번째' }, | ||
| { text: 'checkbox option3 1번째' }, | ||
| ], | ||
| }, | ||
| ], | ||
| }, | ||
| { | ||
| items: [ | ||
| { | ||
| title: 'select 1번째', | ||
| type: 'select', | ||
| required: true, | ||
| options: [ | ||
| { | ||
| text: 'select option1 1번째', | ||
| }, | ||
| { | ||
| text: 'select option2 1번째', | ||
| }, | ||
| { | ||
| text: 'select option3 1번째', | ||
| }, | ||
| ], | ||
| }, | ||
| { title: 'select 1번째', type: 'textarea', required: true }, | ||
| ], | ||
| }, | ||
| ], | ||
| }; | ||
| export default function App() { | ||
| const { | ||
| survey, | ||
| handleSurveyInput, | ||
| surveySections, | ||
| handleActiveItem, | ||
| handleAddOption, | ||
| handleChangeOptionText, | ||
| handleChangeItemTitle, | ||
| handleAddItems, | ||
| handleAddSections, | ||
| onSubmit, | ||
| } = useSurveyViewModel(); | ||
|
|
||
| export function App() { | ||
| const mutate = useCreateSurvey(); | ||
|
|
||
| const onMutateSurvey = () => { | ||
| mutate(payload); | ||
| }; | ||
| return ( | ||
| <div> | ||
| <h2>설문 만들기</h2> | ||
| <button onClick={onMutateSurvey}>제출</button> | ||
| <div className={container}> | ||
| <div className={wrapper}> | ||
| <Card> | ||
| <div className={cardWrapper}> | ||
| <div className={borderTop} /> | ||
| <div> | ||
| <input | ||
| placeholder="설문지 제목" | ||
| name="title" | ||
| value={survey.title} | ||
| onChange={handleSurveyInput} | ||
| /> | ||
| </div> | ||
| <div> | ||
| <input | ||
| placeholder="설문지 설명" | ||
| name="description" | ||
| value={survey.description} | ||
| onChange={handleSurveyInput} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| {surveySections.map((section, sectionIndex) => ( | ||
| <div key={sectionIndex}> | ||
| <div>{`section ${sectionIndex + 1}`}</div> | ||
| {section.items.map((item, itemIndex) => ( | ||
| <SurveyItem | ||
| key={`${sectionIndex}_${itemIndex}`} | ||
| item={item} | ||
| onActiveItem={() => handleActiveItem(sectionIndex, itemIndex)} | ||
| onAddOptions={handleAddOption} | ||
| onChangeOptionText={handleChangeOptionText} | ||
| onChangeItemTitle={handleChangeItemTitle} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ))} | ||
| <div className={toolbar}> | ||
| <ToolBar | ||
| onAddItems={handleAddItems} | ||
| onAddSections={handleAddSections} | ||
| /> | ||
| </div> | ||
| <button onClick={onSubmit}>제출하기</button> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default App; |
6 changes: 6 additions & 0 deletions
6
apps/survey-admin/src/app/components/SurveyItem/SurveyItem.css.ts
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,6 @@ | ||
| import { style } from '@vanilla-extract/css'; | ||
|
|
||
| export const cardWrapper = style({ | ||
| padding: '24px', | ||
| paddingTop: '22px', | ||
| }); |
75 changes: 75 additions & 0 deletions
75
apps/survey-admin/src/app/components/SurveyItem/SurveyItem.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,75 @@ | ||
| import { Card, Radio } from '@ssoon-servey/shared-ui'; | ||
| import { cardWrapper } from './SurveyItem.css'; | ||
| import { type SurveyItem } from '../../hooks/query/useServey'; | ||
|
|
||
| interface SurveyItemProps { | ||
| item: SurveyItem; | ||
| onActiveItem: () => void; | ||
| onAddOptions: () => void; | ||
| onChangeOptionText: (value: string, optionIndex: number) => void; | ||
| onChangeItemTitle: (value: string) => void; | ||
| } | ||
|
|
||
| const SurveyItem = ({ | ||
| item, | ||
| onActiveItem, | ||
| onAddOptions, | ||
| onChangeOptionText, | ||
| onChangeItemTitle, | ||
| }: SurveyItemProps) => { | ||
| const handleAddOptions = () => { | ||
| onAddOptions(); | ||
| }; | ||
| const handleItemsTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
| const { value } = e.currentTarget; | ||
| onChangeItemTitle(value); | ||
| }; | ||
| const handleOptionTextChange = ( | ||
| e: React.ChangeEvent<HTMLInputElement>, | ||
| optionIndex: number | ||
| ) => { | ||
| const { value } = e.currentTarget; | ||
| onChangeOptionText(value, optionIndex); | ||
| }; | ||
| return ( | ||
| <Card onClick={onActiveItem}> | ||
| <div className={cardWrapper}> | ||
| <div> | ||
| <input | ||
| placeholder="질문" | ||
| onChange={handleItemsTitleChange} | ||
| value={item.title} | ||
| /> | ||
| {/* <select> | ||
| <option value="textarea">장문형</option> | ||
| <option value="radio" selected> | ||
| 객관식 | ||
| </option> | ||
| <option value="checkbox">체크박스</option> | ||
| <option value="select">드롭다운</option> | ||
| </select> */} | ||
| </div> | ||
| <div> | ||
| { | ||
| <> | ||
| {item.options.map((option, i) => ( | ||
| <label key={i}> | ||
| <Radio disabled /> | ||
| <input | ||
| type="text" | ||
| placeholder={option.text} | ||
| onChange={(e) => handleOptionTextChange(e, i)} | ||
| value={option.text} | ||
| /> | ||
| </label> | ||
| ))} | ||
| <button onClick={handleAddOptions}>옵션추가</button> | ||
| </> | ||
| } | ||
| </div> | ||
| </div> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default SurveyItem; |
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 @@ | ||
| export { default } from './SurveyItem'; |
10 changes: 10 additions & 0 deletions
10
apps/survey-admin/src/app/components/ToolBar/Toolbar.css.ts
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,10 @@ | ||
| import { style } from '@vanilla-extract/css'; | ||
|
|
||
| export const cardWrapper = style({ | ||
| padding: '8px', | ||
| display: 'flex', | ||
| flexDirection: 'column', | ||
| gap: '4px', | ||
| justifyContent: 'center', | ||
| alignItems: 'center', | ||
| }); |
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,37 @@ | ||
| import { Card } from '@ssoon-servey/shared-ui'; | ||
| import { cardWrapper } from './Toolbar.css'; | ||
|
|
||
| interface Props { | ||
| onAddItems: () => void; | ||
| onAddSections: () => void; | ||
| } | ||
|
|
||
| const ToolBar = ({ onAddItems, onAddSections }: Props) => { | ||
| return ( | ||
| <Card> | ||
| <div className={cardWrapper}> | ||
| <button onClick={onAddItems}> | ||
| <svg width={23} height={23} viewBox="0 0 25 25"> | ||
| <g xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| fill="#5F6368" | ||
| d="M11 17h2v-4h4v-2h-4V7h-2v4H7v2h4Zm1 5q-2.075 0-3.9-.788-1.825-.787-3.175-2.137-1.35-1.35-2.137-3.175Q2 14.075 2 12t.788-3.9q.787-1.825 2.137-3.175 1.35-1.35 3.175-2.138Q9.925 2 12 2t3.9.787q1.825.788 3.175 2.138 1.35 1.35 2.137 3.175Q22 9.925 22 12t-.788 3.9q-.787 1.825-2.137 3.175-1.35 1.35-3.175 2.137Q14.075 22 12 22Zm0-2q3.35 0 5.675-2.325Q20 15.35 20 12q0-3.35-2.325-5.675Q15.35 4 12 4 8.65 4 6.325 6.325 4 8.65 4 12q0 3.35 2.325 5.675Q8.65 20 12 20Zm0-8Z" | ||
| /> | ||
| </g> | ||
| </svg> | ||
| </button> | ||
| <button onClick={onAddSections}> | ||
| <svg width={23} height={23} viewBox="0 0 25 25"> | ||
| <path | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="#5F6368" | ||
| d="M19 5v4H4V5h15m0 10v4H4v-4h15m1-12H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zm0 10H3c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h17c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1z" | ||
| /> | ||
| </svg> | ||
| </button> | ||
| </div> | ||
| </Card> | ||
| ); | ||
| }; | ||
|
|
||
| export default ToolBar; |
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 @@ | ||
| export { default } from './Toolbar'; |
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
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
오 이거 직접 만드신건가요? 좋네요