Skip to content

Commit

Permalink
style(processes/shortcut): add paddings
Browse files Browse the repository at this point in the history
  • Loading branch information
@ooooorobo
ooooorobo committed Jul 18, 2024
1 parent eae137a commit fb3ad29
Show file tree
Hide file tree
Showing 2 changed files with 130 additions and 61 deletions.
55 changes: 54 additions & 1 deletion src/processes/shortcut/Shortcut.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@

.Header {
display: flex;
width: 100%;
width: 100%;
padding: 12px 4px 0;
}

.CloseButton {
Expand All @@ -25,4 +26,56 @@
.MenuButton {
font-size: 16px;
font-weight: 500;
padding-left: 0 !important;
padding-right: 0 !important;
}

.Content {
padding: 8px 20px 52px;
height: 100%;
}

.MenuWrapper {
display: flex;
flex-direction: column;
gap: 24px;
}

.MenuSectionTitle {
font-size: 14px;
font-weight: 600;
margin-bottom: 6px;
color: var(--color-neutral-60);
}

.FormWrapper {
height:100%;
display: flex;
flex-direction: column;
}

.FormHeader {
margin-bottom: 30px;
}

.Description {
display: block;
margin-top: 10px;
font-weight: 500;
font-size: 14px;
line-height: 24px;
color: var(--color-neutral-50);

& strong {
font-size: 14px;
}
}

.FormMain {
flex-grow: 1;
overflow-y: auto;
}

.FormFooter {
margin-top: 8px;
}
136 changes: 76 additions & 60 deletions src/processes/shortcut/Shortcut.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,68 +61,84 @@ export const Shortcut = () => {
</Sheet.Header>
<Sheet.Content className={styles.Content}>
{selectedKey === null && (
<>
<h2>수정하고 싶은 항목을 선택해주세요.</h2>
<p>선택 시 해당 항목으로 이동합니다.</p>
<p>내 정보</p>
<MenuButton
text={'이름/성별/나이/키'}
disabled={false}
onClick={() => onSelectProfile('PERSONAL_INFO')}
/>
<MenuButton text={'사진'} disabled={false} onClick={() => onSelectProfile('MY_IMAGE')} />
<MenuButton text={'MBTI'} disabled={false} onClick={() => onSelectProfile('MBTI')} />
<MenuButton text={'현재 하는 일'} disabled={false} onClick={() => onSelectProfile('JOB')} />
<MenuButton text={'주로 머무는 지역'} disabled={false} onClick={() => onSelectProfile('LOCATION')} />
<MenuButton text={'종교'} disabled={false} onClick={() => onSelectProfile('RELIGION')} />
<MenuButton text={'취미'} disabled={false} onClick={() => onSelectProfile('HOBBY')} />
<MenuButton
text={'술자리 빈도 및 흡연 여부'}
disabled={false}
onClick={() => onSelectProfile('SMOKE_ALCOHOL')}
/>
<MenuButton text={'자기 소개'} disabled={false} onClick={() => onSelectIdealPartner('INTRODUCE')} />
<MenuButton text={'선택 질문'} disabled={false} onClick={() => onSelectIdealPartner('MORE_QUESTION')} />
<p>이상형 정보</p>
<MenuButton text={'선호하는 연령대'} disabled={false} onClick={() => onSelectIdealPartner('AGE')} />
<MenuButton
text={'선호하는 키, 스타일'}
disabled={false}
onClick={() => onSelectIdealPartner('HEIGHT_STYLE')}
/>
<MenuButton
text={'상대방이 주로 머무는 지역'}
disabled={false}
onClick={() => onSelectIdealPartner('LOCATION')}
/>
<MenuButton text={'상대방의 취미'} disabled={false} onClick={() => onSelectIdealPartner('HOBBY')} />
<MenuButton text={'종교'} disabled={false} onClick={() => onSelectIdealPartner('RELIGION')} />
<MenuButton
text={'상대방의 음주 빈도'}
disabled={false}
onClick={() => onSelectIdealPartner('DRINKING')}
/>
<MenuButton
text={'상대방의 흡연 여부'}
disabled={false}
onClick={() => onSelectIdealPartner('SMOKING')}
/>
<MenuButton
text={'주선자에게 하고 싶은 말'}
disabled={false}
onClick={() => onSelectIdealPartner('TO_MATCHER')}
/>
</>
<div className={styles.MenuWrapper}>
<div>
<h2>수정하고 싶은 항목을 선택해주세요.</h2>
<p>선택 시 해당 항목으로 이동합니다.</p>
</div>
<div>
<p className={styles.MenuSectionTitle}>내 정보</p>
<MenuButton
text={'이름/성별/나이/키'}
disabled={false}
onClick={() => onSelectProfile('PERSONAL_INFO')}
/>
<MenuButton text={'사진'} disabled={false} onClick={() => onSelectProfile('MY_IMAGE')} />
<MenuButton text={'MBTI'} disabled={false} onClick={() => onSelectProfile('MBTI')} />
<MenuButton text={'현재 하는 일'} disabled={false} onClick={() => onSelectProfile('JOB')} />
<MenuButton text={'주로 머무는 지역'} disabled={false} onClick={() => onSelectProfile('LOCATION')} />
<MenuButton text={'종교'} disabled={false} onClick={() => onSelectProfile('RELIGION')} />
<MenuButton text={'취미'} disabled={false} onClick={() => onSelectProfile('HOBBY')} />
<MenuButton
text={'술자리 빈도 및 흡연 여부'}
disabled={false}
onClick={() => onSelectProfile('SMOKE_ALCOHOL')}
/>
<MenuButton text={'자기 소개'} disabled={false} onClick={() => onSelectIdealPartner('INTRODUCE')} />
<MenuButton
text={'선택 질문'}
disabled={false}
onClick={() => onSelectIdealPartner('MORE_QUESTION')}
/>
</div>
<div>
<p className={styles.MenuSectionTitle}>이상형 정보</p>
<MenuButton text={'선호하는 연령대'} disabled={false} onClick={() => onSelectIdealPartner('AGE')} />
<MenuButton
text={'선호하는 키, 스타일'}
disabled={false}
onClick={() => onSelectIdealPartner('HEIGHT_STYLE')}
/>
<MenuButton
text={'상대방이 주로 머무는 지역'}
disabled={false}
onClick={() => onSelectIdealPartner('LOCATION')}
/>
<MenuButton text={'상대방의 취미'} disabled={false} onClick={() => onSelectIdealPartner('HOBBY')} />
<MenuButton text={'종교'} disabled={false} onClick={() => onSelectIdealPartner('RELIGION')} />
<MenuButton
text={'상대방의 음주 빈도'}
disabled={false}
onClick={() => onSelectIdealPartner('DRINKING')}
/>
<MenuButton
text={'상대방의 흡연 여부'}
disabled={false}
onClick={() => onSelectIdealPartner('SMOKING')}
/>
<MenuButton
text={'주선자에게 하고 싶은 말'}
disabled={false}
onClick={() => onSelectIdealPartner('TO_MATCHER')}
/>
</div>
</div>
)}
{selectedKey !== null && selectedStep && (
<>
{selectedStep.title({ name })}
{selectedStep.description?.()}
{selectedStep.form}
<Button variant={'filled'} widthType={'fill'} color={'primary'}>
변경사항 저장
</Button>
</>
<div className={styles.FormWrapper}>
<div className={styles.FormHeader}>
<h2>{selectedStep.title({ name })}</h2>
{selectedStep.description && (
<small className={styles.Description}>{selectedStep.description()}</small>
)}
</div>
<div className={styles.FormMain}>{selectedStep.form}</div>
<div className={styles.FormFooter}>
<Button variant={'filled'} widthType={'fill'} color={'primary'}>
변경사항 저장
</Button>
</div>
</div>
)}
</Sheet.Content>
</Sheet.Container>
Expand Down

0 comments on commit fb3ad29

Please sign in to comment.