Feat/#139

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",

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 = <div>화면 로딩중...</div>;
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'));
@@ -61,15 +60,9 @@ const Router = () => {
               element={<CompetitionApplyForm />}
             />
             <Route path='/mypage' element={<MyPageMain />} />
-            <Route path='/community' element={<Community />} />
-            <Route path='/community/club' element={<CommunityList />} />
-            <Route path='/join' element={<Join />} />
-            <Route path='/community/question' element={<CommunityList />} />
-            <Route path='/community' element={<Community/>}/>
-            <Route
-              path='/community/question/write'
-              element={<QuestionForm />}
-            />
+            <Route path='/club' element={<ClubMain />} />
+            <Route path='/clubOpen' element={<ClubOpen />} />
+
             <Route path='/friendly' element={<FriendlyMatch />} />
             <Route path='/friendly/invite' element={<FriendlyLists />} />
             <Route path='/friendly/match' element={<FriendlyLists />} />

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 (
+    <CL.listLayout>
+    {loading && <div>loading...</div>}
+    <CL.listContainer>
+      {posts.map((post: any, index: number) => (
+        <div key={post.id}>
+          <CL.Box onClick={() => handleQuestionClick(post.id)}>
+            <CL.List>{post.title}</CL.List>
+            <CL.IconWrap onClick={() => handleClick(index)}>
+              {arrowButton[index] ? (
+                <Arrow transform='rotate(180)' />
+              ) : (
+                <Arrow />
+              )}
+            </CL.IconWrap>
+          </CL.Box>
+          <div>
+            {selectedQuestion === post.id && arrowButton[index] && (
+              <CL.detail>{post.detail}</CL.detail>
+            )}
+          </div>
+        </div>
+      ))}
+    </CL.listContainer>
+  </CL.listLayout>
+);
+};
+
+
+export default ClubList;

hustle_web/src/components/Community/Question/QuestionStyle.ts → 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;

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 (
+    <>
+      <SportsMenu/>
+      <div>
+          <C.Search
+            size='small'
+            type='text'
+            value={searchQuery}
+            onChange={handleInputChange}
+            onEnter={handleEnterKey}
+            placeholder='궁금한 정보를 입력하세요'
+          />
+        </div>
+        <div>
+          <UniversitySearch onSelecteUniversity={handleUniversitySelection} />
+        </div>
+      <C.Container>
+        <C.Div>동아리 목록</C.Div>
+        <div>
+      <PostMatchButton
+        type='small'
+        label='동아리 개설'
+        onClick={PostClick}
+      />
+      </div>
+      <div>
+        <ClubList posts={filteredPosts.length > 0 ? filteredPosts : postList.data} loading={loading}/>
+      </div>
+      </C.Container>
+  </>
+  );
+};
+
+export default ClubMain;

hustle_web/src/components/Club/ClubOpen.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const ClubOpen = () => {
+  return (
+    <>
+      동아리 개설 페이지입니다.
+    </>
+  )
+}
+
+export default ClubOpen;

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;
+`;