Skip to content

Commit

Permalink
Merge branch 'dev' into feat/oauth
Browse files Browse the repository at this point in the history
  • Loading branch information
mniYUNSU authored Sep 1, 2021
2 parents e706823 + deac43a commit 5b13a71
Show file tree
Hide file tree
Showing 16 changed files with 715 additions and 233 deletions.
1 change: 1 addition & 0 deletions client/.env.example
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
REACT_APP_API_URL
87 changes: 82 additions & 5 deletions client/src/App.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import "./app.css";
import dummyData from "./dummy/dummyData";
import Search from "./pages/Search";
import SearchMore from "./pages/SearchMore";
import { useEffect, useState } from "react";
Expand All @@ -12,9 +11,12 @@ import WriteModal from "./comp/WriteModal";
import MypageEdit from "./pages/MypageEdit";
import SignoutModal from "./comp/SignoutModal";
import MoreClickModal from "./comp/MoreClickModal";
import axios from "axios";
import EditContentModal from "./comp/EditContentModal";

function App() {
// console.log(dummyData);
const url = process.env.REACT_APP_API_URL || `http://localhost:4000`;
const [isLogin, setisLogin] = useState(false); // 둜그인 μ—¬λΆ€
const [userInfo, setUserInfo] = useState(
JSON.parse(localStorage.getItem("userInfo"))
Expand All @@ -24,11 +26,22 @@ function App() {
const [onModal, setOnModal] = useState(false); // 둜그인, νšŒμ›κ°€μž… λͺ¨λ‹¬ μ—΄ μ—¬λΆ€
const [searchValue, setSearchValue] = useState(""); // search input에 κ²€μƒ‰ν•˜λ €λŠ” κ°’
const [result, setResult] = useState([]); // search κ²°κ³Όκ°’
const [currResult, setCurrResult] = useState({
data: "",
}); // λˆŒλŸ¬μ„œ λ³Ό searchκ°’
const [editResult, setEditResult] = useState({
data: "",
}); // λ³€κ²½ ν•„μš”ν•œ κ°’
const [userContent, setUserContent] = useState({
data: [],
}); // 개인이 μž‘μ„±ν•œ κΈ€ κ²°κ³Όκ°’
const [needUpdate, setNeedUpdate] = useState(false); // λ¦¬λ Œλ”λ§ ν•„μš”ν•œμ§€

const [writeModal, setWriteModal] = useState(false);
const [closeLogoutModal, setCloseLogoutModal] = useState(false);
const [onSignoutModal, setOnSignoutModal] = useState(false);
const [moreClickModal, setMoreClickModal] = useState(false);
const [editContentModal, setEditContentModal] = useState(false);

useEffect(() => {
setSearched(false);
Expand All @@ -42,6 +55,30 @@ function App() {
}
}, [accToken]);

useEffect(async () => {
await searchWord(searchValue);
await searchUserWord();
}, [needUpdate]);

const searchWord = async (searchValue) => {
let searchRes = await axios.post(`${url}/search`, {
wordName: searchValue,
});
setResult(searchRes.data.data); // κ²°κ³Όκ°’ μ—…λ°μ΄νŠΈ
setSearched(true);
};

const searchUserWord = async () => {
let userContent = await axios.get(`${url}/myContents`, {
header: { authorization: `Bearer ${accToken}` },
});
setUserContent({
data: userContent.data.data.sort(
(a, b) => new Date(b.createdAt) - new Date(a.createdAt)
),
});
}; // μœ μ €κ°€ μ“΄ κΈ€ κ°€μ Έμ˜€κΈ°

return (
<BrowserRouter>
<div id="wrap">
Expand All @@ -64,6 +101,8 @@ function App() {
setAccToken={setAccToken}
userInfo={userInfo}
isLogin={isLogin}
setNeedUpdate={setNeedUpdate}
needUpdate={needUpdate}
/>
) : null}

Expand All @@ -73,20 +112,44 @@ function App() {
setCloseLogoutModal={setCloseLogoutModal}
setisLogin={setisLogin}
accToken={accToken}
setSearched={setSearched}
setAccToken={setAccToken}
/>
) : null}

{/* νšŒμ›νƒˆν‡΄ λͺ¨λ‹¬ */}
{onSignoutModal ? (
<SignoutModal setOnSignoutModal={setOnSignoutModal} />
<SignoutModal
setOnSignoutModal={setOnSignoutModal}
setAccToken={setAccToken}
setisLogin={setisLogin}
accToken={accToken}
/>
) : null}

{/* 단어 뜻 λͺ¨λ‹¬ */}
{moreClickModal ? (
<MoreClickModal setMoreClickModal={setMoreClickModal} />
<MoreClickModal
setMoreClickModal={setMoreClickModal}
currResult={currResult}
setAccToken={setAccToken}
accToken={accToken}
setNeedUpdate={setNeedUpdate}
needUpdate={needUpdate}
/>
) : null}

{/*단어 뜻 μˆ˜μ • λͺ¨λ‹¬ */}
{editContentModal ? (
<EditContentModal
setAccToken={setAccToken}
accToken={accToken}
setEditContentModal={setEditContentModal}
editResult={editResult}
needUpdate={needUpdate}
setNeedUpdate={setNeedUpdate}
/>
) : null}
<Nav
isLogin={isLogin}
setOnModal={setOnModal}
Expand All @@ -108,7 +171,6 @@ function App() {
<Search
setOnModal={setOnModal}
isLogin={isLogin}
data={dummyData.word}
setWriteModal={setWriteModal}
searched={searched}
setSearched={setSearched}
Expand All @@ -119,17 +181,32 @@ function App() {
setAccToken={setAccToken}
result={result}
setResult={setResult}
setCurrResult={setCurrResult}
setNeedUpdate={setNeedUpdate}
searchWord={searchWord}
/>
</Route>
<Route exact path="/searchMore">
<SearchMore
result={result}
setMoreClickModal={setMoreClickModal}
setWriteModal={setWriteModal}
setCurrResult={setCurrResult}
setResult={setResult}
/>
</Route>
<Route exact path="/mypage">
<Mypage isLogin={isLogin} accToken={accToken} />
<Mypage
userContent={userContent}
searchUserWord={searchUserWord}
isLogin={isLogin}
accToken={accToken}
setMoreClickModal={setMoreClickModal}
setCurrResult={setCurrResult}
setEditContentModal={setEditContentModal}
setEditResult={setEditResult}
setUserContent={setUserContent}
/>
</Route>
<Route exact path="/mypageEdit">
<MypageEdit
Expand Down
176 changes: 176 additions & 0 deletions client/src/comp/EditContentModal.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,176 @@
import React, { useState } from "react";
import styled from "styled-components";
import axios from "axios";

axios.defaults.withCredentials = true;
const { WordNameLength, WordMeanLength } = require("../checkModule");

const ModalBack = styled.div`
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
display: grid;
place-items: center;
z-index: 100;
`;

const ModalBox = styled.div`
width: 50vw;
height: 80vh;
display: flex;
flex-direction: column;
background-color: white;
border-radius: 30px;
min-width: 300px;
min-height: 300px;
text-align: center;
position: relative;
justify-items: center;
> div {
font-size: max(30px, 2.8vw);
position: absolute;
top: 20px;
right: max(2.8vw, 20px);
cursor: pointer;
transition: 0.4s;
}
> div:hover {
transform: rotate(180deg);
}
`;

const NewWord = styled.h2`
width: 70%;
height: 3vw;
min-height: 30px;
background: transparent;
outline: none;
border: 0;
border-bottom: 3px solid black;
margin: 0 auto;
margin-top: 50px;
font-size: max(13px, 1.3vw);
transition: 0.3s;
padding-left: 10px;
:focus {
border-bottom: 3px solid #9ee6c5;
}
:hover {
border-bottom: 3px solid #9ee6c5;
}
:focus::-webkit-input-placeholder {
color: transparent;
}
`;

const WordMean = styled.textarea`
width: 70%;
height: 50vh;
margin: 0 auto;
margin-top: 5vh;
border: 1px solid black;
line-height: 5vh;
padding: 10px 0 0 10px;
font-size: max(17px, 1.5vw);
outline: none;
border-radius: 20px;
:focus {
border: 2px solid black;
}
`;

const Editbutton = styled.button`
width: 50%;
height: 5vh;
min-height: 30px;
background-color: black;
margin: 0 auto;
color: white;
font-size: max(12px, 0.8vw);
margin-top: max(4vh, 25px);
border-radius: 20px;
border: 2px solid black;
cursor: pointer;
transition: 0.3s;
:hover {
background-color: white;
color: black;
border: 2px solid black;
}
`;

function EditContentModal({
accToken,
setAccToken,
setEditContentModal,
editResult,
needUpdate,
setNeedUpdate,
}) {
const url = process.env.REACT_APP_API_URL || `http://localhost:4000`;
const [newWord, setNewWord] = useState({ data: editResult.data });
const handleEditInputValue = (e) => {
setNewWord({
data: {
...editResult.data,
wordMean: e.target.value,
},
});
};
const handleKeyPressEdit = (e) => {
if (e.type === "keypress" && e.code === "Enter") {
handleEditWord();
}
};
const handleEditWord = async () => {
if (newWord.data.wordMean.length === editResult.data.wordMean.length) {
alert("λ³€κ²½ 사항이 μ—†μŠ΅λ‹ˆλ‹€.");
} else if (newWord.data.wordMean.length > 200) {
alert("200자 미만으둜 μž…λ ₯ν•΄μ£Όμ„Έμš”.");
} else {
let editWordMean = await axios.patch(
`${url}/contents`,
{
contentId: newWord.data.id,
wordMean: newWord.data.wordMean,
},
{ headers: { authorization: `Bearer ${accToken}` } }
);
if (editWordMean.data.accessToken) {
setAccToken(editWordMean.data.accessToken);
}
if (editWordMean.data.message === "ok") {
alert("μˆ˜μ •μ΄ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€");
setEditContentModal(false);
setNeedUpdate(!needUpdate);
}
}
};

return (
<>
<ModalBack>
{" "}
{/* κΈ€ μˆ˜μ • */}
<ModalBox>
<div onClick={() => setEditContentModal(false)}>&times;</div>
<NewWord>{newWord.data.wordName}</NewWord>
<WordMean
placeholder="200자 미만으둜 μž…λ ₯ν•΄μ£Όμ„Έμš”."
value={newWord.data.wordMean}
onChange={(e) => handleEditInputValue(e)}
onKeyPress={(e) => handleKeyPressEdit(e)}
/>
<Editbutton onClick={handleEditWord}>μˆ˜μ •ν•˜κΈ°</Editbutton>
</ModalBox>
</ModalBack>
</>
);
}

export default EditContentModal;
2 changes: 1 addition & 1 deletion client/src/comp/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -381,7 +381,7 @@ function Modal({ setOnModal, setisLogin, setUserInfo, setAccToken, accToken }) {
console.log(signupResult.data.message); // {message:"~~"}
history.push("/");
setOnModal(false);
alert("νšŒμ›κ°€μž…μ΄ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€.");
alert("νšŒμ›κ°€μž…μ΄ μ™„λ£Œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. 둜그인 ν•΄μ£Όμ„Έμš”.");
}
} catch (error) {
console.log(error);
Expand Down
Loading

0 comments on commit 5b13a71

Please sign in to comment.