Merge pull request #35 from modern-agile-team/feature/mentolist/#27

Mentor페이지 퍼블리싱

Author: zzzRYT

src/components/molecules/mentor-board-elements/MentorCard.tsx

@@ -1,7 +1,6 @@
 import { SideViewerAtom } from '@/recoil/atoms/SideViewerAtom';
 import { useRecoilState } from 'recoil';
-import styled from 'styled-components';
-
+import * as S from './styled';
 interface CardType {
   id: number;
   name: string;
@@ -17,58 +16,19 @@ const MentorCard = (props: CardType) => {
     setSideViewer(props.id);
   };
   return (
-    <CardContainer onClick={handleSideViewer}>
-      <CardImageBox>프로필 이미지 들어옴</CardImageBox>
-      <CardTextBox size={16} color="#ff6000" padding="13px 0px">
+    <S.CardContainer onClick={handleSideViewer}>
+      <S.CardImageBox>이미지들어옴</S.CardImageBox>
+      <S.CardTextBox size={20} color="#C63D2F" padding="13px 0px">
         {props.name}
-      </CardTextBox>
-      <CardTextBox size={11} color="#c58940" padding="0px 0px 10px 0px">
+      </S.CardTextBox>
+      <S.CardTextBox size={14} color="#fff" padding="0px 0px 10px 0px">
         {props.introduct}
-      </CardTextBox>
-      <CardTextBox size={9} color="#c58940" padding="10px 0px 0px 0px">
+      </S.CardTextBox>
+      <S.CardTextBox size={14} color="#fff" padding="10px 0px 0px 0px">
         {props.mainField}
-      </CardTextBox>
-    </CardContainer>
+      </S.CardTextBox>
+    </S.CardContainer>
   );
 };
 
 export default MentorCard;
-
-const CardContainer = styled.div`
-  border: 1px solid #f0f;
-`;
-
-const CardImageBox = styled.div`
-  width: 280px;
-  height: 290px;
-  background-color: #999;
-  border-radius: 10px;
-  cursor: pointer;
-`;
-
-interface CardTextBoxType {
-  size: number;
-  color: string;
-  padding: string;
-}
-
-/** CardTextBox
- * @params size={number}
- * @params color={string}
- * @params padding={string}
- *
- * @returns size -> font-size
- * @returns color -> color
- * @returns padding -> padding
- *
- * @example size={20}
- * @example color={#fff}
- * @example padding={5px || 5px 5px || 5px 5px 5px 5px}
- */
-const CardTextBox = styled.div<CardTextBoxType>`
-  font-weight: bold;
-  font-size: ${(props) => props.size}px;
-  color: ${(props) => props.color};
-  padding: ${(props) => props.padding};
-  cursor: pointer;
-`;

src/components/molecules/mentor-board-elements/styled.ts

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+
+export const CardContainer = styled.div`
+  height: 425px;
+  transition: height 500ms ease;
+  & > :nth-child(1) {
+    height: 290px;
+    transition: height 500ms ease;
+  }
+  &:hover {
+    height: 517px;
+    & > :nth-child(1) {
+      height: 370px;
+      transition: height 500ms ease;
+    }
+  }
+`;
+
+export const CardImageBox = styled.div`
+  width: 280px;
+  height: 290px;
+  background-color: #999;
+  border-radius: 10px;
+  cursor: pointer;
+`;
+
+interface CardTextBoxType {
+  size: number;
+  color: string;
+  padding: string;
+}
+
+/** CardTextBox
+ * @params size={number}
+ * @params color={string}
+ * @params padding={string}
+ *
+ * @returns size -> font-size
+ * @returns color -> color
+ * @returns padding -> padding
+ *
+ * @example size={20}
+ * @example color={#fff}
+ * @example padding={5px || 5px 5px || 5px 5px 5px 5px}
+ */
+export const CardTextBox = styled.div<CardTextBoxType>`
+  font-weight: bold;
+  font-size: ${(props) => props.size}px;
+  color: ${(props) => props.color};
+  padding: ${(props) => props.padding};
+  cursor: pointer;
+`;

src/components/organisms/help-board/HelpCategory.tsx

@@ -5,7 +5,7 @@ const HelpCategory = () => {
     <CategoryWarpper>
       <CategoryContainer>
         <CategoryBox>카테고리</CategoryBox>
-        <CategoryBox>카테고리2</CategoryBox>
+        <CategoryBox>카테고리2123123</CategoryBox>
         <CategoryBox>카테고리3</CategoryBox>
         <CategoryBox>카테고리4</CategoryBox>
       </CategoryContainer>
@@ -16,15 +16,14 @@ const HelpCategory = () => {
 export default HelpCategory;
 
 const CategoryWarpper = styled.div`
-  border: 1px solid #e92;
   display: flex;
   justify-content: center;
+  margin: 40px 0px 25px 0px;
 `;
 
 const CategoryContainer = styled.div`
   display: flex;
   justify-content: left;
-  border: 1px solid #9ff;
   min-width: 500px;
   width: 1532px;
 `;
@@ -36,5 +35,11 @@ const CategoryBox = styled.div`
   color: #fff;
   width: auto;
   margin: 6px;
-  font-size: 10px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: all 300ms ease;
+  &:hover {
+    background-color: #c63d2f;
+    transition: all 300ms ease;
+  }
 `;

src/components/organisms/mentor-board/styled.ts

@@ -3,15 +3,18 @@ import styled from 'styled-components';
 /**MentorBoardCard.tsx */
 
 export const MentoCardContainer = styled.div`
-  border: 2px solid #c12;
   display: flex;
   width: 1560px;
   min-height: 500px;
   flex-wrap: wrap;
 `;
 
 export const MentorCardWarpper = styled.div`
-  margin: 0px 14px 118px 14px;
+  /* margin: 0px 14px 118px 14px; */
+  display: flex;
+  justify-content: center;
+  width: 308px;
+  height: 545px;
 `;
 
 /**MentorSideViewer */
@@ -23,7 +26,7 @@ export const SideViewerWarpper = styled.div`
   padding: 130px;
   min-width: 1100px;
   width: 650px;
-  border: 4px solid #fe9;
+  border: 4px solid #c63d2f;
 `;
 
 export const SideProfileContainer = styled.div`

src/components/templates/CreateHelpTemplate.tsx

@@ -0,0 +1,9 @@
+const CreateHelpTemplate = () => {
+  return (
+    <div>
+      <div>도와줘요생성생성생성</div>
+    </div>
+  );
+};
+
+export default CreateHelpTemplate;

src/components/templates/CreateMentorTemplate.tsx

@@ -0,0 +1,9 @@
+const CreateMentorTemplate = () => {
+  return (
+    <div>
+      <div>멘토생성생성생성</div>
+    </div>
+  );
+};
+
+export default CreateMentorTemplate;

src/components/templates/MenteeTemplate.tsx renamed to src/components/templates/HelpTemplate.tsx

@@ -1,19 +1,27 @@
 import SubPageHeader from '@/components/common/header/SubPageHeader';
 import HelpBoardCardList from '../organisms/help-board/HelpBoardCard';
 import HelpCategory from '../organisms/help-board/HelpCategory';
+import Link from 'next/link';
 
-const MenteeTemplate = () => {
+const HelpTemplate = () => {
   return (
     <>
       <SubPageHeader />
-      <div style={{ display: 'flex', justifyContent: 'center' }}>
+      <div
+        style={{ display: 'flex', justifyContent: 'center', width: '100vw' }}>
         <div>
           <HelpCategory />
+          <Link
+            href={{
+              pathname: `/help/create`,
+            }}>
+            글쓰기
+          </Link>
           <HelpBoardCardList />
         </div>
       </div>
     </>
   );
 };
 
-export default MenteeTemplate;
+export default HelpTemplate;

src/components/templates/MentorTemplate.tsx

@@ -20,7 +20,6 @@ const MentorTemplate = () => {
           display: 'flex',
           justifyContent: 'center',
           width: '100vw',
-          border: '2px solid #fff',
         }}>
         <SlideContainer>
           <ContentList>

src/pages/help/create/index.tsx

@@ -0,0 +1,11 @@
+import CreateHelpTemplate from '@/components/templates/CreateHelpTemplate';
+
+const CreateMentee = () => {
+  return (
+    <div>
+      <CreateHelpTemplate />
+    </div>
+  );
+};
+
+export default CreateMentee;

src/pages/help/index.tsx

@@ -0,0 +1,7 @@
+import HelpTemplate from '@/components/templates/HelpTemplate';
+
+const Mentee = () => {
+  return <HelpTemplate />;
+};
+
+export default Mentee;