From 1df781562499d56fc9483088726d88ed70e9afbd Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Fri, 10 Sep 2021 19:51:13 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=EC=97=B0=EC=8A=B5?= =?UTF-8?q?=20=EC=98=81=EC=83=81=EC=97=90=EC=84=9C=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=EB=B0=B1=ED=95=9C=20=EC=8B=9C=EA=B0=84=EC=9D=84=20=EB=82=98?= =?UTF-8?q?=ED=83=80=EB=82=B4=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../atoms/FeedbackTime/FeedbackTime.js | 22 +++++++++++++++++++ .../FeedbackTime/FeedbackTime.stories.js | 9 ++++++++ src/components/atoms/FeedbackTime/index.js | 1 + src/components/atoms/index.js | 2 ++ 4 files changed, 34 insertions(+) create mode 100644 src/components/atoms/FeedbackTime/FeedbackTime.js create mode 100644 src/components/atoms/FeedbackTime/FeedbackTime.stories.js create mode 100644 src/components/atoms/FeedbackTime/index.js diff --git a/src/components/atoms/FeedbackTime/FeedbackTime.js b/src/components/atoms/FeedbackTime/FeedbackTime.js new file mode 100644 index 00000000..2364ce1a --- /dev/null +++ b/src/components/atoms/FeedbackTime/FeedbackTime.js @@ -0,0 +1,22 @@ +import React from 'react'; +import styled from 'styled-components'; +import { commonStyles } from '@style'; +import PropTypes from 'prop-types'; +import moment from 'moment'; + +const Wrapper = styled.label` + font-family: TitilliumWebBold; + font-size: 2vh; + color: ${commonStyles.colors.cornflower}; +`; +export default function FeedbackTime({ time }) { + return {moment(time, 'HH:mm:ss').format('m:ss')}; +} + +FeedbackTime.propTypes = { + time: PropTypes.string, +}; + +FeedbackTime.defaultProps = { + time: '0:2:34', +}; diff --git a/src/components/atoms/FeedbackTime/FeedbackTime.stories.js b/src/components/atoms/FeedbackTime/FeedbackTime.stories.js new file mode 100644 index 00000000..ffce5bd7 --- /dev/null +++ b/src/components/atoms/FeedbackTime/FeedbackTime.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import FeedbackTime from './FeedbackTime'; + +export default { + title: 'Atoms/Feedback Time', + component: FeedbackTime, +}; + +export const feedbackTime = (args) => ; diff --git a/src/components/atoms/FeedbackTime/index.js b/src/components/atoms/FeedbackTime/index.js new file mode 100644 index 00000000..1321d59d --- /dev/null +++ b/src/components/atoms/FeedbackTime/index.js @@ -0,0 +1 @@ +export { default } from './FeedbackTime'; diff --git a/src/components/atoms/index.js b/src/components/atoms/index.js index a3c26943..11fa8247 100644 --- a/src/components/atoms/index.js +++ b/src/components/atoms/index.js @@ -8,6 +8,7 @@ import TextButton from './TextButton'; import ToggleButton from './ToggleButton'; import SubHeader from './SubHeader'; import Validation from './Validation'; +import FeedBackTime from './FeedbackTime'; export default { Button, @@ -20,4 +21,5 @@ export default { ToggleButton, SubHeader, Validation, + FeedBackTime, }; From 9947f17220fcab8a08d789fa16d24bb4f25fa169 Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Fri, 10 Sep 2021 19:57:11 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=EC=97=B0=EC=8A=B5?= =?UTF-8?q?=20=EC=98=81=EC=83=81=EC=97=90=EC=84=9C=20=ED=94=BC=EB=93=9C?= =?UTF-8?q?=EB=B0=B1=20=EC=9D=BC=EC=8B=9C=EB=A5=BC=20=EB=82=98=ED=83=80?= =?UTF-8?q?=EB=82=B4=EB=8A=94=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8?= =?UTF-8?q?=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/DateTime/DateTime.js | 21 +++++++++++++++++++ .../atoms/DateTime/DateTime.stories.js | 9 ++++++++ src/components/atoms/DateTime/index.js | 1 + src/components/atoms/index.js | 2 ++ 4 files changed, 33 insertions(+) create mode 100644 src/components/atoms/DateTime/DateTime.js create mode 100644 src/components/atoms/DateTime/DateTime.stories.js create mode 100644 src/components/atoms/DateTime/index.js diff --git a/src/components/atoms/DateTime/DateTime.js b/src/components/atoms/DateTime/DateTime.js new file mode 100644 index 00000000..c01a79b3 --- /dev/null +++ b/src/components/atoms/DateTime/DateTime.js @@ -0,0 +1,21 @@ +import React from 'react'; +import styled from 'styled-components'; +import moment from 'moment'; + +const Wrapper = styled.label` + font-size: 1.5vh; + text-align: left; + font-family: AppleSDGothicNeoM00; + color: #d3d3d3; +`; +export default function DateTime({ dateTime }) { + return {moment(dateTime).format('M월 D일 A HH:mm')}; +} + +DateTime.propTypes = { + dateTime: Date, +}; + +DateTime.defaultProps = { + dateTime: new Date(), +}; diff --git a/src/components/atoms/DateTime/DateTime.stories.js b/src/components/atoms/DateTime/DateTime.stories.js new file mode 100644 index 00000000..9ac932d2 --- /dev/null +++ b/src/components/atoms/DateTime/DateTime.stories.js @@ -0,0 +1,9 @@ +import React from 'react'; +import DateTime from './DateTime'; + +export default { + title: 'Atoms/DateTime', + component: DateTime, +}; + +export const dateTime = (args) => ; diff --git a/src/components/atoms/DateTime/index.js b/src/components/atoms/DateTime/index.js new file mode 100644 index 00000000..2d026b65 --- /dev/null +++ b/src/components/atoms/DateTime/index.js @@ -0,0 +1 @@ +export { default } from './DateTime'; diff --git a/src/components/atoms/index.js b/src/components/atoms/index.js index 11fa8247..4190cf9c 100644 --- a/src/components/atoms/index.js +++ b/src/components/atoms/index.js @@ -9,6 +9,7 @@ import ToggleButton from './ToggleButton'; import SubHeader from './SubHeader'; import Validation from './Validation'; import FeedBackTime from './FeedbackTime'; +import DateTime from './DateTime'; export default { Button, @@ -22,4 +23,5 @@ export default { SubHeader, Validation, FeedBackTime, + DateTime, }; From 84be789c38c23f4790257f07285d14fd3e25f45f Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sat, 11 Sep 2021 16:23:23 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=EC=97=B0=EC=8A=B5?= =?UTF-8?q?=20=EC=98=81=EC=83=81=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=A2=85?= =?UTF-8?q?=ED=95=A9=EA=B2=B0=EA=B3=BC=EB=A5=BC=20=EB=82=98=ED=83=80?= =?UTF-8?q?=EB=82=B4=EB=8A=94=20=ED=91=B8=ED=84=B0=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=B6=94=EA=B0=80=ED=95=9C?= =?UTF-8?q?=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FeedbackContainerFooter.js | 86 +++++++++++++++++++ .../FeedbackContainerFooter.stories.js | 11 +++ .../FeedbackContainerFooter/index.js | 1 + src/components/molecules/index.js | 2 + 4 files changed, 100 insertions(+) create mode 100644 src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js create mode 100644 src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js create mode 100644 src/components/molecules/FeedbackContainerFooter/index.js diff --git a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js new file mode 100644 index 00000000..9c3881c3 --- /dev/null +++ b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js @@ -0,0 +1,86 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { commonStyles } from '@style'; + +const Wrapper = styled.div` + width: 117.8vh; + height: 11.5vh; + background-color: ${commonStyles.colors.paleLilac}; + display: flex; + align-items: center; + padding: 0 5.6vh; + justify-content: space-between; + + p.description { + font-family: AppleSDGothicNeoB00; + font-size: 1.8vh; + text-align: left; + color: ${commonStyles.colors.cornflower}; + } + + div.label { + font-family: AppleSDGothicNeoB00; + font-size: 2vh; + color: #3d3d3d; + display: flex; + } + + div.mr-7 { + margin-right: 7vh; + } + + span.score { + font-family: TitilliumWebBold; + vertical-align: sub; + font-size: 4vh; + padding: 0 1vh 0 2.6vh; + color: ${commonStyles.colors.darkIndigo}; + } + + div.is-passed { + border-radius: 10px; + border: solid 2px ${commonStyles.colors.cornflower}; + background-color: ${commonStyles.colors.cornflower}; + display: inline-flex; + width: 11.8vh; + height: 4vh; + font-family: AppleSDGothicNeoM00; + font-size: 2vh; + text-align: center; + color: #ffffff; + justify-content: center; + vertical-align: middle; + align-items: center; + margin-left: 2.5vh; + } +`; + +export default function FeedbackContainerFooter({ score }) { + const isPassed = true; // TODO: 기준 설정 필요 + + return ( + +

+ 면접 점수와 합격 유무 기준은 상대방의 주관적 평가입니다. +

+
+
+ 현재 면접 점수 {score}점 +
+
+ 합격 유무 +
{isPassed ? '합격' : '불합격'}
+
+
+ + ); +} + +FeedbackContainerFooter.propTypes = { + score: PropTypes.number, +}; + +FeedbackContainerFooter.defaultProps = { + score: 8, +}; diff --git a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js new file mode 100644 index 00000000..cab2bb72 --- /dev/null +++ b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js @@ -0,0 +1,11 @@ +import React from 'react'; +import FeedbackContainerFooter from './FeedbackContainerFooter'; + +export default { + title: 'Molecules/Feedback container footer', + component: FeedbackContainerFooter, +}; + +export const feedbackContainerFooter = (args) => ( + +); diff --git a/src/components/molecules/FeedbackContainerFooter/index.js b/src/components/molecules/FeedbackContainerFooter/index.js new file mode 100644 index 00000000..37a7819b --- /dev/null +++ b/src/components/molecules/FeedbackContainerFooter/index.js @@ -0,0 +1 @@ +export { default } from './FeedbackContainerFooter'; diff --git a/src/components/molecules/index.js b/src/components/molecules/index.js index 21f626dc..68d9b022 100644 --- a/src/components/molecules/index.js +++ b/src/components/molecules/index.js @@ -11,6 +11,7 @@ import SmallCamView from './SmallCamView'; import Tag from './Tag'; import TextBox from './TextBox'; import TimeButton from './TimeButton'; +import FeedbackContainerFooter from './FeedbackContainerFooter'; export default { ButtonGroup, @@ -26,4 +27,5 @@ export default { Tag, TextBox, TimeButton, + FeedbackContainerFooter, }; From a4e6445d01473ffd74f3a699693eb864f3ffdb78 Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sat, 11 Sep 2021 17:05:02 +0900 Subject: [PATCH 4/7] =?UTF-8?q?fix:=20=F0=9F=90=9B=20=EC=98=A4=ED=83=80?= =?UTF-8?q?=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/atoms/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/index.js b/src/components/atoms/index.js index 4190cf9c..e2006dd4 100644 --- a/src/components/atoms/index.js +++ b/src/components/atoms/index.js @@ -8,7 +8,7 @@ import TextButton from './TextButton'; import ToggleButton from './ToggleButton'; import SubHeader from './SubHeader'; import Validation from './Validation'; -import FeedBackTime from './FeedbackTime'; +import FeedbackTime from './FeedbackTime'; import DateTime from './DateTime'; export default { @@ -22,6 +22,6 @@ export default { ToggleButton, SubHeader, Validation, - FeedBackTime, + FeedbackTime, DateTime, }; From 23824f4723f47bc50c17e162f59867ee762545d6 Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sun, 12 Sep 2021 00:57:49 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20=EC=97=B0=EC=8A=B5?= =?UTF-8?q?=EB=82=B4=EC=97=AD=20=ED=94=BC=EB=93=9C=EB=B0=B1=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EB=A5=BC=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ✅ Closes: #58 --- .../atoms/FeedbackTime/FeedbackTime.js | 3 + .../FeedbackContainerFooter.js | 3 +- .../FeedbackContainer/FeedbackContainer.js | 173 ++++++++++++++++++ .../FeedbackContainer.stories.js | 21 +++ .../organisms/FeedbackContainer/index.js | 1 + src/components/organisms/index.js | 2 + 6 files changed, 202 insertions(+), 1 deletion(-) create mode 100644 src/components/organisms/FeedbackContainer/FeedbackContainer.js create mode 100644 src/components/organisms/FeedbackContainer/FeedbackContainer.stories.js create mode 100644 src/components/organisms/FeedbackContainer/index.js diff --git a/src/components/atoms/FeedbackTime/FeedbackTime.js b/src/components/atoms/FeedbackTime/FeedbackTime.js index 2364ce1a..3380f921 100644 --- a/src/components/atoms/FeedbackTime/FeedbackTime.js +++ b/src/components/atoms/FeedbackTime/FeedbackTime.js @@ -8,6 +8,9 @@ const Wrapper = styled.label` font-family: TitilliumWebBold; font-size: 2vh; color: ${commonStyles.colors.cornflower}; + align-items: center; + display: flex; + height: 100%; `; export default function FeedbackTime({ time }) { return {moment(time, 'HH:mm:ss').format('m:ss')}; diff --git a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js index 9c3881c3..11c4ab4b 100644 --- a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js +++ b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js @@ -4,13 +4,14 @@ import styled from 'styled-components'; import { commonStyles } from '@style'; const Wrapper = styled.div` - width: 117.8vh; + width: calc(117.8vh - 11.2vh); height: 11.5vh; background-color: ${commonStyles.colors.paleLilac}; display: flex; align-items: center; padding: 0 5.6vh; justify-content: space-between; + border-radius: 0 0 1vh 1vh; p.description { font-family: AppleSDGothicNeoB00; diff --git a/src/components/organisms/FeedbackContainer/FeedbackContainer.js b/src/components/organisms/FeedbackContainer/FeedbackContainer.js new file mode 100644 index 00000000..1a458e2b --- /dev/null +++ b/src/components/organisms/FeedbackContainer/FeedbackContainer.js @@ -0,0 +1,173 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import profileExample from '@assets/images/profile_example.png'; +import A from '@atoms'; +import M from '@molecules'; +import { commonStyles } from '@style'; + +const Wrapper = styled.div` + position: relative; + width: 117.8vh; + height: 67.1vh; + box-shadow: 0 0.6vh 2.4vh 0 rgba(4, 4, 161, 0.1); + background-color: #ffffff; + border-radius: 1vh; + + div.feedback-container-header { + box-shadow: 0 0.5vh 1vh 0 rgba(4, 4, 161, 0.1); + padding: 2.8vh 5.6vh 2.7vh; + display: flex; + border-radius: 1vh 1vh 0 0; + } + div.profile-info-container { + font-family: AppleSDGothicNeoB00; + font-size: 2.4vh; + padding-left: 3vh; + user-select: none; + color: #000000; + line-height: 1.4; + } + div.feedback-list { + padding: 2.7vh 5.6vh 0; + overflow: auto; + position: relative; + height: 44.2vh; + } + div.gradient { + background-image: linear-gradient( + to bottom, + rgba(255, 255, 255, 0) 0%, + rgba(255, 255, 255, 1) 84% + ); + z-index: 1; + height: 6.2vh; + width: 100%; + } + div.item { + display: flex; + margin-bottom: 3vh; + } + div.item-time { + width: 9vh; + } + div.item-text { + font-family: AppleSDGothicNeoM00; + font-size: 2vh; + line-height: 1.3; + color: ${commonStyles.colors.greyishBrown}; + } + div.feedback-container-footer { + position: absolute; + bottom: 0; + } +`; + +export default function FeedbackContainer({ + name, + dateTime, + src, + score, + itemList, +}) { + return ( + +
+ +
+
{name}님의 피드백
+ +
+
+
+ {itemList.map((item) => ( +
+
+ +
+
{item.text}
+
+ ))} +
+
+
+ +
+ + ); +} + +FeedbackContainer.propTypes = { + name: PropTypes.string, + dateTime: Date, + src: PropTypes.string, + score: PropTypes.number, + itemList: PropTypes.arrayOf( + PropTypes.shape({ + feedbackTime: PropTypes.string, + text: PropTypes.string, + }), + ), +}; + +FeedbackContainer.defaultProps = { + name: '홍길동', + dateTime: new Date(), + src: profileExample, + score: 8, + itemList: [ + { + feedbackTime: '0:2:25', + text: '자기소개 파트에서 자신감 있게 말하는 부분 좋았습니다.', + }, + { + feedbackTime: '0:8:11', + text: + '물론 화상면접이긴 하지만.. 카메라를 너무 안보시는 것 같아요. 그게 조금 아쉽네요.', + }, + { + feedbackTime: '0:9:37', + text: '지원동기에서 직무 강점을 말하면 더 좋을 것 같아요.', + }, + { + feedbackTime: '0:9:44', + text: + '본인의 장점 같은 경우에는 밝다 말고 다른 것도 생각해 보면 좋을 것 같아요. 중간중간 미소는 좋네요~^^', + }, + { + feedbackTime: '0:10:01', + text: '문장은 최대한 간결하고 딱딱 떨어지게 말씀 해주세요^^', + }, + { + feedbackTime: '0:9:37', + text: '지원동기에서 직무 강점을 말하면 더 좋을 것 같아요.', + }, + { + feedbackTime: '0:9:44', + text: + '본인의 장점 같은 경우에는 밝다 말고 다른 것도 생각해 보면 좋을 것 같아요. 중간중간 미소는 좋네요~^^', + }, + { + feedbackTime: '0:10:01', + text: '문장은 최대한 간결하고 딱딱 떨어지게 말씀 해주세요^^', + }, + { + feedbackTime: '0:2:25', + text: '자기소개 파트에서 자신감 있게 말하는 부분 좋았습니다.', + }, + { + feedbackTime: '0:8:11', + text: + '물론 화상면접이긴 하지만.. 카메라를 너무 안보시는 것 같아요. 그게 조금 아쉽네요.', + }, + { + feedbackTime: '0:9:37', + text: '지원동기에서 직무 강점을 말하면 더 좋을 것 같아요.', + }, + { + feedbackTime: '0:9:44', + text: + '본인의 장점 같은 경우에는 밝다 말고 다른 것도 생각해 보면 좋을 것 같아요. 중간중간 미소는 좋네요~^^', + }, + ], +}; diff --git a/src/components/organisms/FeedbackContainer/FeedbackContainer.stories.js b/src/components/organisms/FeedbackContainer/FeedbackContainer.stories.js new file mode 100644 index 00000000..3210db63 --- /dev/null +++ b/src/components/organisms/FeedbackContainer/FeedbackContainer.stories.js @@ -0,0 +1,21 @@ +/* eslint-disable react/jsx-props-no-spreading */ +import React from 'react'; +import PropTypes from 'prop-types'; +import FeedbackContainer from './index'; + +export default { + title: 'Organisms/Feedback Container', + description: '프로필 사진, 이름, 참여율', +}; + +const profileImage = + 'https://avatars2.githubusercontent.com/u/16266103?s=460&u=46ab2774d38212f0d0050592ce02dbcf36a7a97a&v=4'; + +export const feedbackContainer = ({ src = profileImage, name = '아무개' }) => ( + +); + +feedbackContainer.propTypes = { + src: PropTypes.string, + name: PropTypes.string, +}; diff --git a/src/components/organisms/FeedbackContainer/index.js b/src/components/organisms/FeedbackContainer/index.js new file mode 100644 index 00000000..9a9eb344 --- /dev/null +++ b/src/components/organisms/FeedbackContainer/index.js @@ -0,0 +1 @@ +export { default } from './FeedbackContainer'; diff --git a/src/components/organisms/index.js b/src/components/organisms/index.js index 348eaf90..54ea3a45 100644 --- a/src/components/organisms/index.js +++ b/src/components/organisms/index.js @@ -10,6 +10,7 @@ import QuestionList from './QuestionList'; import RoomChat from './RoomChat'; import SideBar from './Sidebar'; import StudyCardView from './StudyCardView'; +import FeedbackContainer from './FeedbackContainer'; export default { AnswerBox, @@ -24,4 +25,5 @@ export default { SideBar, StudyCardView, Calendar, + FeedbackContainer, }; From 19949e6be38235524fab4391b6935eedc80c545d Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sun, 12 Sep 2021 01:36:08 +0900 Subject: [PATCH 6/7] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20css=EB=B3=B4?= =?UTF-8?q?=EC=99=84=20=EB=B0=8F=20=EC=BD=94=EB=93=9C=EB=A5=BC=20=EC=A0=95?= =?UTF-8?q?=EB=A6=AC=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../FeedbackContainerFooter.js | 87 ------------------- .../FeedbackContainerFooter.stories.js | 11 --- .../FeedbackContainerFooter/index.js | 1 - src/components/molecules/index.js | 2 - .../FeedbackContainer/FeedbackContainer.js | 77 ++++++++++++++-- 5 files changed, 71 insertions(+), 107 deletions(-) delete mode 100644 src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js delete mode 100644 src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js delete mode 100644 src/components/molecules/FeedbackContainerFooter/index.js diff --git a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js deleted file mode 100644 index 11c4ab4b..00000000 --- a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.js +++ /dev/null @@ -1,87 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; -import styled from 'styled-components'; -import { commonStyles } from '@style'; - -const Wrapper = styled.div` - width: calc(117.8vh - 11.2vh); - height: 11.5vh; - background-color: ${commonStyles.colors.paleLilac}; - display: flex; - align-items: center; - padding: 0 5.6vh; - justify-content: space-between; - border-radius: 0 0 1vh 1vh; - - p.description { - font-family: AppleSDGothicNeoB00; - font-size: 1.8vh; - text-align: left; - color: ${commonStyles.colors.cornflower}; - } - - div.label { - font-family: AppleSDGothicNeoB00; - font-size: 2vh; - color: #3d3d3d; - display: flex; - } - - div.mr-7 { - margin-right: 7vh; - } - - span.score { - font-family: TitilliumWebBold; - vertical-align: sub; - font-size: 4vh; - padding: 0 1vh 0 2.6vh; - color: ${commonStyles.colors.darkIndigo}; - } - - div.is-passed { - border-radius: 10px; - border: solid 2px ${commonStyles.colors.cornflower}; - background-color: ${commonStyles.colors.cornflower}; - display: inline-flex; - width: 11.8vh; - height: 4vh; - font-family: AppleSDGothicNeoM00; - font-size: 2vh; - text-align: center; - color: #ffffff; - justify-content: center; - vertical-align: middle; - align-items: center; - margin-left: 2.5vh; - } -`; - -export default function FeedbackContainerFooter({ score }) { - const isPassed = true; // TODO: 기준 설정 필요 - - return ( - -

- 면접 점수와 합격 유무 기준은 상대방의 주관적 평가입니다. -

-
-
- 현재 면접 점수 {score}점 -
-
- 합격 유무 -
{isPassed ? '합격' : '불합격'}
-
-
- - ); -} - -FeedbackContainerFooter.propTypes = { - score: PropTypes.number, -}; - -FeedbackContainerFooter.defaultProps = { - score: 8, -}; diff --git a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js b/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js deleted file mode 100644 index cab2bb72..00000000 --- a/src/components/molecules/FeedbackContainerFooter/FeedbackContainerFooter.stories.js +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import FeedbackContainerFooter from './FeedbackContainerFooter'; - -export default { - title: 'Molecules/Feedback container footer', - component: FeedbackContainerFooter, -}; - -export const feedbackContainerFooter = (args) => ( - -); diff --git a/src/components/molecules/FeedbackContainerFooter/index.js b/src/components/molecules/FeedbackContainerFooter/index.js deleted file mode 100644 index 37a7819b..00000000 --- a/src/components/molecules/FeedbackContainerFooter/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from './FeedbackContainerFooter'; diff --git a/src/components/molecules/index.js b/src/components/molecules/index.js index 68d9b022..21f626dc 100644 --- a/src/components/molecules/index.js +++ b/src/components/molecules/index.js @@ -11,7 +11,6 @@ import SmallCamView from './SmallCamView'; import Tag from './Tag'; import TextBox from './TextBox'; import TimeButton from './TimeButton'; -import FeedbackContainerFooter from './FeedbackContainerFooter'; export default { ButtonGroup, @@ -27,5 +26,4 @@ export default { Tag, TextBox, TimeButton, - FeedbackContainerFooter, }; diff --git a/src/components/organisms/FeedbackContainer/FeedbackContainer.js b/src/components/organisms/FeedbackContainer/FeedbackContainer.js index 1a458e2b..86513790 100644 --- a/src/components/organisms/FeedbackContainer/FeedbackContainer.js +++ b/src/components/organisms/FeedbackContainer/FeedbackContainer.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import styled from 'styled-components'; import profileExample from '@assets/images/profile_example.png'; import A from '@atoms'; -import M from '@molecules'; import { commonStyles } from '@style'; const Wrapper = styled.div` @@ -29,10 +28,10 @@ const Wrapper = styled.div` line-height: 1.4; } div.feedback-list { - padding: 2.7vh 5.6vh 0; + padding: 2.7vh 5.6vh; overflow: auto; position: relative; - height: 44.2vh; + height: calc(44.2vh - 5.4vh); } div.gradient { background-image: linear-gradient( @@ -40,9 +39,8 @@ const Wrapper = styled.div` rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 84% ); - z-index: 1; height: 6.2vh; - width: 100%; + width: calc(100% - 14px); } div.item { display: flex; @@ -61,6 +59,59 @@ const Wrapper = styled.div` position: absolute; bottom: 0; } + div.footer-contents { + width: calc(117.8vh - 11.2vh); + height: 11.5vh; + background-color: ${commonStyles.colors.paleLilac}; + display: flex; + align-items: center; + padding: 0 5.6vh; + justify-content: space-between; + border-radius: 0 0 1vh 1vh; + } + p.description { + font-family: AppleSDGothicNeoB00; + font-size: 1.8vh; + text-align: left; + color: ${commonStyles.colors.cornflower}; + } + + div.label { + font-family: AppleSDGothicNeoB00; + font-size: 2vh; + color: #3d3d3d; + display: flex; + } + + div.custom-margin { + margin-right: 7vh; + margin-top: 0.7vh; + } + + span.score { + font-family: TitilliumWebBold; + vertical-align: middle; + font-size: 4vh; + padding: 0 1vh 0 2.6vh; + color: ${commonStyles.colors.darkIndigo}; + } + + div.is-passed { + border-radius: 10px; + border: solid 2px ${commonStyles.colors.cornflower}; + background-color: ${commonStyles.colors.cornflower}; + display: inline-flex; + width: 11.8vh; + height: 4vh; + font-family: AppleSDGothicNeoM00; + font-size: 2vh; + text-align: center; + color: #ffffff; + justify-content: center; + vertical-align: middle; + align-items: center; + margin-left: 2.5vh; + } `; export default function FeedbackContainer({ @@ -70,6 +121,7 @@ export default function FeedbackContainer({ score, itemList, }) { + const isPassed = true; // TODO: 기준 설정 필요 return (
@@ -91,7 +143,20 @@ export default function FeedbackContainer({
- +
+

+ 면접 점수와 합격 유무 기준은 상대방의 주관적 평가입니다. +

+
+
+ 현재 면접 점수 {score}점 +
+
+ 합격 유무 +
{isPassed ? '합격' : '불합격'}
+
+
+
); From dfda6819cbecff242f805a24e0b1b09feba4840c Mon Sep 17 00:00:00 2001 From: wooooooood <13pft13@gmail.com> Date: Sun, 12 Sep 2021 14:07:31 +0900 Subject: [PATCH 7/7] =?UTF-8?q?refactor:=20=F0=9F=92=A1=20=ED=91=B8?= =?UTF-8?q?=ED=84=B0=20css=EB=A5=BC=20=EC=88=98=EC=A0=95=ED=95=9C=EB=8B=A4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../organisms/FeedbackContainer/FeedbackContainer.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/organisms/FeedbackContainer/FeedbackContainer.js b/src/components/organisms/FeedbackContainer/FeedbackContainer.js index 86513790..7fa358bc 100644 --- a/src/components/organisms/FeedbackContainer/FeedbackContainer.js +++ b/src/components/organisms/FeedbackContainer/FeedbackContainer.js @@ -85,20 +85,18 @@ const Wrapper = styled.div` div.custom-margin { margin-right: 7vh; - margin-top: 0.7vh; } span.score { font-family: TitilliumWebBold; - vertical-align: middle; + vertical-align: sub; font-size: 4vh; padding: 0 1vh 0 2.6vh; color: ${commonStyles.colors.darkIndigo}; } div.is-passed { - border-radius: 10px; - border: solid 2px ${commonStyles.colors.cornflower}; + border-radius: 1vh; background-color: ${commonStyles.colors.cornflower}; display: inline-flex; width: 11.8vh; @@ -149,7 +147,9 @@ export default function FeedbackContainer({

- 현재 면접 점수 {score}점 +
+ 현재 면접 점수 {score}점 +
합격 유무