Merge pull request #21 from dbstjs95/dev

Dev
codestates · May 13, 2022 · 7899f4b · 7899f4b
2 parents 0ea9a87 + f086a34
commit 7899f4b
Show file tree

Hide file tree

Showing 28 changed files with 613 additions and 150 deletions.
diff --git a/client/package-lock.json b/client/package-lock.json
diff --git a/client/package.json b/client/package.json
@@ -14,6 +14,7 @@
     "@testing-library/user-event": "^13.5.0",
     "aws-sdk": "^2.1130.0",
     "axios": "^0.26.1",
+    "qs": "^6.10.3",
     "react": "^18.0.0",
     "react-aws-s3": "^1.5.0",
     "react-dom": "^18.0.0",

diff --git a/client/src/component/MypageCompo/FreeWriting.js b/client/src/component/MypageCompo/FreeWriting.js
@@ -80,6 +80,13 @@ const WritingContainer = styled.div`
   }
 `;
 
+const Btn = styled.button`
+  &.need {
+    display: none;
+    color: red;
+  }
+`;
+
 function Writing() {
   const { id, accToken } = useSelector(selectUserInfo);
   const config = {
@@ -162,10 +169,11 @@ function Writing() {
         )
         .then((res) => {
           setTextValues({
-            title: null,
-            content: null,
+            title: '',
+            content: '',
           });
-          setSelectedFile(null);
+          setSelectedFile('');
+          fileInput.current.value = '';
           if (res.data.infoId) alert('글이 등록되었습니다.');
         })
         .catch((err) => {
@@ -210,7 +218,7 @@ function Writing() {
         rows="1"
         cols="55"
         placeholder="제목"
-        maxlength="100"
+        maxlength="100" //삭제?
         value={textValues.title}
         onChange={(e) =>
           setTextValues({ ...textValues, title: e.target.value })
@@ -232,7 +240,9 @@ function Writing() {
           onChange={handleInputChange}
           ref={fileInput}
         />
-        <button onClick={handleCancel}>파일 취소</button>
+        <Btn className={!selectedFile && 'need'} onClick={handleCancel}>
+          파일 취소
+        </Btn>
       </div>
       <div className="submit">
         <span

diff --git a/client/src/component/MypageCompo/UserInfo.js b/client/src/component/MypageCompo/UserInfo.js
@@ -194,7 +194,10 @@ function UserInfo() {
   //처음 렌더링때 작동: 유저정보 불러오기
   useEffect(() => {
     axios
-      .get(`${process.env.REACT_APP_SERVER_DEV_URL}/users/${id}`, getConfig)
+      .get(
+        `${process.env.REACT_APP_SERVER_DEV_URL}/users/userInfo/${id}`,
+        getConfig,
+      )
       .then((res) => {
         const { user } = res.data;
         if (user) {
@@ -278,26 +281,20 @@ function UserInfo() {
     myBucket
       .putObject(params, (err, data) => {
         //서버로 profileImg 값 보내주기.(일단 임시로 작성)
-        // axios
-        //   .post(
-        //     `${process.env.REACT_APP_SERVER_DEV_URL}/users/${id}/img`,
-        //     { profileImg: fileName },
-        //     postConfig,
-        //   )
-        //   .then((res) => {
-        //     dispatch(
-        //       updateState({
-        //         profileImg: fileName,
-        //       }),
-        //     );
-        //   })
-        //   .catch((err) => alert('파일업로드 주소가 서버에 반영 안 됨.'));
-        //아래 코드는 서버랑 연동되면 삭제
-        dispatch(
-          updateState({
-            profileImg: fileName,
-          }),
-        );
+        axios
+          .post(
+            `${process.env.REACT_APP_SERVER_DEV_URL}/users/${id}/img`,
+            { profileImg: fileName },
+            postConfig,
+          )
+          .then((res) => {
+            dispatch(
+              updateState({
+                profileImg: fileName,
+              }),
+            );
+          })
+          .catch((err) => alert('파일업로드 주소가 서버에 반영 안 됨.'));
       })
       .on('httpUploadProgress', (evt) => {
         dispatch(

diff --git a/client/src/component/Search.js b/client/src/component/Search.js
@@ -3,8 +3,8 @@ import React, { useRef, useState, useEffect } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons';
-import { selectSearch, updateSearch } from '../store/slices/search';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+import QueryString from 'qs';
 
 const boxShadow = '0 4px 6px rgb(32 33 36 / 28%)';
 // const activeBorderRadius = '1rem 1rem 0 0';
@@ -83,32 +83,9 @@ export const InputContainer = styled.div`
   } */
 `;
 
-function SelectBox({ items, className, role }) {
-  const dispatch = useDispatch();
-  const { selectBox1, selectBox2 } = useSelector(selectSearch);
-
-  const handleSelect = (e) => {
-    if (role === 'first') {
-      dispatch(
-        updateSearch({
-          selectBox1: e.target.value,
-        }),
-      );
-    } else {
-      dispatch(
-        updateSearch({
-          selectBox2: e.target.value,
-        }),
-      );
-    }
-  };
-
+function SelectBox({ items, className, selectVal, handleSelect }) {
   return (
-    <select
-      name="filter"
-      value={role === 'first' ? selectBox1 : selectBox2}
-      onChange={handleSelect}
-    >
+    <select name="filter" value={selectVal} onChange={handleSelect}>
       {items.map(([name, value], i) => (
         <option key={i} value={value}>
           {name}
@@ -119,29 +96,47 @@ function SelectBox({ items, className, role }) {
 }
 
 export default function Search({ single }) {
-  const dispatch = useDispatch();
   const navigate = useNavigate();
-  const { inputVal } = useSelector(selectSearch);
+  const location = useLocation();
 
+  const [localIpVal, setLocalIpVal] = useState('');
+  const [localSelec1, setLocalSelec1] = useState('title');
+  const [localSelec2, setLocalSelec2] = useState('All');
   const buttonEl = useRef(null);
 
+  useEffect(() => {
+    const { search_type, info_type, input_value } = QueryString.parse(
+      location.search,
+      {
+        ignoreQueryPrefix: true,
+      },
+    );
+
+    if (search_type) setLocalSelec1(search_type);
+    if (info_type) setLocalSelec2(info_type);
+    if (input_value) setLocalIpVal(input_value);
+  }, []);
+
   const handleKeyPress = (e) => {
     // e.preventDefault();
     if (e.key === 'Enter') buttonEl.current.click();
   };
 
-  const inputChange = (e) => {
-    dispatch(
-      updateSearch({
-        inputVal: e.target.value,
-      }),
-    );
+  const handleSelect1 = (e) => {
+    setLocalSelec1(e.target.value);
+  };
+
+  const handleSelect2 = (e) => {
+    setLocalSelec2(e.target.value);
   };
 
   const searchClick = (e) => {
     e.preventDefault();
-    if (!inputVal) return alert('검색어가 없습니다.');
-    navigate('/main/search');
+    if (!localIpVal) return alert('검색어가 없습니다.');
+
+    navigate(
+      `/main/search?search_type=${localSelec1}&info_type=${localSelec2}&input_value=${localIpVal}`,
+    );
   };
 
   return single ? (
@@ -180,6 +175,8 @@ export default function Search({ single }) {
     <InputContainer className="bar">
       <form>
         <SelectBox
+          handleSelect={handleSelect1}
+          selectVal={localSelec1}
           className="selet-box first"
           items={[
             ['제목', 'title'],
@@ -189,6 +186,8 @@ export default function Search({ single }) {
           role="first"
         />
         <SelectBox
+          handleSelect={handleSelect2}
+          selectVal={localSelec2}
           className="selet-box second"
           items={[
             ['전체', 'All'],
@@ -201,8 +200,8 @@ export default function Search({ single }) {
           <input
             type="search"
             placeholder="검색어를 입력하세요."
-            value={inputVal}
-            onChange={inputChange}
+            value={localIpVal}
+            onChange={(e) => setLocalIpVal(e.target.value)}
             onKeyPress={handleKeyPress}
           />
         </span>

diff --git a/client/src/pages/user/Mainpage.js b/client/src/pages/user/Mainpage.js
@@ -64,7 +64,7 @@ function Post({ post, order }) {
   const { id: postId, title, nickname, userId } = post;
 
   const handleClick = () => {
-    navigate(`main/search/${postId}`);
+    navigate(`/main/search/${postId}`);
   };
 
   return (
@@ -89,7 +89,6 @@ function List({ posts, className }) {
 }
 
 function Mainpage() {
-  const { posts } = freeBoardData; //임시
   const { accToken } = useSelector(selectUserInfo);
   const [list, setList] = useState([]);
 

diff --git a/client/src/pages/user/Post.js b/client/src/pages/user/Post.js
@@ -39,7 +39,6 @@ function Post() {
             reviews: [...info.Replies],
           }),
         );
-        //조회수는 애초에 get 요청 보내질 때 서버에서 조회수 1 더하고 응답하는 걸로...
       })
       .catch((err) => {
         alert('게시물을 불러올 수 없습니다.');

diff --git a/client/src/pages/user/PostList.js b/client/src/pages/user/PostList.js
@@ -5,7 +5,8 @@ import Pagination from '../../component/Pagination';
 import { useSelector, useDispatch } from 'react-redux';
 import { selectUserInfo } from '../../store/slices/userInfo';
 import { updateSearch, selectSearch } from '../../store/slices/search';
-import { useNavigate } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom';
+import QueryString from 'qs';
 import axios from 'axios';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faThumbsUp } from '@fortawesome/free-regular-svg-icons';
@@ -77,9 +78,16 @@ function Post({ post }) {
 function PostList() {
   const dispatch = useDispatch();
   const navigate = useNavigate();
+  const location = useLocation();
+  const { search_type, info_type, input_value } = QueryString.parse(
+    location.search,
+    {
+      ignoreQueryPrefix: true,
+    },
+  );
+
   const { accToken } = useSelector(selectUserInfo);
-  const { inputVal, selectBox1, selectBox2, page, list, totalPage } =
-    useSelector(selectSearch);
+  const { page, list } = useSelector(selectSearch);
 
   const getConfig = {
     headers: {
@@ -94,13 +102,15 @@ function PostList() {
   useEffect(() => {
     //아래 코드는 그때 그때 다시 받지 않게 함.
     if (list.length > offset) return;
+    const select1 = search_type || 'title';
+    const select2 = info_type || 'All';
 
     const params = {
-      search_type: selectBox1,
-      info_type: selectBox2,
+      search_type: select1,
+      info_type: select2,
       pages: page,
       limit: LIMIT,
-      [selectBox1]: inputVal,
+      [select1]: input_value,
     };
 
     axios
@@ -110,9 +120,11 @@ function PostList() {
       })
       .then((res) => {
         const { count, rows } = res.data.info;
+        console.log('검색 결과', res.data);
         if (count && page === 1) {
           const totalPage = Math.ceil(Number(count) / LIMIT);
           const totalMark = Math.ceil(totalPage / 10);
+
           dispatch(
             updateSearch({
               totalCount: count,
@@ -124,8 +136,8 @@ function PostList() {
         if (rows) dispatch(updateSearch({ list: [...rows] }));
       })
       .catch((err) => {
-        alert(err.response.message);
-        navigate(-1);
+        console.log('###', err);
+        // navigate(-1);
       });
   }, [page]);
 

diff --git a/client/src/store/slices/search.js b/client/src/store/slices/search.js
@@ -1,9 +1,6 @@
 import { createSlice } from '@reduxjs/toolkit';
 
 const initialState = {
-  inputVal: null,
-  selectBox1: 'title',
-  selectBox2: 'All',
   page: 1,
   mark: 1,
   totalCount: null, //삭제?

diff --git a/server/src/app.ts b/server/src/app.ts
@@ -6,8 +6,8 @@ import dotenv from 'dotenv';
 import cookieParser from 'cookie-parser';
 const indexRouter = require('./routes/index');
 import { sequelize } from './models';
-import passport from 'passport';
-const passportConfig = require('./passport/index');
+// import passport from 'passport';
+// const passportConfig = require('./passport/index');
 
 dotenv.config();