diff --git a/client/.env.example b/client/.env.example new file mode 100644 index 0000000..168771e --- /dev/null +++ b/client/.env.example @@ -0,0 +1 @@ +REACT_APP_API_URL \ No newline at end of file diff --git a/client/src/App.js b/client/src/App.js index c8dbf25..e323632 100644 --- a/client/src/App.js +++ b/client/src/App.js @@ -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"; @@ -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")) @@ -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); @@ -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 (
@@ -64,6 +101,8 @@ function App() { setAccToken={setAccToken} userInfo={userInfo} isLogin={isLogin} + setNeedUpdate={setNeedUpdate} + needUpdate={needUpdate} /> ) : null} @@ -73,20 +112,44 @@ function App() { setCloseLogoutModal={setCloseLogoutModal} setisLogin={setisLogin} accToken={accToken} + setSearched={setSearched} setAccToken={setAccToken} /> ) : null} {/* 회원탈퇴 모달 */} {onSignoutModal ? ( - + ) : null} {/* 단어 뜻 모달 */} {moreClickModal ? ( - + ) : null} + {/*단어 뜻 수정 모달 */} + {editContentModal ? ( + + ) : null}
-

{/*단어*/}자만추

+

{currResult.data.wordName}

-

- {/*단어 뜻*/}자연스러운 만남 추구 자연스러운 만남 추구 - 자연스러운 만남 추구 자연스러운 만남 추구 자연스러운 만남 추구 - 자연스러운 만남 추구 자연스러운 만남 추구 자연스러운 만남 추구 - 자연스러운 만남 추구 자연스러운 만남 추구 -

+

{currResult.data.wordMean}

- diff --git a/client/src/comp/SearchInput.js b/client/src/comp/SearchInput.js index 7684eca..7428ff1 100644 --- a/client/src/comp/SearchInput.js +++ b/client/src/comp/SearchInput.js @@ -42,31 +42,30 @@ const SearchWrap = styled.div` border: 2px solid black; } `; -function SearchInput({ searchValue, setSearchValue, setResult, setSearched }) { - const url = process.env.REACT_APP_API_URL || `http://localhost:4000`; - +function SearchInput({ + searchValue, + setSearchValue, + setResult, + setSearched, + searchWord, +}) { const handleSearchInputValue = (e) => { setSearchValue(e.target.value); }; - const searchWord = async (searchValue) => { - if (searchValue === "") { - alert("검색어를 입력해주세요."); - } else { - let searchRes = await axios.post(`${url}/search`, { - wordName: searchValue, - }); - setResult(searchRes.data.data); // 결과값 업데이트 - setSearched(true); - } - }; - const handleKeyPressSearch = (e) => { if (e.type === "keypress" && e.code === "Enter") { searchWord(e.target.value); } }; + const searchBegin = (searchValue) => { + if (searchValue === "") { + alert("검색어를 입력해주세요."); + } else { + searchWord(searchValue); + } + }; return ( <> @@ -77,7 +76,7 @@ function SearchInput({ searchValue, setSearchValue, setResult, setSearched }) { onChange={handleSearchInputValue} onKeyPress={handleKeyPressSearch} > - diff --git a/client/src/comp/SearchResult.js b/client/src/comp/SearchResult.js index 0493d99..3daa532 100644 --- a/client/src/comp/SearchResult.js +++ b/client/src/comp/SearchResult.js @@ -1,5 +1,6 @@ -import React from "react"; +import React, { useEffect } from "react"; import styled from "styled-components"; +import thumbs_up_icon from "../thumbs_up_icon.png"; import { Link, Redirect } from "react-router-dom"; import thumbs_up_icon from "../thumbs_up_icon.png"; import empty from "../empty.png"; @@ -13,12 +14,18 @@ function SearchResult({ setMoreClickModal, accToken, setAccToken, + setCurrResult, + setResult, }) { let modifiedResult = result .sort((a, b) => b.thumbsup - a.thumbsup) .slice(0, 3); - // let result = []; + const showMore = (info) => { + setCurrResult({ data: info }); + setMoreClickModal(true); + }; + const ResultList = styled.ul` margin-top: 20px; width: 65%; @@ -43,16 +50,22 @@ function SearchResult({ font-size: max(16px, 1vw); } p { - padding: 0 5px; + flex: 1 1 auto; font-size: max(14px, 1vw); - flex: 1 0 auto; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; } p:nth-child(2) { flex: 3 1 auto; } + .imgWrap { + position: relative; + right: 0.5vw; + } + .imgWrap img { + position: relative; + top: 0.2vw; + width: max(1.1vw, 18px); + height: max(1.1vw, 18px); + } } li:nth-child(1) { margin-top: 0px; @@ -143,12 +156,12 @@ function SearchResult({ {/* 검색하자마자 3개 */} {modifiedResult.map((ele, idx) => { return ( -
  • setMoreClickModal(true)}> +
  • showMore(ele)}>

    {ele.wordName}

    {ele.wordMean}

    - + thumbsup {ele.thumbsup}

    diff --git a/client/src/comp/SignoutModal.js b/client/src/comp/SignoutModal.js index 33f51ec..79d742e 100644 --- a/client/src/comp/SignoutModal.js +++ b/client/src/comp/SignoutModal.js @@ -1,6 +1,9 @@ import React, { useState } from "react"; +import { useHistory } from "react-router"; import styled from "styled-components"; import logo from "../signout-logo.png"; +import axios from "axios"; +axios.defaults.withCredentials = true; const ModalBack = styled.div` width: 100vw; @@ -120,7 +123,34 @@ const CancelButton = styled.button` const KakaoWrap = styled.div``; -function SignoutModal({ setOnSignoutModal }) { +function SignoutModal({ + setOnSignoutModal, + setAccToken, + setisLogin, + accToken, +}) { + const url = process.env.REACT_APP_API_URL || `http://localhost:4000`; + const history = useHistory(); + + const handleSignOut = async () => { + try { + await axios({ + url: `${url}/user/signout`, + method: "delete", + headers: { authorization: `Bearer ${accToken}` }, + }); + alert("슬빠... (슬프지만 빠이라는 뜻) ㅠ"); + setOnSignoutModal(false); + setAccToken(null); + setisLogin(false); + localStorage.clear(); + history.push("/"); + } catch (error) { + console.log(error); + alert("다시 시도해주세요. (가지 말라는 뜻이 아닐까요?)"); + } + }; + return ( <> @@ -138,7 +168,7 @@ function SignoutModal({ setOnSignoutModal }) { setOnSignoutModal(false)}>

    떠나지 않기

     - +

    떠나기...

     diff --git a/client/src/comp/WriteModal.js b/client/src/comp/WriteModal.js index becb723..3ecce44 100644 --- a/client/src/comp/WriteModal.js +++ b/client/src/comp/WriteModal.js @@ -110,7 +110,8 @@ function WriteModal({ accToken, setAccToken, userInfo, - setisLogin, + setNeedUpdate, + needUpdate, }) { const url = process.env.REACT_APP_API_URL || `http://localhost:4000`; const history = useHistory(); @@ -151,6 +152,7 @@ function WriteModal({ setAccToken(writeRes.data.accessToken); } alert("새로운 줄임말이 등록되었습니다."); + setNeedUpdate(!needUpdate); setWriteModal(false); } } catch (error) { diff --git a/client/src/comp/logoutModal.js b/client/src/comp/logoutModal.js index 0f68012..350e024 100644 --- a/client/src/comp/logoutModal.js +++ b/client/src/comp/logoutModal.js @@ -98,6 +98,7 @@ function LogoutModal({ setCloseLogoutModal, setisLogin, accToken, + setSearched, setAccToken, }) { const url = process.env.REACT_APP_API_URL || `http://localhost:4000`; @@ -109,6 +110,7 @@ function LogoutModal({ setCloseLogoutModal(false); setAccToken(null); setisLogin(false); + setSearched(false); localStorage.clear(); history.push("/"); }; diff --git a/client/src/dummy/dummyData.js b/client/src/dummy/dummyData.js deleted file mode 100644 index 97ca478..0000000 --- a/client/src/dummy/dummyData.js +++ /dev/null @@ -1,107 +0,0 @@ -const word = [ - { - id: 1, - wordName: "자만추", - wordMean: "자연스러운 만남 추구", - thumbsup: 10, - created_at: Date.now(), - userId: 4, - }, - { - id: 2, - wordName: "자만추", - wordMean: "자릿값 만원 추가", - thumbsup: 15, - created_at: Date.now(), - userId: 3, - }, - { - id: 3, - wordName: "자만추", - wordMean: "자장면에 만두 추가", - thumbsup: 5, - created_at: Date.now(), - userId: 2, - }, - { - id: 4, - wordName: "자만추", - wordMean: "자주 만나기 추하다", - thumbsup: 20, - created_at: Date.now(), - userId: 3, - }, - { - id: 4, - wordName: "자만추", - wordMean: "자주 만나기 추하다", - thumbsup: 20, - created_at: Date.now(), - userId: 3, - }, - { - id: 4, - wordName: "자만추", - wordMean: "자주 만나기 추하다", - thumbsup: 20, - created_at: Date.now(), - userId: 3, - }, - { - id: 4, - wordName: "자만추", - wordMean: "자주 만나기 추하다", - thumbsup: 20, - created_at: Date.now(), - userId: 3, - }, - { - id: 4, - wordName: "자만추", - wordMean: "자주 만나기 추하다", - thumbsup: 20, - created_at: Date.now(), - userId: 3, - }, -]; - -const userInfo = [ - { - id: 1, - username: "김민재", - email: "blackbean@gmail.com", - password: "Minjae!123", - phone: "01010101010", - userPic: null, - created_at: Date.now(), - }, - { - id: 2, - username: "강영서", - email: "younglady@gmail.com", - password: "Young!123", - phone: "01012121212", - userPic: null, - created_at: Date.now(), - }, - { - id: 3, - username: "배윤수", - email: "pearYoon@gmail.com", - password: "Pear!123", - phone: "01022222222", - userPic: null, - created_at: Date.now(), - }, - { - id: 4, - username: "이나은", - email: "nanni@gmail.com", - password: "Nanni!123", - phone: "01088888888", - userPic: null, - created_at: Date.now(), - }, -]; - -export default { userInfo, word }; diff --git a/client/src/pages/Mypage.js b/client/src/pages/Mypage.js index 48416a9..548aede 100644 --- a/client/src/pages/Mypage.js +++ b/client/src/pages/Mypage.js @@ -1,7 +1,8 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useRef } from "react"; import styled from "styled-components"; import axios from "axios"; import { Redirect } from "react-router"; +import { faExternalLinkAlt } from "@fortawesome/free-solid-svg-icons"; const MypageWrap = styled.div` width: 100%; @@ -23,6 +24,28 @@ const UserContent = styled.div` padding: 1vw 0; border-bottom: 3px solid #000; margin-bottom: 2vw; + > p { + line-height: 20px; + font-size: max(0.9vw, 13px); + padding: 10px 0; + > span { + font-weight: 700; + } + } + > select { + width: max(5vw, 60px); + height: max(2vw, 20px); + background-color: white; + border-radius: 20px; + outline: none; + cursor: pointer; + text-align-last: center; + text-align: center; + border: 2px solid black; + -ms-text-align-last: center; + -moz-text-align-last: center; + font-size: max(0.8vw, 10px); + } `; const ContentList = styled.ul` @@ -34,6 +57,7 @@ const ContentList = styled.ul` /* justify-content: space-between; */ padding: 1vw 0; border-bottom: 3px solid #000; + cursor: pointer; > input { /* flex: 1 1 auto; */ } @@ -78,21 +102,90 @@ const ContentCheck = styled.div` } `; -function Mypage({ isLogin, accToken }) { +function Mypage({ + userContent, + setUserContent, + searchUserWord, + isLogin, + accToken, + setMoreClickModal, + setCurrResult, + setEditResult, + setEditContentModal, +}) { const url = process.env.REACT_APP_API_URL || `http://localhost:4000`; - const [userContent, setUserContent] = useState({ - data: [], - }); - const getUserContent = async () => { - let userContent = await axios.get(`${url}/myContents`, { - header: { authorization: `Bearer ${accToken}` }, - }); - setUserContent({ data: userContent.data.data }); - }; + const [gotDeleted, setGotDeleted] = useState(false); // 데이터 삭제하는거 확인하는 state + const [orderBy, setOrderBy] = useState("byDates"); // 정리할 기준 지정 + const [checkedItems, setCheckedItems] = useState( + userContent.data.map((el) => el.id) + ); + console.log(userContent); useEffect(() => { - getUserContent(); - }, []); + searchUserWord(); + }, [gotDeleted]); // 삭제시 다시 데이터 받아옴 + + const ordering = (value) => { + if (value === "byThumbsup") { + setOrderBy("byThumbsup"); + setUserContent({ + data: userContent.data.sort((a, b) => b.thumbsup - a.thumbsup), + }); + } else if (value === "byDates") { + setOrderBy("byDates"); + setUserContent({ + data: userContent.data.sort( + (a, b) => new Date(b.createdAt) - new Date(a.createdAt) + ), + }); + } + }; + + const readResult = (ele) => { + setCurrResult({ data: ele }); + setMoreClickModal(true); + }; // 세부 정보 확인 모달로 이동 + + const editResult = (ele) => { + setEditResult({ data: ele }); + setEditContentModal(true); + }; // 정보 수정 모달로 이동 + + const handleCheckChange = (checked, id) => { + if (checked) { + setCheckedItems([...checkedItems, id]); + } else { + setCheckedItems(checkedItems.filter((el) => el !== id)); + } + }; + + const handleAllCheck = (checked) => { + if (checked) { + setCheckedItems(userContent.data.map((el) => el.id)); + } else { + setCheckedItems([]); + } + }; + + const deleteContent = async () => { + await axios.post( + `${url}/contents/delete`, + { + contentId: checkedItems, + }, + { + headers: { authorization: `Bearer ${accToken}` }, + } + ); + alert("글이 삭제되었습니다."); + setGotDeleted(!gotDeleted); + }; // 만든 글 삭제하기 + + const contentCount = userContent.data.length; // 전체 글 수 + const contentThumbsupCount = userContent.data.reduce((acc, cur) => { + if (acc < cur.thumbsup) return cur.thumbsup; + else return acc; + }, 0); // 최고 추천수 return ( <> @@ -101,30 +194,56 @@ function Mypage({ isLogin, accToken }) { {" "} {/* 내가 쓴 글 목록 */} +
    + handleAllCheck(e.target.checked)} + /> + 전체 선택 +
    -

    작성하신 글은 0개 이며, 최대 추천수는 0개 입니다

    - ordering(e.target.value)} + > + +     {userContent.data.map((ele, idx) => { return (
  • - + + handleCheckChange(e.target.checked, ele.id) + } + />
    -

    {ele.wordName}

    +

    readResult(ele)}>{ele.wordName}

    {ele.wordMean}

    {ele.thumbsup}

    +

    editResult(ele)}>수정하기

    • ); })} - - + diff --git a/client/src/pages/MypageEdit.js b/client/src/pages/MypageEdit.js index 2b04bff..0c0e724 100644 --- a/client/src/pages/MypageEdit.js +++ b/client/src/pages/MypageEdit.js @@ -184,6 +184,13 @@ function MypageEdit({ newPassword: "", newPasswordRe: "", }); + + const handleKeyPressEdit = (e) => { + if (e.type === "keypress" && e.code === "Enter") { + handleEdit(); + } + }; + const handleEditInputValue = (key) => (e) => { setEditUser({ ...editUser, [key]: e.target.value }); }; @@ -216,7 +223,7 @@ function MypageEdit({ if (editRes.data.accessToken) { setAccToken(editRes.data.accessToken); } - alert("정보가 업데이트 되었습니다. 다시 로그인해 주세요."); + alert("정보가 업데이트 되었습니다. 다시 로그인해주세요."); await axios.post(`${url}/user/logout`, null, { headers: { authorization: `Bearer ${accToken}` }, }); @@ -228,11 +235,11 @@ function MypageEdit({ } } catch (error) { console.log(error); - alert("다시 입력해 주세요."); + alert("다시 입력해주세요."); } }; - const handleCancel = async () => { + const handleCancel = () => { setEditUser({ username: "", oldPassword: "", @@ -241,6 +248,32 @@ function MypageEdit({ }); }; + const handleUserPic = async () => { + try { + const userPicEdit = await axios({ + url: `${url}/user/userPicEdit`, + method: "patch", + headers: { authorization: `Bearer ${accToken}` }, + data: { userPic: userInfo.userPic }, + }); + if (userPicEdit.data.accessToken) { + setAccToken(userPicEdit.data.accessToken); + } + alert("사진이 변경되었습니다. 다시 로그인해주세요."); + await axios.post(`${url}/user/logout`, null, { + headers: { authorization: `Bearer ${accToken}` }, + }); + setCloseLogoutModal(false); + setAccToken(null); + setisLogin(false); + localStorage.clear(); + history.push("/"); + } catch (error) { + console.log(error); + alert("다시 시도해주세요."); + } + }; + return ( <> {isLogin ? ( @@ -255,6 +288,7 @@ function MypageEdit({ id="username" placeholder="사용자 이름" onChange={handleEditInputValue("username")} + onKeyPress={handleKeyPressEdit} value={editUser.username} > @@ -290,7 +327,9 @@ function MypageEdit({ 이용자 사진 - + diff --git a/client/src/pages/Search.js b/client/src/pages/Search.js index 8828159..282ccfe 100644 --- a/client/src/pages/Search.js +++ b/client/src/pages/Search.js @@ -2,7 +2,6 @@ import { useState } from "react"; import styled from "styled-components"; import SearchInput from "../comp/SearchInput"; import SearchResult from "../comp/SearchResult"; -import SearchMore from "./SearchMore"; const SearchSection = styled.section` min-height: 55vh; @@ -26,7 +25,8 @@ function Search({ setAccToken, result, setResult, - + setCurrResult, + searchWord, }) { return ( @@ -35,10 +35,12 @@ function Search({ setSearchValue={setSearchValue} setSearched={setSearched} setResult={setResult} + searchWord={searchWord} /> {searched ? ( - ) : ( -
    하이~ 에이치아이~
    - )} + ) : null}     ); } diff --git a/client/src/pages/SearchMore.js b/client/src/pages/SearchMore.js index b05be41..42461b7 100644 --- a/client/src/pages/SearchMore.js +++ b/client/src/pages/SearchMore.js @@ -1,35 +1,53 @@ -import React from "react"; +import React, { useEffect } from "react"; import styled from "styled-components"; import empty from "../empty.png"; import thumbs_up_icon from "../thumbs_up_icon.png"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faChevronDown, faChevronUp } from "@fortawesome/free-solid-svg-icons"; -function SearchMore({ result, setMoreClickModal, setWriteModal }) { - let moreResult = result.sort((a, b) => b.thumbsup - a.thumbsup); - - const EmptyResult = styled.div` - text-align: center; - > img { - width: 20vh; - height: 20vh; - } - `; - const Result = styled.div` +const EmptyResult = styled.div` + text-align: center; + > img { + width: 20vh; + height: 20vh; + } +`; +const Result = styled.div` + display: flex; + flex-direction: column; +`; +const ResultName = styled.h2` + text-align: center; + font-size: 1.5em; + margin-bottom: 2vw; +`; +const Morebutton = styled.button` + display: block; + width: 10vw; + min-width: 80px; + height: 5vh; + background-color: #000; + border: 2px solid #000; + border-radius: 5vh; + margin: 0 auto 2vw; + font-size: max(12px, 0.8vw); + color: #fff; + transition: all 0.3s; + cursor: pointer; + :hover { + background-color: #fff; + color: #000; + } +`; +const ResultList = styled.ul` + margin-top: 20px; + width: 100%; + margin: 0 auto; + li { display: flex; - flex-direction: column; - `; - const ResultName = styled.h2` - text-align: center; - font-size: 1.5em; - margin-bottom: 2vw; - `; - const Morebutton = styled.button` - display: block; - width: 10vw; - min-width: 80px; - height: 5vh; - background-color: #000; + width: 75%; + height: 8vh; + margin: 2vh auto 0; border: 2px solid #000; border-radius: 5vh; margin: 0 auto 2vw; @@ -87,8 +105,9 @@ function SearchMore({ result, setMoreClickModal, setWriteModal }) { height: max(1.1vw, 18px); } } - li:nth-child(1) { - margin-top: 0px; + .imgWrap { + position: relative; + right: 0.5vw; } li:hover { background-color: rgba(0, 0, 0, 0.8); @@ -97,28 +116,76 @@ function SearchMore({ result, setMoreClickModal, setWriteModal }) { font-weight: bold; } } - `; - const MoveDir = styled.div` - width: 5vh; - height: 10vh; - border: 1px solid #000; - border-radius: 30px; - overflow: hidden; - position: fixed; - right: 2vh; - bottom: 5vh; - display: flex; - flex-direction: column; + } + li:nth-child(1) { + margin-top: 0px; + } + li:hover { + background-color: white; + color: black; + } +`; +const MoveDir = styled.div` + width: 5vh; + height: 10vh; + border: 1px solid #000; + border-radius: 30px; + overflow: hidden; + position: fixed; + right: 2vh; + bottom: 5vh; + display: flex; + flex-direction: column; + background-color: #000; + > .fit { + flex: 1 1 auto; + margin: 0 auto; + width: 50%; background-color: #000; - > .fit { - flex: 1 1 auto; - margin: 0 auto; - width: 50%; - background-color: #000; - color: #fff; - cursor: pointer; - } - `; + color: #fff; + cursor: pointer; + } +`; + +function SearchMore({ + result, + setMoreClickModal, + setWriteModal, + setCurrResult, + setResult, +}) { + let moreResult = result.sort((a, b) => b.thumbsup - a.thumbsup); + const showSearchMore = (info) => { + setCurrResult({ data: info }); + setMoreClickModal(true); + }; + // const [scrollY, setScrollY] = useState(0); + // const [showBtn, setShowBtn] = useState(false); + // const handleFollow = () => { + // setScrollY(window.pageYOffset); // window scroll값 저장 + // if (scrollY > 30) { + // setShowBtn(true); + // } else { + // setShowBtn(false); + // } + // }; + // const handleTop = () => { + // window.scrollTo({ + // top: 0, + // behavior: "smooth", + // }); + // setScrollY(0); + // setShowBtn(false); + // }; + // const handleDown = () => { + // window.scrollTo({ + // bottom: 0, + // behavior: "smooth", + // }); + // setScrollY(0); + // setShowBtn(false); + // }; + return ( <> {moreResult.length === 0 ? ( @@ -137,7 +204,7 @@ function SearchMore({ result, setMoreClickModal, setWriteModal }) { {moreResult.map((ele, idx) => { return ( -
  • setMoreClickModal(true)}> +
  • showSearchMore(ele)}>

    {ele.wordName}

    {ele.wordMean}

    diff --git a/server/controllers/user/userPicEdit.js b/server/controllers/user/userPicEdit.js index f4a3d1e..ad877ca 100644 --- a/server/controllers/user/userPicEdit.js +++ b/server/controllers/user/userPicEdit.js @@ -1,6 +1,48 @@ +const { user } = require("../../models"); +const { + isAuthorized, + generateAccessToken, +} = require("../tokenFunction/accessToken"); +const { refreshAuthorized } = require("../tokenFunction/refreshToken"); +const { defaultImgs } = require("../user/imgResource"); +const { verify } = require("jsonwebtoken"); + +const getRandomImg = (defaultImgs) => { + const randomImgIdx = Math.floor(Math.random() * 4); + return defaultImgs[randomImgIdx]; +}; module.exports = { - patch: (req, res) => { - res.send("This is user/userPicEdit"); + patch: async (req, res) => { + const { userPic } = req.body; + // console.log(userPic); + if (!isAuthorized(req)) { + if (refreshAuthorized(req)) { + const token = req.cookies.refreshToken; + const tokenCheck = verify(token, process.env.REFRESH_SECRET); + delete tokenCheck.exp; + const accessToken = generateAccessToken(tokenCheck); + const userInfo = await user.findOne({ + where: { id: tokenCheck.id }, + }); + const newUserPics = defaultImgs.filter((el) => el !== userPic); + userInfo.userPic = getRandomImg(newUserPics); + await userInfo.save(); + res.status(201).json({ accessToken, message: "ok" }); + } else { + res.status(401).json({ message: "Send new Login Request" }); + } + } else { + const token = req.headers.authorization; + const realToken = token.split(" ")[1]; + const tokenCheck = verify(realToken, process.env.ACCESS_SECRET); + const userInfo = await user.findOne({ + where: { id: tokenCheck.id }, + }); + const newUserPics = defaultImgs.filter((el) => el !== userPic); + userInfo.userPic = getRandomImg(newUserPics); + await userInfo.save(); + res.status(200).json({ message: "ok" }); } -} \ No newline at end of file + }, +};