From 075bb03282060abf9ee9fa233c07e94a77835788 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=A1=ED=95=98=EC=9D=80?= Date: Sat, 20 May 2023 11:19:55 +0900 Subject: [PATCH 1/5] =?UTF-8?q?fix:=20=ED=9A=8C=EC=9B=90=EA=B0=80=EC=9E=85?= =?UTF-8?q?=20=EC=98=88=EC=99=B8=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/pages/SignUp.tsx | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/client/src/pages/SignUp.tsx b/client/src/pages/SignUp.tsx index c63e0a0c..3849f385 100644 --- a/client/src/pages/SignUp.tsx +++ b/client/src/pages/SignUp.tsx @@ -1,7 +1,7 @@ import styled from "styled-components"; import { useState } from "react"; import { useNavigate, Link } from "react-router-dom"; -import axios from "axios"; +import { eduApi } from "../apis/EduApi"; import logo from "../assets/edusync-logo.png"; import GoogleButton from "../components/social-login-button/GoogleButton"; import KakaoButton from "../components/social-login-button/KakaoButton"; @@ -39,20 +39,16 @@ const SignUp = () => { alert("닉네임과 이메일, 패스워드를 모두 입력해주세요!"); else if (emailTest(email) === false) alert("이메일 형식이 잘못되었습니다."); else { - axios - .post(`${import.meta.env.VITE_APP_API_URL}/members`, { + eduApi + .post(`/members`, { email, password, nickName, }) .then(() => navigate("/login")) .catch((error) => { - //if (error?.response?.error === "Internal Server Error") { - // console.log(error.response.data.message); - // alert("이미 가입된 이메일 입니다."); - //} else { - console.log(error); - // } + if (error.response.data.message === "이메일이 이미 존재") + alert("이미 가입된 이메일 입니다."); }) .finally(() => {}); } From b579f446dc9b28e75db779085b1490563253159a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=A1=ED=95=98=EC=9D=80?= Date: Sat, 20 May 2023 11:20:38 +0900 Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=ED=86=A0=ED=81=B0=20=EC=9E=AC?= =?UTF-8?q?=EB=B0=9C=EA=B8=89=20=EC=98=88=EC=99=B8=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/hooks/useRefreshToken.ts | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/client/src/hooks/useRefreshToken.ts b/client/src/hooks/useRefreshToken.ts index 24a7dfd8..9049cc5c 100644 --- a/client/src/hooks/useRefreshToken.ts +++ b/client/src/hooks/useRefreshToken.ts @@ -22,7 +22,10 @@ function useRefreshToken() { setFetched(true); navigate("/login"); } - if (isLoginState && (refreshToken === null || refreshToken === "undefined")) { + if ( + isLoginState && + (refreshToken === null || refreshToken === "undefined") + ) { removeTokens(); setIsLoggedIn(false); setFetched(true); @@ -37,10 +40,19 @@ function useRefreshToken() { .then((res) => { tokenRequestApi.setAccessToken(res.headers.authorization); setFetched(true); + }) + .catch((err) => { + if (err.response.status > 299) { + removeTokens(); + setIsLoggedIn(false); + setFetched(true); + navigate("/login"); + alert("토큰이 만료되었습니다. 재로그인을 시도해주세요!"); + } }); } }, []); return fetched; } -export default useRefreshToken; \ No newline at end of file +export default useRefreshToken; From 0456e5398836bfcf768843a46ab637d29b2dbde8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=A1=ED=95=98=EC=9D=80?= Date: Sat, 20 May 2023 11:43:20 +0900 Subject: [PATCH 3/5] =?UTF-8?q?design:=20gnb=EC=9D=98=20user=20item=20widt?= =?UTF-8?q?h=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/gnb/GNB.tsx | 2 +- client/src/components/gnb/User.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/client/src/components/gnb/GNB.tsx b/client/src/components/gnb/GNB.tsx index c51fe7be..a1456018 100644 --- a/client/src/components/gnb/GNB.tsx +++ b/client/src/components/gnb/GNB.tsx @@ -81,7 +81,7 @@ const GNBDiv = styled.div` `; const GNBBlock = styled.div` - width: 150px; + width: 200px; display: flex; `; const GNBMenuBlock = styled(GNBBlock)` diff --git a/client/src/components/gnb/User.tsx b/client/src/components/gnb/User.tsx index 68c1b550..c9bf7acd 100644 --- a/client/src/components/gnb/User.tsx +++ b/client/src/components/gnb/User.tsx @@ -61,7 +61,7 @@ const User = ({ profileImage, isLoggedIn, setIsLoggedIn }: GNB) => { const UserDiv = styled.div` display: flex; justify-content: flex-end; - width: 150px; + width: 200px; button { margin-left: 7px; color: #2759a2; From fed01b52927d3115ca1fe8733477bde38698a1c0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=A1=ED=95=98=EC=9D=80?= Date: Sat, 20 May 2023 21:21:20 +0900 Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=ED=83=9C=EA=B7=B8=20=EC=83=9D?= =?UTF-8?q?=EC=84=B1=20=EA=B8=B0=EB=8A=A5(=ED=81=B4=EB=A6=AD=20&=20?= =?UTF-8?q?=EC=A7=81=EC=A0=91=EC=9E=85=EB=A0=A5)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/StudyListTag.tsx | 26 ++++++++++++++ client/src/components/TagDropdown.tsx | 37 +++++++++++++++++--- client/src/components/TagInput.tsx | 48 +++++++++++++++++++++++--- 3 files changed, 102 insertions(+), 9 deletions(-) create mode 100644 client/src/components/StudyListTag.tsx diff --git a/client/src/components/StudyListTag.tsx b/client/src/components/StudyListTag.tsx new file mode 100644 index 00000000..94260e5a --- /dev/null +++ b/client/src/components/StudyListTag.tsx @@ -0,0 +1,26 @@ +import styled from "styled-components"; + +const StudyListTag = ({ children }: { children: React.ReactNode }) => { + return ( + <> + {children} + + ); +}; + +const StudyTag = styled.div` + height: 24px; + color: #39739d; + font-size: 0.8125rem; + border-radius: 4px; + background-color: #e1ecf4; + padding: 2px 6px 5px 6px; + margin-left: 7px; + cursor: pointer; +`; +export default StudyListTag; +//width: 260px; +//padding-top: 10px; +//display: flex; +//justify-content: flex-end; +//align-items: center; diff --git a/client/src/components/TagDropdown.tsx b/client/src/components/TagDropdown.tsx index 25a09c82..3fcb1666 100644 --- a/client/src/components/TagDropdown.tsx +++ b/client/src/components/TagDropdown.tsx @@ -1,8 +1,37 @@ -const TagDropdown = ({ tags }: { tags: string }) => { +import styled from "styled-components"; + +const TagDropdown = ({ + defaultTags, + tags, + setTags, +}: { + defaultTags: string[]; + tags: string[]; + setTags: React.Dispatch>; +}) => { + const handleTagClick = (item: string) => { + if (tags.includes(item)) { + alert("이미 존재하는 태그입니다."); + } else { + setTags([...tags, item]); + } + }; return ( - <> -
  • {tags}
    • - + + {defaultTags.map((defaultTag) => { + return ( +
  • handleTagClick(defaultTag)} key={defaultTag}> + {defaultTag} +
    • + ); + })} +     ); }; +const TagLiDiv = styled.div` + list-style-type: none; + background-color: white; + border-radius: 5px; + padding: 5px 15px; +`; export default TagDropdown; diff --git a/client/src/components/TagInput.tsx b/client/src/components/TagInput.tsx index fa597e68..acf60f1c 100644 --- a/client/src/components/TagInput.tsx +++ b/client/src/components/TagInput.tsx @@ -2,32 +2,58 @@ import { useEffect, useState } from "react"; import TagDropdown from "./TagDropdown"; import { StudyInfoDto } from "../apis/StudyGroupApi"; import { eduApi } from "../apis/EduApi"; +import StudyListTag from "./StudyListTag"; const TagInput = ({ selectedCategory }: { selectedCategory: string }) => { const [view, setView] = useState(false); - const [tag, setTag] = useState<{ [key: string]: string }>({}); + const [defaultTag, setDefaultTag] = useState<{ [key: string]: string }>({}); + const [createdTag, setCreatedTag] = useState(""); + const [tags, setTags] = useState([]); + + const handleTag = (e: React.ChangeEvent) => { + setCreatedTag(e.target.value); + }; + + const handleTagPost = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + e.preventDefault(); + if (tags.includes(createdTag)) { + alert("이미 존재하는 태그입니다."); + } else if (createdTag) { + setTags([...tags, createdTag]); + setCreatedTag(""); + } + } + }; useEffect(() => { setView(false); + setTags([]); + setCreatedTag(""); const fetchData = async () => { try { const response = await eduApi.get( `/search?key=${selectedCategory}` ); const result = response.data.tags; - setTag(result); + setDefaultTag(result); } catch (error) { console.log(error); } }; fetchData(); - }, []); + }, [selectedCategory]); return ( <> - +
      { @@ -35,9 +61,21 @@ const TagInput = ({ selectedCategory }: { selectedCategory: string }) => { }} > {selectedCategory} {view ? "⌃" : "⌄"} - {view && tag && } + {view && defaultTag && ( + + )}
    +
    + {tags.map((tag) => { + return {tag}; + })} +
    ); }; + export default TagInput; From 81cedf02316dd0918fd2e96ef4d9ecdab2ef36ab Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=86=A1=ED=95=98=EC=9D=80?= Date: Sat, 20 May 2023 23:01:38 +0900 Subject: [PATCH 5/5] =?UTF-8?q?feat:=20=ED=83=9C=EA=B7=B8=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C=20=EA=B8=B0=EB=8A=A5=20&=20StudyPost=EC=97=90=20?= =?UTF-8?q?=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- client/src/components/StudyListTag.tsx | 26 ------------------- client/src/components/TagDropdown.tsx | 3 +++ client/src/components/TagInput.tsx | 35 ++++++++++++++++++++++---- client/src/pages/StudyPost.tsx | 18 ++++++++++--- 4 files changed, 48 insertions(+), 34 deletions(-) delete mode 100644 client/src/components/StudyListTag.tsx diff --git a/client/src/components/StudyListTag.tsx b/client/src/components/StudyListTag.tsx deleted file mode 100644 index 94260e5a..00000000 --- a/client/src/components/StudyListTag.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import styled from "styled-components"; - -const StudyListTag = ({ children }: { children: React.ReactNode }) => { - return ( - <> - {children} - - ); -}; - -const StudyTag = styled.div` - height: 24px; - color: #39739d; - font-size: 0.8125rem; - border-radius: 4px; - background-color: #e1ecf4; - padding: 2px 6px 5px 6px; - margin-left: 7px; - cursor: pointer; -`; -export default StudyListTag; -//width: 260px; -//padding-top: 10px; -//display: flex; -//justify-content: flex-end; -//align-items: center; diff --git a/client/src/components/TagDropdown.tsx b/client/src/components/TagDropdown.tsx index 3fcb1666..df124c7f 100644 --- a/client/src/components/TagDropdown.tsx +++ b/client/src/components/TagDropdown.tsx @@ -33,5 +33,8 @@ const TagLiDiv = styled.div` background-color: white; border-radius: 5px; padding: 5px 15px; + cursor: pointer; + margin-top: 5px; + font-size: 0.7rem; `; export default TagDropdown; diff --git a/client/src/components/TagInput.tsx b/client/src/components/TagInput.tsx index acf60f1c..5bd078dd 100644 --- a/client/src/components/TagInput.tsx +++ b/client/src/components/TagInput.tsx @@ -1,15 +1,22 @@ import { useEffect, useState } from "react"; +import styled from "styled-components"; import TagDropdown from "./TagDropdown"; import { StudyInfoDto } from "../apis/StudyGroupApi"; import { eduApi } from "../apis/EduApi"; -import StudyListTag from "./StudyListTag"; -const TagInput = ({ selectedCategory }: { selectedCategory: string }) => { +const TagInput = ({ + selectedCategory, + tags, + setTags, +}: { + selectedCategory: string; + tags: string[]; + setTags: React.Dispatch>; +}) => { const [view, setView] = useState(false); const [defaultTag, setDefaultTag] = useState<{ [key: string]: string }>({}); const [createdTag, setCreatedTag] = useState(""); - const [tags, setTags] = useState([]); const handleTag = (e: React.ChangeEvent) => { setCreatedTag(e.target.value); @@ -27,6 +34,11 @@ const TagInput = ({ selectedCategory }: { selectedCategory: string }) => { } }; + const handleDelete = (tag: string) => { + const updatedTags = tags.filter((clickedTag) => clickedTag !== tag); + setTags(updatedTags); + }; + useEffect(() => { setView(false); setTags([]); @@ -71,11 +83,24 @@ const TagInput = ({ selectedCategory }: { selectedCategory: string }) => {
    {tags.map((tag) => { - return {tag}; + return ( + handleDelete(tag)} key={tag}> + {tag} + + ); })}
    ); }; - +const StudyTag = styled.div` + height: 24px; + color: #39739d; + font-size: 0.8125rem; + border-radius: 4px; + background-color: #e1ecf4; + padding: 2px 6px 5px 6px; + margin-right: 7px; + cursor: pointer; +`; export default TagInput; diff --git a/client/src/pages/StudyPost.tsx b/client/src/pages/StudyPost.tsx index 0a5ebdd9..a862245d 100644 --- a/client/src/pages/StudyPost.tsx +++ b/client/src/pages/StudyPost.tsx @@ -18,6 +18,7 @@ const StudyPost = () => { const [memberCountMin, setMemberCountMin] = useState(1); const [memberCountMax, setMemberCountMax] = useState(1); const [platform, setPlatform] = useState(""); + const [tags, setTags] = useState([]); const [introduction, setIntroduction] = useState(""); const [selectedCategory, setSelectedCategory] = useState("프론트엔드"); @@ -64,8 +65,7 @@ const StudyPost = () => { platform, introduction, tags: { - 백엔드: "javascript", - 프론트엔드: "javascript", + [selectedCategory]: tags, }, }; @@ -176,7 +176,11 @@ const StudyPost = () => { 태그 - + @@ -273,6 +277,14 @@ const StudyPostInfo = styled.form` p { padding: 0 10px; } + ul { + margin: 0 20px; + padding: 7px; + border-radius: 5px; + cursor: pointer; + background-color: #e9e9e9; + font-size: 0.8rem; + } `; const StudyPostInput = styled.div`