diff --git a/src/App.tsx b/src/App.tsx
index e7907ab..b0efeaf 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -2,6 +2,7 @@ import React from 'react';
import { Route, Routes } from 'react-router-dom';
import { Home, Write, InputPage, Temp, NoPage } from 'pages';
import Post from 'pages/post';
+import EnterInformation from 'pages/EnterInformation';
function App() {
return (
@@ -12,6 +13,7 @@ function App() {
} />
} />
} />
+ } />
);
}
diff --git a/src/components/EnterInformationContainer/index.tsx b/src/components/EnterInformationContainer/index.tsx
new file mode 100644
index 0000000..aa70860
--- /dev/null
+++ b/src/components/EnterInformationContainer/index.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import * as S from './style';
+import XIcon from 'svg/XIcon';
+import { Button } from 'pages/write/style';
+import Input from 'components/Input';
+
+const EnterInformationContainer = ({
+ title,
+ subtitle,
+ onChange,
+ onNext,
+}: {
+ title: string;
+ subtitle: string;
+ onChange: (value: string) => void;
+ onNext: () => void;
+}) => {
+ const handleInputChange = (e: any) => {
+ onChange(e.target.value);
+ };
+
+ return (
+
+
+
+ {title}
+ {subtitle}
+
+
+
+
+ );
+};
+
+export default EnterInformationContainer;
diff --git a/src/components/EnterInformationContainer/style.ts b/src/components/EnterInformationContainer/style.ts
new file mode 100644
index 0000000..90c5288
--- /dev/null
+++ b/src/components/EnterInformationContainer/style.ts
@@ -0,0 +1,29 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ position: relative;
+ width: 600px;
+ height: 520px;
+ padding: 28px 24px;
+ box-sizing: border-box;
+ box-shadow: 0px 0px 20px 0px #00000014;
+ border-radius: 8px;
+
+ svg {
+ position: unset;
+ }
+`;
+export const Title = styled.h1`
+ margin-top: 28px;
+ font-size: 24px;
+ font-weight: 600;
+`;
+export const SubTitle = styled.h2`
+ margin-top: 8px;
+ font-size: 18px;
+ color: #a5a6a9;
+ font-weight: 400;
+`;
diff --git a/src/index.tsx b/src/index.tsx
index 3239c22..a100ac9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -4,6 +4,7 @@ import App from './App';
import { BrowserRouter } from 'react-router-dom';
import { ThemeProvider } from '@emotion/react';
import theme from 'style/theme';
+import { RecoilRoot } from 'recoil';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement,
@@ -11,7 +12,9 @@ const root = ReactDOM.createRoot(
root.render(
-
+
+
+
,
);
diff --git a/src/pages/EnterInformation/index.tsx b/src/pages/EnterInformation/index.tsx
new file mode 100644
index 0000000..aabb96a
--- /dev/null
+++ b/src/pages/EnterInformation/index.tsx
@@ -0,0 +1,68 @@
+import React, { useEffect } from 'react';
+import * as S from './style';
+import { useRecoilState } from 'recoil';
+import { EnterInformationModalPage, EnterInformationState } from 'recoil/atom';
+import BigLogoIcon from 'svg/BigLogoIcon';
+import EnterInformationContainer from 'components/EnterInformationContainer';
+
+const EnterInformation = () => {
+ const [modalPage, setModalPage] = useRecoilState(EnterInformationModalPage);
+ const [information, setInformation] = useRecoilState(EnterInformationState);
+
+ useEffect(() => {
+ if (modalPage === 4) {
+ console.log('입력된 정보:', information);
+ }
+ }, [modalPage, information]);
+
+ const handleChange = (key: string, value: string) => {
+ setInformation((prev) => ({
+ ...prev,
+ [key]: value,
+ }));
+ };
+
+ const handleNext = () => {
+ setModalPage(modalPage + 1);
+ };
+
+ return (
+
+
+ {modalPage === 0 && (
+ handleChange('school', value)}
+ onNext={handleNext}
+ />
+ )}
+ {modalPage === 1 && (
+ handleChange('grade', value)}
+ onNext={handleNext}
+ />
+ )}
+ {modalPage === 2 && (
+ handleChange('location', value)}
+ onNext={handleNext}
+ />
+ )}
+ {modalPage === 3 && (
+ handleChange('contact', value)}
+ onNext={handleNext}
+ />
+ )}
+
+ );
+};
+
+export default EnterInformation;
diff --git a/src/pages/EnterInformation/style.ts b/src/pages/EnterInformation/style.ts
new file mode 100644
index 0000000..1a56737
--- /dev/null
+++ b/src/pages/EnterInformation/style.ts
@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+
+export const Container = styled.div`
+ height: 100vh;
+ place-content: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ box-sizing: border-box;
+
+ svg {
+ position: relative;
+ bottom: 126px;
+ }
+`;
diff --git a/src/pages/write/style.ts b/src/pages/write/style.ts
index 323f178..16a4a4c 100644
--- a/src/pages/write/style.ts
+++ b/src/pages/write/style.ts
@@ -21,6 +21,7 @@ export const Button = styled.button`
background-color: #36c05c;
color: #ffffff;
margin-top: 40px;
+ cursor: pointer;
`;
export const TopBar = styled.div`
display: flex;
diff --git a/src/recoil/atom.ts b/src/recoil/atom.ts
new file mode 100644
index 0000000..ee233e9
--- /dev/null
+++ b/src/recoil/atom.ts
@@ -0,0 +1,16 @@
+import { atom } from 'recoil';
+
+export const EnterInformationModalPage = atom({
+ key: 'modalPage',
+ default: 0,
+});
+
+export const EnterInformationState = atom({
+ key: 'EnterInformationState',
+ default: {
+ school: '',
+ grade: '',
+ location: '',
+ contact: '',
+ },
+});
diff --git a/src/svg/BigLogoIcon.tsx b/src/svg/BigLogoIcon.tsx
new file mode 100644
index 0000000..9607206
--- /dev/null
+++ b/src/svg/BigLogoIcon.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+const BigLogoIcon = () => {
+ return (
+
+ );
+};
+
+export default BigLogoIcon;
diff --git a/src/types/input.ts b/src/types/input.ts
index 8d99a19..9ac9161 100644
--- a/src/types/input.ts
+++ b/src/types/input.ts
@@ -4,12 +4,10 @@ import { UseFormRegisterReturn } from 'react-hook-form';
export default interface InputType {
id?: string;
title?: string;
- placeholder: string;
+ placeholder?: string;
register?: UseFormRegisterReturn;
value?: string;
- onChange?: (
- e: React.ChangeEvent,
- ) => void;
+ onChange?: (e: React.ChangeEvent) => void;
onClick?: React.MouseEventHandler;
onBlur?: React.FocusEventHandler;
defaultValue?: string;