Skip to content

Commit

Permalink
Merge branch 'dev' into feature-076
Browse files Browse the repository at this point in the history
  • Loading branch information
@sehyun0518
sehyun0518 committed Feb 19, 2024
2 parents be65b3a + ab0cbd1 commit dc51e11
Show file tree
Hide file tree
Showing 21 changed files with 350 additions and 263 deletions.
279 changes: 136 additions & 143 deletions src/components/NicknameModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,115 +6,108 @@ import nameImg from '@/assets/name.png';
import { BlurBackground } from '@/styles/modals/common.style';
import { userInfoState } from '@/stores/user';
import { useSetRecoilState } from 'recoil';
import useCreateToast from '@/hooks/useCreateToast';

const NicknameModal = () => {
const [inputCount, setInputCount] = useState(0);
const [name, setName] = useState<string>("");

const setUserInfo = useSetRecoilState(userInfoState);
const [inputCount, setInputCount] = useState(0);
const [name, setName] = useState<string>('');
const { createToast } = useCreateToast();

const refreshMyInfo = async () => {
const setUserInfo = useSetRecoilState(userInfoState);

const refreshMyInfo = async () => {
try {
const { result } = (await getMyInfoAPI()).data;

setUserInfo(result);
} catch (e) {
console.error(e);
}
}
};

const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
const target = e.currentTarget;
if (target.value.length > 7) {
target.value = target.value.slice(0, 7);
}
setName(target.value);
setInputCount(
target.value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, "$&$1$2").length
);
setInputCount(target.value.length);
};

const onApply = () => {
if (name) {
// 서버에 데이터 전송
onRegisterNicknameInfo();
} else {
alert('입력값을 확인해주세요.');
}
};

const onRegisterNicknameInfo = async () => {
try {
const response = (await nickNameAPI({
nick_name : name,
})).data
refreshMyInfo();
console.log(response);
} catch (err) {
console.log(err);
}
};

return (
<BlurBackground>
<ModalDiv>

<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 12
}}
>
<img src={nameImg} alt="signup" width={56} height={56} />
<h1 className="title">어떤 이름으로 불러드릴까요?</h1>
<span className="description">
vino에 오신걸 환영합니다! 원하시는 이름으로 불러드릴게요
</span>
</div>

<TextDiv
className="text_box">
<InputBox
type="text"
id="name"
name="name"
value={name}
placeholder="원하시는 닉네임을 작성해주세요"
onChange={onChangeName}
maxLength={7}
>
</InputBox>
<InputNickNameMessage>
<InputNickNameLength>
{inputCount}
</InputNickNameLength>
/7(공백포함)
</InputNickNameMessage>
</TextDiv>
{name ? (
<SucButton
type="submit"
onClick={onApply}
style={{ marginTop: 12 }}
>
등록하기
</SucButton>) : (
<Button
style={{ marginTop: 12 }}>
등록하기
</Button>)
}
</ModalDiv>
</BlurBackground>
const onChangeName = (e: React.ChangeEvent<HTMLInputElement>) => {
const target = e.currentTarget;
if (target.value.length > 7) {
target.value = target.value.slice(0, 7);
}
setName(target.value);
setInputCount(
target.value.replace(/[\0-\x7f]|([0-\u07ff]|(.))/g, '$&$1$2').length,
);
setInputCount(target.value.length);
};

const onApply = () => {
if (name) {
// 서버에 데이터 전송
onRegisterNicknameInfo();
} else {
createToast('입력값을 확인해주세요.');
}
};

const onRegisterNicknameInfo = async () => {
try {
const response = (
await nickNameAPI({
nick_name: name,
})
).data;
refreshMyInfo();
console.log(response);
} catch (err) {
console.log(err);
}
};

export default NicknameModal;

const ModalDiv = styled.div`
return (
<BlurBackground>
<ModalDiv>
<div
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: 12,
}}
>
<img src={nameImg} alt="signup" width={56} height={56} />
<h1 className="title">어떤 이름으로 불러드릴까요?</h1>
<span className="description">
vino에 오신걸 환영합니다! 원하시는 이름으로 불러드릴게요
</span>
</div>

<TextDiv className="text_box">
<InputBox
type="text"
id="name"
name="name"
value={name}
placeholder="원하시는 닉네임을 작성해주세요"
onChange={onChangeName}
maxLength={7}
></InputBox>
<InputNickNameMessage>
<InputNickNameLength>{inputCount}</InputNickNameLength>
/7(공백포함)
</InputNickNameMessage>
</TextDiv>
{name ? (
<SucButton type="submit" onClick={onApply} style={{ marginTop: 12 }}>
등록하기
</SucButton>
) : (
<Button style={{ marginTop: 12 }}>등록하기</Button>
)}
</ModalDiv>
</BlurBackground>
);
};

export default NicknameModal;

const ModalDiv = styled.div`
padding: 40px 50px;
display: flex;
flex-direction: column;
Expand All @@ -136,52 +129,52 @@ const NicknameModal = () => {
`;

const InputBox = styled.input`
width: 202px;
height: 56px;
background-color: #F3F3F3;
padding: 0px 0px 0px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex: 1 0 0;
font-style: normal;
border: none;
border-radius: 12px;
color: var(--Main, #1E1E1E);
font-family: Pretendard;
${theme.typography.Body1};
&:focus {
outline: none;
}
&::placeholder {
width: 202px;
height: 56px;
background-color: #f3f3f3;
padding: 0px 0px 0px 20px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
flex: 1 0 0;
font-style: normal;
border: none;
border-radius: 12px;
color: var(--Main, #1e1e1e);
font-family: Pretendard;
${theme.typography.Body1};
&:focus {
outline: none;
}
&::placeholder {
color: #bbb;
${theme.typography.Body1};
}
`;

const SucButton = styled.button`
width: 100%;
height: 56px;
border: none;
border-radius: 12px;
background-color : #1E1E1E;
color: #fff;
text-align: center;
${theme.typography.Body1};
cursor: pointer;
width: 100%;
height: 56px;
border: none;
border-radius: 12px;
background-color: #1e1e1e;
color: #fff;
text-align: center;
${theme.typography.Body1};
cursor: pointer;
`;

const Button = styled.button`
width: 100%;
height: 56px;
border: none;
border-radius: 12px;
background-color : #F3F3F3;
color: #BBBBBB;
text-align: center;
${theme.typography.Body1};
width: 100%;
height: 56px;
border: none;
border-radius: 12px;
background-color: #f3f3f3;
color: #bbbbbb;
text-align: center;
${theme.typography.Body1};
`;

const InputNickNameMessage = styled.span`
Expand All @@ -195,14 +188,14 @@ const InputNickNameLength = styled.span`
`;

const TextDiv = styled.div`
position : relative;
width : 600px;
height : 56px;
align-items: center;
justify-content: center;
background-color: #F3F3F3;
display: flex;
flex-direction: row;
border-radius: 12px;
margin-top: 48px;
`
position: relative;
width: 600px;
height: 56px;
align-items: center;
justify-content: center;
background-color: #f3f3f3;
display: flex;
flex-direction: row;
border-radius: 12px;
margin-top: 48px;
`;
18 changes: 14 additions & 4 deletions src/components/SummaryPage/SummaryDetailBox/CategorySelectBox/CategorySelectBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,12 +14,16 @@ import { CategoryDropdown } from './CategoryDropdown';
type Props = {
disabled?: boolean;
selectedCategoryId?: number;
startSelect?: boolean;
setStartSelect?: React.Dispatch<React.SetStateAction<boolean>>;
onSelect: (categoryId: number, categoryName?: string) => void;
};

const CategorySelectBox = ({
disabled,
selectedCategoryId,
startSelect,
setStartSelect,
onSelect,
}: Props) => {
const userToken = useRecoilValue(userTokenState);
Expand Down Expand Up @@ -55,11 +59,17 @@ const CategorySelectBox = ({

const handleSelect = (categoryId: number) => {
setSelectedId(categoryId);
setStartSelect && setStartSelect(true);
setIsOpen(false);
};

const handleClick = () => {
if (!selectedCategory || selectedId === selectedCategoryId || disabled)
if (
!selectedCategory ||
selectedId === selectedCategoryId ||
disabled ||
!startSelect
)
return;

onSelect(selectedCategory.categoryId, selectedCategory.name);
Expand Down Expand Up @@ -95,9 +105,9 @@ const CategorySelectBox = ({
</div>

<span
className={`icon-button ${(!userToken || disabled) && 'disabled'} ${
selectedCategoryId !== selectedId ? 'changed' : ''
}`}
className={`icon-button ${startSelect && 'start-select'} ${
(!userToken || disabled) && 'disabled'
} ${selectedCategoryId !== selectedId ? 'changed' : ''}`}
onClick={handleClick}
>
<OpenFileIcon width={28} height={28} />
Expand Down
Loading

0 comments on commit dc51e11

Please sign in to comment.