refactor: [70] 폼 에러 메시지 디자인 수정

Central-MakeUs · Aug 28, 2024 · 49e4dd7 · 49e4dd7
1 parent cfa7ce6
commit 49e4dd7
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 18 deletions.
diff --git a/web/src/components/Survey/create-survey-page1.styles.ts b/web/src/components/Survey/create-survey-page1.styles.ts
@@ -56,6 +56,9 @@ export const CreateSurveyPageContent = styled.section`
         color: ${COLORS.Gray3};
       }
     }
+    .error {
+      border-color: #ff4848;
+    }
 
     .textarea {
       border: none;
@@ -71,10 +74,22 @@ export const CreateSurveyPageContent = styled.section`
       color: ${COLORS.Gray2};
       font-size: 0.875rem;
       font-size: 400;
+    }
+
+    .date-label {
+      display: flex;
+      align-items: center;
       margin-bottom: 0.625rem;
+      .error-text {
+        margin-left: 0.5rem;
+        font-size: 0.75rem;
+        font-weight: 400;
+        color: #ff4848;
+      }
     }
 
     .date-container {
+      position: relative;
       height: 2.875rem;
       display: flex;
       align-items: center;
@@ -84,6 +99,9 @@ export const CreateSurveyPageContent = styled.section`
       border-radius: 10px;
       padding: 0.5rem 0.75rem;
     }
+    .date-error {
+      border-color: #ff4848;
+    }
   }
 
   .button {

diff --git a/web/src/components/Survey/create-survey-page1.tsx b/web/src/components/Survey/create-survey-page1.tsx
@@ -86,16 +86,21 @@ export const CreateSurveyPageStep1 = () => {
               <FormField
                 control={form.control}
                 name="title"
-                render={({ field }) => (
+                render={({ field, fieldState }) => (
                   <FormItem>
                     <FormControl>
                       <Input
                         placeholder="제목을 입력해주세요"
                         {...field}
-                        className="input"
+                        className={`input ${fieldState.error && 'error'}`}
                       />
                     </FormControl>
-                    <FormMessage />
+                    <FormMessage
+                      style={{
+                        paddingTop: '4px',
+                        paddingLeft: '10px',
+                      }}
+                    />
                   </FormItem>
                 )}
               />
@@ -111,14 +116,26 @@ export const CreateSurveyPageStep1 = () => {
                         className="textarea"
                       />
                     </FormControl>
-                    <FormMessage />
+                    <FormMessage
+                      style={{
+                        paddingLeft: '10px',
+                      }}
+                    />
                   </FormItem>
                 )}
               />
             </Box>
             <Box className="box">
-              <Label>이벤트 진행 기간</Label>
-              <div className="date-container">
+              <div className="date-label">
+                <Label>이벤트 진행 기간</Label>
+                {(form.getFieldState('eventPeriod.startDate').error ||
+                  form.getFieldState('eventPeriod.endDate').error) && (
+                  <p className="error-text">이벤트 진행 기간을 입력해주세요</p>
+                )}
+              </div>
+              <div
+                className={`date-container ${(form.getFieldState('eventPeriod.endDate') || form.getFieldState('eventPeriod.startDate')) && 'date-error'}`}
+              >
                 <FormField
                   control={form.control}
                   name="eventPeriod.startDate"
@@ -134,7 +151,6 @@ export const CreateSurveyPageStep1 = () => {
                             minDate={startDate}
                           />
                         </FormControl>
-                        <FormMessage />
                       </FormItem>
                     );
                   }}
@@ -156,14 +172,20 @@ export const CreateSurveyPageStep1 = () => {
                             minDate={startDate}
                           />
                         </FormControl>
-                        <FormMessage />
                       </FormItem>
                     );
                   }}
                 />
               </div>
-              <Label style={{ marginTop: '1rem' }}>당첨자 발표일</Label>
-              <div className="date-container">
+              <div style={{ marginTop: '1rem' }} className="date-label">
+                <Label>당첨자 발표일</Label>
+                {form.getFieldState('announcementDate').error && (
+                  <p className="error-text">당첨자 발표일시를 입력해주세요</p>
+                )}
+              </div>
+              <div
+                className={`date-container ${form.getFieldState('announcementDate') && 'date-error'}`}
+              >
                 <FormField
                   control={form.control}
                   name="announcementDate"
@@ -181,7 +203,6 @@ export const CreateSurveyPageStep1 = () => {
                             minDate={endDate}
                           />
                         </FormControl>
-                        <FormMessage />
                       </FormItem>
                     );
                   }}

diff --git a/web/src/components/auth/sign-up1.tsx b/web/src/components/auth/sign-up1.tsx
@@ -8,6 +8,8 @@ import styled from 'styled-components';
 import { Subtitle } from '../common/Subtitle';
 
 import { useNavigate } from 'react-router-dom';
+
+import rightArrow from '@/assets/rightarrow.png';
 import checkRound from '../../assets/checkRound.png';
 import uncheckRound from '../../assets/uncheckRound.png';
 
@@ -60,7 +62,6 @@ export const SignUp1: React.FC = () => {
               />
               <Label>(필수) 만 14세 이상입니다.</Label>
             </TermContent>
-            {/* <img src={rightArrow} width="18px" height="18px" /> */}
           </TermItem>
           <TermItem>
             <TermContent onClick={() => handleCheck('terms')}>
@@ -75,7 +76,7 @@ export const SignUp1: React.FC = () => {
               href="https://phase-comic-d2b.notion.site/c77adc8b28934f1194b9787150a16364?pvs=4"
               target="blank"
             >
-              {/* <img src={rightArrow} width="18px" height="18px" /> */}
+              <img src={rightArrow} width={10} height={10} />
             </a>
           </TermItem>
           <TermItem>
@@ -91,7 +92,7 @@ export const SignUp1: React.FC = () => {
               href="https://phase-comic-d2b.notion.site/7ab3169dc4564272b42c0074d86e5806?pvs=4"
               target="blank"
             >
-              {/* <img src={rightArrow} width="18px" height="18px" /> */}
+              <img src={rightArrow} width={10} height={10} />
             </a>
           </TermItem>
           <TermItem>
@@ -107,7 +108,7 @@ export const SignUp1: React.FC = () => {
               href="https://phase-comic-d2b.notion.site/7b8c9c80568f4599acd1046c619425ee?pvs=4"
               target="blank"
             >
-              {/* <img src={rightArrow} width="18px" height="18px" /> */}
+              <img src={rightArrow} width={10} height={10} />
             </a>
           </TermItem>
         </TermsContainer>

diff --git a/web/src/components/common/form/form.styles.ts b/web/src/components/common/form/form.styles.ts
@@ -19,7 +19,7 @@ export const StyledFormDescription = styled.p`
 `;
 
 export const StyledFormMessage = styled.p`
-  font-size: 0.875rem;
-  font-weight: 500;
-  color: red;
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: #ff4848;
 `;