Merge pull request #49 from Beside-Potenday/seungbeom

띄어쓰기 및 대학생 선택 수정
Beside-Potenday · Aug 1, 2024 · 05e2f1e · 05e2f1e
2 parents 43b81a6 + b47edb6
commit 05e2f1e
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 40 deletions.
diff --git a/src/Provider/MailContext.tsx b/src/Provider/MailContext.tsx
@@ -6,11 +6,14 @@ import { mailSend } from '@/types';
 interface MailContextProps {
   mailInput: mailSend;
   handleMail: (mailBox: mailSend) => void;
+  isActive: string;
+  onIsActive: (state: string) => void;
 }
 
 export const MailContext = createContext<MailContextProps | null>(null);
 
 export const MailProvider = ({ children }: { children: ReactNode }) => {
+  const [isActive, setIsActive] = useState('univ');
   const [mailInput, setMailInput] = useState<mailSend>({
     sender: '',
     content: '',
@@ -31,7 +34,15 @@ export const MailProvider = ({ children }: { children: ReactNode }) => {
     });
   };
 
-  return <MailContext.Provider value={{ mailInput, handleMail }}>{children}</MailContext.Provider>;
+  const onIsActive = (state: string) => {
+    setIsActive(state);
+  };
+
+  return (
+    <MailContext.Provider value={{ mailInput, handleMail, isActive, onIsActive }}>
+      {children}
+    </MailContext.Provider>
+  );
 };
 
 export const useMail = () => {

diff --git a/src/components/HomePage/TestersBox/Buttons.tsx b/src/components/HomePage/TestersBox/Buttons.tsx
@@ -31,10 +31,12 @@ export const Buttons = ({ handleList, randomInput }: ButtonsProps) => {
 
   const setMailInput = () => {
     setIsOpen(true);
+
     mutate(
       { ...randomInput },
       {
         onSuccess: (data) => {
+          console.log(data);
           setTitle(data.title || '메일 생성 성공');
           setContent(data.content || '메일이 성공적으로 생성되었습니다.');
         },
@@ -257,6 +259,7 @@ const StyledModalBody = styled(ModalBody)`
   align-items: center;
   justify-content: center;
   width: 100%;
+  white-space: pre-wrap;
 `;
 
 const ModalWrapper = styled.div`

diff --git a/src/components/HomePage/TestersBox/index.tsx b/src/components/HomePage/TestersBox/index.tsx
@@ -7,9 +7,9 @@ import { AskList } from './AskList';
 import { Header } from './Header';
 import { Buttons } from './Buttons';
 import { breakpoints } from '@/styles/variants';
+import { useMail } from '@/Provider/MailContext';
 
 export const TestersBox = () => {
-  const [isActive, setIsActive] = useState('univ');
   const [randomInput, setRandomInput] = useState({
     sender: '홍길동',
     content: '질문',
@@ -18,10 +18,7 @@ export const TestersBox = () => {
     subject: '자료구조',
     receiver: '안지선',
   });
-
-  const onIsActive = (state: string) => {
-    setIsActive(state);
-  };
+  const { isActive, onIsActive } = useMail();
 
   const handleList = () => {
     const randomIndex = Math.floor(Math.random() * mockData.length);

diff --git a/src/components/Mail/Header.tsx b/src/components/Mail/Header.tsx
@@ -1,12 +1,12 @@
 import styled from '@emotion/styled';
 
 interface HeaderProps {
-  isActive: boolean;
-  onIsActive: (isActive: boolean) => void;
+  isActive: string;
+  onIsActive: (isActive: string) => void;
 }
 
 interface StudentProps {
-  isActive: boolean;
+  isActive: string;
 }
 
 export const Header = ({ isActive, onIsActive }: HeaderProps) => {
@@ -21,7 +21,7 @@ export const Header = ({ isActive, onIsActive }: HeaderProps) => {
           paddingTop: '33px',
         }}
       >
-        <Student isActive={isActive} onClick={() => onIsActive(!isActive)}>
+        <Student isActive={isActive} onClick={() => onIsActive('univ')}>
           대학생
         </Student>
         <Office>

diff --git a/src/components/Mail/MailModal.tsx b/src/components/Mail/MailModal.tsx
@@ -59,11 +59,23 @@ const placeholderTexts = [
   '김알파',
 ];
 
+const options = [
+  { label: '🙋🏻‍♂️ 질문', value: '질문' },
+  { label: '📚 과제 제출', value: '과제 제출' },
+  { label: '💯 성적 정정', value: '성적 정정' },
+  { label: '💧 병결 요청', value: '병결 요청' },
+  { label: '📝 상담 요청', value: '상담 요청' },
+];
+
 const warningTexts = {
   content: ['메일 작성 목적을 선택하거나 입력해주세요', '5자 이상~300자 이하로 입력해주세요'],
   studentId: '숫자만 입력 가능해요',
 };
 
+interface OptionButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  selected?: boolean; // selected prop 추가
+}
+
 export const MailModal = ({ isOpen, onClose }: MailModalProps) => {
   const { handleMail } = useMail();
   const [currentIndex, setCurrentIndex] = useState(0);
@@ -73,6 +85,11 @@ export const MailModal = ({ isOpen, onClose }: MailModalProps) => {
   const [content, setContent] = useState('');
   const [isFocused, setIsFocused] = useState(false);
   const [isHide, setIsHide] = useState(false);
+  const [firstInput, setFirstInput] = useState('');
+
+  const handleOptionClick = (value: string) => {
+    setFirstInput(value);
+  };
 
   const { mutate } = usePostUniv();
   const {
@@ -92,7 +109,6 @@ export const MailModal = ({ isOpen, onClose }: MailModalProps) => {
     setIsLoading(true);
     handleMail(data);
     setIsHide(true);
-    console.log(data);
     mutate(
       { ...data },
       {
@@ -131,21 +147,23 @@ export const MailModal = ({ isOpen, onClose }: MailModalProps) => {
     }
   };
 
-  const handleOptionClick = (value: string) => {
-    setValue('content', value);
-    handleNextClick();
-  };
-
-  const handleKeyDown = async (event: React.KeyboardEvent) => {
+  const handleKeyDown = async (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === 'Enter') {
       event.preventDefault();
+      const inputValue = (event.target as HTMLInputElement).value;
+
+      if (currentIndex === 0) {
+        const combinedValue = `${firstInput} ${inputValue}`.trim();
+        await setValue(inputNames[currentIndex], combinedValue, { shouldValidate: true });
+        console.log(combinedValue);
+      }
+
       await handleNextClick();
     }
   };
 
   useEffect(() => {
     setIsFocused(false);
-    // Clear the value of the current input when the currentIndex changes
     setValue(inputNames[currentIndex], '', { shouldValidate: true });
   }, [currentIndex, setValue]);
 
@@ -186,32 +204,28 @@ export const MailModal = ({ isOpen, onClose }: MailModalProps) => {
                 <>
                   {currentIndex === 0 && (
                     <ButtonContainer>
-                      <OptionButton onClick={() => handleOptionClick('질문')}>🙋🏻‍♂️ 질문</OptionButton>
-                      <OptionButton onClick={() => handleOptionClick('과제 제출')}>
-                        📚 과제 제출
-                      </OptionButton>
-                      <OptionButton onClick={() => handleOptionClick('성적 정정')}>
-                        💯 성적 정정
-                      </OptionButton>
-                      <OptionButton onClick={() => handleOptionClick('병결 요청')}>
-                        💧 병결 요청
-                      </OptionButton>
-                      <OptionButton onClick={() => handleOptionClick('상담 요청')}>
-                        📝 상담 요청
-                      </OptionButton>
+                      {options.map((option) => (
+                        <OptionButton
+                          key={option.value}
+                          onClick={() => handleOptionClick(option.value)}
+                          selected={firstInput === option.value}
+                        >
+                          {option.label}
+                        </OptionButton>
+                      ))}
                     </ButtonContainer>
                   )}
 
                   <Controller
                     name={inputNames[currentIndex]}
                     control={control}
                     rules={{
-                      required: '필수 입력 항목입니다.',
+                      required: currentIndex === 0 ? '필수 입력 항목입니다.' : false,
                       validate: (value) => {
                         if (currentIndex === 0 && (value.length < 5 || value.length > 300)) {
                           return warningTexts.content[1];
                         }
-                        if (currentIndex === 3 && !/^\d+$/.test(value)) {
+                        if (currentIndex === 3 && (!/^\d+$/.test(value) || '')) {
                           return warningTexts.studentId;
                         }
                         return true;
@@ -341,7 +355,7 @@ const ButtonContainer = styled.div`
   gap: 20px;
 `;
 
-const OptionButton = styled(Button)`
+const OptionButton = styled(Button)<OptionButtonProps>`
   position: relative;
   display: flex;
   align-items: center;
@@ -358,6 +372,9 @@ const OptionButton = styled(Button)`
     color: white;
   }
 
+  background: ${(props) =>
+    props.selected ? 'linear-gradient(to right, #6ab9f2, #7a89f0)' : '#fff'};
+
   &:before {
     content: '';
     position: absolute;
@@ -371,6 +388,7 @@ const OptionButton = styled(Button)`
     -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
     -webkit-mask-composite: xor;
     mask-composite: exclude;
+  }
 `;
 
 const StyledInput = styled(Input)`

diff --git a/src/pages/Mail/index.tsx b/src/pages/Mail/index.tsx
@@ -7,7 +7,6 @@ import { useMail } from '@/Provider/MailContext';
 import { MailModal } from '@/components/Mail/MailModal';
 
 export const MailPage = () => {
-  const [isActive, setIsActive] = useState(false);
   const [isModalOpen, setIsModalOpen] = useState(true); // 모달을 처음에 열리게 설정
   const mailContext = useMail();
 
@@ -16,10 +15,6 @@ export const MailPage = () => {
   }
   const { mailInput } = mailContext;
 
-  const onIsActive = () => {
-    setIsActive(!isActive);
-  };
-
   const closeModal = () => {
     setIsModalOpen(false);
   };
@@ -36,7 +31,7 @@ export const MailPage = () => {
           <StyledGrid>
             <StyledGridItem className="empty"></StyledGridItem>
             <StyledGridItem className="header">
-              <Header isActive={isActive} onIsActive={onIsActive}></Header>
+              <Header isActive={mailContext.isActive} onIsActive={mailContext.onIsActive}></Header>
             </StyledGridItem>
             <StyledGridItem className="content">
               <InnerGrid>