Skip to content
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

feat: 멤버 프로필 등록/수정 mds 적용 #1717

Open
wants to merge 23 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
23 commits
Select commit Hold shift + click to select a range
a0d74af
feat: 레이아웃 수정
simeunseo Dec 28, 2024
9f46e99
feat: 이미지 업로더 디자인 수정
simeunseo Dec 28, 2024
6a27fd1
feat: BasicFormSection pc뷰에 textfield, textarea mds 적용
simeunseo Jan 4, 2025
c58ea34
feat: BasicFormSection mobile뷰 레이아웃 수정
simeunseo Jan 4, 2025
71a7f90
feat: FormItem 디자인 수정
simeunseo Jan 4, 2025
ac5d130
feat: SoptActivitySection mds Select 적용
simeunseo Jan 4, 2025
9304fc3
feat: SoptActivitySection mobile뷰 디자인 수정
simeunseo Jan 4, 2025
01d3819
feat: SoptActivitySection mobile BottomSheetSelect 적용
simeunseo Jan 4, 2025
25eb14f
feat: FormItem title 디자인 변경
simeunseo Jan 4, 2025
3f90da6
feat: CareerSection TextField, Select mds 적용
simeunseo Jan 4, 2025
81f7426
feat: CareerSection mobile뷰 디자인 수정
simeunseo Jan 4, 2025
6fa95bf
feat: TmiSection MBTI mds 적용
simeunseo Jan 4, 2025
9a1e65f
feat: TmiSection SojuCapacity mds 적용
simeunseo Jan 4, 2025
80ea740
feat: TmiSection Interest mds 적용
simeunseo Jan 4, 2025
d2110d8
feat: TmiSection Favor mds 적용
simeunseo Jan 4, 2025
b7bd847
feat: TmiSection Introduce mds 적용
simeunseo Jan 4, 2025
52494e2
fix: Select에서 기본값이 채워지도록 수정
simeunseo Jan 4, 2025
4ffd18e
fix: BottomSheetSelect에서 초기값이 안채워지던 문제 해결
simeunseo Jan 4, 2025
06a62da
fix: 링크 카테고리 선택시 shouldDirty 지정
simeunseo Jan 4, 2025
419d8b6
fix: SoptActivity에서 초기값 지정 방식 수정
simeunseo Jan 4, 2025
d9a78c2
fix: typeerror 수정
simeunseo Jan 4, 2025
4f9dfdc
feat: makers/ui 버전업
simeunseo Jan 4, 2025
964997e
feat: makers/ui 버전업
simeunseo Jan 6, 2025
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@
"@sopt-makers/colors": "^3.0.2",
"@sopt-makers/fonts": "^1.0.0",
"@sopt-makers/icons": "^1.0.5",
"@sopt-makers/ui": "^2.7.6",
"@sopt-makers/ui": "^2.8.5",
"@tanstack/react-query": "^5.4.3",
"@toss/emotion-utils": "^1.1.10",
"@toss/error-boundary": "^1.4.6",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { colors } from '@sopt-makers/colors';
import { fonts } from '@sopt-makers/fonts';
import { IconCheck, IconChevronDown } from '@sopt-makers/icons';
import { Button } from '@sopt-makers/ui';
import { useEffect, useState } from 'react';
import { ReactNode, useEffect, useState } from 'react';

import { zIndex } from '@/styles/zIndex';

Expand All @@ -14,11 +14,25 @@ interface Option {

interface BottomSheetSelectProps {
options: Option[];
value: string | string[] | null | undefined;
defaultOption?: Option;
value: string | null | undefined;
placeholder: string;
onChange: (value: string) => void;
icon?: ReactNode;
className?: string;
disabled?: boolean;
}
const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomSheetSelectProps) => {

const BottomSheetSelect = ({
options,
defaultOption,
value,
placeholder,
onChange,
icon,
className,
disabled = false,
}: BottomSheetSelectProps) => {
const [open, setOpen] = useState(false);
const [selectedValue, setSelectedValue] = useState(value);
const [temporaryValue, setTemporaryValue] = useState(value);
Expand All @@ -32,7 +46,7 @@ const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomShee

const handleConfirm = () => {
setSelectedValue(temporaryValue);
if (temporaryValue !== '') onChange(temporaryValue as string);
onChange(temporaryValue as string);

handleClose();
};
Expand All @@ -49,25 +63,42 @@ const BottomSheetSelect = ({ options, value, placeholder, onChange }: BottomShee
};
}, [open]);

useEffect(() => {
setSelectedValue(value);
setTemporaryValue(value);
}, [value]);

const getSelectedLabel = (value: string) => {
return options.find((option) => option.value === value)?.label || value;
};

return (
<Container>
<InputField onClick={handleOpen}>
{selectedValue !== null ? <p>{selectedValue}</p> : <p style={{ color: '#808087' }}>{placeholder}</p>}
<IconChevronDown
style={{
width: 20,
height: 20,
transform: open ? 'rotate(-180deg)' : '',
transition: 'all 0.5s',
}}
/>
<InputField onClick={handleOpen} className={className} disabled={disabled}>
{selectedValue ? <p>{getSelectedLabel(selectedValue)}</p> : <p style={{ color: '#808087' }}>{placeholder}</p>}
{!icon && !disabled && (
<IconChevronDown
style={{
width: 20,
height: 20,
transform: open ? 'rotate(-180deg)' : '',
transition: 'all 0.5s',
}}
/>
)}
</InputField>

{open && (
<>
<Overlay onClick={handleClose} />
<BottomSheet>
<OptionList>
{defaultOption && (
<OptionItem onClick={() => handleOptionSelect(defaultOption.value)}>
{defaultOption.label}
{temporaryValue === defaultOption.value && <CheckedIcon />}
</OptionItem>
)}
{options.map((option) => (
<OptionItem key={option.value} onClick={() => handleOptionSelect(option.value)}>
{option.label}
Expand All @@ -88,18 +119,21 @@ export default BottomSheetSelect;

const Container = styled.div`
position: relative;
width: 100%;
`;

const InputField = styled.div`
const InputField = styled.div<{ disabled: boolean }>`
display: flex;
gap: 12px;
align-items: center;
justify-content: space-between;
border-radius: 10px;
background-color: ${colors.gray800};
cursor: pointer;
padding: 11px 16px;
${fonts.BODY_16_M};

width: 100%;
pointer-events: ${({ disabled }) => disabled && 'none'};
`;

const Overlay = styled.div`
Expand All @@ -115,6 +149,7 @@ const Overlay = styled.div`
const BottomSheet = styled.section`
position: fixed;
bottom: 0;
left: 20px;
z-index: ${zIndex.헤더};
margin-bottom: 12px;
border-radius: 16px;
Expand Down
3 changes: 1 addition & 2 deletions src/components/common/EditableSelect.stories.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { Meta, StoryFn } from '@storybook/react';

import { LINK_TITLES } from '@/components/members/upload/constants';
import MemberSelectOptions from '@/components/members/upload/forms/SelectOptions';

import EditableSelect from './EditableSelect';
Expand All @@ -11,7 +10,7 @@ export default {

const Template: StoryFn<typeof EditableSelect> = (args) => (
<EditableSelect {...args}>
<MemberSelectOptions options={LINK_TITLES} />
<MemberSelectOptions options={['option1', 'option2', 'option3']} />
</EditableSelect>
);

Expand Down
5 changes: 3 additions & 2 deletions src/components/common/ImageUploader/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ const StyledInput = styled.input`
`;

const StyledPreview = styled.img`
border-radius: 6px;
border-radius: 26px;
width: inherit;
height: inherit;
object-fit: cover;
Expand Down Expand Up @@ -184,14 +184,15 @@ const StyledEditButton = styled.button`
border-top-left-radius: 25px;
border-bottom-left-radius: 25px;
cursor: pointer;
line-height: 0;

${editButtonStyle}

&::after {
position: absolute;
top: 10px;
right: 0;
background-color: ${colors.gray600};
background-color: ${colors.gray400};
width: 1px;
height: 14px;
content: '';
Expand Down
8 changes: 4 additions & 4 deletions src/components/common/MonthPicker.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,12 @@ export default function MonthPicker({ onChange, value, placeholder }: MonthPicke
const StyledDatePicker = styled(DatePicker)`
box-sizing: border-box;
transition: all 0.2s;
border: 1.5px solid ${colors.gray700};
border: 1.5px solid ${colors.gray800};
border-radius: 6px;
background-color: ${colors.gray700};
padding: 14px 20px;
background-color: ${colors.gray800};
padding: 11px 16px;
width: 100%;
color: ${colors.gray10};
color: ${colors.gray300};
${textStyles.SUIT_16_M};

&::placeholder {
Expand Down
4 changes: 2 additions & 2 deletions src/components/members/upload/AddableItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ const MobileDeleteButton = styled.button<{ isVisible: boolean }>`
align-self: flex-end;
margin-top: 20px;
margin-right: 5px;
color: ${colors.gray300};
font-size: 15px;
color: ${colors.gray200};
font-size: 14px;
font-weight: 600;

${({ isVisible }) => isVisible || 'visibility: hidden;'}
Expand Down
11 changes: 9 additions & 2 deletions src/components/members/upload/AddableWrapper.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -62,15 +62,22 @@ const MobileAddButton = styled.button`

@media ${MOBILE_MEDIA_QUERY} {
display: flex;
gap: 11px;
gap: 4px;
align-items: center;
justify-content: center;
margin-top: 20px;
border: 1px solid ${colors.gray50};
border-radius: 12px;
padding: 16px 0;
padding: 13px 0;
width: 100%;
color: ${colors.gray50};

${textStyles.SUIT_14_SB}

& svg {
width: 12px;
height: 12px;
}
}
`;

Expand Down
Loading
Loading