Skip to content

Refactor/main 화면 구현 #61

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ToKyun02 merged 5 commits into from
Dec 24, 2024
Merged

Refactor/main 화면 구현 #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
008de48
✨ feat : 에러 메시지 토스트 알림으로 변경
LMS10 Dec 24, 2024
d273f92
♻️ refactor : 오른쪽 화살표 이미지 CLS 처리 및 색 변경
LMS10 Dec 24, 2024
15adcc5
♻️ refactor : 로고 이미지 CLS 처리
LMS10 Dec 24, 2024
eae7e57
♻️ refactor : 하단 배너 이미지 img 태그에서 object 태그로 변경
LMS10 Dec 24, 2024
ea9b224
♻️ refactor : List 페이지 우측 상단 버튼이랑 CSS 통일
LMS10 Dec 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions src/assets/images/icons/ic_Arrow-dash-right.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
13 changes: 13 additions & 0 deletions src/components/ToastHome/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { PropTypes } from 'prop-types';

const ToastHome = ({ errorMessage }) => {
ToastHome.propTypes = {
errorMessage: PropTypes.string.isRequired,
};
return (
<div className='fixed bottom-[100px] md:bottom-[60px] left-1/2 px-5 py-3 bg-black rounded-lg text-sm/[18px] font-medium text-white -translate-x-1/2 shadow-2pt animate-slide-up-fade-delete'>
{errorMessage}
</div>
);
};
export default ToastHome;
24 changes: 18 additions & 6 deletions src/pages/Home/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,21 +1,31 @@
import { useState } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { getSubjectById, postSubject } from 'api/subjects';
import ToastHome from 'components/ToastHome';
import imgLogo from 'assets/images/img_Logo.svg';
import imgBanner from 'assets/images/img_Banner.svg';
import icArrowDashRight from 'assets/images/icons/ic_Arrow-dash-right.svg';
import { ReactComponent as IcArrowDashRight } from 'assets/images/icons/ic_Arrow-dash-right.svg';
import { ReactComponent as IcPerson } from 'assets/images/icons/ic_Person.svg';

const Home = () => {
const [name, setName] = useState('');
const [errorMessage, setErrorMessage] = useState('');
const [toastHome, setToastHome] = useState(false);
const navigate = useNavigate();

const toastTimer = () => {
setToastHome(true);
setTimeout(() => {
setToastHome(false);
}, 3000);
};

const handleSubmit = async (e) => {
e.preventDefault();

if (!name.trim()) {
setErrorMessage('이름을 입력해주세요.');
toastTimer();
return;
}

Expand All @@ -28,6 +38,7 @@ const Home = () => {
navigate(`/post/${storedId}/answer`);
} else {
setErrorMessage('이전에 등록했던 이름을 입력해 주세요.');
toastTimer();
}
} else {
const newSubject = await postSubject({ name: name.trim() });
Expand All @@ -41,14 +52,14 @@ const Home = () => {

return (
<div className='flex flex-col items-center relative overflow-hidden w-full h-screen bg-gray-20 z-[1]'>
<img src={imgLogo} alt='오픈마인드 로고' className='w-[248px] h-auto mt-[80px] mb-[24px] md:w-[456px] md:mt-[160px] z-[1]' />
<img src={imgLogo} alt='오픈마인드 로고' className='w-[248px] h-[98px] mt-[80px] mb-[24px] md:w-[456px] md:h-[180px] md:mt-[160px] z-[1]' />
<div className='w-full flex justify-center md:absolute md:top-[45px] md:right-[50px] md:w-auto xl:right-[130px] z-[1]'>
<Link
to='/list'
className='flex gap-1 bg-brown-10 border border-brown-40 text-brown-40 py-[8px] px-[12px] rounded-lg transition-colors duration-300 hover:bg-brown-20 md:py-[12px] md:px-[24px]'
className='flex flex-row items-center justify-center gap-[4px] bg-brown-10 border-brown-40 border rounded-lg px-3 py-2 text-sm text-brown-40 font-normal whitespace-nowrap w-[127px] h-[34px] md:w-[166px] md:h-[46px] md:gap-[8px] md:text-base transition-colors duration-300 hover:bg-brown-20'
>
질문하러 가기
<img src={icArrowDashRight} alt='질문하러 가기 버튼' />
<IcArrowDashRight alt='질문하러 가기 버튼' className='fill-brown-40 w-[18px] h-[18px]' />
</Link>
</div>

Expand All @@ -64,7 +75,6 @@ const Home = () => {
value={name}
onChange={(e) => setName(e.target.value)}
/>
{errorMessage && <div className='text-[14px] mt-[8px] font-medium pl-[16px] text-red-50'>{errorMessage}</div>}
<button
type='submit'
className='w-full mt-[16px] bg-brown-40 text-white text-[16px] leading-[22px] py-[12px] px-[24px] rounded-[8px] border-none cursor-pointer transition-colors duration-300 hover:bg-brown-50'
Expand All @@ -73,7 +83,9 @@ const Home = () => {
</button>
</form>

<img src={imgBanner} alt='오픈마인드 배너' className='absolute bottom-0 left-0 right-0 w-full z-0' />
<object data={imgBanner} type='image/svg+xml' className='absolute bottom-0 left-0 right-0 w-full z-0' aria-label='오픈마인드 배너' />

{toastHome && <ToastHome errorMessage={errorMessage} />}
</div>
);
};
Expand Down
Loading