diff --git a/hustle_web/package-lock.json b/hustle_web/package-lock.json index 7358342..53d8596 100644 --- a/hustle_web/package-lock.json +++ b/hustle_web/package-lock.json @@ -22,6 +22,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.45.1", "react-icons": "^4.10.1", + "react-kakao-login": "^2.1.1", "react-query": "^3.39.3", "react-router-dom": "^6.15.0", "react-scripts": "5.0.0", @@ -20864,6 +20865,14 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==" }, + "node_modules/react-kakao-login": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/react-kakao-login/-/react-kakao-login-2.1.1.tgz", + "integrity": "sha512-t9htk41/i0zUY7q92mtqdqVZZ018BPi1DgbSVVrPCmuMKhZGJOnZ9OfaKLVPu3sn8QXbJc3dPwqKOiElpb44hQ==", + "peerDependencies": { + "react": ">= 15.3.0" + } + }, "node_modules/react-query": { "version": "3.39.3", "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", diff --git a/hustle_web/package.json b/hustle_web/package.json index 22e95f7..fc55950 100644 --- a/hustle_web/package.json +++ b/hustle_web/package.json @@ -17,6 +17,7 @@ "react-dom": "^18.2.0", "react-hook-form": "^7.45.1", "react-icons": "^4.10.1", + "react-kakao-login": "^2.1.1", "react-query": "^3.39.3", "react-router-dom": "^6.15.0", "react-scripts": "5.0.0", diff --git a/hustle_web/src/Router.tsx b/hustle_web/src/Router.tsx index 3186b5d..93034a4 100644 --- a/hustle_web/src/Router.tsx +++ b/hustle_web/src/Router.tsx @@ -7,8 +7,6 @@ import Join from './pages/Join/Join'; import Login from './pages/Login'; import SignIn from './pages/SignIn'; import MyPageMain from './pages/MyPage/MyPageMain'; -import Community from './pages/Community/CommunityPage'; -import QuestionForm from './components/Community/Question/QuestionForm'; import PostMatch from './components/FriendlyMatchPage/PostMatch/PostMatch'; import ApplyMatch from './components/FriendlyMatchPage/ApplyMatch/ApplyMatch'; import ForgotPage from './pages/Forgot/Forgotpage'; @@ -22,10 +20,11 @@ import CompetitionApply from './pages/Competition/CompetitionApply/CompetitionAp import CompetitionResultPage from './pages/Competition/CompetitionResult/CompetitionResultPage'; import CompetitionDetailResult from './pages/Competition/CompetitionDetailResult/CompetitionDetailResult'; import CompetitionInput from './pages/Competition/CompetitionInputPage/CompetitionInputPage'; -import CommunityList from './components/Community/Main/Lists'; import PostCompetition from './components/MainCompetition/PostCompetition/PostCompetition'; import CompetitionApplyForm from './components/MainCompetition/ApplyForm/CompetitionApplyForm'; import KakaoLoginRedirect from './components/Login/Kakao/KakaoLogin'; +import ClubMain from './components/Club/ClubMain'; +import ClubOpen from './components/Club/ClubOpen'; const loadingPage =
화면 로딩중...
; const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout')); @@ -61,15 +60,9 @@ const Router = () => { element={} /> } /> - } /> - } /> - } /> - } /> - }/> - } - /> + } /> + } /> + } /> } /> } /> diff --git a/hustle_web/src/components/Club/ClubList.tsx b/hustle_web/src/components/Club/ClubList.tsx new file mode 100644 index 0000000..50cb64f --- /dev/null +++ b/hustle_web/src/components/Club/ClubList.tsx @@ -0,0 +1,52 @@ +import React, { useState } from 'react'; +import { Arrow } from '../../stories/Icons/svg'; +import * as CL from './ClubListStyle'; +import { useRecoilState, useRecoilValue } from 'recoil'; +import { clubState } from '../../recoil/community'; + + +const ClubList = ({posts, loading }: any) => { + const [selectedQuestion, setSelectedQuestion] = useState(null); + const arrowButton: boolean[] = useRecoilValue(clubState); + const setArrowButton = useRecoilState(clubState)[1]; + + const handleQuestionClick = (id: any) => { + setSelectedQuestion(id); + }; + + const handleClick = (index: number) => { + const newIcons = [...arrowButton]; + newIcons[index] = !newIcons[index]; + setArrowButton(newIcons); + }; + + return ( + + {loading &&
loading...
} + + {posts.map((post: any, index: number) => ( +
+ handleQuestionClick(post.id)}> + {post.title} + handleClick(index)}> + {arrowButton[index] ? ( + + ) : ( + + )} + + +
+ {selectedQuestion === post.id && arrowButton[index] && ( + {post.detail} + )} +
+
+ ))} + + +); +}; + + +export default ClubList; \ No newline at end of file diff --git a/hustle_web/src/components/Community/Question/QuestionStyle.ts b/hustle_web/src/components/Club/ClubListStyle.ts similarity index 91% rename from hustle_web/src/components/Community/Question/QuestionStyle.ts rename to hustle_web/src/components/Club/ClubListStyle.ts index e74798f..2f2d908 100644 --- a/hustle_web/src/components/Community/Question/QuestionStyle.ts +++ b/hustle_web/src/components/Club/ClubListStyle.ts @@ -1,9 +1,7 @@ import styled from 'styled-components'; -import { Input } from '../../../stories/Inputs/Input'; import { Link } from 'react-router-dom'; -import Colors from '../../../styles/Color'; -import emoji from '../../../assets/images/competition_logoimg.png'; -import FONT from '../../../styles/Font'; +import Colors from '../../styles/Color'; +import FONT from '../../styles/Font'; export const Container = styled.div` width: 1440px; @@ -14,10 +12,6 @@ export const FirstDiv = styled.div` justify-content: space-between; `; -export const Search = styled(Input)` - align-items: center; -`; - export const preparingImg = styled.div` display: flex; justify-content: center; diff --git a/hustle_web/src/components/Club/ClubMain.tsx b/hustle_web/src/components/Club/ClubMain.tsx new file mode 100644 index 0000000..0a9f578 --- /dev/null +++ b/hustle_web/src/components/Club/ClubMain.tsx @@ -0,0 +1,91 @@ +import * as C from './ClubStyle'; +import { useState, useEffect } from 'react'; +import SportsMenu from '../SportsMenu/SportsMenu'; +import PostMatchButton from '../../components/PostMatchButton/PostMatchButton'; +import { useNavigate } from 'react-router-dom'; +import { useRecoilValue, useRecoilState } from 'recoil'; +import { getClubSelector } from '../../recoil/community'; +import ClubList from './ClubList'; +import UniversitySearch from '../SignIn/UniversitySearch'; + +const ClubMain = () => { + const navigate = useNavigate(); + const postList = useRecoilValue(getClubSelector); + const [inputValue, setInputValue] = useState(''); + // const clubList = useRecoilValue(getLectureSelector); + + // const handleInputChange = (value: string) => { + // setInputValue(value); + // }; + + const [loading, setLoading] = useState(false); + const [searchQuery, setSearchQuery] = useState(''); + const [filteredPosts, setFilteredPosts] = useState([]); // 검색 결과 저장 + const [selectedUniversity, setSelectedUniversity] = useState(''); + + function PostClick() { + navigate('/clubOpen'); + } + + const handleInputChange = (value: string) => { + setSearchQuery(value.toLowerCase()); + }; + + const searchPosts = () => { + const filter = postList.filter((post: any) => + post.title.toLowerCase().includes(searchQuery) + ); + setFilteredPosts(filter); + console.log('검색어: ', searchQuery); + }; + + const handleEnterKey = () => { + searchPosts(); + }; + + const handleUniversitySelection = (universityId: number) => { + const university = `${universityId}`; + setSelectedUniversity(university); + console.log(selectedUniversity); + }; + + useEffect(() => { + if (postList.data) { + setLoading(false); + } + }, [postList.data]); + + return ( + <> + +
+ +
+
+ +
+ + 동아리 목록 +
+ +
+
+ 0 ? filteredPosts : postList.data} loading={loading}/> +
+ + + ); +}; + +export default ClubMain; diff --git a/hustle_web/src/components/Club/ClubOpen.tsx b/hustle_web/src/components/Club/ClubOpen.tsx new file mode 100644 index 0000000..cce0034 --- /dev/null +++ b/hustle_web/src/components/Club/ClubOpen.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const ClubOpen = () => { + return ( + <> + 동아리 개설 페이지입니다. + + ) +} + +export default ClubOpen; \ No newline at end of file diff --git a/hustle_web/src/components/Club/ClubStyle.ts b/hustle_web/src/components/Club/ClubStyle.ts new file mode 100644 index 0000000..0c6be95 --- /dev/null +++ b/hustle_web/src/components/Club/ClubStyle.ts @@ -0,0 +1,21 @@ +import styled from 'styled-components'; +import FONT from '../../styles/Font'; + +import { Input } from '../../stories/Inputs/Input'; + +export const Container = styled.div` + display: flex; + justify-content: space-between; + margin-top: 5rem; +`; + +export const Div = styled.div` + display: flex; + align-items: center; + font-size: ${FONT.SIZE.BODY1}; + font-weight: ${FONT.WEIGHT.MEDIUM}; +`; + +export const Search = styled(Input)` + align-items: center; +`; diff --git a/hustle_web/src/components/Community/Club/ClubMain.tsx b/hustle_web/src/components/Community/Club/ClubMain.tsx deleted file mode 100644 index 8212f1c..0000000 --- a/hustle_web/src/components/Community/Club/ClubMain.tsx +++ /dev/null @@ -1,26 +0,0 @@ -import * as C from './ClubStyle'; -import { useState } from 'react'; -import emoji from '../../../assets/images/competition_logoimg.png' -import * as Q from '../Question/QuestionStyle'; -import MatchMenu from '../Main/MatchMenu'; - -const ClubMain = () => { - // const [inputValue, setInputValue] = useState(''); - // // const clubList = useRecoilValue(getLectureSelector); - - // const handleInputChange = (value: string) => { - // setInputValue(value); - // }; - - return ( - <> - - - - 준비중입니다 ~ - - - ); -}; - -export default ClubMain; diff --git a/hustle_web/src/components/Community/Club/ClubStyle.ts b/hustle_web/src/components/Community/Club/ClubStyle.ts deleted file mode 100644 index 8e830bd..0000000 --- a/hustle_web/src/components/Community/Club/ClubStyle.ts +++ /dev/null @@ -1,6 +0,0 @@ -import styled from 'styled-components'; -import { Input } from '../../../stories/Inputs/Input'; - -export const Search = styled(Input)` - align-items: center; -`; diff --git a/hustle_web/src/components/Community/Main/Lists.tsx b/hustle_web/src/components/Community/Main/Lists.tsx deleted file mode 100644 index 22d1cef..0000000 --- a/hustle_web/src/components/Community/Main/Lists.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import MatchLists from './MatchList'; -import ClubMain from '../Club/ClubMain'; - -const Community = () => { - if (window.location.pathname === '/community/question') - return ( -
- -
- ); - if (window.location.pathname === '/community/club') - return ( -
- -
- ); - else return <>; -} - -export default Community; \ No newline at end of file diff --git a/hustle_web/src/components/Community/Main/MainCommunity.tsx b/hustle_web/src/components/Community/Main/MainCommunity.tsx deleted file mode 100644 index afce6e7..0000000 --- a/hustle_web/src/components/Community/Main/MainCommunity.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React, { useEffect } from 'react'; -import * as S from '../../FriendlyMatchPage/MainMatch/Styles'; -import { useRecoilValue, useResetRecoilState } from 'recoil'; -import { communityMenuSelector } from '../../../recoil/community'; -import { sportSelectState, sportsMenuState } from '../../../recoil/SportsButton'; -import ClubMain from '../Club/ClubMain'; -import MatchLists from './MatchList'; - -const MainCommunity = () => { - const selectedMenu = useRecoilValue(communityMenuSelector); - const resetSportMenu = useResetRecoilState(sportsMenuState); - const resetSportSelect = useResetRecoilState(sportSelectState); - - useEffect(() => { - resetSportMenu(); - resetSportSelect(); - }, []); - - - return ( - <> - - {selectedMenu === 0 ? : } - - - ) -} - -export default MainCommunity; \ No newline at end of file diff --git a/hustle_web/src/components/Community/Main/MatchList.tsx b/hustle_web/src/components/Community/Main/MatchList.tsx deleted file mode 100644 index c4e5087..0000000 --- a/hustle_web/src/components/Community/Main/MatchList.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import MatchMenu from './MatchMenu'; -import QuestionList from '../Question/QuestionList'; - -const MatchLists = () => { - return ( - <> - - - - ) -} - -export default MatchLists; diff --git a/hustle_web/src/components/Community/Main/MatchMenu.tsx b/hustle_web/src/components/Community/Main/MatchMenu.tsx deleted file mode 100644 index 79a5809..0000000 --- a/hustle_web/src/components/Community/Main/MatchMenu.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import * as S from '../../FriendlyMatchPage/MatchMenu/Styles'; -import { useRecoilState } from 'recoil'; -import { communityMenuState } from '../../../recoil/community'; -import { menuTypes } from '../../../recoil/friendlyMatchPage/types'; - -export const MatchMenu = () => { - const [menu, setMenu] = useRecoilState(communityMenuState); - const handleClick = (id: number) => { - setMenu( - menu.map((m: menuTypes) => { - return m.id === id - ? { ...m, isSelected: true } - : { ...m, isSelected: false }; - }) - ); - }; - - return ( - - - {menu[0].isSelected ? ( - handleClick(0)}> - {menu[0].label} - - ) : ( - handleClick(0)}> - {menu[0].label} - - )} - | - {menu[1].isSelected ? ( - handleClick(1)}> - {menu[1].label} - - ) : ( - handleClick(1)}> - {menu[1].label} - - )} - - - ); -}; - -export default MatchMenu; \ No newline at end of file diff --git a/hustle_web/src/components/Community/Question/QuestionForm.tsx b/hustle_web/src/components/Community/Question/QuestionForm.tsx deleted file mode 100644 index da41acc..0000000 --- a/hustle_web/src/components/Community/Question/QuestionForm.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import * as Q from './QuestionStyle'; -import React, { useState } from 'react'; -import { useForm, SubmitHandler } from 'react-hook-form'; -import type { QuestionProps } from '../../../constants/interfaces'; -import FormRequirements from '../../../constants/FormRequirements'; -import { defaultQuestionValue } from '../../../constants/defaultFormOption'; -import axios from 'axios'; -import { useNavigate } from 'react-router-dom'; -import SportsMenu from '../../SportsMenu/SportsMenu'; -import { SportsSelector } from '../../../recoil/SportsButton'; -import { useRecoilValue } from 'recoil'; - -const { titleRequirements, contentRequirements } = FormRequirements; -const defaultValue = defaultQuestionValue; - -const QuestionForm = () => { - const navigate = useNavigate(); - const [isLoading, setIsLoading] = useState(false); - const [selectedSports, setSelectedSports] = useRecoilValue(SportsSelector); - - const { - register, - handleSubmit, - watch, - formState: { errors } - } = useForm({ - defaultValues: defaultValue - }); - - console.log(watch()); - - const onSubmitHandler: SubmitHandler = async (data) => { - console.log(data); - const formData = { - sport: selectedSports, - title: data.title, - content: data.content - }; - setIsLoading(true); - - if (!selectedSports || !data.title || !data.content) { - alert('모든 항목을 입력해주세요!'); - return; - } - - try { - const response = await axios.post('질문작성 api', formData, { - headers: { - 'Content-Type': 'application/json' - } - }); - console.log('질문 등록 성공!', response.data); - navigate('/question'); - } catch (error) { - console.log('form data fail', error); - setIsLoading(false); - alert('폼전송실패'); - } - }; - - return ( - <> - - - - [ 질문게시판 ] -
- · 제목 - - {errors.title &&
{errors.title.message}
} -
- · 내용 -
- - {errors.content &&
{errors.content.message}
} -
- 글쓰기 - - - - ); -}; - -export default QuestionForm; diff --git a/hustle_web/src/components/Community/Question/QuestionList.tsx b/hustle_web/src/components/Community/Question/QuestionList.tsx deleted file mode 100644 index 701bf5e..0000000 --- a/hustle_web/src/components/Community/Question/QuestionList.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React, { useState } from 'react'; -import { Arrow } from '../../../stories/Icons/svg'; -import * as QL from './QuestionStyle'; -import { useRecoilState, useRecoilValue } from 'recoil'; -import { questionState } from '../../../recoil/community'; -import emoji from '../../../assets/images/competition_logoimg.png' -import * as Q from '../Question/QuestionStyle'; - - -const QuestionList = () => { - // {posts, loading }: any - // const [selectedQuestion, setSelectedQuestion] = useState(null); - // const arrowButton: boolean[] = useRecoilValue(questionState); - // const setArrowButton = useRecoilState(questionState)[1]; - - // const handleQuestionClick = (id: any) => { - // setSelectedQuestion(id); - // }; - - // const handleClick = (index: number) => { - // const newIcons = [...arrowButton]; - // newIcons[index] = !newIcons[index]; - // setArrowButton(newIcons); - // }; - - return ( - - {/* {loading &&
loading...
} - - {posts.map((post: any, index: number) => ( -
- handleQuestionClick(post.id)}> - {post.title} - handleClick(index)}> - {arrowButton[index] ? ( - - ) : ( - - )} - - -
- {selectedQuestion === post.id && arrowButton[index] && ( - {post.detail} - )} -
-
- ))} - */} - - - 준비중입니다 ~ - - -); -}; - - -export default QuestionList; diff --git a/hustle_web/src/components/Community/Question/QuestionMain.tsx b/hustle_web/src/components/Community/Question/QuestionMain.tsx deleted file mode 100644 index a365ec2..0000000 --- a/hustle_web/src/components/Community/Question/QuestionMain.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { useEffect, useState } from 'react'; -import * as Q from './QuestionStyle'; -import { useRecoilValue, useRecoilState } from 'recoil'; -import { getQuestionSelector } from '../../../recoil/community'; -import QuestionList from './QuestionList'; - -const QuestionMain = () => { - const postList = useRecoilValue(getQuestionSelector); - const [isDetailVisible, setIsDetailVisible] = useState(false); - const [selectedQuestion, setSelectedQuestion] = useState(null); - const [loading, setLoading] = useState(false); - const [searchQuery, setSearchQuery] = useState(''); - const [filteredPosts, setFilteredPosts] = useState([]); // 검색 결과 저장 - - // 검색어 기능 - const handleInputChange = (value: string) => { - setSearchQuery(value.toLowerCase()); - }; - - const searchPosts = () => { - const filter = postList.filter((post: any) => - post.title.toLowerCase().includes(searchQuery) - ); - setFilteredPosts(filter); - console.log('검색어: ', searchQuery); - }; - - const handleEnterKey = () => { - searchPosts(); - }; - - const handleDetailClick = () => { - setIsDetailVisible(!isDetailVisible); - }; - - const handleQuestionClick = (id: any) => { - setSelectedQuestion(id); - }; - - useEffect(() => { - if (postList.data) { - setLoading(false); - } - }, [postList.data]); - - return ( - <> - -
- -
- - [ 질문 게시판 ] - - 글쓰기 - - - {/*
- 0 ? filteredPosts : postList.data} loading={loading}/> -
*/} - - - ); -}; - -export default QuestionMain; diff --git a/hustle_web/src/components/Header/index.tsx b/hustle_web/src/components/Header/index.tsx index 3178715..1ccadb7 100644 --- a/hustle_web/src/components/Header/index.tsx +++ b/hustle_web/src/components/Header/index.tsx @@ -55,8 +55,8 @@ const Header = () => { 대회 navigate('/friendly')}>교류전 - navigate('/community')}> - 커뮤니티 + navigate('/club')}> + 동아리 navigate('/ranking')}>순위 diff --git a/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx b/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx index b344f8a..cceb86c 100644 --- a/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx +++ b/hustle_web/src/components/Login/Kakao/KakaoLogin.tsx @@ -1,37 +1,29 @@ import axios from 'axios'; -import { useEffect } from 'react'; +import { useEffect,useContext } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { AuthContext } from '../../Auth/AuthProvider'; + + +const KakaoLoginRedirect = () => { + const navigate = useNavigate(); + const { setIsLoggedIn } = useContext(AuthContext); -const kakaoLogin = () => { useEffect(() => { const code = new URL(window.location.href).searchParams.get('code'); - const grantType = 'authorization_code'; - const REST_API_KEY = process.env.REACT_API_KEY; - const REDIRECT_URI = process.env.REDIRECT_URI; - - axios.post( - `https://kauth.kakao.com/oauth/token?grant_type=${grantType}&client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&code=${code}`, - {}, - { headers: { 'Content-type': 'application/x-www-form-urlencoded;charset=utf-8' }} - ) - .then((res) => { - console.log(res); - const accessToken = res.data.accessToken; - axios.post('https://api.sport-hustle.com/api/auth/signin/oauth', - {}, - { - headers : { - Authorization : `Bearer ${accessToken}`, - 'Content-type' : 'application/x-www-form-urlencoded;charset=utf-8', - } - }) - .then((res: any) => { - console.log('seconde : ', res.data.accessToken); - }) + axios.get(`https://api.sport-hustle.com/api/oauth/kakao/token?code=${code}`, { + headers : {'Content-Type' : 'application/json;charset=utf-8'}, }) - .catch((error) => { - console.log(error); + .then((res) => { + console.log('코드 전송 성공', res); + // localStorage.setItem('token : ',res.headers.authorization) + localStorage.setItem('카카오 토큰', res.data.accessToken); + setIsLoggedIn(true); + navigate('/'); + }).catch((error) => { + console.log('코드 전송 실패', error); }) - },[]) + },[setIsLoggedIn, navigate]); + return (
@@ -40,4 +32,4 @@ const kakaoLogin = () => { ); }; -export default kakaoLogin; \ No newline at end of file +export default KakaoLoginRedirect; \ No newline at end of file diff --git a/hustle_web/src/components/Login/Login.tsx b/hustle_web/src/components/Login/Login.tsx index 1ad4133..05f406a 100644 --- a/hustle_web/src/components/Login/Login.tsx +++ b/hustle_web/src/components/Login/Login.tsx @@ -7,8 +7,6 @@ import { defaultLoginValue } from '../../constants/defaultFormOption'; import FormRequirements from '../../constants/FormRequirements'; import axios from 'axios'; import { AuthContext } from '../Auth/AuthProvider'; -import { userAtom } from '../../recoil/login/login'; -import { useRecoilState } from 'recoil'; const { idRequirements, passwordRequirements } = FormRequirements; const defaultValue = defaultLoginValue; @@ -73,14 +71,14 @@ const LoginMain = () => { } }; - const kakaoLoginHandler = () => { - const REST_API_KEY = process.env.REACT_API_KEY; - const REDIRECT_URL = process.env.REDIRECT_URI; - const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code` + + const REST_API_KEY = '170a8a097251697cc023f05857280065'; + const REDIRECT_URL = 'http://localhost:3000/kakaoLogin'; + const kakaoUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URL}&response_type=code`; - window.location.href = kakaoUrl; - - } + const kakaoLoginHandler = () => { + window.location.href = kakaoUrl; + } return ( diff --git a/hustle_web/src/components/SignIn/Styles.ts b/hustle_web/src/components/SignIn/Styles.ts index bfadc6f..3ce9cea 100644 --- a/hustle_web/src/components/SignIn/Styles.ts +++ b/hustle_web/src/components/SignIn/Styles.ts @@ -174,3 +174,8 @@ export const NameText = styled.text` export const AddressText = styled.text` font-size: ${FONT.SIZE.CAPTION}; `; + +export const SelectBox = styled.div` + display: flex; + weight: 50%; +`; diff --git a/hustle_web/src/components/SignIn/UniversitySearch.tsx b/hustle_web/src/components/SignIn/UniversitySearch.tsx index ef7c0b1..39cfbca 100644 --- a/hustle_web/src/components/SignIn/UniversitySearch.tsx +++ b/hustle_web/src/components/SignIn/UniversitySearch.tsx @@ -4,15 +4,12 @@ import { useState, useEffect } from 'react'; import { UniversityProps } from '../../constants/interfaces'; import Select from 'react-select'; + // interface UniversitySearchProps { // onSelectUniversity: (universityName: string) => void; // } -const UniversitySearch = ({ - onSelecteUniversity -}: { - onSelecteUniversity: (UniversityId: number) => void; -}) => { +const UniversitySearch = ({ onSelecteUniversity }: {onSelecteUniversity : (UniversityId : number) => void}) => { const [universityList, setUniversityList] = useState([]); const [searchQuery, setSearchQuery] = useState(''); // 검색어 상태 추가 const [selectedId, setSelectedId] = useState(0); @@ -20,9 +17,7 @@ const UniversitySearch = ({ const handleSearchUniversity = async () => { // setUniversityList(dummyUniversityData); try { - const response = await axios.get( - `https://api.sport-hustle.com/api/university?keyword=${searchQuery}` - ); + const response = await axios.get(`https://api.sport-hustle.com/api/university?keyword=${searchQuery}`); setUniversityList(response.data.universities); } catch (error) { console.error('대학교 검색 오류:', error); @@ -30,19 +25,12 @@ const UniversitySearch = ({ } }; - const options = universityList.map((university) => ({ - value: university.id, - label: university.name - })); - - // const handleUniversitySelection = (universityId: number) => { - // const selectedUniversity = universityList.find(university => university.id === universityId); - - // if(selectedUniversity){ - // setSearchQuery(selectedUniversity.name); // 선택된 대학교 이름을 검색창에 표시 - // onSelecteUniversity(selectedUniversity.id); // 선택된 대학교 이름을 부모 컴포넌트로 전달 - // } - // }; + const options = universityList.length > 0 + ? universityList.map((university) => ({ + value: university.id, + label: university.name, + })) + : []; const handleUniversitySelection = (selectedOption: any) => { if (selectedOption) { @@ -52,58 +40,23 @@ const UniversitySearch = ({ }; useEffect(() => { - handleSearchUniversity(); - }); + if (searchQuery) { + handleSearchUniversity(); + } + }, [searchQuery]); return ( <> 소속 대학교 - {/* ) => { - setSearchQuery(e.target.value); - }} - /> */} {universityList.length > 0 && ( +