- {
return (
- {
// 양쪽 끝 인덱스 콜백 함수
const firstBackCallback = () => navigate("/");
- const lastNextCallback = async () => setIsCreateConfirmModalOpen(true);
+ const lastNextCallback = () => setIsCreateConfirmModalOpen(true);
const [createdCapsuleCode, setCreatedCapsuleCode] = useState();
// 생성 확인 모달 관련
@@ -115,7 +116,7 @@ const CreateCapsulePage = () => {
return (
<>
- void;
+}
+const NameInputStep = ({ name, setName }: Props) => {
+ return (
+ ("");
+ const [errorMessage, setErrorMessage] = useState("");
+ const buttonDisabled = useMemo(() => inputName.length === 0, [inputName]);
+
+ const onClickButton = () => {
+ const isValid = getInputCapsuleNameValid(inputName);
+
+ if (!isValid) setErrorMessage("캡슐 이름이 유효하지 않습니다.");
+
+ return isValid;
+ };
+
+ const stepProps = {
+ BottomButton: {
+ onClick: onClickButton,
+ disabled: buttonDisabled,
+ },
+ errorMessage: errorMessage,
+ };
+
+ useEffect(() => setErrorMessage(""), [inputName]);
+
+ return { inputName, setInputName, stepProps };
+};
+
+export default useNameInputStep;
diff --git a/src/_app/pages/CreateMessagePage/Steps/PhotoInputStep/index.tsx b/src/_app/pages/CreateMessagePage/Steps/PhotoInputStep/index.tsx
new file mode 100644
index 0000000..6e53895
--- /dev/null
+++ b/src/_app/pages/CreateMessagePage/Steps/PhotoInputStep/index.tsx
@@ -0,0 +1,101 @@
+import { useLoadingOverlay } from "@/_app/Providers/loadingOverlay";
+import IconPlus from "@/assets/icons/plus-icon.svg?react";
+import StepHeader from "@/components/Funnel/StepHeader";
+import { Photo } from "@/types/client";
+import { isNill, isUndefined } from "@/utils";
+import clsx from "clsx";
+import { ChangeEvent, useRef } from "react";
+import { useWindowSize } from "react-use";
+
+interface Props {
+ photo: Photo | undefined;
+ setPhoto: (newPhoto: Photo) => void;
+}
+const PhotoInputStep = ({ photo, setPhoto }: Props) => {
+ const { setGlobalLoading } = useLoadingOverlay();
+ const inputRef = useRef(null);
+ const onClickUpload = () => {
+ if (isNill(inputRef.current)) {
+ return;
+ }
+
+ inputRef.current.click();
+ };
+ const onChange = async (event: ChangeEvent) => {
+ if (isNill(event.target) || isNill(event.target.files)) {
+ return;
+ }
+
+ const file = event.target.files[0];
+ setGlobalLoading(true);
+
+ const maxSize = 5 * 1024 * 1024; // 10MB
+ if (file.size > maxSize) {
+ setGlobalLoading(false);
+
+ return;
+ }
+
+ const fileUrl = URL.createObjectURL(file);
+
+ const img = new window.Image();
+ img.src = fileUrl;
+ img.onload = () =>
+ setPhoto({
+ file,
+ url: fileUrl,
+ });
+ setGlobalLoading(false);
+ };
+
+ const { height } = useWindowSize();
+
+ return (
+ <>
+ ();
+ const [errorMessage, setErrorMessage] = useState("");
+ const buttonDisabled = useMemo(() => false, []);
+
+ const onClickButton = () => {
+ return true;
+ };
+
+ const stepProps = {
+ BottomButton: {
+ onClick: onClickButton,
+ disabled: buttonDisabled,
+ },
+ errorMessage: errorMessage,
+ };
+
+ useEffect(() => setErrorMessage(""), [inputPhoto]);
+
+ return { inputPhoto, setInputPhoto, stepProps };
+};
+
+export default usePhotoInputStep;
diff --git a/src/_app/pages/CreateMessagePage/Steps/TextInputStep/index.tsx b/src/_app/pages/CreateMessagePage/Steps/TextInputStep/index.tsx
new file mode 100644
index 0000000..01ca545
--- /dev/null
+++ b/src/_app/pages/CreateMessagePage/Steps/TextInputStep/index.tsx
@@ -0,0 +1,24 @@
+import CustomTextArea from "@/components/CustomTextArea";
+import StepHeader from "@/components/Funnel/StepHeader";
+
+interface Props {
+ text: string;
+ setText: (newText: string) => void;
+}
+const TextInputStep = ({ text, setText }: Props) => {
+ return (
+ ("");
+ const [errorMessage, setErrorMessage] = useState("");
+ const buttonDisabled = useMemo(() => inputText.length === 0, [inputText]);
+
+ const onClickButton = () => {
+ const isValid = getInputCapsuleTextValid(inputText);
+
+ if (!isValid) setErrorMessage("입력이 유효하지 않습니다.");
+
+ return isValid;
+ };
+
+ const stepProps = {
+ BottomButton: {
+ onClick: onClickButton,
+ disabled: buttonDisabled,
+ },
+ errorMessage: errorMessage,
+ };
+
+ useEffect(() => setErrorMessage(""), [inputText]);
+
+ return { inputText, setInputText, stepProps };
+};
+
+export default useTextInputStep;
diff --git a/src/_app/pages/CreateMessagePage/index.tsx b/src/_app/pages/CreateMessagePage/index.tsx
index 264ebe2..89840db 100644
--- a/src/_app/pages/CreateMessagePage/index.tsx
+++ b/src/_app/pages/CreateMessagePage/index.tsx
@@ -1,5 +1,122 @@
+import { useLoadingOverlay } from "@/_app/Providers/loadingOverlay";
+import MessageCreateFunnel from "@/components/Funnel/MessageCreateFunnel";
+import MessageCreateCompleteModal from "@/components/Modals/MessageCreateCompleteModal";
+import MessageCreateConfirmModal from "@/components/Modals/MessageCreateConfirmModal";
+import { useMessageMutate } from "@/queries/Message/useMessageService";
+import { Step } from "@/types/client";
+import { isUndefined } from "@/utils";
+import { useMemo, useState } from "react";
+import { useNavigate, useParams } from "react-router";
+import NameInputStep from "./Steps/NameInputStep";
+import useNameInputStep from "./Steps/NameInputStep/useNameInputStep";
+import PhotoInputStep from "./Steps/PhotoInputStep";
+import usePhotoInputStep from "./Steps/PhotoInputStep/usePhotoInputStep";
+import TextInputStep from "./Steps/TextInputStep";
+import useTextInputStep from "./Steps/TextInputStep/useTextInputStep";
+
const CreateMessagePage = () => {
- return <>CreateMessagePage;
+ const { code } = useParams();
+ const capsuleCode = useMemo(() => (isUndefined(code) ? "" : code), [code]);
+ const navigate = useNavigate();
+
+ const {
+ inputName,
+ setInputName,
+ stepProps: nameInputStepProps,
+ } = useNameInputStep();
+
+ const {
+ inputText,
+ setInputText,
+ stepProps: textInputStepProps,
+ } = useTextInputStep();
+
+ const {
+ inputPhoto,
+ setInputPhoto,
+ stepProps: photoInputStepProps,
+ } = usePhotoInputStep();
+
+ const steps: Array = [
+ {
+ children: (false);
+ const hideCreateConfirmModal = () => setIsCreateConfirmModalOpen(false);
+ const { mutateAsync } = useMessageMutate({ code: capsuleCode });
+ const { setGlobalLoading } = useLoadingOverlay();
+
+ const createConfirmModalCallback = async () => {
+ setGlobalLoading(true);
+
+ const formData = new FormData();
+ formData.append(
+ "dto",
+ JSON.stringify({
+ useName: inputName,
+ text: inputText,
+ code: capsuleCode,
+ })
+ );
+ if (!isUndefined(inputPhoto)) formData.append("file", inputPhoto?.file);
+
+ mutateAsync(formData)
+ .then(() => {
+ setTimeout(() => setIsCreateCompleteModalOpen(true), 1000);
+ })
+ .finally(() => {
+ setIsCreateConfirmModalOpen(false);
+ setTimeout(() => setGlobalLoading(false), 1000);
+ });
+ };
+
+ // 생성 완료 모달 관련
+ const [isCreateCompleteModalOpen, setIsCreateCompleteModalOpen] =
+ useState(false);
+ const hideCreateCompleteModal = () => setIsCreateCompleteModalOpen(false);
+ const createCompleteModalCallback = async () => {
+ hideCreateCompleteModal();
+ navigate(`/capsule/${encodeURIComponent(capsuleCode)}`);
+ };
+
+ return (
+ (null);
+ const handleChange: React.ChangeEventHandler = (event) =>
+ setValue(event.target.value);
+
+ useEffect(() => {
+ if (isNull(inputRef.current) || !mountFocus) return;
+
+ inputRef.current.focus();
+ }, []);
+
+ const { height } = useWindowSize();
+
+ return (
+ ;
firstBackCallback: () => void;
lastNextCallback: () => void;
}
-const Funnel = ({ steps, firstBackCallback, lastNextCallback }: Props) => {
+const CapsuleCreateFunnel = ({
+ steps,
+ firstBackCallback,
+ lastNextCallback,
+}: Props) => {
const [focusedStepIndex, setFocusedStepIndex] = useState(0);
const focusedStep = useMemo(
@@ -75,4 +70,4 @@ const Funnel = ({ steps, firstBackCallback, lastNextCallback }: Props) => {
);
};
-export default Funnel;
+export default CapsuleCreateFunnel;
diff --git a/src/components/Funnel/MessageCreateFunnel/index.tsx b/src/components/Funnel/MessageCreateFunnel/index.tsx
new file mode 100644
index 0000000..70d43fe
--- /dev/null
+++ b/src/components/Funnel/MessageCreateFunnel/index.tsx
@@ -0,0 +1,74 @@
+import BackButtonHeader from "@/components/BackButtonHeader";
+import CustomButtons from "@/components/CustomButtons";
+import CapsuleProgress from "@/components/Progress/CapsuleProgress";
+import { Step } from "@/types/client";
+import { isUndefined } from "@/utils";
+import { useMemo, useState } from "react";
+
+interface Props {
+ steps: Array;
+ firstBackCallback: () => void;
+ lastNextCallback: () => void;
+}
+const MessageCreateFunnel = ({
+ steps,
+ firstBackCallback,
+ lastNextCallback,
+}: Props) => {
+ const [focusedStepIndex, setFocusedStepIndex] = useState(0);
+
+ const focusedStep = useMemo(
+ () =>
+ focusedStepIndex <= steps.length - 1
+ ? steps[focusedStepIndex]
+ : undefined,
+ [steps, focusedStepIndex]
+ );
+
+ const goBack = () => {
+ if (isUndefined(focusedStep)) return;
+
+ if (focusedStepIndex <= 0) {
+ firstBackCallback();
+
+ return;
+ }
+
+ const isValid = focusedStep.BottomButton.onClick();
+
+ if (isValid) setFocusedStepIndex((prev) => prev - 1);
+ };
+
+ const goNext = () => {
+ if (isUndefined(focusedStep)) return;
+
+ const isValid = focusedStep.BottomButton.onClick();
+
+ if (!isValid) return;
+
+ if (focusedStepIndex >= steps.length - 1) {
+ lastNextCallback();
+
+ return;
+ }
+
+ setFocusedStepIndex((prev) => prev + 1);
+ };
+
+ return (
+
+
+);
+
+export default MessageCreateCompleteModal;
diff --git a/src/components/Modals/MessageCreateConfirmModal/index.tsx b/src/components/Modals/MessageCreateConfirmModal/index.tsx
new file mode 100644
index 0000000..06d29f9
--- /dev/null
+++ b/src/components/Modals/MessageCreateConfirmModal/index.tsx
@@ -0,0 +1,17 @@
+import TwoButtonModal from "../ModalBases/TwoButtonModal";
+
+interface Props {
+ hideModal: () => void;
+ confirmCallback: () => void;
+}
+const MessageCreateConfirmModal = ({ hideModal, confirmCallback }: Props) => (
+
+
+);
+
+export default MessageCreateConfirmModal;
diff --git a/src/components/Progress/CapsuleProgress/index.tsx b/src/components/Progress/CapsuleProgress/index.tsx
new file mode 100644
index 0000000..5f69ae8
--- /dev/null
+++ b/src/components/Progress/CapsuleProgress/index.tsx
@@ -0,0 +1,27 @@
+import clsx from "clsx";
+
+interface Props {
+ max: number;
+ current: number;
+}
+const CapsuleProgress = ({ max, current }: Props) => {
+ return (
+ >(`/capsule`, body);
}
export default new CapsuleService();
diff --git a/src/queries/Capsule/useCapsuleService.ts b/src/queries/Capsule/useCapsuleService.ts
index aa645d5..4c4df65 100644
--- a/src/queries/Capsule/useCapsuleService.ts
+++ b/src/queries/Capsule/useCapsuleService.ts
@@ -1,7 +1,7 @@
import { useMutation, useQuery } from "@tanstack/react-query";
import CapsuleService from "./CapsuleService";
-const queryKeys = {
+export const queryKeys = {
capsule: ({ code }: { code: string }) => ["capsule", code] as const,
};
diff --git a/src/queries/Message/MessageService.ts b/src/queries/Message/MessageService.ts
new file mode 100644
index 0000000..61782de
--- /dev/null
+++ b/src/queries/Message/MessageService.ts
@@ -0,0 +1,13 @@
+import { responseType } from "@/types/server";
+import Service from "../Service";
+
+class MessageService extends Service {
+ postMessage = (formData: FormData) =>
+ this.http.post>(``, formData, {
+ headers: {
+ "Content-Type": "multipart/form-data",
+ },
+ });
+}
+
+export default new MessageService();
diff --git a/src/queries/Message/useMessageService.ts b/src/queries/Message/useMessageService.ts
new file mode 100644
index 0000000..806fcd9
--- /dev/null
+++ b/src/queries/Message/useMessageService.ts
@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { queryKeys as CapsuleQueryKeys } from "../Capsule/useCapsuleService";
+import MessageService from "./MessageService";
+
+interface useMessageMutateProps {
+ code: string;
+}
+export const useMessageMutate = ({ code }: useMessageMutateProps) => {
+ const queryClient = useQueryClient();
+
+ return useMutation(
+ {
+ mutationFn: (formData: FormData) => MessageService.postMessage(formData),
+ onSuccess: () =>
+ queryClient.invalidateQueries({
+ queryKey: CapsuleQueryKeys.capsule({ code }),
+ }),
+ },
+ queryClient
+ );
+};
diff --git a/src/types/client.ts b/src/types/client.ts
index 6197251..678c72b 100644
--- a/src/types/client.ts
+++ b/src/types/client.ts
@@ -5,3 +5,18 @@ export type Browser =
| "InAppFacebook"
| "InAppTicTok"
| "InAppLine";
+
+export interface Step {
+ children: JSX.Element;
+ BottomButton: {
+ title?: string;
+ onClick: () => boolean;
+ disabled?: boolean;
+ };
+ errorMessage: string;
+}
+
+export interface Photo {
+ file: File;
+ url: string;
+}
diff --git a/src/types/server.ts b/src/types/server.ts
index 0658212..af012da 100644
--- a/src/types/server.ts
+++ b/src/types/server.ts
@@ -1,3 +1,10 @@
+export interface responseType {
+ success: boolean;
+ code: number;
+ message: string;
+ data: T;
+}
+
/**
* Message
*/
diff --git a/src/utils/validations.ts b/src/utils/validations.ts
index 552957c..83b503b 100644
--- a/src/utils/validations.ts
+++ b/src/utils/validations.ts
@@ -6,4 +6,7 @@
export const getInputCapsuleNameValid = (name: string) =>
typeof name === "string";
export const getInputCapsulePasswordValid = (password: string) =>
- typeof password === "string";
\ No newline at end of file
+ typeof password === "string";
+export const getInputCapsuleTextValid = (text: string) =>
+ typeof text === "string";
+
diff --git a/tailwind.config.js b/tailwind.config.js
index edf23cd..b8f185b 100755
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -7,12 +7,13 @@ export default {
"primary-main": "#5194F9",
"primary-text": "#FFFFFF",
"primary-disabled": "#A1A1A1",
- "primary-disabled-text": "#000",
+ "primary-disabled-text": "#FFFFFF",
"primary-paper": "#F6FAFF",
"secondary-main": "#DFE3EA",
"secondary-text": "#525252",
+ "border-grey": "#DEDEDE",
error: "#FF3321",
},
},
+
+
+ );
+};
+
+export default NameInputStep;
diff --git a/src/_app/pages/CreateMessagePage/Steps/NameInputStep/useNameInputStep.ts b/src/_app/pages/CreateMessagePage/Steps/NameInputStep/useNameInputStep.ts
new file mode 100644
index 0000000..b6484bc
--- /dev/null
+++ b/src/_app/pages/CreateMessagePage/Steps/NameInputStep/useNameInputStep.ts
@@ -0,0 +1,30 @@
+import { getInputCapsuleNameValid } from "@/utils/validations";
+import { useEffect, useMemo, useState } from "react";
+
+const useNameInputStep = () => {
+ const [inputName, setInputName] = useState
+
+
+
+
+ );
+};
+
+export default PhotoInputStep;
diff --git a/src/_app/pages/CreateMessagePage/Steps/PhotoInputStep/usePhotoInputStep.ts b/src/_app/pages/CreateMessagePage/Steps/PhotoInputStep/usePhotoInputStep.ts
new file mode 100644
index 0000000..1dab535
--- /dev/null
+++ b/src/_app/pages/CreateMessagePage/Steps/PhotoInputStep/usePhotoInputStep.ts
@@ -0,0 +1,26 @@
+import { Photo } from "@/types/client";
+import { useEffect, useMemo, useState } from "react";
+
+const usePhotoInputStep = () => {
+ const [inputPhoto, setInputPhoto] = useState
+ {isUndefined(photo) ? (
+ 
+ )}
+
+
+
+
+ ) : (
+
+
+ + 0 + {` / 1`} +
++ 사진은 최대 1장, 5mb까지 업로드 가능해요. +
+
+
+
+ );
+};
+
+export default TextInputStep;
diff --git a/src/_app/pages/CreateMessagePage/Steps/TextInputStep/useTextInputStep.ts b/src/_app/pages/CreateMessagePage/Steps/TextInputStep/useTextInputStep.ts
new file mode 100644
index 0000000..054f0a2
--- /dev/null
+++ b/src/_app/pages/CreateMessagePage/Steps/TextInputStep/useTextInputStep.ts
@@ -0,0 +1,30 @@
+import { getInputCapsuleTextValid } from "@/utils/validations";
+import { useEffect, useMemo, useState } from "react";
+
+const useTextInputStep = () => {
+ const [inputText, setInputText] = useState
+
+ );
};
export default CreateMessagePage;
diff --git a/src/assets/css/reset.css b/src/assets/css/reset.css
index 82935ae..b5e4cfe 100644
--- a/src/assets/css/reset.css
+++ b/src/assets/css/reset.css
@@ -122,3 +122,6 @@ table {
border-collapse: collapse;
border-spacing: 0;
}
+textarea {
+ resize: none;
+}
diff --git a/src/assets/icons/plus-icon.svg b/src/assets/icons/plus-icon.svg
new file mode 100644
index 0000000..7c122c3
--- /dev/null
+++ b/src/assets/icons/plus-icon.svg
@@ -0,0 +1,7 @@
+
diff --git a/src/components/CustomTextArea/index.tsx b/src/components/CustomTextArea/index.tsx
new file mode 100644
index 0000000..bd59b98
--- /dev/null
+++ b/src/components/CustomTextArea/index.tsx
@@ -0,0 +1,50 @@
+import { isNull } from "@/utils";
+import { useEffect, useRef } from "react";
+import { useWindowSize } from "react-use";
+
+interface Props {
+ label?: string;
+ value: string;
+ setValue: (value: string) => void;
+ placeholder?: string;
+ mountFocus?: boolean;
+}
+const CustomTextArea = ({
+ label,
+ value,
+ setValue,
+ placeholder,
+ mountFocus = false,
+}: Props) => {
+ const inputRef = useRef
+ {label && }
+
+
+ );
+};
+
+export default CustomTextArea;
diff --git a/src/components/Funnel/index.tsx b/src/components/Funnel/CapsuleCreateFunnel/index.tsx
similarity index 85%
rename from src/components/Funnel/index.tsx
rename to src/components/Funnel/CapsuleCreateFunnel/index.tsx
index 4e78851..0ac0245 100644
--- a/src/components/Funnel/index.tsx
+++ b/src/components/Funnel/CapsuleCreateFunnel/index.tsx
@@ -1,25 +1,20 @@
import BackButtonHeader from "@/components/BackButtonHeader";
import CustomButtons from "@/components/CustomButtons";
import StepProgress from "@/components/Progress/StepProgress";
+import { Step } from "@/types/client";
import { isUndefined } from "@/utils";
import { useMemo, useState } from "react";
-export interface Step {
- children: JSX.Element;
- BottomButton: {
- title?: string;
- onClick: () => boolean;
- disabled?: boolean;
- };
- errorMessage: string;
-}
-
interface Props {
steps: Array
+
+ );
+};
+
+export default MessageCreateFunnel;
diff --git a/src/components/Modals/MessageCreateCompleteModal/index.tsx b/src/components/Modals/MessageCreateCompleteModal/index.tsx
new file mode 100644
index 0000000..39ead61
--- /dev/null
+++ b/src/components/Modals/MessageCreateCompleteModal/index.tsx
@@ -0,0 +1,19 @@
+import IconComplete from "@/assets/icons/complete-icon.svg?react";
+import OneButtonModal from "../ModalBases/OneButtonModal";
+
+interface Props {
+ hideModal: () => void;
+ onClick: () => void;
+}
+// TODO: mark up
+const MessageCreateCompleteModal = ({ hideModal, onClick }: Props) => (
+
+
+ 캡슐이 추가되었습니다!
+야호!
+{"캡슐을 추가하시겠습니까?"}
+
+
+ );
+};
+
+export default CapsuleProgress;
diff --git a/src/queries/Capsule/CapsuleService.ts b/src/queries/Capsule/CapsuleService.ts
index 79a9b34..b8c4dde 100644
--- a/src/queries/Capsule/CapsuleService.ts
+++ b/src/queries/Capsule/CapsuleService.ts
@@ -1,4 +1,4 @@
-import { Capsule } from "@/types/server";
+import { Capsule, responseType } from "@/types/server";
import getQueryString from "@/utils/getQueryString";
import Service from "../Service";
@@ -11,13 +11,7 @@ class CapsuleService extends Service {
goalTime: number;
capsuleDesignId: number;
password: string;
- }) =>
- this.http.post<{
- success: boolean;
- code: number;
- message: string;
- data: string;
- }>(`/capsule`, body);
+ }) => this.http.post
+
+ + {`알맹이 ${current + 1} / `} + {`${max}${ + current === 2 ? ` (선택)` : "" + }`} +
+