From 1b86ab3bcc25250208514721a4f95b18753d3bd8 Mon Sep 17 00:00:00 2001 From: Woorim Kim Date: Wed, 14 Feb 2024 15:31:40 +0900 Subject: [PATCH] fix: message form, text color in contained button --- .../message/@detail/panel/MessageForm.tsx | 9 ++++++++- src/app/my-page/message/@list/page.tsx | 1 + .../@list/panel/NewMessageForm.style.ts | 10 +++++++++- .../message/@list/panel/NewMessageForm.tsx | 9 +++++++-- .../privacy/panel/PasswordChangeSection.tsx | 2 +- src/app/panel/ExternalMessageModal.style.ts | 18 +++++++++++++++++- src/app/panel/ExternalMessageModal.tsx | 9 +++++++-- .../[id]/setting/panel/SettingTeamInfo.tsx | 4 +++- .../TeamEndProcess/TeamCompleteButton.tsx | 2 +- .../TeamEndProcess/TeamDisperseButton.tsx | 2 +- .../panel/TeamEndProcess/TeamQuitButton.tsx | 2 +- 11 files changed, 56 insertions(+), 12 deletions(-) diff --git a/src/app/my-page/message/@detail/panel/MessageForm.tsx b/src/app/my-page/message/@detail/panel/MessageForm.tsx index c58ecaca8..78cb3ebce 100644 --- a/src/app/my-page/message/@detail/panel/MessageForm.tsx +++ b/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, + }, + }} /> {content.length} / {MAX_LENGTH} diff --git a/src/app/my-page/message/@list/page.tsx b/src/app/my-page/message/@list/page.tsx index 497157aa0..ce4ee1113 100644 --- a/src/app/my-page/message/@list/page.tsx +++ b/src/app/my-page/message/@list/page.tsx @@ -24,6 +24,7 @@ const NewMessageButton = ({ openModal }: { openModal: () => void }) => { variant={'contained'} startIcon={} style={style.pcSendButton} + TypographyProps={{ color: '#ffffff' }} /> ) diff --git a/src/app/my-page/message/@list/panel/NewMessageForm.style.ts b/src/app/my-page/message/@list/panel/NewMessageForm.style.ts index 6d7f95363..cd6f0ce75 100644 --- a/src/app/my-page/message/@list/panel/NewMessageForm.style.ts +++ b/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', } diff --git a/src/app/my-page/message/@list/panel/NewMessageForm.tsx b/src/app/my-page/message/@list/panel/NewMessageForm.tsx index df253e815..62978b160 100644 --- a/src/app/my-page/message/@list/panel/NewMessageForm.tsx +++ b/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 = ({ <>
- setContent(e.target.value)} sx={style.input} + inputProps={{ + minLength: 2, + maxLength: 300, + }} />
diff --git a/src/app/my-page/privacy/panel/PasswordChangeSection.tsx b/src/app/my-page/privacy/panel/PasswordChangeSection.tsx index 5c4dcb316..5b0569376 100644 --- a/src/app/my-page/privacy/panel/PasswordChangeSection.tsx +++ b/src/app/my-page/privacy/panel/PasswordChangeSection.tsx @@ -19,7 +19,7 @@ const PasswordChangeSection = () => { sx={style.buttonStyleBase} onClick={openModal} > - + 변경하기 diff --git a/src/app/panel/ExternalMessageModal.style.ts b/src/app/panel/ExternalMessageModal.style.ts index e1e8116e4..0f5172e71 100644 --- a/src/app/panel/ExternalMessageModal.style.ts +++ b/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', } diff --git a/src/app/panel/ExternalMessageModal.tsx b/src/app/panel/ExternalMessageModal.tsx index 8c249b057..865140ac7 100644 --- a/src/app/panel/ExternalMessageModal.tsx +++ b/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 }) => ( - )} /> diff --git a/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx b/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx index 41b90827f..e9bef62fe 100644 --- a/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx +++ b/src/app/teams/[id]/setting/panel/SettingTeamInfo.tsx @@ -242,7 +242,9 @@ const SettingTeamJobs = ({ team, mutate }: ISettingTeamJobs) => { type="button" onClick={handleEditModal} > - 저장 + + 저장 + - 완료하기 + 완료하기 diff --git a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx index 9cbfadcb5..472b62410 100644 --- a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx +++ b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamDisperseButton.tsx @@ -86,7 +86,7 @@ const TeamDisperseButton = ({ teamId, teamStatus }: ITeamDisperseButton) => { variant="contained" onClick={openModal} > - 해산하기 + 해산하기 diff --git a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx index 43f3e12aa..761c1505b 100644 --- a/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx +++ b/src/app/teams/[id]/setting/panel/TeamEndProcess/TeamQuitButton.tsx @@ -80,7 +80,7 @@ const TeamQuitButton = ({ teamId, teamStatus }: ITeamQuitButton) => { variant="contained" onClick={openModal} > - 팀 나가기 + 팀 나가기