club detail page selected tab 로직 분리

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "editor.tabSize": 2,
+  "editor.detectIndentation": false
+}

server/models/Club.js

@@ -45,21 +45,13 @@ const clubSchema = mongoose.Schema({
     views: {
         type: Number,
         default: 0
-    }
-    // managers: [{
-    //     type: userSchema,
-    //     ref: "User"
-    // }],
-    // useCertificate: {
-    //     type: Boolean,
-    // },
-    // alumni: {
-    //     type: User[],
-    // },
+    },
+    recruits: [{
+        type: mongoose.Schema.Types.ObjectId,
+        ref: 'Recruit'
+    }]
 })  
 
-// add gender ratio?
-
 const Image = mongoose.model('Image', imageSchema); 
 const Club = mongoose.model('Club', clubSchema)
 module.exports = {

server/models/Recruit.js

@@ -0,0 +1,30 @@
+const mongoose = require("mongoose");
+
+const recruitSchema = mongoose.Schema({
+  club: {
+    type: mongoose.Schema.Types.ObjectId,
+    ref: "Club",
+  },
+  title: {
+    type: String,
+    required: true,
+  },
+  startDate: {
+    type: Date,
+  },
+  endDate: {
+    type: Date,
+  },
+  contact: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+  },
+});
+
+const Recruit = mongoose.model("Recruit", recruitSchema);
+module.exports = {
+  Recruit,
+};

server/routes/clubs.js

@@ -2,6 +2,7 @@ const express = require("express");
 const router = express.Router();
 const { Club, Image } = require("../models/Club");
 const { User } = require("../models/User");
+const { Recruit } = require("../models/Recruit");
 
 // use for image upload
 const fs = require("fs");
@@ -39,7 +40,6 @@ router.post("/", upload_club.array("photos"), async (req, res) => {
     status: req.body.status,
   });
 
-  // console.log(req.files);
   for (let image of req.files) {
     let obj = {
       img: {
@@ -48,18 +48,19 @@ router.post("/", upload_club.array("photos"), async (req, res) => {
         ),
         contentType: "image/png",
       },
-      club: club,
+      club: club._id,
     };
 
     const newImage = new Image(obj);
     newImage.save();
     club.photos.push(newImage);
   }
-  club.save((err, club) => {
+  club.save((err, _) => {
+    // success response로 club까지 리턴하면 너무 오래 지연되어 server error 발생
     if (err) return res.json({ success: false, err });
     return res.status(200).json({
       success: true,
-      club,
+      // club,
     });
   });
 });
@@ -174,15 +175,15 @@ router.post("/:clubId/like/:userId", async (req, res) => {
     const club = await Club.findById(req.params.clubId);
     const user = await User.findById(req.params.userId);
     if (user.likedClubs.some((cid) => cid.toString() === club.id)) {
-      console.log("already exists...");
+      // console.log('already exists...')
       user.likedClubs = user.likedClubs.filter(
         (cid) => cid.toString() !== club.id
       );
       club.likedUsers = club.likedUsers.filter(
         (uid) => uid.toString() !== user._id.toString()
       );
     } else {
-      console.log("new like!");
+      // console.log('new like!')
       user.likedClubs.push(club);
       club.likedUsers.push(user);
     }
@@ -195,8 +196,42 @@ router.post("/:clubId/like/:userId", async (req, res) => {
   }
 });
 
-router.get("/info", function (req, res) {
-  res.send("clubs info");
+// 모집공고 등록
+router.post("/:clubId/recruit", async (req, res) => {
+  try {
+    const recruit = new Recruit({
+      ...req.body,
+      club: req.params.clubId,
+    });
+    const club = await Club.findById(req.params.clubId);
+
+    recruit.save((err, recruit) => {
+      if (err) return res.json({ success: false, err });
+      club.recruits.push(recruit);
+      club.save();
+      return res.status(200).json({
+        success: true,
+        recruit,
+      });
+    });
+  } catch (err) {
+    res.status(400).json({ success: false, err });
+  }
+});
+
+router.get("/:clubId/recruit", async (req, res) => {
+  try {
+    Club.findById(req.params.clubId)
+      .populate("recruits")
+      .exec((err, recruits) => {
+        res.status(200).json({
+          success: true,
+          recruits,
+        });
+      });
+  } catch (err) {
+    res.status(400).json({ success: false, err });
+  }
 });
 
 module.exports = router;

src/components/Config.js

@@ -1,4 +1,4 @@
-export const USER_SERVER = '/api/users';
-export const CLUB_SERVER = '/api/clubs';
-export const SEARCH_SERVER = '/api/search';
-export const COMMENT_SERVER = '/api/comment';
+export const USER_SERVER = "/api/users";
+export const CLUB_SERVER = "/api/clubs";
+export const SEARCH_SERVER = "/api/search";
+export const COMMENT_SERVER = "/api/comment";

src/components/pages/ClubDetailPage/index.tsx

@@ -17,6 +17,7 @@ import { AuthResponse } from 'api/auth';
 import CommentList from '../../templates/CommentList';
 import StoryList from 'components/templates/StoryList';
 import ClubIntro from 'components/templates/ClubIntro';
+import RecruitNotice from 'components/templates/RecruitNotice';
 
 const Root = styled.div`
     margin: 36px 144px;
@@ -96,12 +97,7 @@ interface ClubInfoRouterProps {
 }
 
 const ClubDetailPage: FC<Props & RouteComponentProps<ClubInfoRouterProps>> = ({ match, user, history }) => {
-    const [selectedTab, setSelectedTab] = useState<T.TabItem>(
-        match.params.tab === 'story' ? 'STORY' as T.TabItem : 
-        match.params.tab === 'qna'? 'QNA' as T.TabItem : 
-        match.params.tab === 'recruitment'? 'RECRUIT_NOTICE' as T.TabItem : 
-        'CLUB_INTRO' as T.TabItem
-        );
+    const [selectedTab, setSelectedTab] = useState<T.TabItem>('CLUB_INTRO');
     const [likeImg, setLikeImg] = useState<boolean>(false);
     const [likeCount, setLikeCount] = useState<number>(0);
 
@@ -110,12 +106,19 @@ const ClubDetailPage: FC<Props & RouteComponentProps<ClubInfoRouterProps>> = ({
 
     useEffect(() => {
         dispatch(fetchClub.request({ id: match.params.id }));
-        console.log(match.params.tab)
-    }, [match.params.id]);
+        const tabItem = Object.entries(T.ClubDetailTab).find(([key, value]) => {
+          if (value.path === match.params.tab) return key;
+        });
+        tabItem && setSelectedTab(tabItem[0] as T.TabItem);
+    }, [match.params]);
+
+    useEffect(() => {
+      console.log(selectedTab);
+    }, [selectedTab])
 
     useEffect(() => {
         if(fetchedData && user) {
-            const club = fetchedData!.club;
+            const club = fetchedData.club;
             if (user.likedClubs && user.likedClubs.some(cid => cid === club._id)) {
                 setLikeImg(true);
             }
@@ -124,76 +127,75 @@ const ClubDetailPage: FC<Props & RouteComponentProps<ClubInfoRouterProps>> = ({
         }
     }, [user, fetchedData])
 
-    if (fetchedData === null || user === null) {
-        return <Loading />
-    } else {
-        const club = fetchedData!.club;
-        const handleTabClick: (type: keyof typeof  T.ClubDetailTab, path: string) => void = (type, path) => {
-            setSelectedTab(type);
-            history.push(`/club/${club._id}${path}`)
-        };
-
-        const isSelectedTab: (type: T.TabItem) => boolean = (type) => {
-            return selectedTab === type;
-        }
+    const club = fetchedData?.club;
 
+    const handleTabClick: (type: keyof typeof T.ClubDetailTab, path: string) => void = (type, path) => {
+        if (!club) return;
+        setSelectedTab(type);
+        history.push(`/club/${club._id}/${path}`)
+    };
 
-        const handleLike: () => void = async () => {
-            if(user!.isAuth) {
-                dispatch(likeClub.request({ cludId: club._id, userId: user!._id, setLikeImg, likeImg, setLikeCount, likeCount}));
-            } else {
-                alert('로그인해주세요')
-            }
+    const isSelectedTab: (type: T.TabItem) => boolean = (type) => {
+        return selectedTab === type;
+    }
+
+    const handleLike: () => void = async () => {
+        if (!user || !club) return;
+        if (user.isAuth) {
+            dispatch(likeClub.request({ cludId: club._id, userId: user._id, setLikeImg, likeImg, setLikeCount, likeCount}));
+        } else {
+            alert('로그인해주세요')
         }
+    }
 
-        const menuItems: ReactNode =  
-            Object.entries(T.ClubDetailTab).map(([key, value]) => {
-                return (
-                    <ClubDetailMenuItem 
-                        key={key}
-                        isSelected={isSelectedTab(key as T.TabItem)} 
-                        onClick={() => handleTabClick(key as T.TabItem, value.path) }
-                    >
-                        {value.name}
-                    </ClubDetailMenuItem>
-                );
-            })
-
-        return club ? (
-            <Root>
-                <BoldLargeText>{club.name}</BoldLargeText>
-                <TopWrapper>
-                    <IconTagWrapper>
-                        <IconCountWrapper>
-                            <Icon src={likeImg ? likeFilledSvg : likeEmptySvg} onClick={() => handleLike()} />
-                            <IconCount>{likeCount}</IconCount>
-                            <Icon src={eyesSvg} />
-                            <IconCount>{club.views}</IconCount>
-                        </IconCountWrapper>
-                        <TagWrapper>
-                            {/* array.map으로 전환 필요*/}  
-                            <TagText>#학회</TagText>
-                            <TagText>#생명과학</TagText>
-                            <TagText>#화학</TagText>
-                            <TagText>#논문읽기</TagText>
-                        </TagWrapper>
-                    </IconTagWrapper>
-                    <ClubDetailMenuWrapper>
-                        {menuItems}
-                    </ClubDetailMenuWrapper>
-                </TopWrapper>
-                { selectedTab === 'CLUB_INTRO' as T.TabItem &&
-                    <ClubIntro club={club}/>
-                }
-                { selectedTab === 'QNA' as T.TabItem &&
-                    <CommentList user={user} clubId={club._id}/>
-                }
-                { selectedTab === 'STORY' as T.TabItem &&
-                    <StoryList clubId={club._id}/>
-                }
-            </Root>
-        ) : null;
+    const menuItems: ReactNode =  
+        Object.entries(T.ClubDetailTab).map(([key, value]) => {
+            return (
+                <ClubDetailMenuItem 
+                    key={key}
+                    isSelected={isSelectedTab(key as T.TabItem)} 
+                    onClick={() => handleTabClick(key as T.TabItem, value.path) }
+                >
+                    {value.name}
+                </ClubDetailMenuItem>
+            );
+        })
+
+    const detailMenuPage: () => ReactNode = () => {
+        if (!club) return null;
+
+        if (selectedTab === 'CLUB_INTRO') return (<ClubIntro club={club}/>)
+        else if (selectedTab === 'RECRUIT_NOTICE') return (<RecruitNotice />)
+        else if (selectedTab === 'STORY') return (<StoryList clubId={club._id}/>)
+        else if (selectedTab === 'QNA') return (<CommentList user={user} clubId={club._id}/>)
     }
+
+    return (!user || !club) ? <Loading /> : (
+        <Root>
+            <BoldLargeText>{club.name}</BoldLargeText>
+            <TopWrapper>
+                <IconTagWrapper>
+                    <IconCountWrapper>
+                        <Icon src={likeImg ? likeFilledSvg : likeEmptySvg} onClick={() => handleLike()} />
+                        <IconCount>{likeCount}</IconCount>
+                        <Icon src={eyesSvg} />
+                        <IconCount>{club.views}</IconCount>
+                    </IconCountWrapper>
+                    <TagWrapper>
+                        {/* array.map으로 전환 필요*/}  
+                        <TagText>#학회</TagText>
+                        <TagText>#생명과학</TagText>
+                        <TagText>#화학</TagText>
+                        <TagText>#논문읽기</TagText>
+                    </TagWrapper>
+                </IconTagWrapper>
+                <ClubDetailMenuWrapper>
+                    {menuItems}
+                </ClubDetailMenuWrapper>
+            </TopWrapper>
+            { detailMenuPage() }
+        </Root>
+    )
 }
 
 export default withRouter(ClubDetailPage);

src/components/templates/ClubRegisterContents/index.tsx

@@ -56,7 +56,6 @@ const ClubRegisterContents: FC<Props & RouteComponentProps> = ({ history }) => {
 
     const requiredAlert: (type: any, text: string) => void = (type, text) => {
         alert(`[${text}]은/는 필수 항목입니다.`);
-        return;
     }
 
     const isRequiredEmpty: (input: string) => boolean = (input) => {