Skip to content

Commit

Permalink
Merge pull request #130 from B03-Killer/fix/#118
Browse files Browse the repository at this point in the history
todoList, 프로필페이지, 메인 페이지 오류 수정
  • Loading branch information
hb9901 authored Aug 2, 2024
2 parents 09111e8 + 73915b6 commit a7acf7e
Show file tree
Hide file tree
Showing 13 changed files with 139 additions and 317 deletions.
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
'use client';
import Typography from '@/components/Typography';
import useUserStore from '@/store/userStore';
import { Tables } from '@/types/supabase';
import { useState } from 'react';
import AvatarCard from '../AvatarCard';
Expand All @@ -10,6 +11,7 @@ interface MemberExistComponentProps {
}

const MemberExistComponent = ({ workspaceUserList }: MemberExistComponentProps) => {
const workspaceUserId = useUserStore((state) => state.workspaceUserId);
const [isCardExist, setIsCardExist] = useState<Boolean>(true);

const handleCardClose = () => {
Expand All @@ -29,9 +31,12 @@ const MemberExistComponent = ({ workspaceUserList }: MemberExistComponentProps)
</Typography>
<div>
{workspaceUserList &&
workspaceUserList.map((workspaceUser) => (
<AvatarCard key={workspaceUser.id} workspaceUser={workspaceUser} />
))}
workspaceUserList.map(
(workspaceUser) =>
workspaceUserId !== workspaceUser.id && (
<AvatarCard key={workspaceUser.id} workspaceUser={workspaceUser} />
)
)}
</div>
</div>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ const Profile = () => {
const workspaceId = useWorkspaceId();
const targetWorkspaceUserId = params.targetWorkspaceUserId as string;
const workspaceUserId = useUserStore((state) => state.workspaceUserId);
const { workspaceUser } = useWorkspaceUser(workspaceUserId);
const { workspaceUser } = useWorkspaceUser(targetWorkspaceUserId);

if (!workspaceUser) return;
const profileImg = workspaceUser.profile_image;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,9 @@

import Button from '@/components/Button';
import Typography from '@/components/Typography';
import ChevronDownIcon from '@/icons/ChevronDown.svg';
import ChevronUpIcon from '@/icons/ChevronUpIcon.svg';
import dayjs, { Dayjs } from 'dayjs';
import { useState } from 'react';
import useTime from '../../_hooks/useTime';
import TimeInput from '../TimeInput';

interface DateBottomProps {
isStartTime: boolean;
Expand All @@ -25,57 +24,22 @@ const DateBottom = ({
handleSetEndTime
}: DateBottomProps) => {
const time = isStartTime ? dayjs(startTime) : dayjs(endTime);
const [isAm, setIsAm] = useState(time.format('a') === 'am');
const [hour, setHour] = useState(time.format('a') === 'am' ? time.hour() : time.hour() - 12);
const [minute, setMinute] = useState(time.minute());
const regHour = /^([0-9]|1[0-2])$/;
const regMinute = /^([0-5][0-9]|[0-9])$/;

const checkHourStr = (hour: number) => {
if (regHour.test(String(hour))) setHour(hour);
};

const checkMinuteStr = (minute: number) => {
if (regMinute.test(String(minute))) setMinute(minute);
};

const handleAM = () => {
setIsAm(true);
};

const handlePM = () => {
setIsAm(false);
};

const handleHourUp = () => {
if (hour >= 12) {
setHour(1);
} else {
if (regHour.test(String(hour))) setHour((prevHour) => prevHour + 1);
}
};

const handleHourDown = () => {
if (hour <= 1) {
setHour(12);
} else {
if (regHour.test(String(hour))) setHour((prevHour) => prevHour - 1);
}
};
const handleMinuteUp = () => {
if (minute >= 59) {
setMinute(0);
} else {
if (regMinute.test(String(minute))) setMinute((prevMinute) => prevMinute + 1);
}
};
const handleMinuteDown = () => {
if (minute <= 0) {
setMinute(59);
} else {
if (regMinute.test(String(minute))) setMinute((prevMinute) => prevMinute - 1);
}
};
const initIsAM = time.format('a') === 'am';
const initHour = time.format('a') === 'am' ? time.hour() : time.hour() - 12;
const initMinute = time.minute();
const {
isAm,
hour,
minute,
checkHourStr,
checkMinuteStr,
handleAM,
handlePM,
handleHourUp,
handleHourDown,
handleMinuteUp,
handleMinuteDown
} = useTime(initIsAM, initHour, initMinute);

const handleCheck = () => {
const newTime = dayjs()
Expand All @@ -98,47 +62,11 @@ const DateBottom = ({
</Button>
</div>
<div className="flex flex-row items-center mt-[12px] mb-[24px] gap-[42px]">
<div className="flex flex-col items-center gap-2">
<button onClick={handleHourUp}>
<ChevronUpIcon />
</button>
<Typography variant="Title22px" color="grey900">
<div className="flex items-center justify-center w-[71px] h-[71px] bg-[#FAFAFA] rounded-[6px]">
<input
className="w-10 text-center bg-[#FAFAFA] appearance-none"
type="number"
value={Number(hour)}
pattern="[0-9]*"
onChange={(e) => checkHourStr(Number(e.target.value))}
/>
</div>
</Typography>
<button onClick={handleHourDown}>
<ChevronDownIcon />
</button>
</div>
<TimeInput handleUp={handleHourUp} handleDown={handleHourDown} time={hour} checkStr={checkHourStr} />
<Typography variant="Title22px" color="grey900">
:
</Typography>
<div className="flex flex-col items-center gap-2">
<button onClick={handleMinuteUp}>
<ChevronUpIcon />
</button>
<Typography variant="Title22px" color="grey900">
<div className="flex items-center justify-center w-[71px] h-[71px] bg-[#FAFAFA] rounded-[6px]">
<input
className="w-10 text-center bg-[#FAFAFA] appearance-none focus:outline-none"
type="number"
value={Number(minute)}
pattern="[0-9]*"
onChange={(e) => checkMinuteStr(Number(e.target.value))}
/>
</div>
</Typography>
<button onClick={handleMinuteDown}>
<ChevronDownIcon />
</button>
</div>
<TimeInput handleUp={handleMinuteUp} handleDown={handleMinuteDown} time={minute} checkStr={checkMinuteStr} />
</div>
<Button theme="primary" isFullWidth onClick={handleCheck}>
확인
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import Typography from '@/components/Typography';
import ChevronDownIcon from '@/icons/ChevronDown.svg';
import ChevronUpIcon from '@/icons/ChevronUpIcon.svg';

interface TimeInputProps {
handleUp: () => void;
handleDown: () => void;
checkStr: (time: number) => void;
time: number;
}

const TimeInput = ({ handleUp, handleDown, checkStr, time }: TimeInputProps) => {
return (
<div className="flex flex-col items-center gap-2">
<button onClick={handleUp}>
<ChevronUpIcon />
</button>
<Typography variant="Title22px" color="grey900">
<div className="flex items-center justify-center w-[71px] h-[71px] bg-[#FAFAFA] rounded-[6px]">
<input
className="w-10 text-center bg-[#FAFAFA] appearance-none"
type="text"
inputMode="numeric"
value={time}
pattern="[0-9]*"
onChange={(e) => checkStr(Number(e.target.value))}
/>
</div>
</Typography>
<button onClick={handleDown}>
<ChevronDownIcon />
</button>
</div>
);
};

export default TimeInput;
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from './TimeInput';
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import { useState } from 'react';

const useTime = (initIsAm: boolean, initHour: number, initMinute: number) => {
const [isAm, setIsAm] = useState(initIsAm);
const [hour, setHour] = useState(initHour);
const [minute, setMinute] = useState(initMinute);
const regHour = /^([0-9]|1[0-2])$/;
const regMinute = /^([0-5][0-9]|[0-9])$/;

const checkHourStr = (hour: number) => {
if (regHour.test(String(hour))) setHour(hour);
};

const checkMinuteStr = (minute: number) => {
if (regMinute.test(String(minute))) setMinute(minute);
};

const handleAM = () => {
setIsAm(true);
};

const handlePM = () => {
setIsAm(false);
};

const handleHourUp = () => {
if (hour >= 12) {
setHour(1);
} else {
if (regHour.test(String(hour))) setHour((prevHour) => prevHour + 1);
}
};

const handleHourDown = () => {
if (hour <= 1) {
setHour(12);
} else {
if (regHour.test(String(hour))) setHour((prevHour) => prevHour - 1);
}
};
const handleMinuteUp = () => {
if (minute >= 59) {
setMinute(0);
} else {
if (regMinute.test(String(minute))) setMinute((prevMinute) => prevMinute + 1);
}
};
const handleMinuteDown = () => {
if (minute <= 0) {
setMinute(59);
} else {
if (regMinute.test(String(minute))) setMinute((prevMinute) => prevMinute - 1);
}
};

return {
isAm,
hour,
minute,
checkHourStr,
checkMinuteStr,
handleAM,
handlePM,
handleHourUp,
handleHourDown,
handleMinuteUp,
handleMinuteDown
};
};

export default useTime;
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import ModalProvider from '@/providers/ModalProvider';

function TodoListProvidersLayout({ children }: { children: React.ReactNode }) {
return <ModalProvider>{children}</ModalProvider>;
return <>{children}</>;
}

export default TodoListProvidersLayout;
22 changes: 0 additions & 22 deletions src/components/ModalBackDrop/ModalBackDrops.tsx

This file was deleted.

1 change: 0 additions & 1 deletion src/components/ModalBackDrop/index.ts

This file was deleted.

Loading

0 comments on commit a7acf7e

Please sign in to comment.