Merge pull request #333 from JayJayleee/hotfix/#329-bug-fix

UI 개선 사항 적용
Team-Coverflow · May 14, 2024 · 2401f9d · 2401f9d
2 parents 7cd78b4 + 491cfab
commit 2401f9d
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 24 deletions.
diff --git a/src/asset/sass/pages/myPage/infoEditPage.scss b/src/asset/sass/pages/myPage/infoEditPage.scss
@@ -150,3 +150,11 @@
   margin: 4% 0% 0% 12%;
   width: 79%;
 }
+
+.nick-disclaimer{
+  font-size : 1.5rem;
+  color : #474646;
+  font-family : pretendard-SemiBold;
+  letter-spacing: -1px;
+  margin-top:1rem;
+}
diff --git a/src/asset/sass/pages/myPage/noticePage.scss b/src/asset/sass/pages/myPage/noticePage.scss
@@ -29,6 +29,9 @@
   cursor: pointer;
   outline: none;
   padding-top: 4rem;
+  width : 91%;
+  line-height : 1.5rem;
+  white-space : pre-wrap;
 }
 
 .notice-item-container {
@@ -73,7 +76,7 @@
   max-height: 0;
   width: 95%;
   box-sizing: border-box;
-  margin: 5% 0% 5% 8.2%;
+  margin : 8% 0% 5% 8.1%;
   display: block;
   font-size: 1.8rem;
   letter-spacing: -1px;
@@ -109,6 +112,7 @@
 .notice-list.active .panel {
   max-height: 326px;
   font-size: 12px;
+
 }
 
 .notice-button-container {

diff --git a/src/components/pages/myPage/feedbackPage.tsx b/src/components/pages/myPage/feedbackPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import '../../../asset/sass/pages/myPage/feedbackPage.scss';
 import { StyledPage, StyledHeader } from '../../../styledComponent.js';
@@ -10,12 +10,20 @@ import { showErrorToast, showSuccessToast } from '../../ui/toast/toast.tsx';
 import { BASE_URL, ACCESS_TOKEN } from '../../global/constants/index.ts';
 
 function FeedbackPage() {
+  const [contact, setcontact] = useState('');
+
+  useEffect(()=>{
+    if (contact.length >=250){
+      showErrorToast('피드백은 250자 까지 입력 가능합니다.');
+    }
+  },[contact])
+
   const navigate = useNavigate();
 
   const handleGoBack = () => {
     navigate(-1);
   };
-  const [contact, setcontact] = useState('');
+
 
   const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
     const value = e.target.value;
@@ -29,6 +37,11 @@ function FeedbackPage() {
         return;
       }
 
+      if (contact.length >250){
+        showErrorToast('피드백을 250자 이하로 작성해주세요.');
+        return;
+      }
+
       const body = { content: contact };
       const response = await fetch(`${BASE_URL}/api/feedback`, {
         method: 'POST',
@@ -76,6 +89,7 @@ function FeedbackPage() {
           value={contact}
           handleChange={handleChange}
           variant={'round'}
+          maxLength={250}
         />
 
         <Button

diff --git a/src/components/pages/myPage/infoEditPage.tsx b/src/components/pages/myPage/infoEditPage.tsx
@@ -36,7 +36,7 @@ const Divider = styled.div`
   height: 1px;
   background-color: rgba(217, 217, 217, 1);
   width: 79%;
-  margin: 5% 0% 0% 12%;
+  margin: 3% 0% 0% 12%;
 `;
 
 function InfoEditPage() {
@@ -154,7 +154,9 @@ function InfoEditPage() {
               >
                 변경
               </div>
-            </div>
+            </div>        
+            <div className="nick-disclaimer">* 닉네임 변경 시, 붕어빵 20개가 차감됩니다 </div>
+
           </div>
         </div>
         <Divider />

diff --git a/src/components/pages/myPage/noticePage.tsx b/src/components/pages/myPage/noticePage.tsx
@@ -53,22 +53,25 @@ function NoticePage() {
   const [totalPages, setTotalPages] = useState(0);
   const [notices, setNotices] = useState<Notice[]>([]);
   const navigate = useNavigate();
+
+  const fetchNotices = async () => {
+    try {
+      const notices = await fetchAPI(
+        `/api/notice?pageNo=${currentPage}&criterion=createdAt`,
+        'GET',
+      );
+      // console.log('Notices:', notices);
+      setTotalPages(notices.data.totalPages);
+      setNotices(notices.data.notices);
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
   useEffect(() => {
-    const fetchNotices = async () => {
-      try {
-        const notices = await fetchAPI(
-          `/api/notice?pageNo=${currentPage}&criterion=createdAt`,
-          'GET',
-        );
-        // console.log('Notices:', notices);
-        setTotalPages(notices.data.totalPages);
-        setNotices(notices.data.notices);
-      } catch (error) {
-        console.error(error);
-      }
-    };
     fetchNotices();
-  }, [currentPage]);
+  }, [currentPage, navigate]);
+
   const handlePanelToggle = (index) => {
     setActivePanelIndex(activePanelIndex === index ? null : index);
   };

diff --git a/src/components/ui/contactSlider/contactList.scss b/src/components/ui/contactSlider/contactList.scss
@@ -175,9 +175,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  height: 55px;
-  width: 55px;
-  margin-bottom: 3rem;
+  height: 105px;
+  width: 105px;
+  margin: -12rem  0 3rem 0;
 }
 
 .inquiry-content-answer-tag {

diff --git a/src/components/ui/contactSlider/contactSlider.jsx b/src/components/ui/contactSlider/contactSlider.jsx
@@ -22,7 +22,7 @@ const StatusBar = styled.div`
 `;
 
 const StatusTab = styled.div`
-  width: 245px;
+  width: 255px;
   letter-spacing: -1px;
   text-align: center;
   padding: 10px 0;

diff --git a/src/components/ui/header/userInfoHeader.jsx b/src/components/ui/header/userInfoHeader.jsx
@@ -85,7 +85,8 @@ function UserInfoHeader() {
     if (menu === '마이페이지') {
       navigate('/mypage');
     } else if (menu === '상점') {
-      navigate('/store');
+      // navigate('/store');
+      showErrorToast("준비중인 페이지입니다.")
       // } else if (menu === '메인') {
       //   navigate('/');
     } else if (menu === '로그아웃') {