Merge pull request #4 from taejun0/main

feature: api연결 및 로그인 회원가입 페이지 구현

src/components/Letters/styled.js

@@ -63,6 +63,14 @@ export const Section = styled.div`
   gap: 20px;
 `;
 
+export const Rowing = styled.div`
+  display: flex;
+  flex-direction: row;
+  width: 60%;
+  gap: 4px;
+  justify-content: space-around;
+`;
+
 export const MainText = styled.div`
   color: ${({theme}) => theme.colors.black};
 
@@ -84,14 +92,6 @@ export const Buttons = styled.div`
   cursor: pointer;
 `;
 
-export const Rowing = styled.div`
-  display: flex;
-  flex-direction: row;
-  width: 60%;
-  gap: 4px;
-  justify-content: space-around;
-`;
-
 export const CustomDatePicker = styled(DatePicker)`
   color: ${({theme}) => theme.colors.black};
 

src/constant/routeConstants.js

@@ -1,6 +1,8 @@
 // src/constants/routeConstants.js
 export const ROUTE_PATHS = {
-  LOGIN: "/",
+  INTRO: "/",
+  LOGIN: "/login",
+  SIGNUP: "/signup",
   HOME: "/homepage",
   ABOUT: "/about",
   LETTER: "/letter",

src/hooks/useLetterPost.js

@@ -0,0 +1,53 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { letterService } from "@services/letterService";
+
+export const useLetterPost = () => {
+  const [letterContent, setLetterContent] = useState("");
+  const [receiverInfo, setReceiverInfo] = useState({
+    year: "",
+    monthDay: "",
+    time: "",
+    phoneNumber: "",
+  });
+
+  const navigate = useNavigate();
+
+  const handleSubmit = async () => {
+    if (
+      !letterContent ||
+      !receiverInfo.year ||
+      !receiverInfo.monthDay ||
+      !receiverInfo.time ||
+      !receiverInfo.phoneNumber
+    ) {
+      toast.error("모든 필수 정보를 입력해 주세요!");
+      return;
+    }
+
+    const sendAt = `${receiverInfo.year}-${receiverInfo.monthDay}T${receiverInfo.time}`;
+    const letterData = {
+      letter: letterContent,
+      receivePhone: receiverInfo.phoneNumber,
+      sendAt: sendAt,
+    };
+
+    try {
+      const response = await letterService(letterData);
+      toast.success("편지가 성공적으로 제출되었습니다!");
+      navigate("/inventory");
+    } catch (error) {
+      toast.error("편지 제출에 실패했습니다. 다시 시도해 주세요.");
+      console.error("Letter submission error:", error);
+    }
+  };
+
+  return {
+    letterContent,
+    setLetterContent,
+    receiverInfo,
+    setReceiverInfo,
+    handleSubmit,
+  };
+};

src/hooks/useLogin.js

@@ -0,0 +1,37 @@
+import { useState } from "react";
+import { loginService } from "@services/loginService";
+import { useNavigate } from "react-router-dom";
+
+export const useLogin = () => {
+  const [loginData, setLoginData] = useState({
+    phone: "",
+    nickname: "",
+    password: "",
+  });
+
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setLoginData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    try {
+      const response = await loginService(loginData);
+      console.log("Login successful:", response);
+      navigate("/homepage");
+    } catch (error) {
+      console.error("Login error:", error);
+    }
+  };
+
+  return {
+    loginData,
+    handleChange,
+    handleSubmit,
+  };
+};

src/hooks/useSignup.js

@@ -0,0 +1,46 @@
+import { useState } from "react";
+import { signupService } from "@services/signupService";
+import { useNavigate } from "react-router-dom";
+
+export const useSignup = () => {
+  const [signupData, setSignupData] = useState({
+    nickname: "",
+    password: "",
+    confirmPassword: "",
+    phone: "",
+  });
+
+  const navigate = useNavigate();
+
+  const handleChange = (e) => {
+    const { name, value } = e.target;
+    setSignupData((prevData) => ({
+      ...prevData,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = async () => {
+    if (signupData.password !== signupData.confirmPassword) {
+      alert("비밀번호가 일치하지 않습니다.");
+      return;
+    }
+
+    const { nickname, password, phone } = signupData;
+    const signupPayload = { nickname, password, phone };
+
+    try {
+      const response = await signupService(signupPayload);
+      console.log("회원 가입 성공:", response);
+      navigate("/homepage");
+    } catch (error) {
+      console.error("회원 가입 에러:", error);
+    }
+  };
+
+  return {
+    signupData,
+    handleChange,
+    handleSubmit,
+  };
+};

src/layouts/DefaultLayout.jsx

@@ -5,7 +5,7 @@ import { Footer } from "@components/layout/footer/Footer";
 const DefaultLayout = () => {
   const location = useLocation();
 
-  const isRoot = location.pathname === "/";
+  const isRoot = location.pathname === "/" || location.pathname === "/login" || location.pathname === "/signup";
 
   return (
     <>

src/pages/LetterMakePage/LetterMakePage.jsx

@@ -1,48 +1,30 @@
 import React, { useState } from "react";
 import * as S from "./styled";
-import { useNavigate } from "react-router-dom";
 import { LetterOne } from "@components/Letters/LetterOne";
 import { LetterTwo } from "@components/Letters/LetterTwo";
 import ToastOne from "@components/common/Toasts/ToastOne";
-import { toast } from "react-toastify";
+import { useLetterPost } from "@hooks/useLetterPost";
 
 export const LetterMakePage = () => {
-  const [currentStep, setCurrentStep] = useState(0);
-  const [letterContent, setLetterContent] = useState(""); // 편지 내용 상태
-  const [receiverInfo, setReceiverInfo] = useState({
-    year: "",
-    monthDay: "",
-    time: "",
-    phoneNumber: "",
-  });
+  const [currentStep, setCurrentStep] = useState(1);
+  const {
+    letterContent,
+    setLetterContent,
+    receiverInfo,
+    setReceiverInfo,
+    handleSubmit,
+  } = useLetterPost();
 
   const [selectedYear, setSelectedYear] = useState(null);
   const [selectedDate, setSelectedDate] = useState(null);
   const [selectedTime, setSelectedTime] = useState(null);
 
-  const navigate = useNavigate();
-
   const handleNextStep = () => setCurrentStep((prev) => prev + 1);
   const handlePrevStep = () => setCurrentStep((prev) => prev - 1);
 
-  const handleSubmit = () => {
-    if (!letterContent || !receiverInfo.year || !receiverInfo.monthDay || !receiverInfo.time || !receiverInfo.phoneNumber) {
-      toast.error("모든 필수 정보를 입력해 주세요!"); // 토스트 알림 표시
-      return;
-    }
-
-    const combinedDateTime = `${receiverInfo.year}-${receiverInfo.monthDay}T${receiverInfo.time}`;
-    console.log("Submitting letter data:", letterContent);
-    console.log("Receiver Info:", {
-      ...receiverInfo,
-      dateTime: combinedDateTime,
-    });
-    navigate("/inventory");
-  };
-
   return (
     <S.Wrapper>
-      <S.MakeLetter onClick={() => setCurrentStep(1)}>편지 작성하기</S.MakeLetter>
+      <S.MakeLetter >편지 작성하기</S.MakeLetter>
 
       {currentStep === 1 && (
         <LetterOne

src/pages/LetterMakePage/styled.js

@@ -7,7 +7,7 @@ export const Wrapper = styled.div`
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  gap: 20px;
+  gap: 50px;
 `;
 
 export const MakeLetter = styled.div`

src/pages/LoginPage/LoginPage.jsx

@@ -1,12 +1,47 @@
+// LoginPage.jsx
+import React from "react";
 import * as S from "./styled";
+import { useNavigate } from "react-router-dom";
+import { useLogin } from "@hooks/useLogin";
 
 export const LoginPage = () => {
+  const { loginData, handleChange, handleSubmit } = useLogin();
+  const navigate = useNavigate();
+
   return (
     <S.Wrapper>
-      <S.MainText>내일의 편지</S.MainText>
-      <S.Login>로그인</S.Login>
+      <S.Section>
+        <S.MainText>본인의 별명을 입력해 주세요.</S.MainText>
+        <S.Rowing>
+          <input
+            type="text"
+            name="nickname"
+            value={loginData.nickname}
+            onChange={handleChange}
+            placeholder="닉네임"
+            style={{ background: "inherit", outline: "none" }}
+          />
+        </S.Rowing>
+      </S.Section>
+      <S.Section>
+        <S.MainText>본인의 비밀번호를 입력해 주세요.</S.MainText>
+        <S.Rowing>
+          <input
+            type="password"
+            name="password"
+            value={loginData.password}
+            onChange={handleChange}
+            placeholder="비밀번호"
+            style={{ background: "inherit", outline: "none" }}
+          />
+        </S.Rowing>
+      </S.Section>
+      <S.Buttons>
+        <S.Button onClick={() => navigate(-1)}>돌아가기</S.Button>
+        <S.Button onClick={handleSubmit}>완료</S.Button>
+      </S.Buttons>
     </S.Wrapper>
-  )
-}
+  );
+};
 
-export default LoginPage;
+export default LoginPage;

src/pages/LoginPage/styled.js

@@ -10,22 +10,52 @@ export const Wrapper = styled.div`
   gap: 30px;
 `;
 
+export const Section = styled.div`
+  display: flex;  
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;  
+  gap: 20px;
+`;
+
 export const MainText = styled.div`
-  display: flex;
+  color: ${({theme}) => theme.colors.black};
 
   font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
-  color: ${({theme}) => theme.colors.black};
-  font-size: 40px;
-  font-weight: 400;
+  font-size: 18px;
   font-style: normal;
+  font-weight: 300;
+  line-height: 1.4;
 `;
 
-export const Login = styled.div`
+export const Rowing = styled.div`
   display: flex;
+  flex-direction: row;
+  width: 60%;
+  gap: 4px;
+  justify-content: space-around;
+`;
+
+
+export const Buttons = styled.div`
+  display: flex;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  padding: 15px;
+  justify-content: space-between;
+
+  cursor: pointer;
+`;
+
+export const Button = styled.button`
+  cursor: pointer;
 
-  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
   color: ${({theme}) => theme.colors.black};
-  font-size: 30px;
-  font-weight: 400;
-  font-style: normal
-`;
+
+  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+`;

src/pages/homepage/HomePage.jsx

@@ -3,7 +3,7 @@ import * as S from "./styled";
 export const HomePage = () => {
   return (
     <S.Wrapper>
-      타임캡슐 -- 설명하기
+
     </S.Wrapper>
   )
 }

src/pages/introPage/IntroPage.jsx

@@ -0,0 +1,15 @@
+import * as S from "./styled";
+import { useNavigate } from "react-router-dom";
+
+export const IntroPage = () => {
+  const navigate = useNavigate();
+  return (
+    <S.Wrapper>
+      <S.MainText>내일의 편지</S.MainText>
+      <S.Login onClick={() => navigate("/login")}>로그인</S.Login>
+      <S.Login onClick={() => navigate("/signup")}>회원가입</S.Login>
+    </S.Wrapper>
+  )
+}
+
+export default IntroPage;