chore : 편지 상세 textare 수정 (#358)

* ci : ci 파일 수정 * chore : 줄 길이를 넘지 않도록 수정 * chore : nofication 수정 * chore : textarea 수정
prgrms-web-devcourse-final-project · Dec 8, 2024 · a7fd03a · a7fd03a
1 parent cf4ee1c
commit a7fd03a
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 7 deletions.
diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml
@@ -32,6 +32,14 @@ jobs:
             - name: Build project
               run: |
                   VITE_API_URL=${{ secrets.VITE_API_URL }} \
+                  VITE_FIREBASE_API_KEY=${{ secrets.VITE_FIREBASE_API_KEY }} \
+                  VITE_FIREBASE_AUTH_DOMAIN=${{ secrets.VITE_FIREBASE_AUTH_DOMAIN }} \
+                  VITE_FIREBASE_PROJECT_ID=${{ secrets.VITE_FIREBASE_PROJECT_ID }} \
+                  VITE_FIREBASE_STORAGE_BUCKET=${{ secrets.VITE_FIREBASE_STORAGE_BUCKET }} \
+                  VITE_FIREBASE_MESSAGING_SENDER_ID=${{ secrets.VITE_FIREBASE_MESSAGING_SENDER_ID }} \
+                  VITE_FIREBASE_APP_ID=${{ secrets.VITE_FIREBASE_APP_ID }} \
+                  VITE_FIREBASE_MEASUREMENT_ID=${{ secrets.VITE_FIREBASE_MEASUREMENT_ID }} \
+                  VITE_FCM_VAPID_KEY=${{ secrets.VITE_FCM_VAPID_KEY }} \
                   yarn build
 
             - name: Deploy to S3

diff --git a/src/components/Common/TextArea/TextArea.tsx b/src/components/Common/TextArea/TextArea.tsx
@@ -18,9 +18,11 @@ export const TextArea = ({
 }: TextAreaProps) => {
     const [lineHeight, setLineHeight] = useState<number>(2.2);
     const [lineCount, setLineCount] = useState<number>(8);
+    const [textAreaHeight, setTextAreaHeight] = useState<number>(0);
     const textAreaRef = useRef<HTMLTextAreaElement>(null);
 
     const { addToast } = useToastStore();
+
     const handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         let inputValue = e.target.value;
 
@@ -33,14 +35,15 @@ export const TextArea = ({
             const calculatedLinesCount = Math.floor(
                 textAreaHeight / textAreaLineHeight
             );
-            if (calculatedLinesCount > 40) {
-                addToast('최대 40줄까지 작성이 가능합니다.', 'error');
-
+            if (calculatedLinesCount > 30) {
+                addToast('최대 30줄까지 작성이 가능합니다.', 'error');
                 return;
             }
 
             setLineCount(calculatedLinesCount);
+            setTextAreaHeight(textAreaHeight);
         }
+
         if (setValue) {
             setValue(inputValue);
         }
@@ -59,16 +62,25 @@ export const TextArea = ({
                 textAreaHeight / textAreaLineHeight
             );
             setLineCount(calculatedLinesCount);
+            setTextAreaHeight(textAreaHeight);
         }
     }, [value]);
 
     const renderLineImages = () => {
-        return Array.from({ length: lineCount }).map((_, index) => (
+        const lineImages = Array.from({ length: lineCount }).map((_, index) => (
             <React.Fragment key={index}>
-                <img src={'/to_line.f4c129e6.svg'} className="w-full" />
+                <img
+                    src={'/to_line.f4c129e6.svg'}
+                    className="w-full"
+                    style={{
+                        objectFit: 'contain'
+                    }}
+                />
                 <Margin top={28} />
             </React.Fragment>
         ));
+
+        return <>{lineImages}</>;
     };
 
     useEffect(() => {
@@ -77,6 +89,8 @@ export const TextArea = ({
                 setLineHeight(
                     2.2 + (textAreaRef.current.offsetWidth - 281) * 0.0018
                 );
+                setTextAreaHeight(textAreaRef.current.scrollHeight);
+                console.log(textAreaRef.current.scrollHeight);
             }
         };
 
@@ -86,7 +100,7 @@ export const TextArea = ({
     }, []);
 
     return (
-        <div>
+        <div className="relative">
             <textarea
                 className={clsx(
                     `w-full  m-auto overflow-hidden bg-transparent border-none resize-none min-h-[413px] min-w-[281px] focus:outline-none`,
@@ -102,7 +116,10 @@ export const TextArea = ({
                 readOnly={isReadonly}
             />
 
-            <div className="absolute top-0 w-full mt-[30px]">
+            <div
+                className="absolute top-0 w-full mt-[30px] overflow-hidden"
+                style={{ maxHeight: textAreaHeight }}
+            >
                 {renderLineImages()}
             </div>
         </div>

diff --git a/src/hooks/usePushNotification .ts b/src/hooks/usePushNotification .ts
@@ -7,12 +7,20 @@ export const usePushNotification = () => {
     const { addToast } = useToastStore();
 
     useEffect(() => {
+        const isNotificationSet = localStorage.getItem('isNofication');
+
+        if (isNotificationSet === 'true') {
+            return;
+        }
+
+        // 알림 권한 요청
         Notification.requestPermission().then((permission) => {
             if (permission === 'granted') {
                 getToken(firebaseMessaging, {
                     vapidKey: import.meta.env.VITE_FCM_VAPID_KEY
                 })
                     .then((token) => {
+                        localStorage.setItem('isNofication', 'true');
                         postToken({ token });
                     })
                     .catch((error) => {
@@ -24,6 +32,7 @@ export const usePushNotification = () => {
             }
         });
 
+        // 알림 메시지를 받을 때마다 처리
         onMessage(firebaseMessaging, (payload) => {
             if (payload.notification) {
                 addToast(`${payload.notification.body}`, 'success');