[1.0.3 / C-MYPAGE] 쪽지 보내기 모달 InputBase수정

src/app/my-page/message/@detail/panel/MessageForm.tsx

@@ -130,12 +130,19 @@ const MessageForm = ({
                 id="message"
                 multiline
                 value={content}
-                placeholder="내용을 입력하세요"
+                placeholder={
+                  disabled ? '채팅방이 삭제되었습니다' : '내용을 입력하세요'
+                }
                 onChange={(e) =>
                   setContent(e.target.value.slice(0, MAX_LENGTH))
                 }
                 onKeyDown={handleKeyDown}
                 disabled={disabled}
+                sx={{
+                  '.MuiOutlinedInput-root.Mui-disabled': {
+                    opacity: 1,
+                  },
+                }}
               />
               <Typography color={'text.assistive'} sx={style.messageLength}>
                 {content.length} / {MAX_LENGTH}

src/app/my-page/message/@list/page.tsx

@@ -24,6 +24,7 @@ const NewMessageButton = ({ openModal }: { openModal: () => void }) => {
         variant={'contained'}
         startIcon={<PlusIcon width={'1.25rem'} height={'1.25rem'} />}
         style={style.pcSendButton}
+        TypographyProps={{ color: '#ffffff' }}
       />
     </Stack>
   )

src/app/my-page/message/@list/panel/NewMessageForm.style.ts

@@ -1,7 +1,6 @@
 import { Theme } from '@mui/material'
 
 export const form = {
-  padding: '1rem',
   borderRadius: '0.25rem',
   background: (theme: Theme) => theme.palette.background.tertiary,
 }
@@ -15,4 +14,13 @@ export const input = {
     fontWeight: (theme: Theme) => theme.typography.Caption.fontWeight,
     lineHeight: (theme: Theme) => theme.typography.Caption.lineHeight,
   },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+  },
+  '&.Mui-focused': {
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+  },
+  overflow: 'scroll',
 }

src/app/my-page/message/@list/panel/NewMessageForm.tsx

@@ -1,5 +1,5 @@
 import { FormEvent, useCallback, useState } from 'react'
-import { Box, InputBase } from '@mui/material'
+import { Box, TextField } from '@mui/material'
 import useAxiosWithAuth from '@/api/config'
 import useModal from '@/hook/useModal'
 import { IMessageListData, IMessageTarget } from '@/types/IMessage'
@@ -83,12 +83,17 @@ const NewMessageForm = ({
     <>
       <form onSubmit={messageSubmitHandler} id={'new-message-form'}>
         <Box sx={style.form}>
-          <InputBase
+          <TextField
+            multiline
             fullWidth
             placeholder="내용을 입력하세요."
             value={content}
             onChange={(e) => setContent(e.target.value)}
             sx={style.input}
+            inputProps={{
+              minLength: 2,
+              maxLength: 300,
+            }}
           />
         </Box>
       </form>

src/app/my-page/privacy/panel/PasswordChangeSection.tsx

@@ -19,7 +19,7 @@ const PasswordChangeSection = () => {
           sx={style.buttonStyleBase}
           onClick={openModal}
         >
-          <Typography variant="CaptionEmphasis" color="text.strong">
+          <Typography variant="CaptionEmphasis" color="#ffffff">
             변경하기
           </Typography>
         </Button>

src/app/panel/ExternalMessageModal.style.ts

@@ -25,10 +25,17 @@ export const inputBase = {
     color: (theme: Theme) => theme.palette.text.normal,
     WebkitTextFillColor: (theme: Theme) => theme.palette.text.normal,
   },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+  },
+  '&.Mui-focused': {
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+  },
 }
 
 export const form = {
-  padding: '1rem',
   borderRadius: '0.25rem',
   background: (theme: Theme) => theme.palette.background.tertiary,
 }
@@ -42,4 +49,13 @@ export const input = {
     fontWeight: (theme: Theme) => theme.typography.Caption.fontWeight,
     lineHeight: (theme: Theme) => theme.typography.Caption.lineHeight,
   },
+  '& .MuiOutlinedInput-notchedOutline': {
+    border: 'none',
+  },
+  '&.Mui-focused': {
+    '& .MuiOutlinedInput-notchedOutline': {
+      border: 'none',
+    },
+  },
+  overflow: 'scroll',
 }

src/app/panel/ExternalMessageModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState, ReactNode } from 'react'
-import { Box, Stack, InputBase, Typography } from '@mui/material'
+import { Box, Stack, InputBase, Typography, TextField } from '@mui/material'
 import useAxiosWithAuth from '@/api/config'
 import useModal from '@/hook/useModal'
 import useToast from '@/states/useToast'
@@ -139,7 +139,7 @@ const ExternalMessageModal = ({
                       required: '내용을 입력해주세요.',
                     }}
                     render={({ field }) => (
-                      <InputBase
+                      <TextField
                         fullWidth
                         placeholder="내용을 입력하세요."
                         {...field}
@@ -148,6 +148,11 @@ const ExternalMessageModal = ({
                           field.onChange(e.target.value)
                           trigger('content')
                         }}
+                        multiline
+                        inputProps={{
+                          minLength: 2,
+                          maxLength: 300,
+                        }}
                       />
                     )}
                   />

src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx

@@ -242,7 +242,9 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => {
               type="button"
               onClick={handleEditModal}
             >
-              <Typography variant="Body2">저장</Typography>
+              <Typography variant="Body2" color="#ffffff">
+                저장
+              </Typography>
             </Button>
           </Stack>
           <Stack

src/app/teams/[id]/setting/panel/TeamEndProcess/TeamCompleteButton.tsx

@@ -95,7 +95,7 @@ const TeamCompleteButton = ({
           variant="contained"
           onClick={openModal}
         >
-          <Typography variant="Body2">완료하기</Typography>
+          <Typography variant="Body2" color="#ffffff">완료하기</Typography>
         </Button>
       </Stack>
 

src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx

@@ -86,7 +86,7 @@ const TeamDisperseButton = ({ teamId, teamStatus }: ITeamDisperseButton) => {
           variant="contained"
           onClick={openModal}
         >
-          <Typography variant="Body2">해산하기</Typography>
+          <Typography variant="Body2" color="#ffffff">해산하기</Typography>
         </Button>
       </Stack>
 

src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx

@@ -80,7 +80,7 @@ const TeamQuitButton = ({ teamId, teamStatus }: ITeamQuitButton) => {
           variant="contained"
           onClick={openModal}
         >
-          <Typography variant="Body2">팀 나가기</Typography>
+          <Typography variant="Body2" color="#ffffff">팀 나가기</Typography>
         </Button>
       </Stack>