feat(#27):보드기능구현(중)

:

Author: zzzRYT

.gitignore

@@ -26,6 +26,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env*
 .env*.local
 .env
 .env.mock

src/components/common/globalStyled/styled.ts

@@ -0,0 +1,52 @@
+import styled, { css } from 'styled-components';
+
+interface TextType {
+  color?: string;
+  size?: number;
+}
+
+/**
+ * 텍스트 상자의 색깔과 size 지정을 위한 style
+ * @param color [string]
+ *  color='#fff'
+ * @param size [number]
+ *  size={20}
+ * @return color -> color : #fff
+ * @return color -> size : 20px
+ */
+export const TextBox = styled.div<TextType>`
+  color: ${({ color }) => color};
+  font-size: ${({ size }) => size}px;
+`;
+
+interface FlexType {
+  type?: string;
+  direction?: string;
+  col?: string;
+  row?: string;
+}
+
+/** display속성을 위한 style
+ * @param type [string]
+ *  type='flex' || 'block' || 'grid
+ * @param direction [string]
+ *  direction='column' || 'row'
+ * @param col [string]
+ *  col='left' || 'center' || 'rigth'
+ * @param row [string]
+ *  row='start' || 'center' || 'left'
+ * @return type -> display: flex
+ * @return direction -> flex-direction: column
+ * @return col -> justify-content : center
+ * @return row -> align-items: center
+ */
+export const FlexBox = styled.div<FlexType>`
+  ${({ type, direction, col, row }) => {
+    return css`
+      display: ${type};
+      flex-direction: ${direction};
+      justify-content: ${col};
+      align-items: ${row};
+    `;
+  }}
+`;

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

@@ -26,7 +26,7 @@ const CategoryContainer = styled.div`
   justify-content: left;
   border: 1px solid #9ff;
   min-width: 500px;
-  width: 1512px;
+  width: 1532px;
 `;
 
 const CategoryBox = styled.div`

src/components/organisms/mentor-board/MentorBoardCard.tsx

@@ -1,7 +1,7 @@
 import MentorCard from '@/components/molecules/mentor-board-elements/MentorCard';
 import axios from 'axios';
-import { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { useEffect, useRef, useState } from 'react';
+import * as S from './styled';
 
 type MentorListType = {
   id: number;
@@ -16,9 +16,9 @@ interface SlideType {
 }
 
 const MentoBoardList = ({ slide }: SlideType) => {
-  //api요청
   const [getMockingData, setMockingData] = useState<MentorListType[]>([]);
 
+  //api요청
   const getMockingDataApi = async () => {
     const res = await axios.get('/api/mento');
     setMockingData(res.data);
@@ -29,7 +29,7 @@ const MentoBoardList = ({ slide }: SlideType) => {
   }, []);
 
   return (
-    <MentoCardContainer>
+    <S.MentoCardContainer>
       {getMockingData.map((data: any) => {
         const temp = {
           id: data.id,
@@ -39,43 +39,13 @@ const MentoBoardList = ({ slide }: SlideType) => {
           mainField: data.mainField,
         };
         return (
-          <MentorCardWarpper onClick={slide} key={data.id}>
+          <S.MentorCardWarpper onClick={slide} key={data.id}>
             <MentorCard {...temp} />
-          </MentorCardWarpper>
+          </S.MentorCardWarpper>
         );
       })}
-    </MentoCardContainer>
+    </S.MentoCardContainer>
   );
 };
 
 export default MentoBoardList;
-
-const MentoCardContainer = styled.div`
-  border: 2px solid #c12;
-  display: flex;
-  justify-content: left;
-  min-height: 500px;
-  width: 1512px;
-  flex-wrap: wrap;
-`;
-
-const MentorCardWarpper = styled.div`
-  & > * {
-    &:nth-of-type(1n),
-    &:nth-of-type(1) {
-      margin: 0px 14px 118px 0px;
-    }
-    &:nth-of-type(5n),
-    :nth-of-type(5) {
-      margin: 0px 0px 118px 14px;
-    }
-    &:not(
-        :nth-of-type(1n),
-        :nth-of-type(5n),
-        :nth-of-type(1),
-        :nth-of-type(5)
-      ) {
-      margin: 0px 14px 118px 14px;
-    }
-  }
-`;

src/components/organisms/mentor-board/MentorBoardUnit.tsx

@@ -2,14 +2,14 @@ import { SideViewerAtom } from '@/recoil/atoms/SideViewerAtom';
 import axios from 'axios';
 import { useEffect, useState } from 'react';
 import { useRecoilState } from 'recoil';
-import styled, { css } from 'styled-components';
+import * as S from './styled';
+import { TextBox } from '@/components/common/globalStyled/styled';
 
 interface SlideType {
-  next: () => void;
-  prev: () => void;
+  slide: () => void;
 }
 
-const MentorSideViewer = ({ next, prev }: SlideType) => {
+const MentorSideViewer = ({ slide }: SlideType) => {
   const [getMentoUnit, setMentoUnit] = useState<any>(null);
   const [sideViewer, setSideViewer] = useRecoilState(SideViewerAtom);
 
@@ -28,43 +28,65 @@ const MentorSideViewer = ({ next, prev }: SlideType) => {
     sideViewer && getMentoUserApi();
   }, [sideViewer]);
 
-  useEffect(() => {
-    console.log(getMentoUnit);
-  });
-
   return (
-    <SideViewerWarpper>
-      <div onClick={prev}>이전</div>
-      <div onClick={next}>다음</div>
+    <S.SideViewerWarpper>
       {getMentoUnit && (
         <div>
-          <TextBox color="#C63D2F" size={30}>
+          <TextBox color="#C63D2F" size={40}>
             {getMentoUnit.name}
           </TextBox>
-          <div>
-            <div>{getMentoUnit.image}</div>
-            <div></div>
-          </div>
+          <S.SideProfileContainer>
+            <div>
+              <S.ImageBox>이미지 들어올자리</S.ImageBox>
+              <TextBox onClick={slide} color="#FFBB5C">
+                이전
+              </TextBox>
+            </div>
+            <div>
+              <S.ProfileViewBox>
+                <div>
+                  <TextBox
+                    color="#FFBB5C"
+                    size={20}
+                    style={{ padding: '28px' }}>
+                    주요경력
+                  </TextBox>
+                  <TextBox
+                    color="#fff"
+                    size={15}
+                    style={{
+                      display: 'flex',
+                      padding: '28px',
+                      width: 280,
+                      flexWrap: 'wrap',
+                    }}>
+                    {getMentoUnit.career}
+                  </TextBox>
+                </div>
+                <div>
+                  <TextBox
+                    color="#FFBB5C"
+                    size={20}
+                    style={{ padding: '28px' }}>
+                    멘토링분야
+                  </TextBox>
+                  <TextBox color="#fff" size={15} style={{ padding: '28px' }}>
+                    {getMentoUnit.mainField}
+                  </TextBox>
+                </div>
+              </S.ProfileViewBox>
+              <TextBox color="#FFBB5C" size={20} style={{ padding: '28px' }}>
+                소개
+              </TextBox>
+              <TextBox color="#fff" size={15} style={{ padding: '28px' }}>
+                {getMentoUnit.introduct}
+              </TextBox>
+            </div>
+          </S.SideProfileContainer>
         </div>
       )}
-    </SideViewerWarpper>
+    </S.SideViewerWarpper>
   );
 };
 
 export default MentorSideViewer;
-
-const SideViewerWarpper = styled.div`
-  min-width: 1100px;
-  width: 1512px;
-  border: 4px solid #fe9;
-`;
-
-interface BoxType {
-  color?: string;
-  size?: number;
-}
-
-const TextBox = styled.div<BoxType>`
-  color: ${({ color }) => color};
-  font-size: ${({ size }) => size}px;
-`;

src/components/organisms/mentor-board/MentorSideViewer.tsx

@@ -0,0 +1,41 @@
+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;
+`;
+
+/**MentorSideViewer */
+
+export const SideViewerWarpper = styled.div`
+  display: flex;
+  justify-content: left;
+  height: 100%;
+  padding: 130px;
+  min-width: 1100px;
+  width: 650px;
+  border: 4px solid #fe9;
+`;
+
+export const SideProfileContainer = styled.div`
+  display: flex;
+`;
+
+export const ProfileViewBox = styled.div`
+  display: flex;
+`;
+
+export const ImageBox = styled.div`
+  width: 280px;
+  height: 337px;
+  background-color: #999;
+`;