🔀정보기입 추가

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() {
       <Route path="/input" element={<InputPage />} />
       <Route path="/temp" element={<Temp />} />
       <Route path="/post/:id" element={<Post />} />
+      <Route path="/enterinformation" element={<EnterInformation />} />
     </Routes>
   );
 }

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 (
+    <S.Container>
+      <div>
+        <XIcon />
+        <S.Title>{title}</S.Title>
+        <S.SubTitle>{subtitle}</S.SubTitle>
+        <Input onChange={handleInputChange} />
+      </div>
+      <Button onClick={onNext}>다음</Button>
+    </S.Container>
+  );
+};
+
+export default EnterInformationContainer;

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;
+`;

src/index.tsx

@@ -4,14 +4,17 @@ 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,
 );
 root.render(
   <BrowserRouter>
     <ThemeProvider theme={theme}>
-      <App />
+      <RecoilRoot>
+        <App />
+      </RecoilRoot>
     </ThemeProvider>
   </BrowserRouter>,
 );

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 (
+    <S.Container>
+      <BigLogoIcon />
+      {modalPage === 0 && (
+        <EnterInformationContainer
+          title="학교를 알려주세요"
+          subtitle="현재 재학중인 학교를 입력해 주세요"
+          onChange={(value) => handleChange('school', value)}
+          onNext={handleNext}
+        />
+      )}
+      {modalPage === 1 && (
+        <EnterInformationContainer
+          title="학년을 알려주세요"
+          subtitle="현재 재학중인 학교의 학년을 입력해 주세요"
+          onChange={(value) => handleChange('grade', value)}
+          onNext={handleNext}
+        />
+      )}
+      {modalPage === 2 && (
+        <EnterInformationContainer
+          title="위치를 알려주세요"
+          subtitle="내가 서비스를 이용할 위치를 입력해 주세요"
+          onChange={(value) => handleChange('location', value)}
+          onNext={handleNext}
+        />
+      )}
+      {modalPage === 3 && (
+        <EnterInformationContainer
+          title="연락수단을 알려주세요"
+          subtitle="내가 서비스를 이용할 연락수단을 입력해 주세요"
+          onChange={(value) => handleChange('contact', value)}
+          onNext={handleNext}
+        />
+      )}
+    </S.Container>
+  );
+};
+
+export default EnterInformation;

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;
+  }
+`;

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;

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: '',
+  },
+});

src/svg/BigLogoIcon.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+
+const BigLogoIcon = () => {
+  return (
+    <svg
+      width="102"
+      height="96"
+      viewBox="0 0 102 96"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M100.221 83.4855L100.219 83.4888C99.3644 85.6378 98.1455 87.4606 96.5602 88.9487C95.0196 90.4359 93.1658 91.5583 91.0073 92.319C88.8488 93.0797 86.4539 93.4561 83.8282 93.4561C81.1995 93.4561 78.8015 93.057 76.6405 92.2507C74.4854 91.4465 72.6142 90.3039 71.0333 88.8208L71.028 88.8157L71.0228 88.8105C69.4852 87.2806 68.2908 85.4391 67.4372 83.2931C66.5801 81.1387 66.1565 78.7267 66.1565 76.0648C66.1565 73.4452 66.5805 71.0553 67.4372 68.9018C68.2912 66.7548 69.487 64.9327 71.0279 63.4445L100.221 83.4855ZM100.221 83.4855C101.077 81.2878 101.5 78.8117 101.5 76.0648M100.221 83.4855L101.5 76.0648M101.5 76.0648C101.5 73.4875 101.076 71.1195 100.219 68.967C99.3648 66.8192 98.1469 64.9972 96.5629 63.5096C95.0255 61.9813 93.1753 60.8159 91.0201 60.011C88.8578 59.16 86.4582 58.7388 83.8282 58.7388C81.1995 58.7388 78.8015 59.1379 76.6405 59.9442C74.4823 60.7496 72.6094 61.9158 71.0281 63.4443L101.5 76.0648Z"
+        fill="#36C05C"
+        stroke="#333333"
+      />
+      <path
+        d="M38.1076 15.7651L38.1088 15.7618C38.622 14.4048 38.8736 12.8809 38.8736 11.1976C38.8736 9.61549 38.6207 8.15692 38.1076 6.82781C37.5962 5.50346 36.8655 4.37513 35.912 3.45194C34.9871 2.50519 33.8745 1.78366 32.5816 1.28595C31.2816 0.759087 29.8429 0.5 28.2726 0.5C26.7038 0.5 25.2667 0.745451 23.968 1.24476C22.6721 1.74299 21.5457 2.46536 20.5948 3.41237C19.6664 4.33616 18.9488 5.46459 18.4377 6.78828C17.9242 8.11833 17.6716 9.59028 17.6716 11.1976C17.6716 12.8302 17.9238 14.3155 18.4377 15.6465C18.9484 16.9691 19.6646 18.1084 20.5896 19.0566L20.5947 19.0619L20.6 19.067C21.5505 19.9858 22.6752 20.693 23.968 21.19C25.2667 21.6893 26.7038 21.9348 28.2726 21.9348C29.8384 21.9348 31.2723 21.7034 32.5685 21.2328C33.8649 20.7621 34.9811 20.0664 35.9093 19.1435C36.8641 18.2199 37.5958 17.0907 38.1076 15.7651Z"
+        fill="white"
+        stroke="#333333"
+      />
+      <path
+        d="M88.9802 51.3822L88.979 51.3854C88.7114 52.0786 88.3267 52.6742 87.8217 53.1631C87.3305 53.6512 86.7411 54.0175 86.0616 54.2642C85.3823 54.5109 84.6359 54.6302 83.8283 54.6302C83.0177 54.6302 82.2682 54.5033 81.5863 54.2412C80.9104 53.9813 80.319 53.6101 79.8183 53.1261L79.813 53.121L79.8078 53.1157C79.3198 52.6154 78.9441 52.0163 78.6776 51.3261L79.1373 51.1487L78.6776 51.3261C78.4079 50.6276 78.2778 49.8537 78.2778 49.0116C78.2778 48.1817 78.4083 47.4146 78.6776 46.7169C78.9445 46.0257 79.3216 45.431 79.8129 44.942L88.9802 51.3822ZM88.9802 51.3822C89.2493 50.6708 89.3788 49.8781 89.3788 49.0116M88.9802 51.3822L89.3788 49.0116M89.3788 49.0116C89.3788 48.1937 89.248 47.4334 88.979 46.7367C88.7119 46.0447 88.3281 45.45 87.8244 44.9616C87.3364 44.4628 86.7508 44.0839 86.0747 43.8233C85.3915 43.5468 84.6404 43.4128 83.8283 43.4128C83.0177 43.4128 82.2682 43.5397 81.5863 43.8019C80.9072 44.0629 80.3142 44.4428 79.8131 44.9418L89.3788 49.0116Z"
+        fill="white"
+        stroke="#333333"
+      />
+      <path
+        d="M79.6796 81.059L79.6843 81.0661L79.6892 81.0731C80.7021 82.5099 82.1178 83.2389 83.8857 83.2389C85.6603 83.2389 87.0452 82.4825 87.9798 80.9937C88.9323 79.5372 89.3788 77.5355 89.3788 75.0453C89.3788 72.5561 88.9327 70.5701 87.9751 69.1509C87.0027 67.6684 85.6026 66.9128 83.8283 66.9128C82.0541 66.9128 80.654 67.6684 79.6816 69.1509C78.724 70.5701 78.2778 72.5561 78.2778 75.0453C78.2778 77.5766 78.7245 79.601 79.6796 81.059Z"
+        fill="white"
+        stroke="#333333"
+      />
+      <path
+        d="M47.7711 87.1763L47.7715 87.1759C50.7728 84.325 53.0702 80.8509 54.6656 76.7618L54.6666 76.7592C56.2637 72.5965 57.0555 67.7579 57.0555 62.2533C57.0555 56.6119 56.2309 51.7023 54.566 47.5364C52.9047 43.3796 50.5402 39.9369 47.4682 37.2201C44.4648 34.4381 40.833 32.3916 36.5827 31.0759C32.4041 29.7622 27.7395 29.1089 22.594 29.1089C20.0868 29.1089 17.2563 29.2807 14.1041 29.6229C10.9275 29.8993 7.91235 30.5209 5.05993 31.4891L5.05989 31.489L5.04925 31.4929C3.68483 31.9907 2.56766 32.6759 1.71886 33.5608C0.880568 34.4348 0.5 35.6693 0.5 37.1816V84.9714C0.5 86.8335 0.97384 88.4495 1.94437 89.7925C2.91196 91.1315 4.34674 92.1625 6.20977 92.9048C7.55067 93.4637 8.98837 93.8817 10.5215 94.1602C12.1011 94.5031 13.649 94.7777 15.165 94.9839L15.1678 94.9842C16.7506 95.1905 18.2693 95.3283 19.7239 95.3972C21.1692 95.4657 22.4534 95.5001 23.5756 95.5001C28.5297 95.5001 33.0668 94.8114 37.1821 93.4273C41.3025 92.0416 44.8351 89.959 47.7711 87.1763Z"
+        fill="#36C05C"
+        stroke="#333333"
+      />
+      <path
+        d="M20.6796 81.0912L20.6958 81.0933L20.712 81.0944C21.7378 81.1618 22.7018 81.1956 23.6035 81.1956C25.8143 81.1956 27.8433 80.854 29.6847 80.1631C31.5978 79.4692 33.2215 78.3909 34.5475 76.9289C35.9402 75.4634 36.9891 73.5927 37.7057 71.3346C38.4888 69.0005 38.8739 66.2408 38.8739 63.0657C38.8739 56.9933 37.5276 52.3454 34.7473 49.2127C31.9748 46.0219 28.2745 44.4348 23.6988 44.4348C22.797 44.4348 21.8641 44.4687 20.9004 44.5362L20.9004 44.5362L20.8979 44.5364C19.0263 44.6769 17.6719 46.2814 17.6719 48.1157V77.5905C17.6719 79.3377 18.9178 80.8597 20.6796 81.0912Z"
+        fill="white"
+        stroke="#333333"
+      />
+      <path
+        d="M55.5455 65.8804C48.2867 60.3676 39.8278 67.2106 38.1618 68.6792C37.968 68.85 37.7144 68.914 37.5516 68.7134C37.2121 68.2949 36.6784 67.1224 36.3536 63.8369C35.9124 59.3747 36.6273 58.4203 36.8152 58.2502C36.8422 58.2258 36.8711 58.2092 36.9018 58.1896C37.7126 57.6733 49.7428 50.1835 57.0606 55.663C62.2479 59.5472 65.1415 63.8369 70.192 68.9456C72.9973 71.7833 77.0553 71.8465 79.067 71.6685C79.7022 71.6123 80.293 72.1018 80.293 72.7395V75.5869C80.293 77.8433 80.0919 79.0828 79.9435 79.6903C79.8662 80.0068 79.6007 80.2135 79.277 80.2499C77.35 80.4665 70.4645 80.9713 67.1617 77.6304C61.6061 72.0108 60.4723 69.6221 55.5455 65.8804Z"
+        fill="white"
+        stroke="#333333"
+      />
+    </svg>
+  );
+};
+
+export default BigLogoIcon;

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<HTMLInputElement>,
-  ) => void;
+  onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   onClick?: React.MouseEventHandler<HTMLInputElement>;
   onBlur?: React.FocusEventHandler<HTMLInputElement>;
   defaultValue?: string;