Merge pull request #57 from Beside-Potenday/seungbeom

메일생성하기 직장인 버전 추가
Beside-Potenday · Aug 6, 2024 · 559cb08 · 559cb08
2 parents 29dab06 + 8539d9f
commit 559cb08
Show file tree

Hide file tree

Showing 6 changed files with 269 additions and 149 deletions.
diff --git a/src/Provider/MailContext.tsx b/src/Provider/MailContext.tsx
@@ -25,6 +25,8 @@ interface MailContextProps {
   handleMail: (mailBox: MailInput) => void;
   isActive: 'univ' | 'business';
   onIsActive: (state: 'univ' | 'business') => void;
+  resetMailInputUniv: () => void;
+  resetMailInputBusiness: () => void;
 }
 
 export const MailContext = createContext<MailContextProps | null>(null);
@@ -44,31 +46,48 @@ export const MailProvider = ({ children }: { children: ReactNode }) => {
     setMailInput(mailBox);
   };
 
+  const resetMailInputUniv = () => {
+    setMailInput({
+      content: '',
+      sender: '',
+      company: '',
+      department: '',
+      additional: '',
+      receiver: '',
+    });
+  };
+
+  const resetMailInputBusiness = () => {
+    setMailInput({
+      sender: '',
+      content: '',
+      department: '',
+      studentId: '',
+      subject: '',
+      receiver: '',
+    });
+  };
+
   const onIsActive = (state: 'univ' | 'business') => {
     setIsActive(state);
     if (state === 'business') {
-      setMailInput({
-        content: '',
-        sender: '',
-        company: '',
-        department: '',
-        additional: '',
-        receiver: '',
-      });
+      resetMailInputBusiness();
     } else {
-      setMailInput({
-        sender: '',
-        content: '',
-        department: '',
-        studentId: '',
-        subject: '',
-        receiver: '',
-      });
+      resetMailInputUniv();
     }
   };
 
   return (
-    <MailContext.Provider value={{ mailInput, handleMail, isActive, onIsActive }}>
+    <MailContext.Provider
+      value={{
+        mailInput,
+        handleMail,
+        isActive,
+        onIsActive,
+        resetMailInputUniv,
+        resetMailInputBusiness,
+      }}
+    >
       {children}
     </MailContext.Provider>
   );

diff --git a/src/components/Mail/AskList.tsx b/src/components/Mail/AskList.tsx
@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import { AskListProps, Question } from '@/types';
 import { useMail } from '@/Provider/MailContext';
 import { useState, useEffect } from 'react';
+import { breakpoints } from '@/styles/variants';
 
 export const AskList = ({ randomInput }: AskListProps) => {
   const { isActive } = useMail();
@@ -54,6 +55,10 @@ const AskListWrapper = styled.div`
   padding-top: 46px;
   padding-bottom: 86px;
   gap: 10px;
+
+  @media (max-width: ${breakpoints.md}) {
+    width: 400px;
+  }
 `;
 
 const AskListItemWrapper = styled.div`

diff --git a/src/components/Mail/Header.tsx b/src/components/Mail/Header.tsx
@@ -1,3 +1,4 @@
+import { breakpoints } from '@/styles/variants';
 import styled from '@emotion/styled';
 
 interface HeaderProps {
@@ -52,6 +53,10 @@ const Student = styled.div<ActiveProps>`
   position: relative;
   z-index: 2;
   bottom: -13px;
+  @media (max-width: ${breakpoints.md}) {
+    bottom: 11px;
+    left: 120px;
+  }
 `;
 
 const Office = styled.div<ActiveProps>`
@@ -61,6 +66,10 @@ const Office = styled.div<ActiveProps>`
   position: relative;
   z-index: 2;
   bottom: -13px;
+  @media (max-width: ${breakpoints.md}) {
+    bottom: 11px;
+    left: 120px;
+  }
 `;
 
 const Bar = styled.div`
@@ -69,4 +78,7 @@ const Bar = styled.div`
   height: 3px;
   position: absolute;
   bottom: 8px;
+  @media (max-width: ${breakpoints.md}) {
+    width: 400px;
+  }
 `;