Skip to content
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

Jump to bottom

style : main 컴포넌트 구조 수정, 레이아웃 변경, 아이콘 수정 #109

Merged
merged 1 commit into from
Feb 5, 2024
Merged

style : main 컴포넌트 구조 수정, 레이아웃 변경, 아이콘 수정 #109

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion .vscode/settings.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
"source.fixAll.eslint": "explicit"
},
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
Expand Down
Binary file added public/assets/icons/ic_char_default.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.
26 changes: 0 additions & 26 deletions public/assets/icons/ic_char_default.svg
View file
Open in desktop

This file was deleted.

263 changes: 9 additions & 254 deletions src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,93 +1,17 @@
'use client';

import NavigationBar from '@/components/NavigationBar';
import { alarmSettingState, alarmState } from '@/recoil/alarm';
import Image from 'next/image';
import Link from 'next/link';
import { useRecoilState, useRecoilValue } from 'recoil';
import styled from 'styled-components';
import icExclamationMark from 'public/assets/icons/ic_exclamationMark_gray.svg';
import icCharDefault from 'public/assets/icons/ic_char_default.svg';
import { useEffect, useState } from 'react';
import icCharDefault from 'public/assets/icons/ic_char_default.png';
import DetailRoute from '@/components/main/DetailRoute';
import AlarmCardComponent from '@/components/main/AlarmCard';
import { useRecoilState } from 'recoil';
import { alarmState } from '@/recoil/alarm';
import SetAlaramCardComponent from '@/components/main/SetAlaramCard';

export default function Home() {
const [alarm, setAlarm] = useRecoilState(alarmState);
const alarmSettingTime: Date = useRecoilValue(alarmSettingState);
const [restHour, setRestHour] = useState('0');
const [restMinute, setRestMinute] = useState('0');
const [timeGage, setTimeGage] = useState(0);

useEffect(() => {
if (alarm === false) {
setAlarm(alarm);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [alarm]);

const alarmSettingHandler = () => {
if (alarm === true) {
setAlarm(!alarm);
}
};

function updateCurrentTime() {
// 막차 시간 임의로 설정ß
const makchaTime = new Date('Wed Nov 23 2023 23:59:59 GMT+0900');
const currentTime = new Date();
console.log(currentTime);

// 두 시간 사이의 차이 (밀리초)
const timeDifferenceInMilliseconds =
makchaTime.getTime() - currentTime.getTime();

// 차이를 시간과 분으로 계산
const newRestHour = Math.floor(
timeDifferenceInMilliseconds / (1000 * 60 * 60)
);
const newRestMinute = Math.floor(
(timeDifferenceInMilliseconds % (1000 * 60 * 60)) / (1000 * 60)
);
const formattedRestHour = String(newRestHour).padStart(2, '0');
const formattedRestMinute = String(newRestMinute).padStart(2, '0');

// restHour와 restMinute 상태 업데이트
setRestHour(formattedRestHour);
setRestMinute(formattedRestMinute);

// 게이지 계산하기
// 알람 시간을 Date 객체로 변환
const alarmSettingTime2 = new Date(alarmSettingTime);
// 게이지 전체값 계산
const leftTime = makchaTime.getTime() - alarmSettingTime2.getTime();
// 게이지 현재값 계산
const currentLeftTime =
((currentTime.getTime() - alarmSettingTime2.getTime()) / leftTime) * 100;

console.log(`타임 게이지: ${currentLeftTime}`);
setTimeGage(currentLeftTime);
}

// 컴포넌트가 처음 렌더링될 때 실행
useEffect(() => {
// 맨 처음에 한 번 실행
updateCurrentTime();

// 그 후에는 1분마다 실행
const timerId = setInterval(updateCurrentTime, 60000);

return () => {
clearInterval(timerId); // 컴포넌트가 언마운트되면 타이머 해제
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);

//게이지 기본 속성값
const RADIUS = 50;
const CIRCUMFERENCE = 2 * Math.PI * RADIUS; // 둘레 길이
const progress = timeGage / 100;
const circleProgress = CIRCUMFERENCE * (1 - progress);

const [alarm] = useRecoilState(alarmState);
return (
<Container>
<TitleWrapper>
Expand All @@ -104,73 +28,9 @@ export default function Home() {
priority
/>
</TitleWrapper>

<ContentWrapper>
<AlarmCard>
<AlarmSetting>
<StartingPoint $alarm={alarm.toString()}>
출발지
<Link href={'/search'}>
{alarm === false ? '출발지 설정하기' : ''}
</Link>
</StartingPoint>
<Destination $alarm={alarm.toString()}>
도착지
<Link href={'/search'}>
{alarm === false ? '도착지 설정하기' : ''}
</Link>
</Destination>
<StartAlarm $alarm={alarm.toString()}>
<p>출발 알림</p>
<AlarmToggle $alarm={alarm.toString()}>
<ToggleSwitch
$alarm={alarm.toString()}
onClick={() => {
alarmSettingHandler();
}}
>
{alarm === false ? 'OFF' : 'ON'}
</ToggleSwitch>
</AlarmToggle>
</StartAlarm>
</AlarmSetting>
<AlarmGage>
<svg
className="circle_progress"
width="120"
height="120"
viewBox="0 0 120 120"
>
<circle
className="frame"
cx="60"
cy="60"
r={RADIUS}
strokeWidth="15"
fill="transparent"
stroke="#ddd"
strokeDasharray={CIRCUMFERENCE}
strokeDashoffset="0"
strokeLinecap="round"
/>
<circle
className="bar"
cx="60"
cy="60"
r={RADIUS}
stroke={alarm === false ? '#ddd' : '#FFD9C9'}
strokeWidth="15"
strokeDasharray={CIRCUMFERENCE}
strokeDashoffset={circleProgress}
fill="transparent"
strokeLinecap="round"
/>
</svg>
<AlarmTimer $alarm={alarm.toString()}>
{alarm === false ? '00:00' : `${restHour} : ${restMinute}`}
</AlarmTimer>
</AlarmGage>
</AlarmCard>
{alarm ? <AlarmCardComponent /> : <SetAlaramCardComponent />}

<RouteWrap>
{alarm === false ? (
<InfoBox>
Expand All @@ -181,7 +41,7 @@ export default function Home() {
height={40}
priority
/>
<p>막차 경로를 설정해주세요</p>
<p>막차 알림을 설정하면 경로가 나타나요</p>
</InfoBox>
) : (
<>
Expand Down Expand Up @@ -229,111 +89,6 @@ const ContentWrapper = styled.div`
padding-bottom: 88px;
`;

const AlarmCard = styled.div`
position: absolute;
top: -100px;
left: 50%;
transform: translateX(-50%);
display: flex;
width: calc(100% - 32px);
height: 168px;
background-color: #fff;
padding: 29px 32px;
margin: 16px auto;
border-radius: 20px;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
`;
const AlarmSetting = styled.div`
width: calc(100% - 140px);
margin-right: 16px;

p {
display: flex;
align-items: center;
}
`;
const StartingPoint = styled.p<{ $alarm: string }>`
color: ${(props) => (props.$alarm === 'true' ? '#333' : '#ccc')};
font-size: 14px;
font-weight: 700;
& a {
font-weight: 300;
padding-left: 8px;
display: inline-block;
width: 103px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
padding-bottom: 8px;
`;
const Destination = styled.p<{ $alarm: string }>`
color: ${(props) => (props.$alarm === 'true' ? '#333' : '#ccc')};
font-size: 14px;
font-weight: 700;
& a {
font-weight: 300;
padding-left: 8px;
display: inline-block;
width: 103px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
border-bottom: 1px solid #ccc;
padding-bottom: 18px;
`;
const StartAlarm = styled.div<{ $alarm: string }>`
color: ${(props) => (props.$alarm === 'true' ? '#333' : '#ccc')};
display: flex;
align-items: center;
padding-top: 18px;
& p {
font-size: 14px;
font-weight: 700;
line-height: 26px;
}
`;
const AlarmToggle = styled.div<{ $alarm: string }>`
background-color: ${(props) =>
props.$alarm === 'true' ? '#FFD9C9' : '#D9D9D9'};
width: 58px;
height: 26px;
border-radius: 20px;
margin-left: 10px;
`;
const ToggleSwitch = styled.button<{ $alarm: string }>`
color: #fff;
background-color: ${(props) =>
props.$alarm === 'true' ? '#FF8048' : '#888'};
border: none;
width: 35px;
height: 22px;
border-radius: 20px;
font-size: 12px;
transform: ${(props) =>
props.$alarm === 'true' ? 'translate(20px, 2px);' : 'translate(2px, 2px);'};
transition: 0.3s;
`;
const AlarmGage = styled.div`
position: relative;
width: 120px;
height: 120px;
transform: rotate(-90deg);
`;

const AlarmTimer = styled.p<{ $alarm: string }>`
width: 80px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(90deg);
font-weight: 600;
font-size: 24px;
text-align: center;
color: ${(props) => (props.$alarm === 'true' ? '#FF8048' : '#aaa')};
`;

const RouteWrap = styled.div`
padding-left: 16px;
height: 100%;
Expand Down
Loading
Loading