Merge pull request #10 from TeamPu/feat/join-page

[FEAT] : Realization of Join Page

src/components/HomeCalendar.css

@@ -38,19 +38,19 @@
 
 .react-calendar__navigation button:enabled:hover,
 .react-calendar__navigation button:enabled:focus {
-  background-color: #e6e6e6;
+  background-color: #48d982;
 }
 
 .react-calendar__month-view__weekdays {
   text-align: center;
   text-transform: uppercase;
   font: inherit;
-  font-size: 0.75em;
-  font-weight: 600;
+  font-size: 0.75rem;
+  font-weight: 500;
 }
 
 .react-calendar__month-view__weekdays__weekday {
-  margin-top: 2em;
+  margin: 1em 0;
   padding: 0.5em;
   font-size: 1.6em;
 }
@@ -121,12 +121,11 @@ abbr {
 
 .react-calendar__tile:enabled:hover,
 .react-calendar__tile:enabled:focus {
-  background: #30a55f;
-  color: white;
+  background: #b4edcb;
 }
 
 .react-calendar__tile--now {
-  background: #30a55f;
+  background: #999;
   color: white;
 }
 
@@ -136,7 +135,7 @@ abbr {
 }
 
 .react-calendar__tile--hasActive {
-  background: #30a55f;
+  background: #999;
 }
 
 .react-calendar__tile--hasActive:enabled:hover,

src/components/JoinForm.jsx

@@ -0,0 +1,46 @@
+import FormInput from "./FormInput";
+// import { Link } from "react-router-dom";
+
+export default function JoinForm() {
+  return (
+    <div className="flex flex-col gap-y-2.5">
+      <FormInput
+        key="name"
+        noLabel={true}
+        type="text"
+        id="name"
+        name="name"
+        placeholder="이름"
+      />
+      <FormInput
+        key="studentId"
+        noLabel={true}
+        type="text"
+        id="studentId"
+        name="studentId"
+        placeholder="학번"
+      />
+      <FormInput
+        key="phone"
+        noLabel={true}
+        type="tel"
+        id="phone"
+        name="phone"
+        placeholder="전화번호"
+      />
+      <FormInput
+        key="email"
+        noLabel={true}
+        type="email"
+        id="email"
+        name="email"
+        placeholder="이메일"
+      />
+      <div className="flex w-full justify-center">
+        <button className="grid w-[40%] place-items-center rounded-[8px] bg-primary-dark py-2 text-white transition duration-200 ease-in-out hover:bg-white hover:text-primary">
+          가입하기
+        </button>
+      </div>
+    </div>
+  );
+}

src/components/LoginForm.jsx

@@ -1,3 +1,4 @@
+import { Link } from "react-router-dom";
 import FormInput from "./FormInput";
 
 export default function LoginForm() {
@@ -24,9 +25,11 @@ export default function LoginForm() {
         </div>
         <button className="button rounded-[8px] p-3">로그인</button>
       </div>
-      <div className="flex justify-center pt-2.5 text-secondary-dark underline">
-        <span className="mr-2.5">비밀번호를 잃어버렸어요!</span>
-        <span>회원가입</span>
+      <div className="flex justify-start pt-2.5 text-secondary-dark underline">
+        <Link to="/join" className="mr-2.5">
+          회원가입
+        </Link>
+        <span>비밀번호를 잃어버렸어요!</span>
       </div>
     </>
   );

src/components/index.js

@@ -5,3 +5,4 @@ export { default as ReservationView } from "./ReservationView";
 export { default as MyPageForm } from "./MyPageForm";
 export { default as ReservationForm } from "./ReservationForm";
 export { default as LoginForm } from "./LoginForm";
+export { default as JoinForm } from "./JoinForm";

src/containers/SideNavBar.jsx

@@ -24,7 +24,9 @@ export default function SideNavBar() {
           })}
         </div>
       </div>
-      <Link to="/login">로그인</Link>
+      <Link to="/login" className="hover:text-primary">
+        로그인
+      </Link>
       {/* 차후 로그인 되어있으면 로그아웃, 로그인 되어있지 않으면 로그인으로 conditional rendering */}
     </div>
   );

src/main.jsx

@@ -9,6 +9,7 @@ import {
   FormPage,
   LoginPage,
   FormSubmitPage,
+  JoinPage,
 } from "./pages";
 import AppFrame from "./layouts/AppFrame.jsx";
 
@@ -25,6 +26,7 @@ const router = createBrowserRouter([
   },
   { path: "/form", element: <FormPage /> },
   { path: "/login", element: <LoginPage /> },
+  { path: "/join", element: <JoinPage /> },
   { path: "/complete", element: <FormSubmitPage /> },
 ]);
 

src/pages/JoinPage.jsx

@@ -0,0 +1,35 @@
+import GreetingImg from "../assets/greeting.png";
+import { Link } from "react-router-dom";
+import { JoinForm } from "../components";
+
+export default function JoinPage() {
+  return (
+    <div className="flex h-screen w-screen">
+      <div className="hidden flex-1 place-items-center md:grid">
+        <Link to="/" className="flex flex-col items-center gap-y-2.5">
+          <div className="grid h-fit w-full place-items-center">
+            <img src={GreetingImg} alt="Greeting" className="w-48" />
+          </div>
+          <div className="epilogue h-fit w-full text-center text-6xl font-extrabold">
+            <span>Welcome to </span>
+            <br />
+            <span className="text-primary">Team</span>Pu!
+          </div>
+        </Link>
+      </div>
+      <div className="grid flex-1 place-items-center bg-primary">
+        <div className="w-[80%] md:w-[50%]">
+          <div className="mb-2.5 h-fit w-full text-center text-white">
+            <p className="epilogue w-full text-6xl font-extrabold">Join</p>
+            <p className="text-center text-base">
+              팀프로젝트실 예약에 필요한 정보입니다.
+              <br />
+              정확하게 입력해 주세요.
+            </p>
+          </div>
+          <JoinForm />
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/LoginPage.jsx

@@ -19,7 +19,7 @@ export default function LoginPage() {
             <span className="text-white">Team</span>Pu
             <br />
           </p>
-          <p className="font-xl text-center text-white">
+          <p className="text-center text-base text-white">
             팀프로젝트실 야간 잔류 신청 시스템
           </p>
           <img src={ReservationImg} alt="Reservation" className="w-48" />

src/pages/index.js

@@ -5,3 +5,4 @@ export { default as RulesPage } from "./RulesPage";
 export { default as FormPage } from "./FormPage";
 export { default as FormSubmitPage } from "./FormSubmitPage";
 export { default as LoginPage } from "./LoginPage";
+export { default as JoinPage } from "./JoinPage";

tailwind.config.js

@@ -12,7 +12,7 @@ export default {
     extend: {
       colors: {
         black: "#444444",
-        primary: { DEFAULT: "#30A55F", dark: "#26874d" },
+        primary: { light: "#48d982", DEFAULT: "#30A55F", dark: "#26874d" },
         secondary: {
           light: "#f4f4f4",
           DEFAULT: "#CCCCCC",