Skip to content

calendar modifiacation #98

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

Open
ohkjh1 wants to merge 3 commits into
base: dev
Choose a base branch
from
Open

calendar modifiacation #98

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
42fed7c
calendar modifiacation
ohkjh1 Nov 23, 2023
f040503
main page mid-modification
ohkjh1 Nov 24, 2023
e2a9de0
main page
ohkjh1 Nov 24, 2023
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
Binary file added public/write.png
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.
Binary file added public/감정그래프.png
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.
Binary file modified public/달력.png
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.
Binary file added public/일기작성.png
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.
Binary file added public/한마디.png
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.
17 changes: 10 additions & 7 deletions src/app/components/Calendar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,13 +60,16 @@ const ModalCalendar = ({ isOpen, closeModal }: any) => {
value: Date,
e: React.MouseEvent<HTMLButtonElement, MouseEvent>,
) => {
e.stopPropagation()
const formattedDate = moment(value).format('YYYY-MM-DD')
const destinationUrl = getDestinationUrl(formattedDate)
router.push(destinationUrl)

// 페이지 이동 후에 달력을 닫도록 onChange 함수 호출
onChange(null) // 또는 다른 원하는 값으로 초기화
e.stopPropagation();
const formattedDate = moment(value).format('YYYY-MM-DD');
const destinationUrl = getDestinationUrl(formattedDate);
router.push(destinationUrl);

// Call closeModal to close the modal calendar
closeModal();

// Optionally, you can still reset the calendar's value state if needed
onChange(null); // or any other value you want to reset to
}

const handleMarking = (
Expand Down
18 changes: 5 additions & 13 deletions src/app/components/Nav.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,10 +29,11 @@ const Nav: React.FC<SearchComponentProps> = () => {
const [inputValue, setInputValue] = useState<string>('') // 일기검색
const [user, setUser] = useRecoilState(userInfo)
const [isCalendarOpen, setIsCalendarOpen] = useState(false) //달력모달
const [searchBlur, setSearchBlur] = useState(false) // 검색창 선 색상 변경 용도

const [userImg, setUserImg] = useState<any>('') // 유저 이미지
const [snowTheme, setSnowTheme] = useState<boolean>(false)
Comment on lines 29 to 34
Copy link

@coderabbitai coderabbitai bot Nov 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The state userImg is initialized with an empty string, but later it is checked for values like 'no image' or undefined. It's important to ensure consistency in the default value and the checks performed later in the code.

const [searchBlur, setSearchBlur] = useState(false)



const themeOnClick = () => {
setSnowTheme(!snowTheme)
Expand Down Expand Up @@ -80,9 +81,7 @@ const Nav: React.FC<SearchComponentProps> = () => {
setIsCalendarOpen(!isCalendarOpen)
}

const handleBlur = () => {
setSearchBlur(!searchBlur)
}

useEffect(() => {
// 초기 렌더링 시 테마를 라이트 모드로 설정
if (currentTheme !== 'light') {
Comment on lines 81 to 87
Copy link

@coderabbitai coderabbitai bot Nov 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The useEffect hook is set to change the theme to 'light' on the initial render. This could potentially override user preferences if they have set a different theme. Consider checking for user preferences before setting a default theme.

Expand Down Expand Up @@ -122,14 +121,7 @@ const Nav: React.FC<SearchComponentProps> = () => {
priority
onClick={onClickSearch}
/>
Comment on lines 121 to 123
Copy link

@coderabbitai coderabbitai bot Nov 23, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The onClick handler onClickSearch is attached to the Image component, which is not a button or input. This could lead to accessibility issues. Consider wrapping the Image in a button or another interactive element.

<input
type="text"
className={`w-[400px] h-[40px] outline-none border-b-[2px] ${
searchBlur ? 'border-[#b2a4d4]' : 'border-gray'
} bg-[transparent] p-[7px] pl-[30px]`}
onFocus={() => setSearchBlur(true)}
onBlur={() => setSearchBlur(false)}
/>

</div>
</div>
<div>
Expand Down
112 changes: 73 additions & 39 deletions src/app/components/NotLoginMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import { useState } from "react";
import Link from 'next/link';

const NotLoginMain = () => {
const [hover, setHover] = useState<string | null>(null);
const [hover, setHover] = useState<string | null>('first'); // 초기값 설정
Copy link

@coderabbitai coderabbitai bot Nov 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The comment is still in Korean; it should be translated to English for consistency.

const [lastHoveredImage, setLastHoveredImage] = useState<string | null>(null);

const handleMouseOver = (image: string) => {
Expand All @@ -10,13 +11,19 @@ const NotLoginMain = () => {
};

const handleMouseOut = () => {

};
Comment on lines 13 to 15
Copy link

@coderabbitai coderabbitai bot Nov 24, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The handleMouseOut function is still empty and should either be implemented or removed to maintain clean code.


const renderImage = (imageSource: string) => {
return (
<div className="w-[1400px] h-[300px] border border-[tomato] mt-[50px]">
<img src={imageSource} alt="Descriptive Text of Image" className="w-full h-auto object-contain" />
<div className="w-[1200px] h-[680px] mt-[5px] mb-[10px] flex justify-center ">
<Link href="/api/auth/signin">
<img
src={imageSource}
alt="Descriptive Text of Image"
className="object-contain transition-opacity duration-500"
/>
</Link>
</div>
);
};
Expand All @@ -30,86 +37,113 @@ const NotLoginMain = () => {
<div className="w-full flex flex-col justify-center items-center pt-[150px] pb-[150px]">
<div className="flex flex-col justify-center items-center">
<span className="text-[60px] font-bold">
하루를 기록하는 일기
감정을 기록하는 일기
</span>
<span className="text-lg">
<span className="text-lg mb-[60px] mt-[50px]" >
당신의 감정을 기록하고, 되돌아 보세요.
</span>
<span className="mt-[50px] text-[30px] px-[24px] py-[12px] border rounded-md text-white bg-[#b2a4d4] cursor-pointer">
내 감정을 기록하기
</span>
<Link href="/api/auth/signin">
<span className="mt-[100px] text-[30px] px-[24px] py-[12px] border rounded-md text-white bg-[#b2a4d4] cursor-pointer">
내 감정을 기록하기
</span>
</Link>
</div>

<div className="flex flex-col w-full justify-center items-center mt-[100px]">
<div className="flex flex-col w-full justify-center items-center mt-[90px]">
<div className="border w-[1200px] h-[300px] overflow-hidden">
<img src="/ddiary.png" alt="Descriptive Text of Image" className="w-full h-auto object-cover object-center" />
<img src="/ddiary.png" alt="Descriptive Text of Image" className="w-full h-auto object-contain object-center" />
</div>

<div className="flex justify-center items-center w-full">
<div className="flex justify-center items-center w-full space-x-4 mt-[100px] mb-[50px]">
{/* 일기 작성하기 Section */}
<div className="flex items-center p-[60px]">
<div className={`flex flex-col justify-center items-start p-[20px] rounded-md border cursor-pointer duration-200 ${hover === 'first' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
<div className="flex items-center p-[20px]">
<div className={`flex flex-col justify-center items-start p-[15px] rounded-md border cursor-pointer duration-200 ${hover === 'first' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
onMouseOver={() => handleMouseOver('first')}
onMouseOut={() => handleMouseOut()}
>
<div className="flex justify-center items-center mb-[15px]">
<div className="w-[25px] h-[25px] border rounded-md bg-[#b2a4d4]"></div>
<span className="text-[20px] ml-[10px] font-bold">일기 작성하기</span>
<div className="flex justify-center items-center mb-[10px]">
<div className="w-[20px] h-[20px] border rounded-md bg-[#b2a4d4]"></div>
<span className="text-[20px] ml-[8px] font-bold">일기 작성</span>
</div>
<div className="flex justify-center items-center text-[14px]">
<p className="text-[17px] w-[230px] h-[60px]">

"일기를 작성하면 <br />AI가 감정을 알려줘요."
</p>
</div>
</div>
</div>

{/* 나에게 한 마디 Section */}
<div className="flex items-center p-[60px]">
<div className={`flex flex-col justify-center items-start p-[20px] rounded-md border cursor-pointer duration-200 ${hover === 'second' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
<div className="flex items-center p-[20px]">
<div className={`flex flex-col justify-center items-start p-[15px] rounded-md border cursor-pointer duration-200 ${hover === 'second' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
onMouseOver={() => handleMouseOver('second')}
onMouseOut={() => handleMouseOut()}
>
<div className="flex justify-center items-center mb-[15px]">
<div className="w-[25px] h-[25px] border rounded-md bg-[#b2a4d4]"></div>
<span className="text-[20px] ml-[10px] font-bold">나에게 한 마디</span>
<div className="flex justify-center items-center mb-[10px]">
<div className="w-[20px] h-[20px] border rounded-md bg-[#ffe4b5]"></div>
<span className="text-[20px] ml-[8px] font-bold">나에게 한 마디</span>
</div>
<div className="flex justify-center items-center text-[14px]">
<p className=" text-[17px] w-[230px] h-[60px]">
"오늘 하루 있던 일을 털어놔 봐요. <br />AI가 조언해 줄거에요."
</p>
</div>
</div>
</div>

{/* 달력 보기 Section */}
<div className="flex items-center p-[60px]">
<div className={`flex flex-col justify-center items-start p-[20px] rounded-md border cursor-pointer duration-200 ${hover === 'third' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
<div className="flex items-center p-[20px]">
<div className={`flex flex-col justify-center items-start p-[15px] rounded-md border cursor-pointer duration-200 ${hover === 'third' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
onMouseOver={() => handleMouseOver('third')}
onMouseOut={() => handleMouseOut()}
>
<div className="flex justify-center items-center mb-[15px]">
<div className="w-[25px] h-[25px] border rounded-md bg-[#b2a4d4]"></div>
<span className="text-[20px] ml-[10px] font-bold">달력 보기</span>
<div className="flex justify-center items-center mb-[10px]">
<div className="w-[20px] h-[20px] border rounded-md bg-[#b0c4de]"></div>
<span className="text-[20px] ml-[8px] font-bold">달력 보기</span>
</div>
<div className="flex justify-center items-center text-[14px]">
<p className="text-[17px] w-[230px] h-[60px]">
"한달 간의 감정을 둘러보고, <br /> 일기를 다시 들여다 보아요."
</p>
</div>
</div>
</div>

{/* 감정 그래프 Section */}
<div className="flex items-center p-[60px]">
<div className={`flex flex-col justify-center items-start p-[20px] rounded-md border cursor-pointer duration-200 ${hover === 'fourth' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
<div className="flex items-center p-[20px]">
<div className={`flex flex-col justify-center items-start p-[15px] rounded-md border cursor-pointer duration-200 ${hover === 'fourth' ? 'bg-white shadow-2xl' : 'bg-gray-100 shadow-lg'}`}
onMouseOver={() => handleMouseOver('fourth')}
onMouseOut={() => handleMouseOut()}
>
<div className="flex justify-center items-center mb-[15px]">
<div className="w-[25px] h-[25px] border rounded-md bg-[#b2a4d4]"></div>
<span className="text-[20px] ml-[10px] font-bold">감정 그래프</span>
<div className="flex justify-center items-center mb-[10px]">
<div className="w-[20px] h-[20px] border rounded-md bg-[#a9a9a9]"></div>
<span className="text-[20px] ml-[8px] font-bold">감정 그래프</span>
</div>
<div className="flex justify-center items-center text-[14px]">
<p className="text-[17px] w-[230px] h-[60px]">
"한 달 간의 감정 추이를 보며,<br /> 자신의 감정을 조절 해봐요."
</p>
</div>
</div>
</div>
</div>


{/* 페이지 이용 방법 이미지 Section */}
{shouldRenderImage('first') && renderImage("/cat.jpg")}
{shouldRenderImage('second') && renderImage("/catcatcat.png")}
{shouldRenderImage('first') && renderImage("/일기작성.png")}
{shouldRenderImage('second') && renderImage("/한마디.png")}
{shouldRenderImage('third') && renderImage("/달력.png")}
{shouldRenderImage('fourth') && renderImage("/cat1.png")}
{shouldRenderImage('fourth') && renderImage("/감정그래프.png")}

{/* 나머지 컴포넌트 부분 */}
<div className="w-full flex justify-center items-center mt-[800px]">
<span className="mt-[50px] text-[30px] px-[24px] py-[12px] border rounded-md text-white bg-[#b2a4d4] cursor-pointer" style={{ marginTop: '100px' }}>
감정을 기록하러 가볼까요?
</span>
<div className="w-full flex justify-center items-center mt-[10px]">
{/* 로그인 페이지로 이동하는 Link */}
<Link href="/api/auth/signin">
<span className="mt-[0px] text-[30px] px-[24px] py-[12px] border rounded-md text-white bg-[#b2a4d4] cursor-pointer" style={{ marginTop: '100px' }}>
감정을 기록하러 가볼까요?
</span>
</Link>
</div>
</div>
</div>
Expand Down
Loading