Merge pull request #3 from taejun0/feature/#2

feature: 로그인 페이지 & 편지 작성 페이지

README.md

@@ -1 +1,3 @@
-## 모여톤 4팀 프론트 레포지토리
+## 모여톤 4팀 프론트 레포지토리
+
+..

package.json

@@ -12,8 +12,10 @@
   "dependencies": {
     "axios": "^1.7.7",
     "react": "^18.3.1",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",
+    "react-toastify": "^10.0.6",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {

src/components/Letters/LetterOne.jsx

@@ -0,0 +1,20 @@
+import React from "react";
+import * as S from "./styled";
+
+export const LetterOne = ({ onNext, letterContent, setLetterContent }) => {
+  const handleChange = (e) => setLetterContent(e.target.value);
+
+  return (
+    <S.Wrapper>
+      <S.Textinput 
+        placeholder="편지 내용을 입력하세요" 
+        value={letterContent} 
+        onChange={handleChange} 
+      />
+      <S.Buttons>
+        <div></div>
+        <S.Button onClick={onNext}>다음</S.Button>
+      </S.Buttons>
+    </S.Wrapper>
+  );
+};

src/components/Letters/LetterTwo.jsx

@@ -0,0 +1,116 @@
+import React, { useState } from "react";
+import * as S from "./styled";
+
+export const LetterTwo = ({ 
+  onPrev,
+  onSubmit,
+  receiverInfo,
+  setReceiverInfo,
+  selectedYear,
+  setSelectedYear,
+  selectedDate,
+  setSelectedDate,
+  selectedTime,
+  setSelectedTime 
+}) => {
+  const handleYearChange = (date) => {
+    setSelectedYear(date);
+    setReceiverInfo((prevInfo) => ({
+      ...prevInfo,
+      year: date.getFullYear(),
+    }));
+  };
+
+  const handleDateChange = (date) => {
+    setSelectedDate(date);
+    setReceiverInfo((prevInfo) => ({
+      ...prevInfo,
+      monthDay: `${date.getMonth() + 1}-${date.getDate()}`,
+    }));
+  };
+
+  const handleTimeChange = (date) => {
+    setSelectedTime(date);
+    setReceiverInfo((prevInfo) => ({
+      ...prevInfo,
+      time: `${date.getHours()}:${date.getMinutes().toString().padStart(2, "0")}`,
+    }));
+  };
+
+  const handleInputChange = (e) => {
+    const { name, value } = e.target;
+    setReceiverInfo((prevInfo) => ({
+      ...prevInfo,
+      [name]: value,
+    }));
+  };
+
+  return (
+    <S.Wrapper2>
+      <S.Section>
+        <S.MainText>수신인 전화번호를 입력해 주세요.</S.MainText>
+        <S.Rowing>
+          <S.MainText style={{width:"40px"}}>:</S.MainText>
+          <input
+            type="text"
+            name="phoneNumber"
+            placeholder="전화번호"
+            value={receiverInfo.phoneNumber}
+            onChange={handleInputChange}
+            style={{background:"inherit", outline: "none", width: "100px", textAlign: "center"}}
+          />
+          <div style={{width:"40px"}}></div>
+        </S.Rowing>
+      </S.Section>
+      <S.Section>
+        <S.MainText>몇 년도에 보낼까요?</S.MainText>
+        <S.Rowing>
+          <S.MainText style={{width:"80px"}}>:</S.MainText>
+          <S.CustomDatePicker
+            selected={selectedYear}
+            onChange={handleYearChange}
+            showYearPicker
+            dateFormat="yyyy"
+            placeholderText="연도 선택"
+          />
+          <S.MainText style={{width:"40px"}}>년도</S.MainText>
+        </S.Rowing>
+      </S.Section>
+      <S.Section>
+        <S.MainText>몇 월 며칠에 보낼까요?</S.MainText>
+        <S.Rowing>
+          <S.MainText style={{width:"80px"}}>:</S.MainText>
+          <S.CustomDatePicker
+            selected={selectedDate}
+            onChange={handleDateChange}
+            dateFormat="MM/dd"
+            placeholderText="월/일 선택"
+          />
+          <div style={{width:"40px"}}></div>
+        </S.Rowing>
+      </S.Section>
+      <S.Section>
+        <S.MainText>몇 시 몇 분에 보낼까요?</S.MainText>
+        <S.Rowing>
+          <S.MainText style={{width:"80px"}}>:</S.MainText>
+          <S.CustomDatePicker
+            selected={selectedTime}
+            onChange={handleTimeChange}
+            showTimeSelect
+            showTimeSelectOnly
+            timeIntervals={15}
+            timeFormat="HH:mm"
+            dateFormat="HH:mm"
+            placeholderText="시간 선택"
+          />  
+          <div style={{width:"40px"}}></div>
+        </S.Rowing>
+      </S.Section>
+
+      <S.Buttons>
+        <S.Button onClick={onPrev}>이전</S.Button>
+        <S.Button onClick={onSubmit}>완료</S.Button>
+      </S.Buttons>
+    </S.Wrapper2>
+  );
+};

src/components/Letters/styled.js

@@ -0,0 +1,109 @@
+import styled from "styled-components";
+import backgroundImage from "/images/BackgroundImage.svg";
+import DatePicker from "react-datepicker";
+import "react-datepicker/dist/react-datepicker.css";
+
+
+
+export const Wrapper = styled.div`
+  position: relative;
+  width: 350px;
+  height: 540px;
+  background: url(${backgroundImage}) no-repeat center center fixed;
+	background-size: cover;
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
+`;
+
+export const Wrapper2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-evenly;
+  align-items: center;
+  position: relative;
+  width: 350px;
+  height: 540px;
+  background: url(${backgroundImage}) no-repeat center center fixed;
+	background-size: cover;
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
+`;
+
+export const Textinput = styled.textarea`
+  width: 100%;
+  height: 100%;
+  padding: 30px;
+  outline: none;
+  resize: none;
+
+  color: ${({theme}) => theme.colors.black};
+
+  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 1.4;
+`;
+
+export const Button = styled.button`
+  cursor: pointer;
+
+  color: ${({theme}) => theme.colors.black};
+
+  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+`;
+
+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`
+  color: ${({theme}) => theme.colors.black};
+
+  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: 1.4;
+`;
+
+export const Buttons = styled.div`
+  display: flex;
+  position: absolute;
+  width: 100%;
+  bottom: 0;
+  padding: 15px;
+  justify-content: space-between;
+
+  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};
+
+  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 700;
+
+  background: inherit;
+  outline: none;
+  display: flex;
+  width: 80px;
+
+  transform: translateY(5px);
+`;

src/components/common/Toasts/ToastOne.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { ToastContainer } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+
+const ToastOne = () => {
+  return (
+    <ToastContainer
+      position="top-center" // 토스트 위치
+      autoClose={2000} // 자동 닫힘 시간 (밀리초)
+      hideProgressBar={true} // 진행 바 숨기기 여부
+      newestOnTop={false} // 새로운 토스트를 위에 표시할지 여부
+      rtl={false} // 오른쪽에서 왼쪽으로 텍스트 표시 여부
+    />
+  );
+};
+
+export default ToastOne;

src/components/layout/footer/Footer.jsx

@@ -1,9 +1,15 @@
+import React from "react";
 import * as S from "./styled";
+import { useNavigate } from "react-router-dom";
 
 export const Footer = () => {
+  const navigation = useNavigate();
+
   return (
-    <>
-
-    </>
-  )
-}
+    <S.Wrapper>
+      <S.Text onClick={() => navigation("/homepage")}>홈</S.Text>
+      <S.Text onClick={() => navigation("/letter")}>편지 작성하기</S.Text>
+      <S.Text onClick={() => navigation("/inventory")}>편지 보관함</S.Text>
+    </S.Wrapper>
+  );
+};

src/components/layout/footer/styled.js

@@ -1 +1,21 @@
-import styled from "styled-components";
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  width: 428px;
+  justify-content: space-evenly;
+  position: absolute;
+  bottom: 50px;
+`;
+
+export const Text = styled.div`
+  display: flex;
+
+  cursor: pointer;
+
+  font-family: ${({theme}) => theme.fonts.GowunDodum["font-family"]};
+  color: ${({theme}) => theme.colors.black};
+  font-size: 20px;
+  font-weight: 400;
+  font-style: normal;
+`;

src/constant/routeConstants.js

@@ -1,7 +1,10 @@
 // src/constants/routeConstants.js
 export const ROUTE_PATHS = {
-  HOME: "/",
+  LOGIN: "/",
+  HOME: "/homepage",
   ABOUT: "/about",
+  LETTER: "/letter",
+  INVENTORY: "/inventory",
   CONTACT: "/contact",
   NOT_FOUND: "*",
 };

src/layouts/DefaultLayout.jsx

@@ -1,19 +1,24 @@
-import { Outlet } from "react-router-dom";
+import { Outlet, useLocation } from "react-router-dom";
 import styled from "styled-components";
+import { Footer } from "@components/layout/footer/Footer";
 
 const DefaultLayout = () => {
+  const location = useLocation();
+
+  const isRoot = location.pathname === "/";
+
   return (
     <>
       <Wrapper>
         <Outlet />
+        {!isRoot && <Footer />}
       </Wrapper>
     </>
   );
 };
 
 const Wrapper = styled.section`
   flex-grow: 1;
-  background-color: ${({ theme }) => theme.colors.white};
   min-height: 100vh;
 `;
 

src/layouts/NotFoundLayout.jsx

@@ -15,7 +15,6 @@ const Wrapper = styled.section`
   align-items: center;
   justify-content: center;
   flex-grow: 1;
-  background-color: ${({ theme }) => theme.colors.white};
   min-height: 100vh;
 `;
 

src/pages/LetterInventoryPage/LetterInventoryPage.jsx

@@ -0,0 +1,14 @@
+import * as S from "./styled";
+
+export const LetterInventoryPage = () => {
+  return (
+    <S.Wrapper>
+      <S.MiniHeader>
+        <S.HeaderOption>받은 편지</S.HeaderOption>
+        <S.HeaderOption>보낸 편지</S.HeaderOption>
+      </S.MiniHeader>
+    </S.Wrapper>
+  )
+}
+
+export default LetterInventoryPage;