Merge pull request #3 from whatever-mentoring/feature/Mypage-components

feat: 마이페이지 컴포넌트 (댓글, 스크랩, 게시물 박스, 답변완료 탭) 생성

public/index.html

@@ -4,7 +4,6 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/App.tsx

@@ -1,7 +1,25 @@
-import React from "react";
+import { CommentListBox } from 'components/Mypage/CommentListBox';
+import { MyQnaListBox } from 'components/Mypage/MyQnaListBox';
+import { ScrapListBox } from 'components/Mypage/ScrapListBox';
+import { Waitingtab } from 'components/Mypage/WaitingTab';
+import React from 'react';
 
 function App() {
-    return <div></div>;
+  return (
+    <div
+      style={{
+        padding: '20px',
+        display: 'flex',
+        flexDirection: 'column',
+        gap: 30,
+      }}
+    >
+      <Waitingtab />
+      <CommentListBox />
+      <ScrapListBox />
+      <MyQnaListBox />
+    </div>
+  );
 }
 
 export default App;

src/assets/common.ts

@@ -0,0 +1,33 @@
+import { styled } from 'styled-components';
+import { Palette } from 'styles/Palette';
+
+export const Row = styled.div<{
+  gap?: number;
+  justifyContent?: string;
+  alignItems?: string;
+}>`
+  display: flex;
+  gap: ${({ gap }) => (gap ? gap : 0)}px;
+  align-items: ${({ alignItems }) => (alignItems ? alignItems : 'initial')};
+  justify-content: ${({ justifyContent }) =>
+    justifyContent ? justifyContent : 'initial'};
+`;
+
+export const MyPageBoxContainer = styled.div<{
+  height?: string;
+  padding?: string;
+}>`
+  display: flex;
+  width: 100%;
+  height: ${({ height }) => (height ? height : 'fit-content')};
+  border-radius: 5px;
+  padding: ${({ padding }) => (padding ? padding : 0)};
+  background: ${Palette.White};
+  box-shadow: 1px 1px 4px 0px rgba(0, 0, 0, 0.1);
+`;
+
+export const TextContainer = styled.div<{ gap?: number }>`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ gap }) => (gap ? gap : 0)}px;
+`;

src/components/Mypage/CategoryLabel.tsx

@@ -0,0 +1,22 @@
+import { styled } from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+export const CategoryLabel = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Container>
+      <Typo.s2>{children}</Typo.s2>
+    </Container>
+  );
+};
+
+const Container = styled.div<{ role?: string }>`
+  display: flex;
+  width: fit-content;
+  height: 19px;
+  padding: 10px 7px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  background: ${Palette.Main15};
+`;

src/components/Mypage/CommentListBox.tsx

@@ -0,0 +1,23 @@
+import { MyPageBoxContainer, Row, TextContainer } from 'assets/common';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+export const CommentListBox = () => {
+  let userType = 1;
+  let icon = 'juni_commentSubIcon';
+  if (userType == 0) icon = 'juni_commentSubIcon';
+  else if (userType == 1) icon = 'cyni_commentSubIcon';
+
+  return (
+    <MyPageBoxContainer padding="14px" height="79px">
+      <TextContainer>
+        <Typo.b4>댓글입니다댓글입니다.댓글입니다댓글입니다.</Typo.b4>
+        <Row gap={5}>
+          <img src={`img/${icon}.svg`} />
+          <Typo.b4 color={Palette.Gray4}>글 제목</Typo.b4>
+        </Row>
+        <Typo.s2 color={Palette.Gray4}>2023.09.09</Typo.s2>
+      </TextContainer>
+    </MyPageBoxContainer>
+  );
+};

src/components/Mypage/MyQnaListBox.tsx

@@ -0,0 +1,53 @@
+import { styled } from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+import { CategoryLabel } from './CategoryLabel';
+import { MyPageBoxContainer, Row } from 'assets/common';
+
+export const MyQnaListBox = () => {
+  let ansCount = 2;
+  let userType = 1; // userType 임시변수
+
+  return (
+    <MyPageBoxContainer height="72px">
+      <CountStick ansCount={ansCount} userType={userType} />
+      <SubContainer>
+        <Row gap={3}>
+          <Typo.b3>{userType === 0 ? 'Q.' : 'A.'}</Typo.b3>
+          <Typo.b4>내 질문입니다.</Typo.b4>
+        </Row>
+        <Row justifyContent="space-between" alignItems="center">
+          <Row gap={10} alignItems="center">
+            <CategoryLabel>일상</CategoryLabel>
+            <Typo.s2 color={Palette.Gray4}>2023.09.09</Typo.s2>
+          </Row>
+          <Typo.s1 color={Palette.Main}>D-6</Typo.s1>
+        </Row>
+      </SubContainer>
+    </MyPageBoxContainer>
+  );
+};
+
+const CountStick = styled.div<{ ansCount?: number; userType?: number }>`
+  width: 7px;
+  height: 100%;
+  background: ${({ ansCount, userType }) =>
+    ansCount == 0
+      ? Palette.Gray2
+      : ansCount == 1
+      ? `linear-gradient(to top, ${Palette.Main50} 33.3%, ${Palette.Gray2} 33.3%)`
+      : ansCount == 2
+      ? `linear-gradient(to top, ${Palette.Main50} 33.3%, ${Palette.Main50} 33.3%, ${Palette.Main80} 33.3%, ${Palette.Main80} 66.6%, ${Palette.Gray2} 66.6%)`
+      : ansCount == 3
+      ? Palette.Main
+      : Palette.Black};
+  border-radius: 5px 0 0 5px;
+`;
+const SubContainer = styled.div`
+  width: 100%;
+  height: 100%;
+  padding: 14px 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 5px;
+`;

src/components/Mypage/ScrapListBox.tsx

@@ -0,0 +1,30 @@
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+import { CategoryLabel } from './CategoryLabel';
+import { MyPageBoxContainer, Row, TextContainer } from 'assets/common';
+
+export const ScrapListBox = () => {
+  return (
+    <MyPageBoxContainer padding="14px 15px">
+      <TextContainer gap={4}>
+        <CategoryLabel>인간관계</CategoryLabel>
+        <Typo.b1>글 제목입니다</Typo.b1>
+        <Typo.b3 color={Palette.Gray4}>
+          글 내용입니다 글 내용입니다 글 내용입니다 글 내용입니다 글 내용입니다
+          글 내용입니다 글 내용입니다 글 내용입니다 글내용
+        </Typo.b3>
+        <Row gap={7}>
+          <Row gap={4}>
+            <img src="img/comment.svg" />
+            <Typo.s2 color={Palette.Gray4}>12</Typo.s2>
+          </Row>
+          <Row gap={4}>
+            <img src="img/scrap.svg" />
+            <Typo.s2 color={Palette.Gray4}>123</Typo.s2>
+          </Row>
+          <Typo.s2 color={Palette.Gray4}>2023.09.09</Typo.s2>
+        </Row>
+      </TextContainer>
+    </MyPageBoxContainer>
+  );
+};

src/components/Mypage/WaitingTab.tsx

@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { styled } from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+interface tabInterface {
+  label: string;
+  status: string;
+}
+
+export const Waitingtab = () => {
+  const [clickNum, setClickNum] = useState(0);
+  let role = 'juni';
+
+  const tabs: tabInterface[] = [
+    { label: role === 'juni' ? '답변' : '주씨', status: '완료' },
+    { label: role === 'juni' ? '답변' : '주씨', status: '대기' },
+  ];
+
+  return (
+    <Container>
+      {tabs.map((tab: tabInterface, index: number) => (
+        <SubContainer
+          key={index}
+          onClick={() => setClickNum(index)}
+          borderHeight={index === clickNum ? 3 : 0}
+        >
+          <Typo.h4>{`${tab.label} ${tab.status}`}</Typo.h4>
+        </SubContainer>
+      ))}
+    </Container>
+  );
+};
+
+const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 15px;
+  width: 100%;
+  height: 41px;
+  padding: 0 25px;
+  border-bottom: ${Palette.Gray3} 1px solid;
+`;
+const SubContainer = styled.div<{ borderHeight?: number }>`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  border-bottom: ${({ borderHeight }) =>
+    borderHeight ? `${Palette.Black} ${borderHeight}px solid` : 0};
+`;