diff --git a/src/components/common/Input.tsx b/src/components/common/Input.tsx
index eadac76..327b519 100644
--- a/src/components/common/Input.tsx
+++ b/src/components/common/Input.tsx
@@ -4,7 +4,7 @@ import { DESIGN_SYSTEM_TEXT } from "@/style/variable.ts";
type inputProps = {
placeholder: string;
icon?: string;
-} & Omit, "types">;
+} & React.InputHTMLAttributes;
export default function Input({
placeholder = "텍스트를 입력해주세요",
icon,
@@ -13,6 +13,7 @@ export default function Input({
return (
)}
@@ -35,8 +36,10 @@ export default function Input({
border: none;
box-shadow: inset 0 0 0 1px #eeeeee;
width: 100%;
- height: 5.6rem;
- border-radius: 0.5rem;
+ height: 45px;
+ border-radius: 8px;
+ font-size: 14px;
+ color: var(--text-body1);
padding-left: ${icon ? `6rem` : `2rem`};
&:focus {
@@ -46,6 +49,11 @@ export default function Input({
&::placeholder {
color: #bdbdbd;
}
+
+ &:disabled {
+ color: var(--text-disabled);
+ background: var(--gray-10);
+ }
`}
placeholder={placeholder}
{...props}
diff --git a/src/components/common/chip.tsx b/src/components/common/chip.tsx
new file mode 100644
index 0000000..52dc711
--- /dev/null
+++ b/src/components/common/chip.tsx
@@ -0,0 +1,123 @@
+import { css } from "@emotion/react";
+import delete_icon from "@/assets/chip/delete.svg";
+import add_icon from "@/assets/chip/plus.svg";
+import { Fragment } from "react";
+
+type ChipType = {
+ value?: string;
+ closable?: boolean;
+ inputable?: boolean;
+ onClick?: () => void;
+ onChange?: (e: React.ChangeEvent) => void;
+ onKeyUp?: (e: React.KeyboardEvent) => void;
+ onBlur?: (e: React.FocusEvent) => void;
+} & React.InputHTMLAttributes;
+
+export default function Chip({
+ value,
+ closable = false,
+ inputable = false,
+ onClick,
+ onChange,
+ onKeyUp,
+ onBlur,
+}: ChipType) {
+ return (
+
+ {inputable ? (
+
+ );
+}
+
+const inputableChipCss = css`
+ position: relative;
+ max-width: fit-content;
+ background-color: #fff;
+ border: 1px solid var(--gray-10);
+ border-radius: 4px;
+ padding: 3px 3px 3px 8px;
+ width: 100%;
+ height: 100%;
+ max-width: 86px;
+ max-height: fit-content;
+ box-sizing: border-box;
+
+ display: flex;
+ align-items: center;
+
+ & > input {
+ width: 100%;
+ height: 100%;
+ margin-left: 10px;
+ background-color: transparent;
+ border: none;
+
+ &:focus {
+ outline: none;
+ }
+
+ ::placeholder {
+ font-weight: 400;
+ }
+ }
+
+ img {
+ z-index: 1;
+ position: absolute;
+ cursor: pointer;
+ }
+`;
+
+const chipCss = css`
+ position: relative;
+ display: flex;
+ align-items: center;
+ column-gap: 2px;
+ background-color: #fff;
+ border: 1px solid var(--gray-10);
+ border-radius: 4px;
+ padding: 4px 8px;
+ width: 100%;
+ height: 100%;
+ max-width: fit-content;
+ max-height: fit-content;
+
+ & > input {
+ width: fit-content;
+ background-color: transparent;
+ width: 100%;
+ max-width: 86px;
+ /* border: none; */
+
+ &:focus {
+ outline: none;
+ }
+ }
+
+ & > img {
+ cursor: pointer;
+ }
+
+ & > span {
+ color: var(--text-body2);
+ }
+`;
diff --git a/src/components/common/modal/Modal.tsx b/src/components/common/modal/Modal.tsx
index 950a43f..695a21e 100644
--- a/src/components/common/modal/Modal.tsx
+++ b/src/components/common/modal/Modal.tsx
@@ -57,7 +57,7 @@ export function Modal() {
background-color: #ffffff;
border: 1px solid #cbcbcb;
border-radius: 1rem;
- padding: 2.9rem 2.4rem;
+ padding: 3.2rem;
display: flex;
flex-direction: column;
text-align: center;
@@ -68,7 +68,6 @@ export function Modal() {
css={css`
display: flex;
flex-direction: column;
- row-gap: 3rem;
color: ${DESIGN_SYSTEM_COLOR.GRAY_700};
`}
>
@@ -92,7 +91,7 @@ export function Modal() {
+ 
+
+
+ ) : (
+
+ {value}
+ {closable ? (
+ 
+ ) : null}
+
+ )}
+ {
- const [email, setEmail] = useState("");
- const [emailValid, setEmailValid] = useState(false);
+ const [verifyCheckBox, setVetifyCheckBox] = useState([
+ {
+ id: "privacy",
+ checked: false,
+ label: "개인정보 처리방침",
+ url: "",
+ },
+ {
+ id: "age",
+ checked: false,
+ label: "만 14세 이상입니다.",
+ url: "",
+ },
+ ]);
const [verifySendCheck, setVerifySendCheck] = useState(false);
const [verifyEmailNum, setVerifyEmailNum] = useState("");
const [verifyEmailNumCheck, setVerifyEmailNumCheck] = useState(false);
- const [categories, setCategories] = useState({
- bitcoinPrediction: false,
- latestNews: false,
+ const [verifyDescription, setVerifyDescription] = useState<{
+ type: "info" | "error" | "success";
+ message: string;
+ }>({
+ type: "info",
+ message: "",
});
+ const [remaingTime, setRemainingTime] = useState(300);
+ const [isTimerRunning, setIsTimerRunning] = useState(false);
+ const [timer, setTimer] = useState | null>(
+ null,
+ );
+ const [keywordList, setKeywordList] = useState<
+ { value: string; inputable: boolean }[]
+ >([
+ {
+ value: "",
+ inputable: true,
+ },
+ ]);
const { close } = useModal();
+ const { email, isValidEmail, handleEmailChange } = useCheckEmail();
+
+ const handleAddkeyword = ({
+ index,
+ keyword,
+ }: {
+ index: number;
+ keyword: {
+ value: string;
+ inputable: boolean;
+ };
+ }) => {
+ if (keyword.inputable) {
+ if (!keyword.value.trim()) {
+ alert("올바른 키워드를 입력해주세요");
+ return;
+ }
+ if (keywordList.length > 3) {
+ alert("최대 3개까지 입력 가능합니다.");
+ return;
+ }
+ }
+ Object.values(keywordList).forEach((item, i) => {
+ if (index !== i && item.value === keyword.value) {
+ alert("이미 입력된 키워드입니다.");
+ return;
+ }
+ });
+ const newKeywordList = [...keywordList];
+ if (newKeywordList[index].inputable) {
+ newKeywordList[index].inputable = false;
+ if (newKeywordList.length < 3) {
+ setKeywordList([...newKeywordList, { value: "", inputable: true }]);
+ } else {
+ setKeywordList(newKeywordList);
+ }
+ } else {
+ const updatedList = newKeywordList.filter((_, i) => i !== index);
+ if (updatedList.length === 0 || updatedList.every((k) => !k.inputable)) {
+ setKeywordList([...updatedList, { value: "", inputable: true }]);
+ } else {
+ setKeywordList(updatedList);
+ }
+ }
+ };
- const handleEmailChange = (e: React.ChangeEvent) => {
- const value = e.target.value;
- setEmail(value);
- setEmailValid(EMAIL_REGEX.test(value));
+ const handleChangekeyword = ({
+ index,
+ keyword,
+ }: {
+ index: number;
+ keyword: string;
+ }) => {
+ const newKeywordList = [...keywordList];
+ newKeywordList[index].value = keyword;
+ setKeywordList(newKeywordList);
};
const handleSendVerificationEmail = async () => {
- if (!emailValid) return;
+ if (!isValidEmail) return;
try {
- sendVerifyEmail({ email, emailPurpose: EMAIL_PURPOSE.SUBSCRIBE });
- alert("인증번호가 전송되었습니다. 확인 후 입력해주세요.");
- setVerifySendCheck(true);
+ const { status } = await sendVerifyEmail({
+ email,
+ emailPurpose: EMAIL_PURPOSE.SUBSCRIBE,
+ });
+ if (status === 200) {
+ handlePlayTimer();
+ setVerifySendCheck(true);
+ }
} catch (error) {
- alert("이메일 전송에 실패했습니다. 다시 시도해주세요.");
+ setVerifyDescription({
+ type: "error",
+ message:
+ (error as Error).message ??
+ "이메일 전송에 실패했습니다. 다시 시도해주세요.",
+ });
}
};
const handleVerifyEmailCode = async () => {
if (!verifyEmailNum) return;
+ if (keywordList?.[0]?.value?.trim() === "") return;
try {
- await verifyEmail({ email, randomNumber: verifyEmailNum, emailPurpose: EMAIL_PURPOSE.SUBSCRIBE });
- setVerifyEmailNumCheck(true);
- alert("이메일 인증이 완료되었습니다.");
+ const { status } = await verifyEmail({
+ email,
+ randomNumber: verifyEmailNum,
+ emailPurpose: EMAIL_PURPOSE.SUBSCRIBE,
+ });
+ if (status === 200) {
+ // 타이머 제거 및 중지
+ setIsTimerRunning(false);
+ if (timer) clearInterval(timer);
+ // 인증번호 인증 완료 및 메세지 제공
+ setVerifyEmailNumCheck(true);
+ setVerifyDescription({
+ type: "success",
+ message: "인증되었습니다.",
+ });
+ }
} catch (error) {
- alert("인증번호가 올바르지 않습니다. 다시 확인해주세요.");
+ setVerifyDescription({
+ type: "error",
+ message:
+ (error as Error).message ??
+ "인증 코드 인증이 실패했습니다. 다시 시도해주세요.",
+ });
}
};
- const handleCompleteSubscription = async () => {
- if (!verifyEmailNumCheck) {
- alert("이메일 인증을 완료해주세요.");
- return;
+ const handlePlayTimer = () => {
+ if (timer) {
+ clearInterval(timer);
}
- const selectedCategories = Object.keys(categories).filter(
- (key) => categories[key as keyof typeof categories]
- );
+ setRemainingTime(300);
+ setIsTimerRunning(true);
+ setVerifyEmailNum("");
+ setVerifyEmailNumCheck(false);
+ setVerifyDescription({
+ type: "info",
+ message: "인증번호를 입력해주세요.",
+ });
- if (selectedCategories.length === 0) {
- alert("최소 하나 이상의 구독 카테고리를 선택해주세요.");
- return;
- }
+ // 5분 타이머 시작, 돔에 나타내야함
+ const newTimer = setInterval(() => {
+ setRemainingTime((prev) => {
+ if (prev <= 1) {
+ clearInterval(newTimer);
+ setIsTimerRunning(false);
+ setVerifySendCheck(false);
+ return 0;
+ }
+ return prev - 1;
+ });
+ }, 1000);
+
+ setTimer(newTimer);
+ };
+
+ const handleChecked = (item: {
+ id: string;
+ checked: boolean;
+ label: string;
+ url: string;
+ }) => {
+ const updatedCheckBox = verifyCheckBox.map((check) => {
+ if (check.id === item.id) {
+ return { ...check, checked: !check.checked };
+ }
+ return check;
+ });
+ setVetifyCheckBox(updatedCheckBox);
+ };
+
+ const handleCompleteSubscription = async () => {
+ const keywords = keywordList.reduce((acc, cur) => {
+ if (cur.value.trim() !== "") {
+ acc.push(cur.value);
+ }
+ return acc;
+ }, []);
try {
- await sendSubscribeEmail({ email });
+ await sendSubscribeEmail({ email, keywords });
alert("구독이 완료되었습니다. 매일 자정에 구독 정보를 보내드립니다.");
close(); // 모달 창 닫기
} catch (error) {
- alert("구독 요청에 실패했습니다. 다시 시도해주세요.");
+ console.log(error);
+ setVerifyDescription({
+ type: "error",
+ message:
+ (error as Error).message ??
+ "구독 요청에 실패했습니다. 다시 시도해주세요.",
+ });
}
};
-
return (
-
- 구독할 카테고리를 선택하세요 -
- - {/* 구독 카테고리 토글 */} -
-