Merge pull request #5 from whatever-mentoring/feature/design-system-c…

…omponents

feat: 카드, 버튼 컴포넌트 생성

src/assets/common.ts

@@ -12,6 +12,18 @@ export const Row = styled.div<{
   justify-content: ${({ justifyContent }) =>
     justifyContent ? justifyContent : 'initial'};
 `;
+export const Column = styled.div<{
+  gap?: number;
+  justifyContent?: string;
+  alignItems?: string;
+}>`
+  display: flex;
+  flex-direction: column;
+  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;

src/components/Button.tsx

@@ -0,0 +1,29 @@
+import styled from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+
+export const LongBtn = ({ children }: { children: string }) => {
+  return (
+    <Container width={330}>
+      <Typo.h5 color={Palette.White}>{children}</Typo.h5>
+    </Container>
+  );
+};
+
+export const ShortBtn = ({ children }: { children: string }) => {
+  return (
+    <Container>
+      <Typo.b4 color={Palette.White}>{children}</Typo.b4>
+    </Container>
+  );
+};
+
+const Container = styled.button<{ width?: number }>`
+  width: ${({ width }) => (width ? `${width}px` : '100%')};
+  height: 50px;
+
+  border: none;
+  border-radius: 10px;
+  background: ${Palette.Main};
+  cursor: pointer;
+`;

src/components/Card.tsx

@@ -0,0 +1,189 @@
+import styled from 'styled-components';
+import { Palette } from 'styles/Palette';
+import answer from '@assets/icons/answer.svg';
+import question from '@assets/icons/question.svg';
+import questionDetail from '@assets/icons/question-detail.svg';
+import Typo from 'styles/Typo';
+import { Column, Row } from 'assets/common';
+import { ShortBtn } from './Button';
+import { CategoryLabel } from 'components/Mypage/CategoryLabel';
+
+// Card components
+export const AnsButtonCard = () => {
+  return (
+    <Container color={Palette.White} gap={16}>
+      <QuestionInfo />
+      <ShortBtn>답변하기</ShortBtn>
+    </Container>
+  );
+};
+export const QTitleCard = () => {
+  return (
+    <Container height={317} color={Palette.White} gap={16}>
+      <QuestionInfo />
+      <CommentScrapInfo />
+    </Container>
+  );
+};
+export const QContentCard = () => {
+  return (
+    <Container height={317} color={Palette.Main05} gap={14}>
+      <Tag tagType={question}>
+        <Typo.b2>질문 내용</Typo.b2>
+      </Tag>
+      <ScrollBox>
+        로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인
+        분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을
+        보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인
+        문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도
+        이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도
+        부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도
+        사용된다.로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽
+        디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적
+        연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는
+        실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움
+        글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을
+        그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는
+        무언가를 지칭하는 용어로도 사용된다.로렘 입숨(lorem ipsum; 줄여서 립숨,
+        lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃
+        같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기
+        텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각
+        디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘
+        입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는
+        무언가를 지칭하는 용어로도 사용된다.
+      </ScrollBox>
+    </Container>
+  );
+};
+export const QContentDetailCard = () => {
+  return (
+    <Container color={Palette.Main} gap={14}>
+      <Tag tagType={questionDetail}>
+        <Typo.h2 color={Palette.White}>
+          장례식에서 조례금을 얼마정도 하는게 좋을까요?{' '}
+        </Typo.h2>
+      </Tag>
+      <Typo.s1 color={Palette.White}>
+        로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인
+        분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을
+        보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인
+        문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도
+        이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도
+        부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도
+        사용된다.
+      </Typo.s1>
+      <Typo.s2 color={Palette.Gray2}>2023.09.11</Typo.s2>
+    </Container>
+  );
+};
+export const AnsCard = () => {
+  return (
+    <Container height={317} color={Palette.Main15} gap={14}>
+      <Tag tagType={answer}>
+        <Typo.b2>익명의 시니어</Typo.b2>
+      </Tag>
+      <ScrollBox>
+        로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽 디자인
+        분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적 연출을
+        보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는 실제적인
+        문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움 글로도
+        이용된다. 이런 용도로 사용할 때 로렘 입숨을 그리킹(greeking)이라고도
+        부르며, 때로 로렘 입숨은 공간만 차지하는 무언가를 지칭하는 용어로도
+        사용된다.로렘 입숨(lorem ipsum; 줄여서 립숨, lipsum)은 출판이나 그래픽
+        디자인 분야에서 폰트, 타이포그래피, 레이아웃 같은 그래픽 요소나 시각적
+        연출을 보여줄 때 사용하는 표준 채우기 텍스트로, 최종 결과물에 들어가는
+        실제적인 문장 내용이 채워지기 전에 시각 디자인 프로젝트 모형의 채움
+        글로도 이용된다. 이런 용도로 사용할 때 로렘 입숨을
+        그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는
+        무언가를 지칭하는 용어로도 사용된다.로렘 입숨(lorem ipsum; 줄여서 립숨,
+        lipsum)은 출판이나 그래픽 디자인 분야에서 폰트, 타이포그래피, 레이아웃
+        같은 그래픽 요소나 시각적 연출을 보여줄 때 사용하는 표준 채우기
+        텍스트로, 최종 결과물에 들어가는 실제적인 문장 내용이 채워지기 전에 시각
+        디자인 프로젝트 모형의 채움 글로도 이용된다. 이런 용도로 사용할 때 로렘
+        입숨을 그리킹(greeking)이라고도 부르며, 때로 로렘 입숨은 공간만 차지하는
+        무언가를 지칭하는 용어로도 사용된다.
+      </ScrollBox>
+      <Date>2023.09.11</Date>
+    </Container>
+  );
+};
+
+// part components
+interface tagProps {
+  children: React.ReactNode;
+  tagType: any;
+}
+const Tag = ({ children, tagType }: tagProps) => {
+  return (
+    <Row gap={5}>
+      <img src={tagType}></img>
+      {children}
+    </Row>
+  );
+};
+const Date = ({ children }: { children: string }) => {
+  return <Typo.s2 color={Palette.Gray5}>{children}</Typo.s2>;
+};
+const QuestionInfo = () => {
+  return (
+    <Column gap={12}>
+      <Tag tagType={question}>
+        <CategoryLabel>일상</CategoryLabel>
+      </Tag>
+      <Typo.h1>
+        질문이 들어올 자리입니다. 질문이 들어올 자리입니다. 질문이 들어올
+        자리입니다. 질문이 들어올 자리입니다.?
+      </Typo.h1>
+      <Date>2023.09.11</Date>
+    </Column>
+  );
+};
+const CommentScrapInfo = () => {
+  return (
+    <Row gap={8}>
+      <Row gap={5} alignItems="center">
+        <Icon src="img/comment.svg" />
+        <Typo.b1 color={Palette.Gray4}>2222</Typo.b1>
+      </Row>
+      <Row gap={5} alignItems="center">
+        <Icon src="img/scrap.svg" />
+        <Typo.b1 color={Palette.Gray4}>2222</Typo.b1>
+      </Row>
+    </Row>
+  );
+};
+
+// styles
+const Container = styled(Column)<{ height?: number; color: string }>`
+  width: 327.4px;
+  ${({ height }) => height && `height: ${height}px`};
+
+  padding: 34px;
+
+  border-radius: 16px;
+  border: 1.5px solid ${Palette.Main};
+  background: ${(props) => props.color};
+  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
+`;
+const Icon = styled.img`
+  width: 17.8px;
+  height: 17.8px;
+`;
+const ScrollBox = styled(Typo.b3)`
+  padding-right: 16px;
+  overflow-x: auto;
+
+  &::-webkit-scrollbar {
+    width: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: ${Palette.Main50};
+    border-radius: 10px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: ${Palette.Gray1};
+    border-radius: 10px;
+  }
+`;

src/components/Header.tsx

@@ -0,0 +1,33 @@
+import { Row } from 'assets/common';
+import styled from 'styled-components';
+import { Palette } from 'styles/Palette';
+import Typo from 'styles/Typo';
+import search from '@assets/icons/search.svg';
+import back from '@assets/icons/back.svg';
+
+interface headerProps {
+  btn: string;
+  children: string;
+}
+
+export const Header = ({ btn, children }: headerProps) => {
+  return (
+    <Container>
+      <img src={btn === 'back' && back}></img>
+      <Typo.h2>{children}</Typo.h2>
+      <img src={btn === 'search' && search}></img>
+    </Container>
+  );
+};
+
+const Container = styled(Row)`
+  width: 390px;
+  height: 60px;
+  align-items: center;
+  justify-content: space-between;
+
+  padding: 0px 30px;
+
+  border-bottom: 1px solid ${Palette.Main};
+  background: ${Palette.White};
+`;

src/styles/Palette.tsx

@@ -9,6 +9,8 @@ export const Palette = {
   Sub: '#fdf738',
 
   White: '#FFFFFF',
+  Gray05: '#FBFBFD',
+  Gray1: '#F2F2F2',
   Gray2: '#E0E0E0',
   Gray3: '#BDBDBD',
   Gray4: '#9E9E9E',
@@ -19,4 +21,5 @@ export const Palette = {
   Main80: rgba(main, 0.8),
   Main50: rgba(main, 0.5),
   Main15: rgba(main, 0.15),
+  Main05: rgba(main, 0.05),
 };

src/styles/Typo.tsx

@@ -31,6 +31,12 @@ const Heading4 = styled.text<{ color?: string }>`
   line-height: 150%;
   color: ${({ color }) => color};
 `;
+const Heading5 = styled.text<{ color?: string }>`
+  font-family: PretendardBold;
+  font-size: 16px;
+  line-height: 150%;
+  color: ${({ color }) => color};
+`;
 const Body1 = styled.text<{ color?: string }>`
   font-family: PretendardMedium;
   font-size: 16px;
@@ -81,6 +87,7 @@ Typo.h1 = Heading1;
 Typo.h2 = Heading2;
 Typo.h3 = Heading3;
 Typo.h4 = Heading4;
+Typo.h5 = Heading5;
 Typo.b1 = Body1;
 Typo.b2 = Body2;
 Typo.b3 = Body3;