Feat: Chat-136-레이아웃-작성 (#7)

* Chore: 컬러 정의 추가 및 svg, font asset 다운로드

* Chore: 폰트 정의 추가

* Feat: AI 변경 화면 header UI 구현

* Feat: AI 변경 화면 UI 구현 (체크박스 제외)

* Feat: 변경 가능/불가능일 때 각각 버튼 UI 구현

* Feat: 라디오버튼 UI 구현

* Feat: AI 변경 버튼 선택에 따른 UI 변경 구현

* Feat: 상단 header 버튼으로 화면 전환 구현

* Feat: 변경 버튼 onClick 이벤트 추가 (내용 X)

* Chore: Button 컴포넌트 이름 변경

* Chore: ConfirmButton css 수정

src/assets/index.tsx

@@ -0,0 +1,7 @@
+export { ReactComponent as Dada } from './dada.svg';
+export { ReactComponent as Chichi } from './chichi.svg';
+export { ReactComponent as Lulu } from './lulu.svg';
+export { ReactComponent as ChatDada } from './chat-profile-dada.svg';
+export { ReactComponent as ChatChichi } from './chat-profile-chichi.svg';
+export { ReactComponent as ChatLulu } from './chat-profile-lulu.svg';
+export { ReactComponent as LeftChevron } from './ic-left-chevron.svg';

src/components/Buttons/ChangeRadioBtn.module.scss

@@ -0,0 +1,14 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.changeRadio {
+  appearance: none;
+  width: 24px;
+  height: 24px;
+  margin: 0 0 0 3px;
+  background: url('../../assets/ic-checkbox-empty.svg');
+
+  &:checked {
+    background: url('../../assets/ic-checkbox-fill.svg');
+  }
+}

src/components/Buttons/ChangeRadioBtn.tsx

@@ -0,0 +1,20 @@
+import styles from './ChangeRadioBtn.module.scss';
+
+interface Props {
+  id: number;
+  onChange: (id: number) => void;
+}
+
+const ChangeRadioBtn = ({ id, onChange }: Props) => {
+  return (
+    <input
+      type="radio"
+      name="group"
+      id={`${id}`}
+      className={styles.changeRadio}
+      onChange={() => onChange(id)}
+    ></input>
+  );
+};
+
+export default ChangeRadioBtn;

src/components/Buttons/ConfirmButton.module.scss

@@ -0,0 +1,28 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.changeBtn {
+  all: initial;
+  position: absolute;
+  bottom: 12px;
+
+  display: flex;
+  width: calc(100% - 32px);
+  height: min-content;
+  margin: 0 16px;
+  padding: 14px 0px;
+  justify-content: center;
+  align-items: center;
+  border-radius: 8px;
+  @include btn;
+  color: $BK70;
+  background-color: $BK30;
+  pointer-events: none; // 클릭 불가능하게 설정
+
+  &.abled {
+    // 버튼을 선택한 상태
+    background-color: $primary_default;
+    color: $WH;
+    pointer-events: auto; // 클릭 가능하게 설정
+  }
+}

src/components/Buttons/ConfirmButton.tsx

@@ -0,0 +1,21 @@
+import styles from './ConfirmButton.module.scss';
+
+interface Props {
+  children: string;
+  isAble: boolean;
+  id: number;
+  onClick: (id: number) => void;
+}
+
+const ChangeButton = ({ children, isAble, id, onClick }: Props) => {
+  return (
+    <button
+      className={`${styles.changeBtn} ${isAble ? styles.abled : ''}`}
+      onClick={() => onClick(id)}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default ChangeButton;

src/components/Headers/ChangeHeader.module.scss

@@ -0,0 +1,18 @@
+@import '../../styles/variables/colors.scss';
+@import '../../styles/variables/fonts.scss';
+
+.changeHeader {
+  display: flex;
+  justify-content: center;
+  padding: 15px 0px;
+
+  & :first-child {
+    position: absolute;
+    left: 15px;
+  }
+
+  & span {
+    @include sub18;
+    color: $BK90;
+  }
+}

src/components/Headers/ChangeHeader.tsx

@@ -0,0 +1,19 @@
+import { useNavigate } from 'react-router-dom';
+import { LeftChevron } from '../../assets';
+import styles from './ChangeHeader.module.scss';
+
+interface Props {
+  children: string;
+}
+const ChangeHeader = ({ children }: Props) => {
+  const navigate = useNavigate();
+
+  return (
+    <div className={styles.changeHeader}>
+      <LeftChevron onClick={() => navigate('/chat')} />
+      <span>{children}</span>
+    </div>
+  );
+};
+
+export default ChangeHeader;

src/index.css

@@ -0,0 +1,15 @@
+/* font 설정 */
+@font-face {
+  font-family: 'Pretendard-Bold';
+  src: url('./assets/fonts/Pretendard-Bold.woff');
+}
+
+@font-face {
+  font-family: 'Pretendard-SemiBold';
+  src: url('./assets/fonts/Pretendard-SemiBold.woff');
+}
+
+@font-face {
+  font-family: 'Pretendard-Regular';
+  src: url('./assets/fonts/Pretendard-Regular.woff');
+}

src/index.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
+import './index.css';
 import App from './App';
 
 const root = ReactDOM.createRoot(