Skip to content

Commit

Permalink
feat: 로그인, 동아리원 검색, 역할 검색에서 엔터로 검색기능 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@HongBoogie
HongBoogie committed Feb 8, 2024
1 parent a30d000 commit 75e2410
Show file tree
Hide file tree
Showing 10 changed files with 158 additions and 129 deletions.
92 changes: 49 additions & 43 deletions src/component/common/Login.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,57 +21,63 @@ export default function Login() {
};

// id : 'appcenter', pw : '1q2w3e4r!Appcenter'
const onClick = async () => {
const response = await axios //eslint-disable-line no-unused-vars
.post('https://server.inuappcenter.kr/sign/sign-in', {
id: username,
password: password,
})
.then((res) => {
const { token } = res.data;
axios.defaults.headers.common['X-AUTH-TOKEN'] = token;

window.sessionStorage.setItem('token', token);
dispatch({
type: 'login/setLogin',
payload: { isLoggedIn: true },
});
navigate('/admin');
})
.catch((err) => {
console.log(err);
alert('아이디 또는 비밀번호가 틀렸습니다.');
setUsername('');
setPassword('');
const onSubmit = async (e) => {
e.preventDefault(); // 기본 form submit 방지

try {
const response = await axios.post(
'https://server.inuappcenter.kr/sign/sign-in',
{
id: username,
password: password,
}
);

const { token } = response.data;
axios.defaults.headers.common['X-AUTH-TOKEN'] = token;

window.sessionStorage.setItem('token', token);
dispatch({
type: 'login/setLogin',
payload: { isLoggedIn: true },
});
navigate('/admin');
} catch (error) {
console.error(error);
alert('아이디 또는 비밀번호가 틀렸습니다.');
setUsername('');
setPassword('');
}
};

return (
<Container>
<LoginBox>
<LoginImg src={LoginLogo} alt='' />
<Title>홈페이지 대시보드</Title>
<InfoBox>
<Label>
ID :
<Input
type='id'
value={username}
onChange={handleUsernameChange}
placeholder='아이디를 입력해주세요'
/>
</Label>
<Label>
PW :
<Input
type='password'
value={password}
onChange={handlePasswordChange}
placeholder='비밀번호를 입력해주세요'
/>
</Label>
<Button onClick={() => onClick()}>로그인</Button>
</InfoBox>
<form onSubmit={onSubmit}>
<InfoBox>
<Label>
ID :
<Input
type='id'
value={username}
onChange={handleUsernameChange}
placeholder='아이디를 입력해주세요'
/>
</Label>
<Label>
PW :
<Input
type='password'
value={password}
onChange={handlePasswordChange}
placeholder='비밀번호를 입력해주세요'
/>
</Label>
<Button type='submit'>로그인</Button>
</InfoBox>
</form>
</LoginBox>
</Container>
);
Expand Down
1 change: 1 addition & 0 deletions src/component/home/ProductionDesktop.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -329,6 +329,7 @@ const ModalContainer = styled(Modal)`
left: 50%;
padding: 20px;
border-radius: 8px;
background-color: white;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
max-width: 620px;
height: 250px;
Expand Down
6 changes: 5 additions & 1 deletion src/component/home/ProductionMobile.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export default function ProductionMobile() {
<div className='card'>
<TransparentAspectRatio ratio={'1'}>
<figure>
<img
<AppImage
src={
item.images[
Object.keys(item.images)[0]
Expand Down Expand Up @@ -97,6 +97,10 @@ export default function ProductionMobile() {
);
}

const AppImage = styled.img`
border-radius: 8px;
`;

const ProductionLayout = styled.div`
display: flex;
margin-top: 30px;
Expand Down
30 changes: 19 additions & 11 deletions src/container/admin/FindMemId.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export default function FindMemId() {
document.body.style.removeProperty('overflow');
}, []);

const findData = async () => {
const findData = async (e) => {
e.preventDefault();
try {
const newMemberEncode = encodeURIComponent(newMember);
const result = await axios.get(
Expand Down Expand Up @@ -56,15 +57,17 @@ export default function FindMemId() {
onRequestClose={closeModal}
contentLabel='Edit Member Modal'
>
<ModalTitle>이름으로 동아리원 찾기</ModalTitle>
<ModalName>이름</ModalName>
<ModalInput
type='text'
placeholder='이름을 입력해주세요'
value={newMember}
onChange={(e) => setNewMember(e.target.value)}
/>
<ModalButton onClick={findData}>검색</ModalButton>
<MemberForm onSubmit={findData}>
<ModalTitle>이름으로 동아리원 찾기</ModalTitle>
<ModalName>이름</ModalName>
<ModalInput
type='text'
placeholder='이름을 입력해주세요'
value={newMember}
onChange={(e) => setNewMember(e.target.value)}
/>
<ModalButton type='submit'>검색</ModalButton>
</MemberForm>
<ModalTemplate>
<ModalHeader type='name'>번호</ModalHeader>
<ModalHeader>이름</ModalHeader>
Expand All @@ -86,6 +89,11 @@ export default function FindMemId() {
</>
);
}

const MemberForm = styled.form`
width: 100%;
`;

const ModalName = styled.div`
margin-bottom: 5px;
margin-right: auto;
Expand Down Expand Up @@ -172,7 +180,7 @@ const ModalInput = styled.input`
`;

const ModalButton = styled.button`
background-color: grey;
background-color: #1e88e5;
color: #fff;
border: none;
border-radius: 4px;
Expand Down
31 changes: 19 additions & 12 deletions src/container/admin/FindRole.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ export default function FindRole() {
document.body.style.removeProperty('overflow');
}, []);

const findData = async () => {
const findData = async (e) => {
e.preventDefault();
try {
const newMemberEncode = encodeURIComponent(newMember);
const result = await axios.get(
Expand Down Expand Up @@ -55,15 +56,17 @@ export default function FindRole() {
onRequestClose={closeModal}
contentLabel='Edit Role Modal'
>
<ModalTitle>이름으로 역할 찾기</ModalTitle>
<ModalName>이름</ModalName>
<ModalInput
type='text'
placeholder='이름을 입력해주세요'
value={newMember}
onChange={(e) => setNewMember(e.target.value)}
/>
<ModalButton onClick={findData}>검색</ModalButton>
<RoleForm onSubmit={findData}>
<ModalTitle>이름으로 역할 찾기</ModalTitle>
<ModalName>이름</ModalName>
<ModalInput
type='text'
placeholder='이름을 입력해주세요'
value={newMember}
onChange={(e) => setNewMember(e.target.value)}
/>
<ModalButton type='submit'>검색</ModalButton>
</RoleForm>
<ModalTemplate>
<ModalHeader type='name'>번호</ModalHeader>
<ModalHeader>이름</ModalHeader>
Expand All @@ -80,10 +83,14 @@ export default function FindRole() {
</>
);
}

const RoleForm = styled.form`
width: 100%;
`;

const ModalName = styled.div`
margin-bottom: 5px;
margin-right: auto;
margin-left: 0.5rem;
`;

const ModalHeader = styled.div`
Expand Down Expand Up @@ -166,7 +173,7 @@ const ModalInput = styled.input`
`;

const ModalButton = styled.button`
background-color: grey;
background-color: #1e88e5;
color: #fff;
border: none;
border-radius: 4px;
Expand Down
16 changes: 8 additions & 8 deletions src/page/AdminPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,11 +71,11 @@ export default function AdminPage() {
);
}
const PhotoBox = styled.div`
width: 7%;
height: 73%;
width: 8%;
height: 78%;
background-color: white;
margin-bottom: 2.2rem;
border-radius: 12px;
border-radius: 8px;
`;

const TextBox = styled.div`
Expand All @@ -85,8 +85,8 @@ const TextBox = styled.div`
`;

const PhotoImg = styled.img`
width: 40px;
height: 40px;
width: 45px;
height: 45px;
`;

const MenuText = styled.div`
Expand All @@ -96,17 +96,17 @@ const MenuText = styled.div`
text-transform: uppercase;
color: ${(props) => (props.type === 'title' ? '#424242' : '#848484')};
font-weight: ${(props) =>
props.type === 'top' ? 400 : props.type === 'title' ? 600 : 300};
props.type === 'top' ? 300 : props.type === 'title' ? 400 : 400};
margin: auto 0;
white-space: pre-line;
${(props) =>
props.type === 'title'
? css`
font-size: 30px;};
font-size: ${(props) => props.theme.fontSize.mobile.title};
`
: css`
font-size: ${(props) => props.theme.fontSize.tablet.caption};
font-size: ${(props) => props.theme.fontSize.mobile.caption};
`}
`;

Expand Down
2 changes: 1 addition & 1 deletion src/page/CenterPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const PhotoImg = styled.img`
const BoxContainer = styled.div`
display: flex;
flex-wrap: wrap;
width: 630px;
width: 650px;
height: 400px;
justify-content: flex-start;
margin: 0 auto;
Expand Down
10 changes: 6 additions & 4 deletions src/page/ManageGenPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -120,10 +120,12 @@ export default function ManageGenPage() {

// 수정할 데이터를 가져옵니다.
const updatedData = {
role: editedRole,
generation: editedGen,
part: editedRole,
year: editedGen,
};

console.log(updatedData);

try {
// group_id를 사용하여 수정 요청을 보냅니다.
const response = await axios.patch(
Expand Down Expand Up @@ -155,7 +157,7 @@ export default function ManageGenPage() {
try {
// member_id를 사용하여 삭제 요청을 보냅니다.
await axios.delete(
`https://server.inuappcenter.kr/groups?${selectedGroupId}`
`https://server.inuappcenter.kr/groups/${selectedGroupId}`
);
console.log('Member with ID', selectedGroupId, 'has been deleted.');

Expand Down Expand Up @@ -241,7 +243,7 @@ export default function ManageGenPage() {
onRequestClose={closeEditModal}
contentLabel='Edit Member Modal'
>
<ModalTitle>역할 수정</ModalTitle>
<ModalTitle>기수 수정</ModalTitle>
<ModalLabel>파트</ModalLabel>
<ModalInput
type='text'
Expand Down
Loading

0 comments on commit 75e2410

Please sign in to comment.