`
+ height: 15px;
+ width: 15px;
+ background-color: ${(props) =>
+ props.isChecked ? "var(--color-secondary)" : "transparent"};
+ border: 1px solid
+ ${(props) =>
+ props.isChecked ? "var(--color-secondary)" : "var(--color-gray-999)"};
+ border-radius: 4px;
+ margin-right: 8px;
+ position: relative;
+ display: inline-block;
+
+ &::after {
+ content: "";
+ position: absolute;
+ display: ${(props) => (props.isChecked ? "block" : "none")};
+ left: 2px;
+ top: 1px;
+ width: 7px;
+ height: 6px;
+ border: solid white;
+ border-width: 0 2px 2px 0;
+ transform: rotate(45deg);
+ }
+`;
+export { Label, Input, Span };
diff --git a/src/components/ui/checkBox/checkBox_props.d.ts b/src/components/ui/checkBox/checkBox_props.d.ts
new file mode 100644
index 0000000..6d4eaa3
--- /dev/null
+++ b/src/components/ui/checkBox/checkBox_props.d.ts
@@ -0,0 +1,3 @@
+export interface ISpanProps {
+ isChecked: boolean;
+}
diff --git a/src/components/ui/deck/BackDeck.tsx b/src/components/ui/deck/BackDeck.tsx
new file mode 100644
index 0000000..5f2fa6f
--- /dev/null
+++ b/src/components/ui/deck/BackDeck.tsx
@@ -0,0 +1,12 @@
+import iconArrow from "@assets/images/icon_arrow_right.svg";
+import * as S from "./backDeckStyle";
+
+export default function BackDeck({ value, color }: IWhiteDeckProps) {
+ const number = value;
+ console.log(number);
+ return (
+
+
+
+ );
+}
diff --git a/src/components/ui/deck/FrontDeck.tsx b/src/components/ui/deck/FrontDeck.tsx
new file mode 100644
index 0000000..3140667
--- /dev/null
+++ b/src/components/ui/deck/FrontDeck.tsx
@@ -0,0 +1,12 @@
+import * as S from "./frontDeckStyle";
+
+export default function FrontDeck({ value, color }: IWhiteDeckProps) {
+ const underBar = value === "6" || value === "9";
+ return (
+
+
+ {value}
+
+
+ );
+}
diff --git a/src/components/ui/deck/backDeckStyle.ts b/src/components/ui/deck/backDeckStyle.ts
new file mode 100644
index 0000000..9ac0024
--- /dev/null
+++ b/src/components/ui/deck/backDeckStyle.ts
@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const cardDeck = styled.div<{ color: string }>`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 44px;
+ height: 90px;
+ border-radius: 8px;
+ border: 1px solid
+ ${({ color }) =>
+ color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"};
+ background: ${({ color }) =>
+ color === "black"
+ ? "linear-gradient(167.45deg, var(--color-gray-600) 0.43%, var(--color-gray-999) 99.57%)"
+ : "linear-gradient(167.4deg, var(--color-gray-0) 0.4%, var(--color-gray-200) 99.6%)"};
+
+ box-shadow: 2px 4px 4px 0px #00000040;
+`;
+
+export const img = styled.img`
+ color: ${({ color }) =>
+ color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"};
+`;
diff --git a/src/components/ui/deck/frontDeckStyle.ts b/src/components/ui/deck/frontDeckStyle.ts
new file mode 100644
index 0000000..46814a7
--- /dev/null
+++ b/src/components/ui/deck/frontDeckStyle.ts
@@ -0,0 +1,42 @@
+import styled from "styled-components";
+
+export const cardDeck = styled.div<{ color: string }>`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 44px;
+ height: 90px;
+ border-radius: 8px;
+ border: 1px solid
+ ${({ color }) =>
+ color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"};
+ background: ${({ color }) =>
+ color === "black"
+ ? "linear-gradient(167.45deg, var(--color-gray-600) 0.43%, var(--color-gray-999) 99.57%)"
+ : "linear-gradient(167.4deg, var(--color-gray-0) 0.4%, var(--color-gray-200) 99.6%)"};
+
+ box-shadow: 2px 4px 4px 0px #00000040;
+`;
+
+export const number = styled.div<{ underBar: boolean; color: string }>`
+ height: 40px;
+ font-weight: 600;
+ font-size: 32px;
+ color: ${({ color }) =>
+ color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"};
+ position: relative;
+
+ ${({ underBar }) =>
+ underBar &&
+ `
+ &::after {
+ content: '_';
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ transform: translateX(-50%);
+ font-size: 16px;
+ }
+ `}
+`;
diff --git a/src/components/ui/deck/frontDeckprops.d.ts b/src/components/ui/deck/frontDeckprops.d.ts
new file mode 100644
index 0000000..4b87023
--- /dev/null
+++ b/src/components/ui/deck/frontDeckprops.d.ts
@@ -0,0 +1,17 @@
+interface IWhiteDeckProps {
+ value?:
+ | "1"
+ | "2"
+ | "3"
+ | "4"
+ | "5"
+ | "6"
+ | " 7"
+ | "8"
+ | "9"
+ | "10"
+ | "11"
+ | "-";
+
+ color: "white" | "black";
+}
diff --git a/src/components/ui/input/Input.tsx b/src/components/ui/input/Input.tsx
new file mode 100644
index 0000000..82c6442
--- /dev/null
+++ b/src/components/ui/input/Input.tsx
@@ -0,0 +1,22 @@
+import { FieldValues, useFormContext } from "react-hook-form";
+import * as S from "./inputStyle";
+
+export default function Input({
+ type,
+ keyname,
+ disable,
+ defaultValue,
+ ...props
+}: IInputProps) {
+ const { register } = useFormContext();
+
+ return (
+
+ );
+}
diff --git a/src/components/ui/input/inputStyle.ts b/src/components/ui/input/inputStyle.ts
new file mode 100644
index 0000000..49aa0ea
--- /dev/null
+++ b/src/components/ui/input/inputStyle.ts
@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const input = styled.input`
+ width: 100%;
+ height: 40px;
+ border-radius: 14px;
+ padding: 16px;
+ background-color: #f8f8f8;
+ font-weight: 400;
+ font-size: 14px;
+ color: #000000;
+
+ &:focus {
+ border: 1px solid #44ff92;
+ }
+`;
diff --git a/src/components/ui/input/input_props.d.ts b/src/components/ui/input/input_props.d.ts
new file mode 100644
index 0000000..14a6650
--- /dev/null
+++ b/src/components/ui/input/input_props.d.ts
@@ -0,0 +1,6 @@
+interface IInputProps {
+ type: React.HTMLInputTypeAttribute;
+ keyname: Path
;
+ defaultValue?: string;
+ disable?: boolean;
+}
diff --git a/src/components/ui/miniDeck/MiniDeck.tsx b/src/components/ui/miniDeck/MiniDeck.tsx
new file mode 100644
index 0000000..fce5f52
--- /dev/null
+++ b/src/components/ui/miniDeck/MiniDeck.tsx
@@ -0,0 +1,5 @@
+import * as S from "./miniDeckStyle";
+
+export default function MiniDeck({ color }: IMiniDeckProps) {
+ return ;
+}
diff --git a/src/components/ui/miniDeck/miniDeckProps.d.ts b/src/components/ui/miniDeck/miniDeckProps.d.ts
new file mode 100644
index 0000000..56f549b
--- /dev/null
+++ b/src/components/ui/miniDeck/miniDeckProps.d.ts
@@ -0,0 +1,3 @@
+interface IMiniDeckProps {
+ color: "black" | "white";
+}
diff --git a/src/components/ui/miniDeck/miniDeckStyle.ts b/src/components/ui/miniDeck/miniDeckStyle.ts
new file mode 100644
index 0000000..45dc32d
--- /dev/null
+++ b/src/components/ui/miniDeck/miniDeckStyle.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const miniDeck = styled.div<{ color: string }>`
+ width: 27px;
+ height: 54px;
+ border-radius: 8px;
+ box-shadow: 1px 1px 3px 0px #00000080;
+ border: 1px solid
+ ${({ color }) =>
+ color === "black" ? "var(--color-gray-0)" : "var(--color-gray-999)"};
+ background: ${({ color }) =>
+ color === "black" ? "var(--color-gray-999)" : "var(--color-gray-0)"};
+`;
diff --git a/src/components/ui/modal/Modal.tsx b/src/components/ui/modal/Modal.tsx
new file mode 100644
index 0000000..2578d09
--- /dev/null
+++ b/src/components/ui/modal/Modal.tsx
@@ -0,0 +1,37 @@
+import ModalPortal from "./ModalPortal";
+import FirstSelect from "../modalContents/FirstSelect";
+import MakeRoom from "../modalContents/MakeRoom";
+import { useModalStore } from "../../../store/useModalStore";
+import { Inside, ModalFrame, Overlay } from "./modalStyle";
+
+const modalComponents: Record = {
+ firstSelect: ,
+ makeRoom: ,
+};
+
+export default function Modal() {
+ const { showModal, currentModal, modalColor } = useModalStore();
+
+ if (!showModal) return null;
+
+ return (
+
+
+ {modalColor === "white" ? (
+
+ e.stopPropagation()} styleKey={modalColor}>
+ {currentModal ? modalComponents[currentModal] : null}
+
+
+ ) : (
+ e.stopPropagation()}
+ styleKey={modalColor as "white" | "blue"}
+ >
+ {currentModal ? modalComponents[currentModal] : null}
+
+ )}
+
+
+ );
+}
diff --git a/src/components/ui/modal/ModalPortal.ts b/src/components/ui/modal/ModalPortal.ts
new file mode 100644
index 0000000..3d69769
--- /dev/null
+++ b/src/components/ui/modal/ModalPortal.ts
@@ -0,0 +1,14 @@
+import { ReactNode } from "react";
+import ReactDOM from "react-dom";
+
+interface ModalPortalProps {
+ children: ReactNode;
+}
+
+const ModalPortal = ({ children }: ModalPortalProps) => {
+ const el = document.getElementById("modal-root") as HTMLElement;
+
+ return ReactDOM.createPortal(children, el);
+};
+
+export default ModalPortal;
diff --git a/src/components/ui/modal/SelectDeckModal.tsx b/src/components/ui/modal/SelectDeckModal.tsx
new file mode 100644
index 0000000..0d08fda
--- /dev/null
+++ b/src/components/ui/modal/SelectDeckModal.tsx
@@ -0,0 +1,3 @@
+export default function SelectDeckModal() {
+ return SelectDeckModal
;
+}
diff --git a/src/components/ui/modal/modalStyle.ts b/src/components/ui/modal/modalStyle.ts
new file mode 100644
index 0000000..9f0c41e
--- /dev/null
+++ b/src/components/ui/modal/modalStyle.ts
@@ -0,0 +1,48 @@
+import styled, { css } from "styled-components";
+
+const baseStyle = css`
+ width: 480px;
+ min-height: 400px;
+ height: fit-content;
+ border-radius: 50px;
+ overflow: hidden;
+ font-size: 20px;
+ padding: 45px;
+`;
+
+const modalStyles = {
+ white: css`
+ ${baseStyle};
+ background-color: white;
+ `,
+ blue: css`
+ ${baseStyle};
+ background: linear-gradient(180deg, #fff 0%, #d2dfff 100%);
+ border: 1px solid var(--color-gray-999);
+ `,
+};
+
+export const ModalFrame = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ inset: 0;
+`;
+
+export const Overlay = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.8);
+`;
+
+export const Inside = styled.div<{ styleKey: keyof typeof modalStyles }>`
+ ${({ styleKey }) => modalStyles[styleKey] || modalStyles.white}
+`;
diff --git a/src/components/ui/modalContents/FirstSelect.tsx b/src/components/ui/modalContents/FirstSelect.tsx
new file mode 100644
index 0000000..2d2a0f7
--- /dev/null
+++ b/src/components/ui/modalContents/FirstSelect.tsx
@@ -0,0 +1,16 @@
+import DeckChoice from "../DeckChoice/DeckChoice";
+import * as S from "./firstSelectStyle";
+export default function FirstSelect() {
+ return (
+
+ 처음 가져올 타이틀 조합을 선택해주세요.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/ui/modalContents/MakeRoom.tsx b/src/components/ui/modalContents/MakeRoom.tsx
new file mode 100644
index 0000000..2e22d85
--- /dev/null
+++ b/src/components/ui/modalContents/MakeRoom.tsx
@@ -0,0 +1,61 @@
+import Input from "../input/Input";
+import Button from "../button/Button";
+import * as S from "./makeRoomStyle";
+import { FormProvider, useForm } from "react-hook-form";
+import { useModal } from "@hooks/useModal";
+import { IRoomNameSchema } from "./schema";
+import { useCreateRoomMutation } from "@hooks/useMutation";
+
+export default function MakeRoom() {
+ const methods = useForm();
+ const mutation = useCreateRoomMutation();
+ const { closeModal } = useModal();
+
+ const onClickClose = () => {
+ closeModal();
+ };
+
+ const onClickSubmit = async (data: IRoomNameSchema) => {
+ console.log(data, "data확인");
+ mutation.mutate(data);
+ closeModal();
+ };
+
+ return (
+
+
+ 방 만들기
+
+ 방 이름
+ type="text" keyname="roomName" />
+
+
+ 욕설이나 이용자에게 불쾌감을 줄 수 있는 단어가 포함되지 않도록 주의해
+ 주세요.
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/components/ui/modalContents/firstSelectStyle.ts b/src/components/ui/modalContents/firstSelectStyle.ts
new file mode 100644
index 0000000..577fb9b
--- /dev/null
+++ b/src/components/ui/modalContents/firstSelectStyle.ts
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+`;
+
+export const title = styled.div`
+ font-weight: 500;
+ font-size: 24px;
+ text-align: center;
+ color: var(--color-gray-999);
+`;
+
+export const deckContainer = styled.div`
+ display: grid;
+ margin-top: 25px;
+ grid-template-columns: repeat(auto-fill, 170px);
+ grid-auto-rows: 80px;
+ gap: 20px;
+ justify-content: center;
+`;
diff --git a/src/components/ui/modalContents/makeRoomStyle.ts b/src/components/ui/modalContents/makeRoomStyle.ts
new file mode 100644
index 0000000..14d6d6f
--- /dev/null
+++ b/src/components/ui/modalContents/makeRoomStyle.ts
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+export const container = styled.form`
+ width: 100%;
+ height: 100%;
+ overflow: hidden;
+ display: flex;
+ flex-direction: column;
+
+ gap: 30px;
+`;
+
+export const title = styled.div`
+ font-weight: 700;
+ font-size: 32px;
+ color: var(--color-gray-999);
+`;
+
+export const inputContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 13px;
+ width: 100%;
+ height: 75px;
+`;
+
+export const label = styled.label`
+ font-weight: 500;
+ font-size: 18px;
+ color: var(--color-gray-999);
+`;
+
+export const warningContainer = styled.div`
+ font-weight: 300;
+ font-size: 13px;
+ color: var(--color-gray-600);
+ line-height: 1.5rem;
+`;
+
+export const buttonContainer = styled.div`
+ display: flex;
+ gap: 30px;
+`;
diff --git a/src/components/ui/modalContents/schema.ts b/src/components/ui/modalContents/schema.ts
new file mode 100644
index 0000000..c65c0f5
--- /dev/null
+++ b/src/components/ui/modalContents/schema.ts
@@ -0,0 +1,9 @@
+import { z } from "zod";
+
+export const schema = z.object({
+ roomName: z.string(),
+});
+
+export interface IRoomNameSchema {
+ roomName: string;
+}
diff --git a/src/components/ui/nickname/NickNameBox.tsx b/src/components/ui/nickname/NickNameBox.tsx
new file mode 100644
index 0000000..1e03579
--- /dev/null
+++ b/src/components/ui/nickname/NickNameBox.tsx
@@ -0,0 +1,24 @@
+import { ProfileBox, Profile } from "./NickNameBoxStyle";
+// const ProfileBox = styled.div`
+// display: flex;
+// line-height: 30px;
+// gap: 10px;
+// `;
+// const Profile = styled.div`
+// width: 30px;
+// position: relative;
+// border: 2px solid #dedfe0;
+// border-radius: 50%;
+// max-width: 100%;
+// overflow: hidden;
+// height: 30px;
+// object-fit: cover;
+// `;
+export default function Nickname() {
+ return (
+
+
+ 드루와이키키
+
+ );
+}
diff --git a/src/components/ui/nickname/NickNameBoxStyle.ts b/src/components/ui/nickname/NickNameBoxStyle.ts
new file mode 100644
index 0000000..46d81c6
--- /dev/null
+++ b/src/components/ui/nickname/NickNameBoxStyle.ts
@@ -0,0 +1,17 @@
+import styled from "styled-components";
+
+export const ProfileBox = styled.div`
+ display: flex;
+ line-height: 30px;
+ gap: 10px;
+`;
+export const Profile = styled.div`
+ width: 30px;
+ position: relative;
+ border: 2px solid #dedfe0;
+ border-radius: 50%;
+ max-width: 100%;
+ overflow: hidden;
+ height: 30px;
+ object-fit: cover;
+`;
diff --git a/src/components/ui/profile/Profile.tsx b/src/components/ui/profile/Profile.tsx
new file mode 100644
index 0000000..9f5c800
--- /dev/null
+++ b/src/components/ui/profile/Profile.tsx
@@ -0,0 +1,12 @@
+import * as S from "./profileStyle";
+
+export default function Profile({ nickname }: IprofileProps) {
+ return (
+
+
+
+ {nickname}
+
+
+ );
+}
diff --git a/src/components/ui/profile/profile.props.d.ts b/src/components/ui/profile/profile.props.d.ts
new file mode 100644
index 0000000..aa94df6
--- /dev/null
+++ b/src/components/ui/profile/profile.props.d.ts
@@ -0,0 +1,5 @@
+interface IprofileProps {
+ nickname: string | undefined;
+ rank?: string | number;
+ avatar?: string;
+}
diff --git a/src/components/ui/profile/profileStyle.ts b/src/components/ui/profile/profileStyle.ts
new file mode 100644
index 0000000..38fc2df
--- /dev/null
+++ b/src/components/ui/profile/profileStyle.ts
@@ -0,0 +1,43 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ width: 100%;
+ display: flex;
+ align-items: center;
+ gap: 20px;
+`;
+
+export const avatar = styled.img`
+ width: 100px;
+ height: 100px;
+ border-radius: 50%;
+ border: 1px solid var(--color-gray-100);
+`;
+
+export const nameBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+`;
+
+export const nickname = styled.h1`
+ font-weight: 600;
+ font-size: 16px;
+ color: var(--color-gray-999);
+`;
+
+export const rankBox = styled.div`
+ display: flex;
+ gap: 5px;
+`;
+
+export const rank = styled.div`
+ font-weight: 400;
+ font-size: 14px;
+ color: var(--color-gray-999);
+`;
+
+export const trophyImg = styled.img`
+ width: 14px;
+ height: 14px;
+`;
diff --git a/src/components/ui/radioButton/RadioButton.tsx b/src/components/ui/radioButton/RadioButton.tsx
new file mode 100644
index 0000000..27bae81
--- /dev/null
+++ b/src/components/ui/radioButton/RadioButton.tsx
@@ -0,0 +1,15 @@
+import { useState } from "react";
+import * as S from "./radioButtonStyle"; // 스타일 import
+
+export default function RadioButton() {
+ const [isChecked, setIsChecked] = useState(false);
+
+ const toggleCheck = () => setIsChecked((prev) => !prev);
+
+ return (
+
+
+
+
+ );
+}
diff --git a/src/components/ui/radioButton/radioButtonStyle.ts b/src/components/ui/radioButton/radioButtonStyle.ts
new file mode 100644
index 0000000..6aba5d8
--- /dev/null
+++ b/src/components/ui/radioButton/radioButtonStyle.ts
@@ -0,0 +1,62 @@
+import styled from "styled-components";
+import { ISpanProps } from "./radioButton_props";
+
+// interface RadioProps {
+// isChecked: boolean;
+// }
+
+const Label = styled.label`
+ display: flex;
+ align-items: center;
+ cursor: pointer;
+ font-size: 16px;
+ user-select: none;
+`;
+
+const Input = styled.input`
+ position: absolute;
+ opacity: 0;
+ cursor: pointer;
+`;
+
+const Span = styled.span`
+ height: 20px;
+ width: 20px;
+ background-color: ${(props) =>
+ props.isChecked
+ ? "var(--color-gray-0)"
+ : "transparent"}; // 바깥 원은 선택되었을 때만 var(--color-gray-0)로
+ border: 1px solid var(--color-gray-999); // 기본 테두리는 회색
+ border-radius: 50%;
+ margin-right: 8px;
+ position: relative;
+ display: inline-block;
+
+ &::before {
+ content: "";
+ position: absolute;
+ left: 3px; // 안쪽 원 위치 조정
+ top: 3px; // 안쪽 원 위치 조정
+ width: 12px; // 안쪽 원의 크기
+ height: 12px;
+ background-color: ${(props) =>
+ props.isChecked
+ ? "var(--color-gray-999)"
+ : "transparent"}; // 선택되면 안쪽 원이 var(--color-gray-999)
+ border-radius: 50%;
+ }
+
+ &::after {
+ content: "";
+ position: absolute;
+ display: ${(props) => (props.isChecked ? "none" : "block")};
+ left: 6px;
+ top: 6px;
+ width: 8px;
+ height: 8px;
+ background-color: white;
+ border-radius: 50%; // 작은 흰색 원
+ }
+`;
+
+export { Label, Input, Span };
diff --git a/src/components/ui/radioButton/radioButton_props.d.ts b/src/components/ui/radioButton/radioButton_props.d.ts
new file mode 100644
index 0000000..6d4eaa3
--- /dev/null
+++ b/src/components/ui/radioButton/radioButton_props.d.ts
@@ -0,0 +1,3 @@
+export interface ISpanProps {
+ isChecked: boolean;
+}
diff --git a/src/components/ui/ranking/Ranking.tsx b/src/components/ui/ranking/Ranking.tsx
new file mode 100644
index 0000000..105bf5d
--- /dev/null
+++ b/src/components/ui/ranking/Ranking.tsx
@@ -0,0 +1,35 @@
+import styled from "styled-components";
+
+const FullBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+const TrophyImage = styled.img`
+ width: 100%;
+ height: 100px;
+`;
+const MainTextBox = styled.div`
+ display: flex;
+ margin-top: 45px;
+`;
+const Hr = styled.hr`
+ width: 100%;
+ position: relative;
+ border-top: 2px solid #000;
+ box-sizing: border-box;
+ height: 2px;
+`;
+export default function Rangking() {
+ return (
+
+
+ 전체 랭킹
+
+ 닉네임
+ 순위
+
+
+
+ );
+}
diff --git a/src/components/ui/scrollToTop/BackToTop.tsx b/src/components/ui/scrollToTop/BackToTop.tsx
new file mode 100644
index 0000000..55ad826
--- /dev/null
+++ b/src/components/ui/scrollToTop/BackToTop.tsx
@@ -0,0 +1,11 @@
+import { Circle, ScrollToTopBox } from "./backToTopStyle";
+import arrowTop from "../../../assets/images/icon_arrow_top.svg";
+export default function BackToTop() {
+ return (
+
+
+ 
+
+
+ );
+}
diff --git a/src/components/ui/scrollToTop/backToTopStyle.ts b/src/components/ui/scrollToTop/backToTopStyle.ts
new file mode 100644
index 0000000..f892839
--- /dev/null
+++ b/src/components/ui/scrollToTop/backToTopStyle.ts
@@ -0,0 +1,19 @@
+import styled from "styled-components";
+
+export const ScrollToTopBox = styled.div`
+ display: flex;
+ position: fixed;
+ justify-content: end;
+ align-items: end;
+`;
+export const Circle = styled.div`
+ width: 75px;
+ height: 75px;
+ border: 1px solid var(--color-gray-999);
+ background: var(--gray-0);
+ border-radius: 75px;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+`;
diff --git a/src/components/ui/selectionNumber/SelectNumber1.tsx b/src/components/ui/selectionNumber/SelectNumber1.tsx
new file mode 100644
index 0000000..9891445
--- /dev/null
+++ b/src/components/ui/selectionNumber/SelectNumber1.tsx
@@ -0,0 +1,5 @@
+import * as S from "./selectNumber1Style";
+
+export default function SelectNumber1() {
+ return 0;
+}
diff --git a/src/components/ui/selectionNumber/SelectionNumber.tsx b/src/components/ui/selectionNumber/SelectionNumber.tsx
new file mode 100644
index 0000000..43c1c6d
--- /dev/null
+++ b/src/components/ui/selectionNumber/SelectionNumber.tsx
@@ -0,0 +1,40 @@
+import { useState } from "react";
+import * as S from "./selectionNumberStyle";
+
+export default function SelectNumber() {
+ const [selectedNumber, setSelectedNumber] = useState(null);
+
+ const handleSelect = (value: string) => {
+ setSelectedNumber(value);
+ };
+
+ const numbers = Array.from({ length: 12 }, (_, i) => i.toString());
+
+ return (
+
+
+ {[0, 6].map((startIndex) => (
+
+ {numbers.slice(startIndex, startIndex + 6).map((number) => (
+ handleSelect(number)}
+ >
+ {number}
+
+ ))}
+
+ ))}
+
+
+ handleSelect("-")}
+ >
+ -
+
+
+
+ );
+}
diff --git a/src/components/ui/selectionNumber/selectNumber1Style.ts b/src/components/ui/selectionNumber/selectNumber1Style.ts
new file mode 100644
index 0000000..634ca65
--- /dev/null
+++ b/src/components/ui/selectionNumber/selectNumber1Style.ts
@@ -0,0 +1,41 @@
+// import styled from "styled-components";
+
+// export const NumberDetail = styled.div`
+// width: 40px;
+// height: 40px;
+// border-radius: 40px;
+// border: 1px solid var(--color-gray-999);
+// display: flex;
+// align-items: center;
+// justify-content: center;
+// color: var(--gray-0, #fff);
+// background-color: var(--color-gray-999);
+// margin-right: 9px;
+// margin-bottom: 14px;
+// font-size: 24px;
+// font-weight: 600;
+// `;
+
+import styled from "styled-components";
+
+export const NumberDetail = styled.button`
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ border: 1px solid var(--color-gray-999);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: var(--gray-0, #fff);
+ background-color: var(--color-gray-999);
+ margin-right: 9px;
+ margin-bottom: 14px;
+ font-size: 24px;
+ font-weight: 600;
+ cursor: pointer;
+ &:hover {
+ border-color: var(--color-primary);
+ transform: scale(1.1);
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+ }
+`;
diff --git a/src/components/ui/selectionNumber/selectionNumberStyle.ts b/src/components/ui/selectionNumber/selectionNumberStyle.ts
new file mode 100644
index 0000000..a5c2579
--- /dev/null
+++ b/src/components/ui/selectionNumber/selectionNumberStyle.ts
@@ -0,0 +1,79 @@
+import styled from "styled-components";
+
+export const NumberBox = styled.div`
+ display: flex;
+ gap: 10px;
+ align-items: center;
+`;
+
+export const NumberWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+export const NumberRow = styled.div`
+ display: flex;
+ justify-content: center;
+ gap: 10px;
+ margin-bottom: 10px;
+`;
+
+export const HypenBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ margin-bottom: 10px;
+`;
+
+export const NumberDetail = styled.button<{ isSelected: boolean }>`
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ border: 1px solid
+ ${({ isSelected }) =>
+ isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: ${({ isSelected }) =>
+ isSelected ? "var(--gray-999, #000)" : "var(--gray-0, #fff)"};
+ background-color: ${({ isSelected }) =>
+ isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
+ font-size: 24px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+
+ &:hover {
+ border-color: var(--color-primary);
+ transform: scale(1.1);
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+ }
+`;
+
+export const HypenLabel = styled.button<{ isSelected: boolean }>`
+ width: 40px;
+ height: 40px;
+ border-radius: 40px;
+ border: 1px solid
+ ${({ isSelected }) =>
+ isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: ${({ isSelected }) =>
+ isSelected ? "var(--gray-999, #000)" : "var(--gray-0, #fff)"};
+ background-color: ${({ isSelected }) =>
+ isSelected ? "var(--color-green, #44ff92)" : "var(--color-gray-999)"};
+ font-size: 24px;
+ font-weight: 600;
+ cursor: pointer;
+ transition: all 0.2s ease-in-out;
+
+ &:hover {
+ border-color: var(--color-primary);
+ transform: scale(1.1);
+ box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+ }
+`;
diff --git a/src/components/ui/textButton/TextButton.tsx b/src/components/ui/textButton/TextButton.tsx
new file mode 100644
index 0000000..b297475
--- /dev/null
+++ b/src/components/ui/textButton/TextButton.tsx
@@ -0,0 +1,9 @@
+import { StyledButton } from "./TextButtonStyle.ts";
+
+interface ITextButtonProps {
+ children: React.ReactNode;
+}
+
+export default function TextButton({ children }: ITextButtonProps) {
+ return {children};
+}
diff --git a/src/components/ui/textButton/TextButtonStyle.ts b/src/components/ui/textButton/TextButtonStyle.ts
new file mode 100644
index 0000000..6a55515
--- /dev/null
+++ b/src/components/ui/textButton/TextButtonStyle.ts
@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const StyledButton = styled.button`
+ text-decoration: underline;
+ font-size: 12px;
+ color: var(--color-gray-800);
+
+ &:hover {
+ color: var(--color-gray-999);
+ }
+`;
diff --git a/src/components/ui/toast/Toast.tsx b/src/components/ui/toast/Toast.tsx
new file mode 100644
index 0000000..e962128
--- /dev/null
+++ b/src/components/ui/toast/Toast.tsx
@@ -0,0 +1,58 @@
+import { createPortal } from "react-dom";
+import { useToastStore } from "../../../store/useToastStore";
+import styled, { keyframes } from "styled-components";
+
+export default function Toast() {
+ const toasts = useToastStore((state) => state.toasts);
+ const element = document.getElementById("toast-root") as HTMLElement;
+
+ return createPortal(
+ toasts.length > 0 ? (
+ <>
+ {toasts.map(({ id, message }) => (
+
+ {message}
+
+ ))}
+
+ ) : null,
+ element,
+ );
+}
+
+const FadeInOut = keyframes`
+ 0% {
+ opacity: 0;
+ }
+ 10% {
+ opacity: 1;
+ }
+ 70% {
+ opacity: 1;
+ }
+ 100% {
+ opacity: 0;
+ }
+`;
+
+const ToastFrame = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ background: radial-gradient(
+ 78.68% 145.31% at 50% 100.71%,
+ var(--color-primary) 0%,
+ var(--color-gray-0) 100%
+ );
+ width: fit-content;
+ height: 60px;
+ min-width: 500px;
+ border-radius: 50px;
+ border: 1px solid var(--color-gray-999);
+ animation: ${FadeInOut} 3s ease-in-out forwards;
+`;
+
+const ToastMessage = styled.p`
+ font-size: 24px;
+`;
diff --git a/src/components/ui/toast/ToastPortal.ts b/src/components/ui/toast/ToastPortal.ts
new file mode 100644
index 0000000..882bb2d
--- /dev/null
+++ b/src/components/ui/toast/ToastPortal.ts
@@ -0,0 +1,13 @@
+import { ReactNode } from "react";
+import ReactDOM from "react-dom";
+
+interface IModalPortalProps {
+ children: ReactNode;
+}
+
+const Portal = ({ children }: IModalPortalProps) => {
+ const el = document.getElementById("toast-root") as HTMLElement;
+ return ReactDOM.createPortal(children, el);
+};
+
+export default Portal;
diff --git a/src/components/ui/waitingPlayer/WaitingPlayerBox.tsx b/src/components/ui/waitingPlayer/WaitingPlayerBox.tsx
new file mode 100644
index 0000000..0f19549
--- /dev/null
+++ b/src/components/ui/waitingPlayer/WaitingPlayerBox.tsx
@@ -0,0 +1,11 @@
+import Badge from "../badge/Badge";
+import { Text, WaitingBox } from "./waitingPlayerBoxStyle";
+
+export default function WaitingPlayerBox() {
+ return (
+
+
+ 상대를 기다리는 중입니다.
+
+ );
+}
diff --git a/src/components/ui/waitingPlayer/waitingPlayerBoxStyle.ts b/src/components/ui/waitingPlayer/waitingPlayerBoxStyle.ts
new file mode 100644
index 0000000..9a33473
--- /dev/null
+++ b/src/components/ui/waitingPlayer/waitingPlayerBoxStyle.ts
@@ -0,0 +1,13 @@
+import styled from "styled-components";
+
+export const WaitingBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 20px;
+`;
+export const Text = styled.div`
+ color: var(--gray-700, #454545);
+ font-size: 14px;
+ font-weight: 600;
+`;
diff --git a/src/hooks/useFunnel.tsx b/src/hooks/useFunnel.tsx
new file mode 100644
index 0000000..75b5399
--- /dev/null
+++ b/src/hooks/useFunnel.tsx
@@ -0,0 +1,28 @@
+import { ReactElement, ReactNode, useState } from "react";
+
+export interface IStepProps {
+ name: string;
+ children: ReactNode;
+}
+
+export interface IFunnelProps {
+ children: Array>;
+}
+
+export const useFunnel = (defaultStep: string) => {
+ const [step, setStep] = useState(defaultStep);
+
+ const Step = (props: IStepProps): ReactElement => {
+ return <>{props.children};
+ };
+
+ const Funnel = ({ children }: IFunnelProps) => {
+ const targetStep = children.find(
+ (childStep) => childStep.props.name === step,
+ );
+
+ return <>{targetStep};
+ };
+
+ return { Funnel, Step, setStep, currentStep: step } as const;
+};
diff --git a/src/hooks/useModal.tsx b/src/hooks/useModal.tsx
new file mode 100644
index 0000000..630048d
--- /dev/null
+++ b/src/hooks/useModal.tsx
@@ -0,0 +1,11 @@
+// useModal.ts
+import { useModalStore } from "../store/useModalStore";
+
+export const useModal = () => {
+ const openModal = useModalStore((state) => state.openModal);
+ const closeModal = useModalStore((state) => state.closeModal);
+ const currentModal = useModalStore((state) => state.currentModal);
+ const modalColor = useModalStore((state) => state.modalColor);
+
+ return { openModal, closeModal, currentModal, modalColor };
+};
diff --git a/src/hooks/useMutation.tsx b/src/hooks/useMutation.tsx
new file mode 100644
index 0000000..9e7182c
--- /dev/null
+++ b/src/hooks/useMutation.tsx
@@ -0,0 +1,108 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useNavigate } from "react-router-dom";
+import {
+ createGameRoom,
+ ICreateGameRoomResponse,
+ joinGameRoom,
+ outGameRoom,
+} from "../api/gameRoomApi";
+import {
+ ILoginResponse,
+ ISignUpResponse,
+ ISignUpVariables,
+ loginUser,
+ signUpUser,
+} from "../api/userAuthApi";
+
+export const useCreateRoomMutation = () => {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: createGameRoom,
+ onSuccess: (data) => {
+ navigate(`/game/room/${data.room.id}`);
+ queryClient.invalidateQueries({
+ queryKey: ["gameRoomList"],
+ });
+ },
+ onError: (error) => {
+ alert(error.message);
+ },
+ });
+};
+
+export const useJoinGameRoomMutation = () => {
+ const navigate = useNavigate();
+ return useMutation({
+ mutationFn: joinGameRoom,
+ onSuccess: (data, roomNumber: number) => {
+ console.log("성공", data);
+ navigate(`/game/room/${roomNumber}`);
+ },
+ onError: (error: any) => {
+ if (error.status === 500) {
+ alert("존재하지 않는 게임방입니다.");
+ } else {
+ alert(error.message);
+ }
+ },
+ });
+};
+
+export const useOutRoomMutaion = () => {
+ const navigate = useNavigate();
+ const queryClient = useQueryClient();
+
+ return useMutation({
+ mutationFn: outGameRoom,
+ onSuccess: (data) => {
+ console.log("방나가기 성공", data);
+ navigate(`/game`);
+ queryClient.invalidateQueries({
+ queryKey: ["gameRoomList"],
+ });
+ },
+
+ onError: (error: any) => {
+ if (error.status === 400) {
+ alert("유저가 게임방에 없습니다.");
+ } else if (error.status === 404) {
+ alert("방을 찾을 수 없습니다.");
+ } else {
+ alert(error.message);
+ }
+ },
+ });
+};
+
+export const useLoginSubmitMutation = () => {
+ const navigate = useNavigate();
+ return useMutation<
+ ILoginResponse,
+ Error,
+ { userEmail: string; password: string }
+ >({
+ mutationFn: loginUser,
+ onSuccess: (data) => {
+ const accessToken = data?.accessToken;
+ localStorage.setItem("accessToken", accessToken);
+ navigate(`/game`);
+ },
+ onError: (error) => {
+ alert(error.message);
+ },
+ });
+};
+
+export const useSignUpSubmitMutation = () => {
+ return useMutation({
+ mutationFn: signUpUser,
+ onSuccess: (data) => {
+ console.log(data);
+ },
+ onError: (error) => {
+ console.log(error.message);
+ },
+ });
+};
diff --git a/src/hooks/useQuery.tsx b/src/hooks/useQuery.tsx
new file mode 100644
index 0000000..629fd42
--- /dev/null
+++ b/src/hooks/useQuery.tsx
@@ -0,0 +1,16 @@
+import { useQuery } from "@tanstack/react-query";
+import { getGameRoomInfo, getGameRoomsList } from "../api/gameRoomApi";
+
+export const useGetGameRoomList = () => {
+ return useQuery({
+ queryKey: ["gameRoomsList"],
+ queryFn: getGameRoomsList,
+ });
+};
+
+export const useGetGameRoomInfo = (roomId: number) => {
+ return useQuery({
+ queryKey: ["gameRoomInfo", roomId],
+ queryFn: () => getGameRoomInfo(roomId),
+ });
+};
diff --git a/src/hooks/useToast.tsx b/src/hooks/useToast.tsx
new file mode 100644
index 0000000..fa7af08
--- /dev/null
+++ b/src/hooks/useToast.tsx
@@ -0,0 +1,22 @@
+import { ToastProps, useToastStore } from "../store/useToastStore";
+
+const useToast = () => {
+ const { setToast, removeToast } = useToastStore();
+
+ const openToast = (message: string) => {
+ const newToast: ToastProps = {
+ id: Date.now(),
+ message,
+ };
+
+ setToast(newToast);
+
+ setTimeout(() => {
+ removeToast(newToast.id);
+ }, 3000);
+ };
+
+ return openToast;
+};
+
+export default useToast;
diff --git a/src/index.css b/src/index.css
index 6119ad9..8f1c52b 100644
--- a/src/index.css
+++ b/src/index.css
@@ -66,3 +66,6 @@ button:focus-visible {
background-color: #f9f9f9;
}
}
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/main.tsx b/src/main.tsx
index 4dbdea9..2b2ec8c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,12 +1,11 @@
-import { RouterProvider } from "react-router-dom";
-import { router } from "./routes/router.tsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
const queryClient = new QueryClient();
createRoot(document.getElementById("root")!).render(
-
+
,
);
diff --git a/src/pages/game/Game.tsx b/src/pages/game/Game.tsx
new file mode 100644
index 0000000..88a69d9
--- /dev/null
+++ b/src/pages/game/Game.tsx
@@ -0,0 +1,9 @@
+import { Outlet } from "react-router-dom";
+
+export default function Game() {
+ return (
+ <>
+
+
+ );
+}
diff --git a/src/pages/game/GameRoom.tsx b/src/pages/game/GameRoom.tsx
new file mode 100644
index 0000000..10e35c6
--- /dev/null
+++ b/src/pages/game/GameRoom.tsx
@@ -0,0 +1,184 @@
+import { io } from "socket.io-client";
+import ChattingBox from "../../components/ui/card/chatting/Chatting";
+import { useSocketStore } from "../../store/useSocketStore";
+import * as S from "./gameRoomStyle";
+import { useEffect, useRef, useState } from "react";
+import { jwtDecode } from "jwt-decode";
+import { useGetGameRoomInfo } from "../../hooks/useQuery";
+import { useParams } from "react-router-dom";
+import MyProfileCard from "../../components/ui/card/profileCard/ProfileCard";
+import OtherProfileCard from "../../components/ui/card/profileCard/OtherProfileCard";
+
+export interface IUser {
+ id: number;
+ roomId: number;
+ userId: number;
+ joinedAt: string;
+ userNickname: string;
+ ready: boolean;
+}
+
+interface IJoinRoomResponse {
+ sender: string;
+ userNickname: string;
+ message: string;
+}
+
+interface IJwtDecode {
+ exp: number;
+ iat: number;
+ userEmail: string;
+ userId: number;
+}
+
+interface IReadyData {
+ userId: number;
+ ready: boolean;
+}
+
+interface IJoinData {
+ sender: string;
+ userNickname: string;
+ message: string;
+}
+
+interface ILeaveData {
+ sender: string;
+ userNickname: string;
+ message: string;
+}
+
+interface IGameStartData {
+ starterUserId: number;
+ message: string;
+}
+
+export default function GameRoom() {
+ const { socket, setSocket } = useSocketStore();
+ const params = useParams();
+ const roomId = Number(params.id);
+ const [userMyId, setUserMyId] = useState(undefined);
+ const [myInfo, setMyInfo] = useState(undefined);
+ const [otherInfo, setOtherInfo] = useState(undefined);
+ // const { setReady } = useReadyStore();
+ const [myReady, setMyReady] = useState(false);
+ const [otherReady, setOtherReady] = useState(false);
+ const { data, refetch } = useGetGameRoomInfo(roomId);
+ const userMyIdRef = useRef(undefined);
+
+ useEffect(() => {
+ const accessToken = localStorage.getItem("accessToken");
+ if (!accessToken) {
+ console.error("Access token is missing.");
+ //오류 표시하거나 로그인창으로 리다이렉션 하기
+ return;
+ }
+
+ const decoded = jwtDecode(accessToken);
+ setUserMyId(decoded.userId);
+ userMyIdRef.current = decoded.userId;
+
+ if (socket) {
+ socket.on("connect", () => {
+ console.log(`Socket connected: ${socket.id}`);
+ });
+ }
+
+ const newSocket = io(`wss://api.davincicodegame.store/game`, {
+ extraHeaders: { Authorization: accessToken },
+ auth: { token: accessToken },
+ });
+
+ setSocket(newSocket);
+
+ newSocket.emit("joinRoom", { roomId }, (response: IJoinRoomResponse) => {
+ console.log(`Join room response: ${JSON.stringify(response)}`);
+ });
+ }, []);
+
+ useEffect(() => {
+ const myProfile = data?.users.find(
+ (user: IUser) => user.userId == userMyId,
+ );
+
+ setMyInfo(myProfile);
+
+ const otherProfile = data?.users.filter(
+ (user: IUser) => user.userId !== userMyId,
+ );
+
+ setOtherInfo(otherProfile);
+ }, [data]);
+
+ useEffect(() => {
+ if (!socket) return;
+
+ const handleJoin = async (data: IJoinData) => {
+ console.log(`${JSON.stringify(data)}`);
+ const refetchInfo = await refetch();
+ console.log(refetchInfo, "Refetch Info");
+ };
+
+ const handleLeave = async (data: ILeaveData) => {
+ console.log(`${JSON.stringify(data)}`);
+ };
+
+ const handleReady = async (data: IReadyData) => {
+ console.log(`${JSON.stringify(data)}`);
+ const { userId, ready } = data;
+
+ if (userId !== userMyIdRef.current) {
+ setOtherReady(ready);
+ }
+ };
+
+ const handleGameStart = async (data: IGameStartData) => {
+ console.log(`${JSON.stringify(data)}`);
+ };
+
+ socket.on("join", handleJoin);
+ socket.on("leave", handleLeave);
+ socket.on("ready", handleReady);
+ socket.on("gameStart", handleGameStart);
+
+ return () => {
+ socket.disconnect();
+ };
+ }, [socket, refetch]);
+
+ const handleMyReady = () => {
+ setMyReady((prev) => !prev);
+ };
+
+ return (
+
+
+
+ 상대 플레이어
+
+
+
+
+
+
+
+
+
+
+
+ 나
+
+
+
+ );
+}
diff --git a/src/pages/game/gameRoomList.tsx b/src/pages/game/gameRoomList.tsx
new file mode 100644
index 0000000..fa346df
--- /dev/null
+++ b/src/pages/game/gameRoomList.tsx
@@ -0,0 +1,45 @@
+import Button from "../../components/ui/button/Button";
+import * as S from "./gameRoomListStyle";
+import GameRoomCard from "../../components/ui/card/cardList/GameRoomCard";
+import { useGetGameRoomList } from "../../hooks/useQuery";
+import { useModal } from "../../hooks/useModal";
+
+interface IGameRoom {
+ id: number;
+ roomName: string;
+ maxPlayers: number;
+ currentCount: number;
+ createdAt: string;
+}
+
+export default function GameRoomList() {
+ const { openModal } = useModal();
+ const { data: gameRooms } = useGetGameRoomList();
+ console.log("gameRooms✅", gameRooms);
+
+ const onClickModalOpen = () => {
+ openModal("makeRoom", "white");
+ };
+
+ return (
+
+
+
+
+
+ {gameRooms?.map((room: IGameRoom) => (
+
+ ))}
+
+
+ );
+}
diff --git a/src/pages/game/gameRoomListStyle.ts b/src/pages/game/gameRoomListStyle.ts
new file mode 100644
index 0000000..26ddf85
--- /dev/null
+++ b/src/pages/game/gameRoomListStyle.ts
@@ -0,0 +1,23 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ width: 100%;
+ display: flex;
+ flex-direction: column;
+ gap: 20px;
+`;
+
+export const buttonContainer = styled.div`
+ width: 100%;
+ height: 60px;
+ display: flex;
+ justify-content: end;
+`;
+
+export const gameroomListContainer = styled.div`
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 500px);
+ grid-auto-rows: 260px;
+ gap: 40px;
+ justify-content: center;
+`;
diff --git a/src/pages/game/gameRoomStyle.ts b/src/pages/game/gameRoomStyle.ts
new file mode 100644
index 0000000..7cc6079
--- /dev/null
+++ b/src/pages/game/gameRoomStyle.ts
@@ -0,0 +1,68 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ display: flex;
+ flex-direction: 38px;
+ width: 100%;
+ height: 100%;
+ gap: 38px;
+`;
+
+export const leftContainer = styled.div`
+ width: 390px;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ background-color: yellow;
+`;
+
+export const centerContainer = styled.div`
+ height: 100%;
+ width: 100%;
+ background-color: green;
+ position: relative;
+`;
+
+export const rightContainer = styled.div`
+ margin-right: 77px;
+ padding-bottom: 44px;
+ width: 390px;
+ height: 100%;
+ display: flex;
+ gap: 40px;
+ flex-direction: column;
+ justify-content: end;
+ background-color: blue;
+`;
+
+export const myDeckBox = styled.div`
+ width: 100%;
+ height: 90px;
+ gap: 40px;
+ background-color: purple;
+`;
+
+export const guideBox = styled.div`
+ width: 100%;
+ height: 60px;
+ display: flex;
+ flex-direction: center;
+ background-color: red;
+`;
+
+export const otherPlayerDeck = styled.div`
+ margin-top: 14px;
+ width: 100%;
+ height: 90px;
+ display: flex;
+ gap: 12px;
+ background-color: aqua;
+`;
+
+export const selectNumberBox = styled.div`
+ margin-top: 40px;
+ width: 100%;
+ height: 229px;
+ background-color: black;
+`;
diff --git a/src/pages/home/Home.tsx b/src/pages/home/Home.tsx
new file mode 100644
index 0000000..02c907f
--- /dev/null
+++ b/src/pages/home/Home.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+ return <>Home;
+}
diff --git a/src/pages/mypage/checkPassword/CheckPassword.tsx b/src/pages/mypage/checkPassword/CheckPassword.tsx
new file mode 100644
index 0000000..4cdf5e9
--- /dev/null
+++ b/src/pages/mypage/checkPassword/CheckPassword.tsx
@@ -0,0 +1,36 @@
+import { FormProvider, useForm } from "react-hook-form";
+import Input from "../../../components/ui/input/Input";
+import * as S from "./checkPasswordStyle";
+import Button from "../../../components/ui/button/Button";
+import { ICheckPassword } from "./schema";
+import { useNavigate } from "react-router-dom";
+
+export default function CheckPassword() {
+ const methods = useForm();
+ const navigate = useNavigate();
+ const onClickSubmit = async (data: ICheckPassword) => {
+ console.log(data);
+ navigate("/user/mypage/updateMyPage");
+ };
+
+ return (
+
+
+
+ 본인 인증을 위해 비밀번호 확인이 필요합니다.
+ 비밀번호를 입력해 주세요.
+ 비밀번호
+ type="text" keyname="password" />
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/mypage/checkPassword/checkPasswordStyle.ts b/src/pages/mypage/checkPassword/checkPasswordStyle.ts
new file mode 100644
index 0000000..ae70036
--- /dev/null
+++ b/src/pages/mypage/checkPassword/checkPasswordStyle.ts
@@ -0,0 +1,40 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+`;
+
+export const checkPasswordBox = styled.form`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 400px;
+`;
+
+export const p = styled.p`
+ font-weight: 500;
+ font-size: 20px;
+ line-height: 26px;
+ letter-spacing: -0.02em;
+ color: var(--color-gray-999);
+`;
+
+export const label = styled.label`
+ margin-top: 30px;
+ font-weight: 500;
+ font-size: 18px;
+ color: var(--color-gray-999);
+ margin-bottom: 11px;
+`;
+
+export const buttonBox = styled.div`
+ width: 400px;
+ margin-top: 150px;
+ display: flex;
+ gap: 20px;
+`;
diff --git a/src/pages/mypage/checkPassword/schema.ts b/src/pages/mypage/checkPassword/schema.ts
new file mode 100644
index 0000000..832f43f
--- /dev/null
+++ b/src/pages/mypage/checkPassword/schema.ts
@@ -0,0 +1,3 @@
+export interface ICheckPassword {
+ password: string;
+}
diff --git a/src/pages/mypage/myScorePage/MyPage.tsx b/src/pages/mypage/myScorePage/MyPage.tsx
new file mode 100644
index 0000000..03fc459
--- /dev/null
+++ b/src/pages/mypage/myScorePage/MyPage.tsx
@@ -0,0 +1,51 @@
+import Button from "../../../components/ui/button/Button";
+import medalImage from "../../../assets/images/icon_medal.svg";
+import heartBlueImage from "../../../assets/images/icon_heart_blue.svg";
+import heartRedImage from "../../../assets/images/icon_heart_red.svg";
+import * as S from "./myPageStyle";
+
+export default function MyPage() {
+ return (
+
+ 마이페이지
+
+
+
+ nickname님,
+ 안녕하세요.
+
+
+
+
+ 나의랭킹
+
+ 
+
+
+ 78
+ 위
+
+ 전체 랭킹 보러가기→
+
+
+
+
+ 나의 기록
+
+
+
+ 12
+ 승
+
+
+
+ 5
+ 패
+
+
+
+
+ );
+}
diff --git a/src/pages/mypage/myScorePage/myPageStyle.ts b/src/pages/mypage/myScorePage/myPageStyle.ts
new file mode 100644
index 0000000..36f8fdc
--- /dev/null
+++ b/src/pages/mypage/myScorePage/myPageStyle.ts
@@ -0,0 +1,236 @@
+import styled from "styled-components";
+
+const PullBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 400px;
+ margin: 0 auto;
+`;
+
+const H1 = styled.h1`
+ color: var(--gray-999, #000);
+ text-align: center;
+ font-family: Pretendard;
+ font-size: 32px;
+ font-style: normal;
+ font-weight: 700;
+ line-height: normal;
+`;
+const ProfilePhoto = styled.div`
+ display: flex;
+ width: 80px;
+ height: 80px;
+ justify-content: center;
+ align-items: center;
+ flex-shrink: 0;
+ border-radius: 100px;
+ border: 2px solid #aaa;
+`;
+const ProfileBox = styled.div`
+ display: flex;
+ width: 100%;
+ gap: 30px;
+ margin-top: 50px;
+ margin-bottom: 30px;
+ align-items: center;
+`;
+const NickNameTextBox = styled.div`
+ display: flex;
+ flex-direction: column;
+`;
+const NickNameText = styled.div`
+ color: #000;
+ font-family: Pretendard;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: 34px; /* 141.667% */
+`;
+const HelloText = styled.div`
+ color: #000;
+ font-family: Pretendard;
+ font-size: 22px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 34px;
+`;
+const MyRanking = styled.div`
+ width: 100%;
+ height: 180px;
+ flex-shrink: 0;
+ border-radius: 12px;
+ border: 1px solid #000;
+ color: var(--color-primary);
+ box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
+ margin-top: 40px;
+ margin-bottom: 30px;
+ padding: 25px 15px 25px 5px;
+`;
+const H2 = styled.h2`
+ width: 73px;
+ height: 23px;
+ flex-shrink: 0;
+ color: #000;
+ font-family: Pretendard;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: -0.4px;
+ margin-left: 10px;
+ margin-bottom: 20px;
+`;
+const MedalRankingBox = styled.div`
+ display: flex;
+ gap: 156px;
+`;
+const RankingBox = styled.div`
+ display: flex;
+ flex-direction: column;
+
+ gap: 14px;
+`;
+const Ranking = styled.div`
+ display: flex;
+`;
+const Number = styled.div`
+ width: 50px;
+ color: #000;
+ font-family: Pretendard;
+ font-size: 36px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ letter-spacing: 7.2px;
+ margin-top: 2px;
+`;
+const Text = styled.div`
+ color: #000;
+ font-family: Pretendard;
+ font-size: 24px;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+ letter-spacing: 4.8px;
+ width: 21px;
+ height: 29px;
+ margin-top: 10px;
+`;
+const TotalRankingPage = styled.div`
+ width: 124px;
+ color: #000;
+ font-family: Pretendard;
+ font-size: 14px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ text-decoration-line: underline;
+ text-decoration-style: solid;
+ text-decoration-skip-ink: auto;
+ text-decoration-thickness: auto;
+ text-underline-offset: auto;
+ text-underline-position: from-font;
+`;
+const ScoreBoard = styled.div`
+ width: 100%;
+ height: 180px;
+ flex-shrink: 0;
+ border-radius: 12px;
+ border: 1px solid #000;
+ color: var(--color-yellow-900);
+ box-shadow: 2px 2px 4px 0px rgba(0, 0, 0, 0.25);
+`;
+const H3 = styled.h3`
+ width: 73px;
+ height: 25px;
+ flex-shrink: 0;
+ color: #000;
+ font-family: Pretendard;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 600;
+ line-height: normal;
+ letter-spacing: -0.4px;
+ margin-top: 25px;
+ margin-left: 15px;
+ margin-bottom: 34px;
+`;
+const ScoreBox = styled.div`
+ display: flex;
+ gap: 110px;
+ justify-content: center;
+ align-items: center;
+`;
+const BlueHreartBox = styled.div`
+ display: flex;
+ align-items: center;
+ height: 45px;
+ gap: 10px;
+`;
+
+const HeartBlueImg = styled.img`
+ width: 30px;
+ height: 30px;
+`;
+
+const ScoreWin = styled.div`
+ color: var(--color-gray-999);
+ font-size: 36px;
+ font-weight: 500;
+`;
+const Win = styled.div`
+ color: var(--color-gray-999);
+ font-size: 20px;
+ font-weight: 500;
+`;
+const RedHeartBox = styled.div`
+ display: flex;
+ align-items: center;
+ height: 45px;
+ gap: 10px;
+`;
+const HeartRedImg = styled.img`
+ width: 30px;
+ height: 30px;
+`;
+const ScoreLose = styled.div`
+ color: var(--color-gray-999);
+ font-size: 36px;
+ font-weight: 500;
+`;
+const Lose = styled.div`
+ color: var(--color-gray-999);
+ font-size: 20px;
+ font-weight: 500;
+`;
+
+export {
+ PullBox,
+ H1,
+ ProfilePhoto,
+ ProfileBox,
+ NickNameTextBox,
+ NickNameText,
+ HelloText,
+ MyRanking,
+ H2,
+ MedalRankingBox,
+ RankingBox,
+ Ranking,
+ Number,
+ Text,
+ TotalRankingPage,
+ ScoreBoard,
+ H3,
+ ScoreBox,
+ BlueHreartBox,
+ HeartBlueImg,
+ ScoreWin,
+ Win,
+ RedHeartBox,
+ HeartRedImg,
+ ScoreLose,
+ Lose,
+};
diff --git a/src/pages/mypage/updateMypage/UpdateMyPage.tsx b/src/pages/mypage/updateMypage/UpdateMyPage.tsx
new file mode 100644
index 0000000..90a80ee
--- /dev/null
+++ b/src/pages/mypage/updateMypage/UpdateMyPage.tsx
@@ -0,0 +1,70 @@
+import { FormProvider, useForm } from "react-hook-form";
+import Button from "../../../components/ui/button/Button";
+import Input from "../../../components/ui/input/Input";
+import * as S from "./updateMyPageStyle";
+import { schema, UpdateMyPageType } from "./schema";
+import { zodResolver } from "@hookform/resolvers/zod";
+
+export default function UpdateMyPage() {
+ const methods = useForm({
+ resolver: zodResolver(schema),
+ mode: "onChange",
+ });
+ const onClickSubmit = (data: UpdateMyPageType) => {
+ console.log(data);
+ };
+
+ return (
+
+
+
+
+ 내 정보 수정
+
+
+
+
+ 이메일
+
+
+
+ 비밀번호
+ type="password" keyname="password" />
+
+ {methods.formState.errors.password?.message}
+
+
+
+ 비밀번호 확인
+ type="password" keyname="checkPassword" />
+
+ {methods.formState.errors.checkPassword?.message}
+
+
+
+ 닉네임
+ type="text" keyname="nickname" />
+
+ {methods.formState.errors.nickname?.message}
+
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/mypage/updateMypage/schema.ts b/src/pages/mypage/updateMypage/schema.ts
new file mode 100644
index 0000000..2effbf8
--- /dev/null
+++ b/src/pages/mypage/updateMypage/schema.ts
@@ -0,0 +1,18 @@
+import { z } from "zod";
+
+export const schema = z
+ .object({
+ password: z
+ .string()
+ .min(1, { message: "비밀번호는 최소 한 글자 이상이어야 합니다." }),
+ checkPassword: z.string(),
+ nickname: z
+ .string()
+ .min(1, { message: "닉네임은 최소 한 글자 이상이어야 합니다." }),
+ })
+ .refine((data) => data.password === data.checkPassword, {
+ message: "비밀번호가 일치하지 않습니다.",
+ path: ["checkPassword"],
+ });
+
+export type UpdateMyPageType = z.infer;
diff --git a/src/pages/mypage/updateMypage/updateMyPageStyle.ts b/src/pages/mypage/updateMypage/updateMyPageStyle.ts
new file mode 100644
index 0000000..25ec56d
--- /dev/null
+++ b/src/pages/mypage/updateMypage/updateMyPageStyle.ts
@@ -0,0 +1,64 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ width: 100%;
+ height: 100%;
+`;
+
+export const contentsBox = styled.form`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ width: 400px;
+ gap: 30px;
+`;
+
+export const imgBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: 30px;
+`;
+
+export const inputBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ gap: 10px;
+`;
+
+export const title = styled.div`
+ font-weight: 700;
+ font-size: 32px;
+ color: var(--color-gray-999);
+`;
+
+export const img = styled.div`
+ width: 80px;
+ height: 80px;
+ border-radius: 50%;
+ background: #5076ff;
+ backdrop-filter: blur(24px);
+`;
+
+export const label = styled.label`
+ font-weight: 500;
+ font-size: 18px;
+ color: var(--color-gray-999);
+`;
+
+export const buttonBox = styled.div`
+ width: 100%;
+ display: flex;
+ gap: 20px;
+ margin-top: 50px;
+`;
+
+export const errorMessage = styled.div`
+ color: var(--color-warning);
+`;
diff --git a/src/pages/testpage/Testpage.tsx b/src/pages/testpage/Testpage.tsx
new file mode 100644
index 0000000..e24920a
--- /dev/null
+++ b/src/pages/testpage/Testpage.tsx
@@ -0,0 +1,9 @@
+import Rangking from "../../components/ui/ranking/Ranking";
+
+export default function TestPage() {
+ return (
+
+
+
+ );
+}
diff --git a/src/pages/user/login/Login.tsx b/src/pages/user/login/Login.tsx
index ba5b453..270c7d3 100644
--- a/src/pages/user/login/Login.tsx
+++ b/src/pages/user/login/Login.tsx
@@ -1,3 +1,51 @@
+import { FormProvider, useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Button from "../../../components/ui/button/Button";
+import { loginSchema, schema } from "./schema";
+import Input from "../../../components/ui/input/Input";
+import * as S from "./loginStyle2";
+import { useLoginSubmitMutation } from "../../../hooks/useMutation";
+
export default function LoginPage() {
- return Login
;
+ const methods = useForm({
+ resolver: zodResolver(schema),
+ mode: "onChange",
+ });
+
+ const mutation = useLoginSubmitMutation();
+
+ const onClickSubmit = async (data: loginSchema) => {
+ mutation.mutate(data);
+ };
+
+ return (
+ <>
+
+
+ 로그인
+
+
+
+ 이메일
+ type="text" keyname="userEmail" />
+
+ {methods.formState.errors.userEmail?.message}
+
+
+
+ 비밀번호
+ type="password" keyname="password" />
+
+ {methods.formState.errors.password?.message}
+
+
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/user/login/LoginStyle.ts b/src/pages/user/login/LoginStyle.ts
new file mode 100644
index 0000000..e42dbd7
--- /dev/null
+++ b/src/pages/user/login/LoginStyle.ts
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: 50px;
+ height: 100%;
+`;
+
+export const loginBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 50px;
+ width: 400px;
+`;
+export const label = styled.label`
+ font-weight: 500;
+ font-size: 18px;
+ color: var(--color-gray-999);
+`;
+
+export const title = styled.h2`
+ font-weight: 700;
+ font-size: 32px;
+ color: var(--color-gray-999);
+`;
+
+export const inputBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+`;
+
+export const input = styled.input`
+ width: 100%;
+ height: 40px;
+ border-radius: 14px;
+ background-color: #f8f8f8;
+`;
+
+export const form = styled.form`
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ gap: 50px;
+`;
+
+export const errorMessage = styled.div`
+ color: var(--color-warning);
+`;
diff --git a/src/pages/user/login/loginStyle2.ts b/src/pages/user/login/loginStyle2.ts
new file mode 100644
index 0000000..e42dbd7
--- /dev/null
+++ b/src/pages/user/login/loginStyle2.ts
@@ -0,0 +1,54 @@
+import styled from "styled-components";
+
+export const container = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ width: 100%;
+ gap: 50px;
+ height: 100%;
+`;
+
+export const loginBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: 50px;
+ width: 400px;
+`;
+export const label = styled.label`
+ font-weight: 500;
+ font-size: 18px;
+ color: var(--color-gray-999);
+`;
+
+export const title = styled.h2`
+ font-weight: 700;
+ font-size: 32px;
+ color: var(--color-gray-999);
+`;
+
+export const inputBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 10px;
+ width: 100%;
+`;
+
+export const input = styled.input`
+ width: 100%;
+ height: 40px;
+ border-radius: 14px;
+ background-color: #f8f8f8;
+`;
+
+export const form = styled.form`
+ display: flex;
+ width: 100%;
+ flex-direction: column;
+ gap: 50px;
+`;
+
+export const errorMessage = styled.div`
+ color: var(--color-warning);
+`;
diff --git a/src/pages/user/login/schema.ts b/src/pages/user/login/schema.ts
new file mode 100644
index 0000000..060ffaa
--- /dev/null
+++ b/src/pages/user/login/schema.ts
@@ -0,0 +1,13 @@
+import { z } from "zod";
+
+export const schema: z.ZodType = z.object({
+ userEmail: z.string(),
+ password: z
+ .string()
+ .min(4, { message: "비밀번호는 최소 4자리 이상 입력해주세요." }),
+});
+
+export interface loginSchema {
+ userEmail: string;
+ password: string;
+}
diff --git a/src/pages/user/signUp/SignUp.tsx b/src/pages/user/signUp/SignUp.tsx
index e36cc7d..70ec267 100644
--- a/src/pages/user/signUp/SignUp.tsx
+++ b/src/pages/user/signUp/SignUp.tsx
@@ -1,3 +1,80 @@
+import Form from "@components/form/Form";
+import SignUpStep from "./SignUpStep";
+import { useFunnel } from "@hooks/useFunnel";
+import {
+ FormWrapper,
+ SignUpSection,
+ SignUpTitle,
+ CurrentStep,
+ StepBasic,
+ Stepper,
+} from "./SignUpStyle";
+import { SubmitHandler } from "react-hook-form";
+import { signUpSchema } from "./schema";
+import { useSignUpSubmitMutation } from "@hooks/useMutation";
+
+const steps = ["기본정보 입력", "프로필 설정"];
+
export default function SignUp() {
- return SignUp
;
+ const { Funnel, Step, setStep, currentStep } = useFunnel(steps[0]);
+ const mutation = useSignUpSubmitMutation();
+
+ const nextClickHandler = (targetStep: string) => {
+ setStep(targetStep);
+ };
+
+ const prevClickHandler = (targetStep: string) => {
+ setStep(targetStep);
+ };
+
+ const onSubmit: SubmitHandler = async (data) => {
+ console.log("Submitted Data:", data);
+ const { passwordConfirm, profileImage, ...formData } = data;
+
+ const result = mutation.mutate(formData);
+ console.log(result);
+ };
+
+ return (
+ <>
+
+ 회원가입
+
+ {currentStep === steps[0] ? (
+ <>
+ 1
+ 2
+
+ ) : (
+ <>
+ 1
+ 2
+
+ )}
+
+
+ onSubmit={onSubmit}
+ formOptions={{
+ defaultValues: {
+ userEmail: "",
+ password: "",
+ passwordConfirm: "",
+ userNickname: "",
+ profileImage: [""],
+ },
+ }}
+ >
+
+
+
+
+
+
+ );
}
diff --git a/src/pages/user/signUp/SignUpStep.tsx b/src/pages/user/signUp/SignUpStep.tsx
new file mode 100644
index 0000000..dff8fdd
--- /dev/null
+++ b/src/pages/user/signUp/SignUpStep.tsx
@@ -0,0 +1,32 @@
+import SignUpStepOne from "./SignUpStepOne";
+import SignUpStepTwo from "./SignUpStepTwo";
+import { IFunnelProps, IStepProps } from "../../../hooks/useFunnel";
+
+export interface ISignUpProps {
+ steps: string[];
+ nextClickHandler: (nextStep: string) => void;
+ prevClickHandler: (prevStep: string) => void;
+ Funnel: React.ComponentType;
+ Step: React.ComponentType;
+}
+
+export default function SignUpStep({
+ steps,
+ nextClickHandler,
+ prevClickHandler,
+ Funnel,
+ Step,
+}: ISignUpProps) {
+ return (
+ <>
+
+
+ nextClickHandler(steps[1])} />
+
+
+ prevClickHandler(steps[0])} />
+
+
+
+ );
+}
diff --git a/src/pages/user/signUp/SignUpStepCompleted.tsx b/src/pages/user/signUp/SignUpStepCompleted.tsx
new file mode 100644
index 0000000..ed2c99e
--- /dev/null
+++ b/src/pages/user/signUp/SignUpStepCompleted.tsx
@@ -0,0 +1,3 @@
+export default function SignUpStepCompleted() {
+ return <>SignUpStepCompleted;
+}
diff --git a/src/pages/user/signUp/SignUpStepOne.tsx b/src/pages/user/signUp/SignUpStepOne.tsx
new file mode 100644
index 0000000..78d144b
--- /dev/null
+++ b/src/pages/user/signUp/SignUpStepOne.tsx
@@ -0,0 +1,150 @@
+import Input from "@components/ui/input/Input";
+import Button from "@components/ui/button/Button";
+import CheckBox from "@components/ui/checkBox/CheckBox";
+import TextButton from "@components/ui/textButton/TextButton";
+import { Controller, useForm, useFormContext } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { schema, signUpSchema } from "./schema";
+import {
+ StyledLabel,
+ InputBox,
+ ErrorMessage,
+ FlexCol,
+ Flex,
+ AgreeWrapper,
+ AgreeBox,
+ CheckLabel,
+} from "./SignUpStyle";
+import { useNavigate } from "react-router-dom";
+
+interface SignUpStepProps {
+ onNext: () => void;
+}
+
+export default function SignUpStepOne({ onNext }: SignUpStepProps) {
+ const methods = useForm({
+ resolver: zodResolver(schema),
+ mode: "onChange",
+ });
+ const { control } = useFormContext();
+ const navigate = useNavigate();
+
+ const onClickPrev = () => {
+ navigate(-1);
+ };
+
+ return (
+ <>
+
+
+ 이메일
+
+ (
+
+ type="text"
+ keyname="userEmail"
+ id="signupEmail"
+ placeholder="이메일을 입력해 주세요."
+ {...field}
+ />
+ )}
+ />
+
+
+
+
+ {methods.formState.errors.userEmail?.message}
+
+
+
+ 비밀번호
+ (
+
+ type="password"
+ keyname="password"
+ id="signupPassword"
+ placeholder="비밀번호를 입력해 주세요."
+ {...field}
+ />
+ )}
+ />
+
+ {methods.formState.errors.password?.message}
+
+
+
+
+ 비밀번호 확인
+
+ (
+
+ type="password"
+ keyname="passwordConfirm"
+ id="signupPasswordConfirm"
+ placeholder="비밀번호를 한번 더 입력해 주세요."
+ {...field}
+ />
+ )}
+ />
+
+ {methods.formState.errors.passwordConfirm?.message}
+
+
+
+
+
+
+ 이용약관에 동의합니다.
+ 약관 보기
+
+
+
+
+ 개인정보처리방침에 동의합니다.
+
+ 약관 보기
+
+
+
+
+
+
+
+
+ );
+}
diff --git a/src/pages/user/signUp/SignUpStepTwo.tsx b/src/pages/user/signUp/SignUpStepTwo.tsx
new file mode 100644
index 0000000..6529de8
--- /dev/null
+++ b/src/pages/user/signUp/SignUpStepTwo.tsx
@@ -0,0 +1,106 @@
+import Button from "@components/ui/button/Button";
+import Input from "@components/ui/input/Input";
+import defaultImage from "@assets/images/image_profile_01.svg";
+import { Controller, useForm, useFormContext } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { schema, signUpSchema } from "./schema";
+import {
+ ErrorMessage,
+ Flex,
+ FlexCol,
+ InputBox,
+ ProfileImage,
+ ProfileImageWrapper,
+ StyledLabel,
+ Tip,
+ ButtonLabel,
+} from "./SignUpStyle";
+
+interface SignUpStepProps {
+ onPrev: () => void;
+}
+
+export default function SignUpStepTwo({ onPrev }: SignUpStepProps) {
+ const methods = useForm({
+ resolver: zodResolver(schema),
+ mode: "onChange",
+ });
+
+ const { control } = useFormContext();
+
+ return (
+ <>
+
+
+
+
+
+
+
+ (
+
+ type="file"
+ keyname="profileImage"
+ id="profileImage"
+ style={{ display: "none" }}
+ accept=".png, .jpeg, .jpg"
+ {...field}
+ />
+ )}
+ />
+
+
+ 프로필 사진을 등록하지 않으시면 기본 프로필 이미지가 제공됩니다.
+
+