+
Placeholder 140x140
+
+ Placeholder
+
+ 140x140
+
+
+
+
+
{info.nickname}
+ {changeMenu(
+ {"nickname" in info ? info.nickname : "닉네임"}
+ {
+ changeMenu("changeinfo");
+ }}
+ >
+ 프로필 편집
+
+
+
+
{info.email}
+
{info.name}
+
{info.introduction}
+
+
{"email" in info ? info.email : "이메일"}
+
{"name" in info ? info.name : "이름"}
+
{"description" in info ? info.description : "소개"}
+
+
코로나 이후 쓰레기 배출량 증가
+
+ 코로나19로 인해 사람들은 외부 활동을 꺼리게 되었습니다. 버려지는 쓰레기의 양은 전년 대비 7.4% 증가 하였습니다.
+
+
+
왜 2030 소비자인가?
+
+ ZeroLand는 20대, 30대 소비자의 환경관심정도 가 다른 연령대의 소비자들보다 낮다는 점에 주목했습니다.웹 서비스에 대한 접근성이 높은 20대와 30대 를 서비스 타겟으로 선정해 제로웨이스트 샵에 대한 정보를 제공하고, 사용자들의 경험을 공유할 수 있는 공간을 제공하기로 했습니다.
+
+
+
+
+
+ {setSwiperSlides()}
+
+
+
+
+ );
+}
+
+export default Introduction;
\ No newline at end of file
diff --git a/frontend/src/components/Pages/Landing.jsx b/frontend/src/components/Pages/Landing.jsx
new file mode 100644
index 0000000..3605603
--- /dev/null
+++ b/frontend/src/components/Pages/Landing.jsx
@@ -0,0 +1,14 @@
+import React from "react"
+
+function Landing() {
+ return (
+
+
정보 이용 약관
+
1. 탈퇴 시 회원 정보는 보류 처리되어 14일간 보관됩니다. 이 기간 동안 동일한 메일 주소로 회원가입을 할 시 가입이 제한되며, 탈퇴 취소를 원하시는 경우 취소 처리도 가능합니다.
+
+ 2. 탈퇴하더라도 작성하신 리뷰는 계속 남아 있게 됩니다. 작성한 리뷰를 제외한 모든 회원 정보는 삭제되며 남아 있는 리뷰의 작성자명은 '(익명)'으로 처리됩니다.
+ {/*
약관에 동의하십니까?
*/}
+
+ 취소
+ 진행
+
+
로그인 중입니다. 잠시만 기다려주세요.
+ )
+}
+
+export default KakaoAuth;
\ No newline at end of file
diff --git a/frontend/src/components/User/LoginForm.jsx b/frontend/src/components/User/LoginForm.jsx
new file mode 100644
index 0000000..9e5205d
--- /dev/null
+++ b/frontend/src/components/User/LoginForm.jsx
@@ -0,0 +1,143 @@
+import React, { useContext, useState, useCallback, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import * as LoginStyled from "../StyledComponents/SignStyled";
+import { KaKaoButton } from "./OAuth";
+// import NaverLogin from "./NaverLogin";
+import * as Api from "../../utils/Api";
+import { DispatchContext } from "../../App";
+
+
+function LoginForm () {
+ const navigate = useNavigate();
+ const dispatch = useContext(DispatchContext);
+
+ const [email, setEmail] = useState("");
+ const [password, setPassword] = useState("");
+ const [login, setLogin] = useState(true);
+
+ const [emailMsg, setEmailMsg] = useState("");
+ const [pwdMsg, setPwdMsg] = useState('');
+
+ const [checkEamil, setCheckEmail] = useState(false);
+ const [checkPwd, setCheckPwd] = useState(false);
+
+
+ //이메일, 비밀번호 유효성 검사
+ const validateEmail = (email) => {
+ return email
+ .toLowerCase()
+ .match(/([\w-.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/);
+ };
+
+ const validatePwd = (password) => {
+ return password
+ .toLowerCase()
+ .match(/^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-])(?=.*[0-9]).{10,25}$/);
+ }
+
+ const isEmailValid = validateEmail(email);
+ const isPwdValid = validatePwd(password);
+
+ const isAllValid = isEmailValid && isPwdValid;
+
+ const onSubmit = async (e) => {
+ e.preventDefault();
+
+ try {
+ const res = await Api.post("user/login", {
+ email,
+ password,
+ })
+
+ const user = res.data;
+ const jwtToken = user.token;
+ const { result, errorCause } = res.data;
+
+ // 토큰 저장
+ sessionStorage.setItem("userToken", jwtToken);
+
+ dispatch({
+ type: "LOGIN",
+ payload: user,
+ });
+
+ if (!result) {
+ if (errorCause === "email") {
+ setEmailMsg("입력하신 이메일이 존재하지 않습니다. 다시 입력해주세요.")
+ setCheckEmail(false);
+ } else if (errorCause === "password") {
+ setPwdMsg("입력하신 비밀번호가 존재하지 않습니다. 다시 입력해주세요.")
+ setCheckPwd(false);
+ }
+ } else {
+ setCheckEmail(true);
+ setCheckPwd(true);
+ navigate("/", { replace: true });
+ }
+ } catch (err) {
+ setLogin(false);
+ console.log("로그인 실패\n" , err)
+ }
+ }
+
+ const onChangeEmail = useCallback((e) => {
+ const currEmail = e.target.value;
+ setEmail(currEmail);
+
+ if (!validateEmail(currEmail)) {
+ setEmailMsg("이메일 형식이 올바르지 않습니다.")} else {
+ setEmailMsg("")
+ }
+ })
+
+ const onChangePwd = useCallback((e) =>{
+ const currPwd = e.target.value;
+ setPassword(currPwd);
+
+ if (!validatePwd(currPwd)) {
+ setPwdMsg("영문, 숫자, 특수기호 조합으로 10자리 이상 입력해주세요.")
+ } else {
+ setPwdMsg("")
+ }
+ }, [])
+
+
+ return (
+ 
+ 
+ 제로 웨이스트(Zero Waste)는 모든 제품이 재사용될 수 있도록 장려하며 폐기물을 방지하는데 초점을 맞춘 원칙입니다. 
+ 현재 국내에 있는 제로 웨이스트 샵의 대부분은 서울과 수도권에 위치하고 있습니다. 
+
+