결과 페이지/사이드 메뉴

packages/dodam-components/src/components/Card/Card.stories.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import Card, { CardProps } from './Card';
+
+export default {
+  title: 'Card',
+  component: Card,
+} as Meta;
+
+const Template: Story<CardProps> = (args) => <Card {...args} />;
+
+const defaultParams = {
+  imageSrc:'image',
+  title:'title',
+  description:'수원 연합 창작 동아리 그 노래 회원모집',
+};
+
+export const Default = Template.bind({});
+Default.args = defaultParams;
+
+

packages/dodam-components/src/components/Card/Card.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import classNames from 'classnames';
+
+export interface CardProps  extends React.HTMLAttributes<HTMLDivElement> {
+  imageSrc?:string;
+  label?:string;
+  description?:string;
+}
+function Card({ label, imageSrc,description }: CardProps) {
+
+
+  return (
+<div className="col">
+    <div className="card border-light">
+        <style jsx>
+          {`
+
+            .card {
+              width: 146px;
+            }
+
+            .card-body {
+              padding: 8px;
+            }
+            .card-text {
+              font-size: 12px;
+            }
+
+            .card-img-top {
+              width: 146px;
+              height: 146px;
+              background-color: #aaa;
+              cursor: pointer;
+              border-radius: 6px;
+            }
+          `}
+        </style>
+        <img src={imageSrc} className="card-img-top" alt="..." />
+                  <div className="card-body">
+                    <p className="card-text">{description}</p>
+                  </div>
+    </div>
+    </div>
+  );
+}
+
+export default Card;

packages/dodam-components/src/components/Card/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Card';
+export type { CardProps } from './Card';

packages/dodam-components/src/components/SideBar/Sidebar.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import Sidebar, { SidebarProps } from './Sidebar';
+
+export default {
+  title: 'Sidebar',
+  component: Sidebar,
+} as Meta;
+
+const Template: Story<SidebarProps> = (args) => <Sidebar {...args} />;
+
+const defaultParams = {
+  title:'title',
+};
+
+export const Default = Template.bind({});
+Default.args = defaultParams;
+
+

packages/dodam-components/src/components/SideBar/Sidebar.tsx

@@ -0,0 +1,74 @@
+import React from 'react';
+
+// TODO: 네비게이션에 맞는 이미지 설정 + background-color gui에 맞게 수정
+export interface SidebarProps extends React.HTMLAttributes<HTMLHeadElement> {
+  title: string;
+}
+const Sidebar = React.forwardRef<HTMLHeadElement, SidebarProps>((props, ref) => {
+  const { title, ...rest } = props;
+
+  return (
+    <div  className="sidenav">
+   <style jsx>
+        {`
+         .sidenav {
+width: 260px;
+height: 640px;
+ position: fixed;
+ z-index: 1;
+ top: 0px;
+left: 0px;
+padding:15px;
+
+
+
+          }
+
+
+             .profile-image {
+            background: #EDEDED 0% 0% no-repeat padding-box;
+              opacity: 1;
+             width: 66px;
+
+height: 66px;
+              border-radius: 50%;
+              margin: 10px;
+            }
+            .sidebar-line{
+                border: 1px solid #CDCDCD;
+                text-align:center;
+                margin:8px;
+            }
+            .list-group-item{
+               border:none;
+               margin:5px;
+                 font-weight:bold;
+
+            }
+            span{
+                font-size:14px;
+
+            }
+        `}
+      </style>
+       <img className="profile-image" />
+       <span>
+              로그인이 필요합니다
+            </span>
+            <i className='fas fa-angle-right'></i>
+
+       <hr className="sidebar-line"/>
+<ul className="list-group">
+  <li className="list-group-item">홈</li>
+  <li className="list-group-item">맞춤 동아리 테스트</li>
+   <li className="list-group-item">동아리 등록</li>
+  <li className="list-group-item">등록한 게시물</li>
+  <li className="list-group-item">스크랩 동아리</li>
+  <li className="list-group-item">고객센터</li>
+   <li className="list-group-item">로그인</li>
+</ul>
+</div>
+  );
+});
+
+export default Sidebar;

packages/dodam-components/src/components/SideBar/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Sidebar';
+export type { SidebarProps } from './Sidebar';

packages/dodam-components/src/index.ts

@@ -30,3 +30,7 @@ export type { NavigationProps } from './components/Navigation';
 
 export { default as DatePicker } from './components/DatePicker';
 export type { DateProps } from './components/DatePicker';
+
+
+export { default as Card } from './components/Card';
+export type { CardProps } from './components/Card';

packages/dodam-server/routes/index.js

@@ -7,4 +7,9 @@ router.get('/', (req, res) => {
   res.render('index', { title: 'Express' });
 });
 
+/* GET result page. */
+router.get('/result', (req, res) => {
+  res.render('result', { title: 'Express' });
+});
+
 module.exports = router;

packages/dodam-server/routes/users.js

@@ -6,4 +6,9 @@ router.get('/', function (req, res) {
   res.send('respond with a resource');
 });
 
+/* GET result page. */
+router.get('/result', (req, res) => {
+  res.render('result', { title: 'Express' });
+});
+
 module.exports = router;

packages/dodam/pages/result.js

@@ -0,0 +1,95 @@
+import { Typography, Button, Card } from '@dodam/components';
+
+export default function Result() {
+  const mode = 1;
+  return (
+    <>
+      <div className="result">
+        <style jsx>
+          {`
+            .result-top {
+              background-color: #fff6d9;
+              padding: 50px;
+              text-align: center;
+
+              height: 289px;
+            }
+
+            .result-image {
+              background: #ffffff 0% 0% no-repeat padding-box;
+              box-shadow: 0px 10px 15px #0000001c;
+              opacity: 1;
+              width: 152px;
+              height: 152px;
+              border-radius: 50%;
+              margin: 20px;
+            }
+            .result-bottom {
+              padding: 50px 10px 20px 10px;
+            }
+
+            .row {
+              padding: 10px;
+            }
+
+            .recommendation {
+              padding: 30px 10px;
+            }
+          `}
+        </style>
+        <div className="result-top">
+          <Typography className="header" align="center" variant="h5">
+            김도담님은
+          </Typography>
+          <Typography className="header" align="center" variant="h3" weight="bolder">
+            이상적인 세상을
+          </Typography>
+          <Typography className="header" align="center" variant="h3" weight="bolder">
+            만들어가시는군요!
+          </Typography>
+          <img className="result-image" />
+        </div>
+        <div className="result-bottom">
+          <Typography weight="bolder">분석 결과</Typography>
+          <Typography>
+            상세 분석 결과입니다 상세분석 결과입니다. 상세 분석 결과입니다 상세분석 결과입니다. 상세분석 결과입니다
+            상세분석 결과입니다. 분석 결과입니다. 상세 분석 결과입니다 상세분석 결과입니다. 상세 분석 결과입니다
+            상세분석 결과입니다. 상세분석 결과입니다 상세분석 결과입니다. 분석 결과입니다. 상세 분석 결과입니다 상세분석
+            결과입니다. 상세분석 결과입니다 상세분석 결과입니다. 분석 결과입니다.
+          </Typography>
+          <div className="row">
+            <Button id="btn-1" outline fullWidth variant="secondary">
+              결과 공유
+            </Button>
+          </div>
+          {mode === 2 && (
+            <div className="row">
+              <Button id="btn-2" variant="secondary" fullWidth>
+                동아리 등록 완료
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+      {mode === 1 && (
+        <>
+          <div className="result-line"></div>
+          <div className="recommendation">
+            <Typography className="header" align="center" variant="h5" weight="bolder">
+              이 동아리를 추천드려요!
+            </Typography>
+
+            <div className="row">
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+            </div>
+
+            <Button fullWidth>더보기</Button>
+          </div>
+        </>
+      )}
+    </>
+  );
+}