Merge pull request #17 from TEAM-Hearus/feat/my-script

Feat : 내 스크립트 페이지 추가

src/components/common/ScriptItem/ScriptItem.module.scss

@@ -0,0 +1,39 @@
+@import '../../../styles/variables/colors.scss';
+@import '../../../styles/variables/fonts.scss';
+
+.postItContainer {
+  display: flex;
+  flex-direction: column;
+  background-color: $white_FF;
+  width: 240px;
+  height: 300px;
+  border-radius: 8px;
+  box-shadow: 0px 3px 4px 0px $box-shadow_00;
+  padding: 10px;
+  margin: 20px;
+}
+.title {
+  @include SemiBold_Body_16;
+  color: $dark-font_33;
+  padding: 10px 10px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.content {
+  @include Regular_Sub_14;
+  color: $light-gray_81;
+  height: 200px;
+  padding: 3px 10px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 9;
+  -webkit-box-orient: vertical;
+  line-height: 22px;
+}
+.date {
+  @include Medium_Sub_14;
+  color: $light-gray_81;
+  padding: 10px;
+}

src/components/common/ScriptItem/ScriptItem.tsx

@@ -0,0 +1,18 @@
+import styles from './ScriptItem.module.scss';
+
+interface IScriptProps {
+  //   id: number;
+  title: string;
+  content: string;
+  date: string;
+}
+const ScriptItem = ({ title, content, date }: IScriptProps) => {
+  return (
+    <div className={styles.postItContainer}>
+      <div className={styles.title}>{title}</div>
+      <div className={styles.content}>{content}</div>
+      <span className={styles.date}>{date}</span>
+    </div>
+  );
+};
+export default ScriptItem;

src/components/common/buttons/StartBtn/StartBtn.module.scss

@@ -0,0 +1,12 @@
+@import '../../../../styles/variables/colors.scss';
+@import '../../../../styles/variables/fonts.scss';
+
+.startingBtn {
+  border-radius: 26px;
+  background-color: $brand-point;
+  cursor: pointer;
+  border-width: 0;
+  padding: 12px 24px;
+  @include Regular_Body_16;
+  color: $white_FF;
+}

src/components/common/buttons/StartBtn/StartBtn.tsx

@@ -0,0 +1,9 @@
+import styles from './StartBtn.module.scss';
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
+
+const StartingButton = (props: ButtonProps) => {
+  return <button className={styles.startingBtn} {...props} />;
+};
+
+export default StartingButton;

src/constants/script.ts

@@ -0,0 +1,51 @@
+export interface IScriptElement {
+  id: number;
+  title: string;
+  content: string;
+  date: string;
+}
+
+export const scriptElements: IScriptElement[] = [
+  {
+    id: 1,
+    title: '경제학원론-240708',
+    content:
+      '정부와 중앙은행이 경제를 어떻게 조절하고, 경제 문제에 대응하는지를 다루는 경제 정책은 매우 중요한 주제입니다. 통화 정책, 재정 정책 등 다양한 정책 도구를 통해 경제의 안정성과 성장을 유지하는 방법을 분석합니다.',
+    date: '2024.07.08',
+  },
+  {
+    id: 2,
+    title: '경제학세미나-240705',
+    content:
+      '안녕하세요, 여러분. 오늘은 경제 세계에서의 금융 측면에 대해 함께 이야기해보려고 합니다. 금융 시장의 변화와 그 영향에 대해 살펴보겠습니다. 우리는 최근 몇 년간 금융 시장에서 큰 변화를 경험해왔습니다. 특히 디지털 화폐의 등장과 블록체인 기술의 발전은 금융 시장에 혁신적인 변화를 가져왔습니다. 이에 따른 금융 기관들의 전략적 대응과 사용자들의 금융 서비스 사용 방식에도 큰 변화가 일어나고 있습니다.',
+    date: '2024.07.05',
+  },
+  {
+    id: 3,
+    title: '청강 노트',
+    content:
+      '대통령·국무총리·국무위원·행정각부의 장·헌법재판소 재판관·법관·중앙선거관리위원회 위원·감사원장·감사위원 기타 법률이 정한 공무원이 은 헌법재판소에 제청하여 그 심판에 의하여 재판한다.대통령·국무총리·국무위원·행정각부의 장·헌법재판소 재판관·법관·중앙선거관리위원회 위원',
+    date: '2024.07.04',
+  },
+  {
+    id: 4,
+    title: '경제수학-240703',
+    content:
+      '대통령·국무총리·국무위원·행정각부의 장·헌법재판소 재판관·법관한 공무원이 그 직무집행에 있어서 헌법이나 법률을 위배한 때에는 국회는 탄핵의 소추를 의결할 수 있다. 법률이 헌법에 위반되는 여부가 재판의 전제가 된 경우에는',
+    date: '2024.07.03',
+  },
+  {
+    id: 5,
+    title: '조별과제 회의',
+    content:
+      '안녕하세요, 저는 조의 마케팅 파트를 맡고 있습니다. 최근에 우리가 설정한 마케팅 전략에 대해 몇 가지 업데이트를 해 드릴게요. 이번 주에는 SNS 캠페인을 통해 많은 관심을 끌었고, 특히 Instagram에서의 반응이 좋았습니다. 저는 재무 분석을 담당하고 있습니다. 지난 주에는 시장 조사와 경쟁사 분석을 마쳤고, 이번 주에는 수치 자료를 바탕으로 세부적인 재무 모델을 준비 중에 있습니다. 예산 및 자금 조달 계획도 조속히 완성할 계획입니다.',
+    date: '2024.07.02',
+  },
+  {
+    id: 6,
+    title: '경제학원론-240701',
+    content:
+      '안녕하세요, 여러분. 경제학 원론 수업을 시작하겠습니다. 경제학은 우리가 자원을 어떻게 분배하고 생산하며 소비하는지를 이해하는 학문입니다. 이 수업에서는 경제학의 기본 개념과 주요 이론들을 배우고, 이를 현실 세계의 경제 현상에 적용하는 방법을 배우게 될 것입니다.',
+    date: '2024.07.01',
+  },
+];

src/pages/Main/MyScript/MyScript.module.scss

@@ -0,0 +1,39 @@
+@import '../../../styles/variables/colors.scss';
+@import '../../../styles/variables/fonts.scss';
+
+.wholeContainer {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding: 30px 40px;
+}
+.headerContainer {
+  @include Medium_Title_24;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.recentScripts {
+  color: $dark-font_5A;
+}
+
+.noneScriptContainer {
+  display: flex;
+  justify-content: center;
+  height: 80%;
+  align-items: center;
+  flex-direction: column;
+  color: $light-font_9E;
+}
+.noneScript {
+  @include SemiBold_Body_18;
+}
+.startingScript {
+  @include Medium_Sub_14;
+}
+.scriptContainer {
+  display: flex;
+  width: 100%;
+  height: auto;
+  flex-wrap: wrap;
+}

src/pages/Main/MyScript/MyScript.tsx

@@ -1,5 +1,64 @@
+import styles from './MyScript.module.scss';
+import StartingButton from '../../../components/common/buttons/StartBtn/StartBtn';
+import ScriptItem from '../../../components/common/ScriptItem/ScriptItem';
+import { scriptElements } from '../../../constants/script';
+
 const MyScript = () => {
-  return <div>MyScript</div>;
+  // const { data } = useQuery<IScriptElement[], Error>({
+  //   queryKey: ['script'],
+  //   queryFn: () => getScript(),
+  // });
+
+  return (
+    <div className={styles.wholeContainer}>
+      <div className={styles.headerContainer}>
+        <div className={styles.recentScripts}>
+          {scriptElements ? '최근 스크립트' : ''}
+        </div>
+        <StartingButton>녹음 시작</StartingButton>
+      </div>
+
+      {!scriptElements ? (
+        <div className={styles.noneScriptContainer}>
+          <h4 className={styles.noneScript}>스크립트 없음</h4>
+          <br></br>
+          <p className={styles.startingScript}>
+            녹음 시작 버튼을 눌러 만들어보세요
+          </p>
+        </div>
+      ) : (
+        <div className={styles.scriptContainer}>
+          {scriptElements?.map((script) => (
+            <ScriptItem key={script.id} {...script} />
+          ))}
+          {/* <ScriptItem
+          id="1"
+          title="경제학원론-240708"
+          content="정부와 중앙은행이 경제를 어떻게 조절하고, 경제 문제에 대응하는지를 다루는 경제 정책은 매우 중요한 주제입니다. 통화 정책, 재정 정책 등 다양한 정책 도구를 통해 경제의 안정성과 성장을 유지하는 방법을 분석합니다."
+          date="2024.05.07"
+        ></ScriptItem>
+        <ScriptItem
+          id="1"
+          title="title"
+          content="content"
+          date="date"
+        ></ScriptItem>
+        <ScriptItem
+          id="1"
+          title="title"
+          content="content"
+          date="2024.05.07"
+        ></ScriptItem>
+        <ScriptItem
+          id="1"
+          title="title"
+          content="content"
+          date="2024.05.07"
+        ></ScriptItem> */}
+        </div>
+      )}
+    </div>
+  );
 };
 
 export default MyScript;

src/styles/variables/colors.scss

@@ -6,6 +6,9 @@ $dark-font_5A: #5a5a5a;
 $dark-font_33: #333333;
 $dark-orange_E5: #e5592d;
 
+/* White */
+$white_FF: #ffffff;
+
 /* Gray */
 $light-bg_F9: #f9f9f9;
 $light-bg_F2: #f2f2f4;
@@ -14,3 +17,6 @@ $light-blue_B3: #b3b6c0;
 $light-font_9E: #9ea1b0;
 $light-bg_89: #898e9d;
 $light-gray_81: #818492;
+
+/* shadow */
+$box-shadow_00: #0000001a;