[INQUIRY] 문의하기 페이지 UI

src/components/common/ToggleButton/ToggleButton.module.scss

@@ -0,0 +1,42 @@
+$active: #ff7f23;
+$disabled: #c4c4c4;
+
+.toggle {
+  &__label {
+    position: relative;
+    width: 27px;
+    height: 13.5px;
+    margin: 0;
+    background-color: $disabled;
+    border-radius: 6.75px;
+    transition: background-color 0.2s;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+
+    &--active {
+      background-color: $active;
+    }
+  }
+
+  &__input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+
+  &__circle {
+    box-sizing: border-box;
+    margin-left: 1.12px;
+    transform: translate(0, 0);
+    width: 11.25px;
+    height: 11.25px;
+    background-color: white;
+    border-radius: 50%;
+    transition: transform 0.2s;
+
+    &--active {
+      transform: translate(13.51px, 0);
+    }
+  }
+}

src/components/common/ToggleButton/index.tsx

@@ -0,0 +1,43 @@
+import cn from 'utils/ts/classNames';
+import styles from './ToggleButton.module.scss';
+
+interface ToggleButtonProps {
+  className: string;
+  active: boolean;
+  toggle: () => void;
+}
+
+export default function ToggleButton({
+  className, active, toggle,
+}: ToggleButtonProps): JSX.Element {
+  const handleToggle = () => {
+    toggle();
+  };
+
+  return (
+    <span className={className}>
+      <label
+        className={cn({
+          [styles.toggle__label]: true,
+          [styles['toggle__label--active']]: active,
+        })}
+        htmlFor="toggleInput"
+      >
+        <input
+          className={styles.toggle__input}
+          type="checkbox"
+          aria-label="토글"
+          id="toggleInput"
+          checked={active}
+          onChange={() => handleToggle()}
+        />
+        <span
+          className={cn({
+            [styles.toggle__circle]: true,
+            [styles['toggle__circle--active']]: active,
+          })}
+        />
+      </label>
+    </span>
+  );
+}

src/pages/Inquiry/Inquire/Inquire.module.scss

@@ -1,33 +1,38 @@
-$default: #222222;
 $highlight: #ff7f23;
-$back: white;
-$normal: #666666;
-$disabled: #c4c4c4;
 
 .container {
-  width: 100%;
-  height: 100%;
+  width: calc(100vw - 104px);
+  height: 100vh;
   display: flex;
   justify-content: center;
   flex-direction: row;
+  margin-left: 100px;
 }
 
-.box {
+.inner-container {
   width: 947px;
+  margin-top: 80px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
 }
 
 .menu {
-  width: 227px;
+  width: 168px;
   height: 100%;
 
   &__link {
     display: block;
-    margin: 160px 0 32px;
+    margin-bottom: 32px;
     background-color: transparent;
     font-size: 32px;
     font-weight: 700;
     text-decoration: none;
     color: $highlight;
     cursor: pointer;
   }
+
+  &__explain {
+    width: 100%;
+  }
 }

src/pages/Inquiry/Inquire/components/Explain/Explain.module.scss

@@ -1,17 +1,20 @@
 $default: #222222;
-$highlight: #ff7f23;
-$back: white;
 $normal: #666666;
-$disabled: #c4c4c4;
 
 .explain {
+  width: 168px;
   cursor: default;
 
+  &__icon {
+    margin-bottom: 23px;
+  }
+
   &__title {
     color: $default;
     font-size: 16px;
     font-weight: 500;
     line-height: 19.97px;
+    margin-bottom: 8px;
   }
 
   &__small-title {

src/pages/Inquiry/Inquire/components/Explain/index.tsx

@@ -1,12 +1,11 @@
-import React from 'react';
 import { ReactComponent as WriteInquiryIcon } from 'assets/svg/inquiry/write-inquiry.svg';
 import styles from './Explain.module.scss';
 
 export default function Explain({ className }: { className: string }): JSX.Element {
   return (
     <div className={className}>
       <div className={styles.explain}>
-        <div className={styles.explain__svg}>
+        <div className={styles.explain__icon}>
           <WriteInquiryIcon />
         </div>
         <div className={styles.explain__title}>

src/pages/Inquiry/Inquire/components/InquireForm/InquireForm.module.scss

@@ -0,0 +1,156 @@
+$highlight: #ff7f23;
+$disabled: #c4c4c4;
+
+.container {
+  width: 815px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: auto 0;
+}
+
+.form {
+  width: 571px;
+  display: flex;
+  flex-direction: column;
+}
+
+.title {
+  box-sizing: border-box;
+  width: 571px;
+
+  &__input {
+    box-sizing: border-box;
+    width: 571px;
+    height: 52px;
+    border: 1px solid $disabled;
+    border-radius: 3px;
+    margin: 8px 0 32px;
+    padding: 0 16px;
+    font-size: 16px;
+    font-weight: 400;
+
+    &::placeholder {
+      color: $disabled;
+    }
+  }
+}
+
+.contents {
+  position: relative;
+
+  &__length {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    color: $disabled;
+    font-size: 12px;
+  }
+
+  &__inputs {
+    margin: 0;
+    padding: 0;
+  }
+
+  &__textarea {
+    resize: none;
+    box-sizing: border-box;
+    width: 100%;
+    height: 252px;
+    border: 1px solid $disabled;
+    border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    margin: 8px 0 0;
+    padding: 16px;
+    font-size: 16px;
+    font-weight: 400;
+    font-family: inherit;
+
+    &::placeholder {
+      color: $disabled;
+    }
+  }
+
+  &__attach {
+    box-sizing: border-box;
+    width: 100%;
+    height: 49px;
+    display: flex;
+    align-items: center;
+    margin-top: -5px;
+    margin-bottom: 32px;
+    border: 1px solid $disabled;
+    border-bottom-left-radius: 3px;
+    border-bottom-right-radius: 3px;
+    position: relative;
+
+    > svg {
+      cursor: pointer;
+      position: absolute;
+      top: 16px;
+      left: 16px;
+    }
+  }
+
+  &__upload-button {
+    display: none;
+  }
+
+  &__images {
+    position: absolute;
+    left: 48px;
+  }
+
+  &__description {
+    position: absolute;
+    right: 16px;
+    font-size: 14px;
+    color: $disabled;
+  }
+}
+
+.secret {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin-bottom: 5px;
+
+  > span {
+    margin-bottom: 0;
+  }
+
+  &__toggle-button {
+    margin-left: 8px;
+  }
+
+  &__description {
+    color: $disabled;
+    font-size: 14px;
+  }
+}
+
+.submit {
+  position: relative;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 176px;
+    height: 44px;
+    background: $highlight;
+    border: none;
+    appearance: none;
+    border-radius: 22px;
+    font-weight: 700;
+    font-size: 16px;
+    text-decoration: none;
+    color: white;
+    cursor: pointer;
+    box-shadow: 2px 3px 12px 1px rgba(0 0 0 / 10%);
+    margin-top: 48px;
+    position: absolute;
+    right: 0;
+  }
+}

src/pages/Inquiry/Inquire/components/InquireForm/components/RequiredLabel/RequiredLabel.module.scss

@@ -0,0 +1,25 @@
+$highlight: #ff7f23;
+
+.box {
+  display: flex;
+  flex-direction: row;
+}
+
+.text {
+  font-size: 16px;
+  font-weight: 500;
+  color: black;
+}
+
+.indicator {
+  position: relative;
+}
+
+.circle {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background-color: $highlight;
+  position: absolute;
+  left: 3px;
+}

src/pages/Inquiry/Inquire/components/InquireForm/components/RequiredLabel/index.tsx

@@ -0,0 +1,18 @@
+import styles from './RequiredLabel.module.scss';
+
+interface RequiredLabelProps {
+  text: string;
+}
+
+export default function RequiredLabel({ text }: RequiredLabelProps): JSX.Element {
+  return (
+    <div className={styles.box}>
+      <div className={styles.text}>
+        {text}
+      </div>
+      <div className={styles.indicator}>
+        <span className={styles.circle} />
+      </div>
+    </div>
+  );
+}