[ Style ] 모립세트 컴포넌트 구현 #225

KIMGEONHWI · 2024-12-03T18:21:52Z

🔥 Related Issues

close [ Style ] 모립세트 컴포넌트 구현 #223

✅ 작업 리스트

모립세트 컴포넌트 구현
모립세트 타이틀 구현

🔧 작업 내용

MoribSetTitle.tsx

const MoribSetTitle = ({ onClick, registeredNames }: MoribSetTitleProps) => {
	const truncateRegisteredNames = () => {
		const maxDisplayLength = 55;
		const joinedNames = registeredNames.join(', ');
		return joinedNames.length > maxDisplayLength ? `${joinedNames.slice(0, maxDisplayLength)}...` : joinedNames;
	};

	return (
		<>
			<div onClick={onClick} className="ml-[3.2rem] mt-[3.2rem] flex h-[5.4rem] w-[81rem] items-center">
				{registeredNames.length > 0 ? <MoribSetBtnActiveIcon /> : <MoribSetBtnDefaultIcon />}
				<p className="subhead-semibold-20 flex overflow-hidden text-ellipsis whitespace-nowrap text-gray-03">
					{registeredNames.length > 0 ? (
						<>
							<span className="text-mint-01">[{truncateRegisteredNames()}] 모립 세트 실행 중</span>
						</>
					) : (
						'모립세트를 등록해주세요.'
					)}
				</p>
			</div>
		</>
	);
};

export default MoribSetTitle;

모립세트를 등록하면, ui에 적용되는 컴포넌트. 일정 width가 넘어가면 ...으로 보여야하고, 선택한 모립세트들을 대괄호([])로 묶어줘야하고, 쉼표로 나누어야하는 로직이 필요하기 때문에 조금 코드가 복잡해진거같은데 해당 부분 피드백 해주실 수 있으면 해주세요!

MoribSetContainer.tsx

import { useState } from 'react';

import { ALLOW_SITE_LIST } from '@/shared/constants/allowStieList';

const MoribSetContainer = ({
	onCancel,
	onRegister,
}: {
	onCancel: () => void;
	onRegister: (selectedNames: string[]) => void;
}) => {
	const [checkedSetIds, setCheckedSetIds] = useState<number[]>([]);
	const [selectedSetId, setSelectedSetId] = useState<number | null>(null);

	const handleCheckboxChange = (id: number) => {
		setCheckedSetIds((prev) => (prev.includes(id) ? prev.filter((checkedId) => checkedId !== id) : [...prev, id]));
	};

	const handleSetClick = (id: number) => {
		setSelectedSetId((prev) => (prev === id ? null : id));
	};

	const handleRegisterClick = () => {
		const selectedNames = ALLOW_SITE_LIST.filter((item) => checkedSetIds.includes(item.id)).map(
			(item) => item.moribsetname,
		);
		onRegister(selectedNames);
	};

	return (
		<div className="ml-[4.899rem] flex h-[45rem] w-[53.2rem]">
			<div className="flex w-[23rem] flex-col rounded-l-[8px] bg-gray-bg-02 p-[1rem]">
				<h3 className="detail-reg-14 h-[3.4rem] w-[21rem] px-[1.7rem] py-[1rem] text-gray-04">모립 세트</h3>
				<ul className="mt-[0.8rem] h-[32.4rem] w-[20.4rem] overflow-y-auto">
					{ALLOW_SITE_LIST.map((item) => (
						<li
							key={item.id}
							className={`flex h-[3.4rem] w-[20.4rem] cursor-pointer items-center rounded-[6px] py-[0.3rem] pl-[1rem] pr-[0.3rem] hover:bg-gray-bg-04 ${
								item.id === selectedSetId ? 'bg-gray-bg-05' : ''
							}`}
							onClick={() => handleSetClick(item.id)}
						>
							<div
								className="h-[2.8rem] w-[2.8rem] p-[0.7rem]"
								onClick={(e) => {
									e.stopPropagation();
								}}
							>
								<input
									type="checkbox"
									id={`item-${item.id}`}
									checked={checkedSetIds.includes(item.id)}
									onChange={() => handleCheckboxChange(item.id)}
									className="h-[1.4rem] w-[1.4rem] rounded border-gray-600 focus:ring"
								/>
							</div>
							<div className="detail-semibold-14 w-[14.9rem] cursor-pointer overflow-hidden text-ellipsis whitespace-nowrap text-white">
								{item.moribsetname}
							</div>

							<span className="h-[1rem] w-[1rem] rounded-full bg-yellow-500" />
						</li>
					))}
				</ul>
				<div className="flex h-[5.4rem] justify-end gap-[0.5rem] p-[1rem]">
					<button
						onClick={onCancel}
						className="detail-semibold-14 flex h-[3.4rem] w-[5.8rem] items-center justify-center rounded-[3.297px] bg-gray-bg-06 text-white"
					>
						취소
					</button>
					<button
						onClick={handleRegisterClick}
						className="detail-semibold-14 flex h-[3.4rem] w-[5.8rem] items-center justify-center rounded-[3.297px] bg-mint-02 text-black"
					>
						등록
					</button>
				</div>
			</div>

			<div className="flex w-[30.2rem] flex-col gap-[0.8rem] rounded-r-[8px] bg-gray-bg-03 py-[1rem] pl-[0.9rem] pr-[1.7rem]">
				<h3 className="detail-reg-14 h-[3.4rem] w-[28.6rem] p-[1rem] text-gray-04">허용할 사이트</h3>
				<ul className="h-[37.6rem] overflow-y-auto">
					{ALLOW_SITE_LIST.filter((item) => item.id === selectedSetId).map((item) =>
						item.allowedsites.map((site, index) => (
							<div
								key={index}
								className="flex h-[3.2rem] w-[27.6rem] items-center gap-[1rem] rounded-[3px] px-[0.7rem] odd:bg-gray-bg-02"
							>
								<img src="https://img.icons8.com/color/48/youtube-play.png" alt="YouTube Icon" className="h-6 w-6" />
								<span className="detail-reg-12 text-white">{site}</span>
							</div>
						)),
					)}
				</ul>
			</div>
		</div>
	);
};

export default MoribSetContainer;

ALLOW_SITE_LIST 상수 파일로 분리하여, 관리하고 있습니다.
모립세트 list 요소를 클릭하면, 체크박스도 같이 체크가 되는 이슈 발생 => stopPropagation();로 이벤트 전파 막아주었습니다.
모립세트 list 요소를 클릭하면, 오른쪽에 허용한 url 보이도록 하였습니다. 그러다보니 선택된 리스트와 체크박스 상태를 추적할 수 있는 상태를 정의해 주었습니다.

const [checkedSetIds, setCheckedSetIds] = useState<number[]>([]);
const [selectedSetId, setSelectedSetId] = useState<number | null>(null);

🧐 새로 알게된 점

배열 메서드 활용법

🤔 궁금한 점

피드백 해주실 부분 왕창 해주세요!

📸 스크린샷 / GIF / Link

2024-12-03.5.03.21.mov

2024-12-03.5.04.37.mov

suwonthugger

고생 많으셨습니다!!

src/shared/constants/allowStieList.ts

suwonthugger · 2024-12-08T16:33:37Z

src/pages/TimerPage/components/MoribSetTitle.tsx

+	const truncateRegisteredNames = () => {
+		const maxDisplayLength = 55;
+		const joinedNames = registeredNames.join(', ');
+		return joinedNames.length > maxDisplayLength ? `${joinedNames.slice(0, maxDisplayLength)}...` : joinedNames;
+	};


p1: 말줄임표를 붙일 때 직접 붙여주지 않고, width를 고정해주고 text-elipse라는 속성을 이용해보시는것은 어떠신가요?

말줄임표를 붙일 때 직접 붙여주지 않고, width를 고정해주고 text-elipse라는 속성을 이용

저도 처음에 대원님이 언급해주신대로 구현하려고 하였으나 어려움이 있었습니다. joinedNames의 오른쪽 대괄호(])안쪽 부분이 ...으로 보여야하는데, 첨부한 사진과 같이 전체 전체 텍스트에 대해서 ...이 생겨서 "모립 세트 실행 중"이 잘려서 보이지 않았습니다.

 [ {joinedNames} ] 모립 세트 실행 중 

다음과 같이 오른쪽 대괄호와 왼쪽 대괄호를 분리하여 문제를 해결하였는데, 해당 방식보다 더 좋은 의견이 있다면 피드백 부탁드려요!

전체 텍스트에 대해서 잘린 부분은 p태그 자체에 overflow-hidden을 적용해서 잘린것 같아요. p태그 내부 요소가 p태그의 크기를 벗어나면 hidden 속성으로 보이지 않게되는 문제 때문입니다.
p태그에 적용된 overflow를 지우고 가운데 span 스타일을 변경함으로써 해결할 수 있을것 같은데 한번 시도해보시겠어요?!

suwonthugger · 2024-12-08T16:40:34Z

src/pages/TimerPage/components/MoribSetContainer.tsx

+							<div
+								className="h-[2.8rem] w-[2.8rem] p-[0.7rem]"
+								onClick={(e) => {
+									e.stopPropagation();
+								}}
+							>


p5: 이벤트 전파에 대해서도 알아보면 좋을것 같아요. 좋은 글이 있어 공유드립니다~
https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

p5: 이벤트 전파에 대해서도 알아보면 좋을것 같아요. 좋은 글이 있어 공유드립니다~ https://inpa.tistory.com/entry/JS-%F0%9F%93%9A-%EB%B2%84%EB%B8%94%EB%A7%81-%EC%BA%A1%EC%B3%90%EB%A7%81

아티클 공유 감사합니다!

suwonthugger · 2024-12-08T16:46:23Z

src/pages/TimerPage/components/MoribSetContainer.tsx

p3: Container 는 다른 UI요소와 혼동될 가능성이 높을것 같은데 직관적인 다른 네이밍을 사용하는게 어떠신가요~?

p3: Container 는 다른 UI요소와 혼동될 가능성이 높을것 같은데 직관적인 다른 네이밍을 사용하는게 어떠신가요~?

의견 반영하여, ListAllowedService로 수정하였는데 더 좋은 의견 있으면 추천 부탁드려요!

UI적인 의미를 분명히 하면 좋을것 같은데 List 말고 BoxAllowedService는 어떠신가요?! 다른 분들 의견도 궁금합니다. @Ivoryeee @seueooo

저도 대원님 의견에 동의합니다! ListAllowedService는 AllowedService의 목록만 반환하는 컴포넌트로 연상이 됩니다 타이머뷰에서 허용 작업 세트를 Box로 감싸는 부분은 이 컴포넌트밖에 없으니 BoxAllowedService로 수정하면 좋을 것 같아요!

UI적인 의미를 분명히 하면 좋을것 같은데 List 말고 BoxAllowedService는 어떠신가요?! 다른 분들 의견도 궁금합니다. @Ivoryeee @seueooo

저도 대원님 의견에 동의합니다! ListAllowedService는 AllowedService의 목록만 반환하는 컴포넌트로 연상이 됩니다 타이머뷰에서 허용 작업 세트를 Box로 감싸는 부분은 이 컴포넌트밖에 없으니 BoxAllowedService로 수정하면 좋을 것 같아요!

BoxAllowedService가 보다 직관적으로 이해하기 편해서 반영하겠습니다.

suwonthugger · 2024-12-08T16:47:37Z

src/pages/TimerPage/components/MoribSetTitle.tsx

+	registeredNames: string[];
+}
+
+const MoribSetTitle = ({ onClick, registeredNames }: MoribSetTitleProps) => {


p3: 저희가 정한 컨벤션에 맞게 Title을 앞에 붙여주기! 그리고 MoribSet 라는 라이팅은 사용하지 않기로 했으니 TitleAllowedService라는 네이밍은 어떠세요?!

TitleAllowedService

좋은 것 같습니다! 반영 완료하였습니다.

suwonthugger · 2024-12-08T16:52:11Z

src/pages/TimerPage/components/MoribSetContainer.tsx

+							>
+								<input
+									type="checkbox"
+									id={`item-${item.id}`}


p4: id={item-${item.id}} 앞에 item-을 붙여준 이유가 궁금해요

p4: id={item-${item.id}} 앞에 item-을 붙여준 이유가 궁금해요

해당 id가 특정 "item"과 관련된 것임을 쉽게 파악할 수 있도록 하기 위해서 접두사를 붙여주었습니다. 혹시 문제가 되는 부분이 있다면 삭제하도록 하겠습니다.

흠 id 값은 보통 개발자가 어떤 것과 관련된것임을 식별하는데 사용하기 보단, 리스트 요소에서 react가 id를 통해 리스트 각각이 다른 요소임을 구분할 수 있게 하기 위해서 사용하니 item.id만 사용해도 충분할것 같아요 어떠신가요~?

흠 id 값은 보통 개발자가 어떤 것과 관련된것임을 식별하는데 사용하기 보단, 리스트 요소에서 react가 id를 통해 리스트 각각이 다른 요소임을 구분할 수 있게 하기 위해서 사용하니 item.id만 사용해도 충분할것 같아요 어떠신가요~?

해당사항 반영 했습니다!

suwonthugger · 2024-12-08T16:54:52Z

src/pages/TimerPage/components/MoribSetContainer.tsx

+				<ul className="h-[37.6rem] overflow-y-auto">
+					{ALLOW_SITE_LIST.filter((item) => item.id === selectedSetId).map((item) =>
+						item.allowedsites.map((site, index) => (
+							<div
+								key={index}
+								className="flex h-[3.2rem] w-[27.6rem] items-center gap-[1rem] rounded-[3px] px-[0.7rem] odd:bg-gray-bg-02"
+							>
+								<img src="https://img.icons8.com/color/48/youtube-play.png" alt="YouTube Icon" className="h-6 w-6" />
+								<span className="detail-reg-12 text-white">{site}</span>
+							</div>
+						)),
+					)}
+				</ul>


p3: ul태그를 썼으니 안쪽 리스트 요소에도 li 태그를 쓰면 좋을것 같아요!

p3: ul태그를 썼으니 안쪽 리스트 요소에도 li 태그를 쓰면 좋을것 같아요!

동의합니다. 반영 완료하였습니다.

Ivoryeee

고생 많으셨어요! UX까지도 고려해 허용사이트로 작성해 두신 세심함이 정말 인상 깊었습니다 👍🏻

Ivoryeee · 2024-12-10T14:49:52Z

src/pages/TimerPage/TimerPage.tsx

 	const [targetTime, setTargetTime] = useState(0);

 	const [isPlaying, setIsPlaying] = useState(false);

+	const [isMoribSetVisible, setIsMoribSetVisible] = useState(false);


p5: 이 부분도 수정된 네이밍에 맞추어 MoribSet 대신 AllowedService 로 수정하면 어떨까요?

p5: 이 부분도 수정된 네이밍에 맞추어 MoribSet 대신 AllowedService 로 수정하면 어떨까요?

반영하겠습니다!

Ivoryeee · 2024-12-10T14:54:10Z

src/pages/TimerPage/components/MoribSetContainer.tsx

저도 대원님 의견에 동의합니다! ListAllowedService는 AllowedService의 목록만 반환하는 컴포넌트로 연상이 됩니다 타이머뷰에서 허용 작업 세트를 Box로 감싸는 부분은 이 컴포넌트밖에 없으니 BoxAllowedService로 수정하면 좋을 것 같아요!

Ivoryeee · 2024-12-10T15:10:09Z

src/pages/TimerPage/TimerPage.tsx

 				</div>
+				{isMoribSetVisible && (
+					<div className="absolute top-[10rem] z-10 flex">
+						<div className="">


p5: 여기에서의 div 태그 역할이 궁금합니다!

p5: 여기에서의 div 태그 역할이 궁금합니다!

삭제 완료했습니다! 꼼꼼함 감사합니다.

Ivoryeee · 2024-12-10T15:14:53Z

src/pages/TimerPage/components/ListAllowedService.tsx

+
+	const handleRegisterClick = () => {
+		const selectedNames = ALLOW_SITE_LIST.filter((item) => checkedSetIds.includes(item.id)).map(
+			(item) => item.moribsetname,


p5: 여기도 moribsetname 대신 allowedservice로 네이밍 수정하면 좋을 것 같아요!

p5: 여기도 moribsetname 대신 allowedservice로 네이밍 수정하면 좋을 것 같아요!

반영 완료했습니다.

Ivoryeee · 2024-12-10T15:25:22Z

src/pages/TimerPage/components/ListAllowedService.tsx

+	return (
+		<div className="ml-[4.899rem] flex h-[45rem] w-[53.2rem]">
+			<div className="flex w-[23rem] flex-col rounded-l-[8px] bg-gray-bg-02 p-[1rem]">
+				<h3 className="detail-reg-14 h-[3.4rem] w-[21rem] px-[1.7rem] py-[1rem] text-gray-04">허용서비스 세트</h3>


p5: 요 부분 UX는 허용 서비스 로 수정해 주시면 좋을 것 같아요!
https://www.figma.com/design/89SoLPG0JFT1aiaJLmRA9n/PM%2FPO?node-id=2254-36330&t=3URbsZHA6Zb4QnRC-4

p5: 요 부분 UX는 허용 서비스 로 수정해 주시면 좋을 것 같아요! https://www.figma.com/design/89SoLPG0JFT1aiaJLmRA9n/PM%2FPO?node-id=2254-36330&t=3URbsZHA6Zb4QnRC-4

수정 완료했습니다.

Ivoryeee · 2024-12-10T15:35:12Z

src/pages/TimerPage/components/TitleAllowedService.tsx

+			) : (
+				<>
+					<MoribSetBtnDefaultIcon />
+					<p className="subhead-semibold-20 text-gray-03">허용서비스 세트를 등록해주세요.</p>


p5: 여기도 허용 서비스를 등록해주세요.로 바꾸셔도 좋을 것 같아요! UX 수정이 있는 것 같아 아래 링크로 첨부해 드립니다
https://www.figma.com/design/89SoLPG0JFT1aiaJLmRA9n/PM%2FPO?node-id=2254-18416&t=3URbsZHA6Zb4QnRC-4

p5: 여기도 허용 서비스를 등록해주세요.로 바꾸셔도 좋을 것 같아요! UX 수정이 있는 것 같아 아래 링크로 첨부해 드립니다 https://www.figma.com/design/89SoLPG0JFT1aiaJLmRA9n/PM%2FPO?node-id=2254-18416&t=3URbsZHA6Zb4QnRC-4

수정 완료했습니다.

Ivoryeee · 2024-12-10T15:46:49Z

src/pages/TimerPage/TimerPage.tsx

p2: 타이머뷰 진입 시 상시 표시되는 툴팁이 어디에서 정의되는지 궁금합니다!
https://www.figma.com/design/89SoLPG0JFT1aiaJLmRA9n/PM%2FPO?node-id=2045-25431&t=3URbsZHA6Zb4QnRC-4

p2: 타이머뷰 진입 시 상시 표시되는 툴팁이 어디에서 정의되는지 궁금합니다! https://www.figma.com/design/89SoLPG0JFT1aiaJLmRA9n/PM%2FPO?node-id=2045-25431&t=3URbsZHA6Zb4QnRC-4

디자인 문의사항이 있어서 잠시 보류 중이었습니다. 해결되면 추가해 놓겠습니다.

seueooo

LGTM! 다른 분들이 이미 코멘트 잘 남겨주셨네요~ 고생하셨습니다!

suwonthugger

저희 버튼 클릭했을 때 UI위로 오버레이되는 컴포넌트 관련 네이밍 통일하면 좋을것 같아서 제안드려요.
어떤 버튼을 클릭했을 때

조금 간단한 정보를 제공 -> Tooltip
더 부가적인 정보 제공 -> Popover
전체가 오버레이 되며 모달의 형태 -> ModalContents

그래서 ListAllowedService -> PopoverAllowedService로 바꾸는건 어떠신가요!

Ivoryeee

수정 반영하신 거 확인했습니다! 수고하셨어요 ~~~

* refactor: SideBoxTemporary 컴포넌트 삭제 * feat: MoribSetCOntainer 컴포넌트 구현 * style: 허용할 사이트 영역 홀,짝수번째 배경화면 다르게 수정 * feat: 취소 버튼 온클릭 핸들러 추가 * refactor: MoribSetContainer가 열린 상태에서 다른 요소 클릭 가능하게 수정 * feat: 배열 별도의 상수 파일로 분리 및 기능 구현 * refactor: 아이콘 url도 ALLOW_SITE_LIST에서 관리 * codereview: 대원 코드리뷰 반영 * refactor: 모립세트 워딩 허용서비스 세트로 수정 * codereview: 대원, 상아 코드리뷰 반영 * feat: 툴팁 생성 * refactor: 타이머페이지 툴팁 삭제 * refacotr: 툴팁 isAllowedServiceVisible이 true일 때만 화면에 등장하도록 수정 * codereview: BoxAllowedService에서 PopoverAllowedService로 네이밍 변경

* [style] 사이드바 모립세트 뷰 추가 (#220) * [style] 모립세트 경로 추가 (#220) * [style] tab 스타일 변경사항 반영 (#220) * [style] 모립세트 페이지 퍼블리싱 (#220) * [ Style ] 모립세트 컴포넌트 구현 (#225) * refactor: SideBoxTemporary 컴포넌트 삭제 * feat: MoribSetCOntainer 컴포넌트 구현 * style: 허용할 사이트 영역 홀,짝수번째 배경화면 다르게 수정 * feat: 취소 버튼 온클릭 핸들러 추가 * refactor: MoribSetContainer가 열린 상태에서 다른 요소 클릭 가능하게 수정 * feat: 배열 별도의 상수 파일로 분리 및 기능 구현 * refactor: 아이콘 url도 ALLOW_SITE_LIST에서 관리 * codereview: 대원 코드리뷰 반영 * refactor: 모립세트 워딩 허용서비스 세트로 수정 * codereview: 대원, 상아 코드리뷰 반영 * feat: 툴팁 생성 * refactor: 타이머페이지 툴팁 삭제 * refacotr: 툴팁 isAllowedServiceVisible이 true일 때만 화면에 등장하도록 수정 * codereview: BoxAllowedService에서 PopoverAllowedService로 네이밍 변경 * [ Style ] 설정 뷰 내의 경고 모달 뷰 구현 (#227) * feat: alert모달 내 버튼 공통 컴포넌트 생성 (#222) * feat: ModalContentsAlert 생성 (#222) * feat: input창 에러일 때 추가 * fix: 필요없는 코드 삭제 (#222) * refactor: 약간의 로직분리 .. (#222) * code review: user email prop 추가, 모달 컴포넌트 하나의 객체로 export 하도록 수정 * style: 스타일 누락된 것 추가 * refactor: userEmail props 추가 누락된 부분 수정 * [ Style ] 온보딩 뷰 구현 (#228) * refactor: home/ not found 페이지에 쓰이는 사이드바 컴포넌트 리팩토링 (#224) - 세팅모달, 기존 SidebarHome에서 쓰이는 컴포넌트 구조 배럴파일 방식으로 변경 - HomePage, NotFoundePage 두 곳에서 쓰이므로 shared로 위치 이동 - Sidebar에서 쓰이는 svg는 Sidebar 폴더 아래로 이동 * refactor: 홈페이지 구조 absolute를 사용해서 변경 (#224) * feat: 온보딩 페이지 라우팅 (#224) * refactor: 설정 모달 위치 변경 (#224) * refactor: 사이드바 위치 변경 (#224) * refactor: 레이아웃 생성 및 적용 (#224) * refactor: 폰트 적용 방식 자동완성 될 수 있도록 변경 (#224) * feat: 사용하는 아이콘 다운로드 및 export 설정 (#224) * feat: StartStep, FieldStep 구현 (#224) * feat: ServiceStep 구현 및 export (#224) * chore: 상수 분리 및 컴포넌트 디자인 일부 수정 (#224) * feat: useFunnel 훅 생성 및 온보딩 페이지에 적용 (#224) * feat: Step 컴포넌트 컨벤션에 맞게 네이밍 변경 (#224) * feat: 온보딩 페이지 퍼블리싱 (#224) * feat: input 상태 ServiceStep 컴포넌트에 연결 (#224) * style: StepField 컴포넌트 화면 너비에 따라 패딩값 일부 수정 (#224) * feat: ServiceStep 버튼에 disabled 속성 추가 및 엔터 눌렀을 때 입력되게 끔 로직 추가 (#224) * feat: svg 아이콘 폴더 shared로 변경, assets 아래 페이지별 폴더를 만들어 관리 (#224) * feat: 바뀐 svg들의 위치에 맞게 import 경로 변경 및 BoxAllowedService 버튼에 홈으로 이동하는 로직 추가 (#224) * style: 반응형 고려하여 홈 페이지 컴포넌트 일부 스타일 수정 (#224) - 미완성입니다요 * refactor: truncate 활용해서 스타일 재적용 (#224) * refactor: StepField.tsx p태그에서 h2태그로 변경 (#224) * chore: 브라우저 리스트 업데이트하면서 일부 패키지 버전업 (#224) * refactor: StepService.tsx 인풋 상태 input -> inputURL로 수정 (#224) * [Refactor] home 페이지 폴더구조 변경 (#231) * feat: home 페이지 폴더구조 변경 (#230) * feat: 공통적으로 쓰이는 BoxTodo, ButtonTogoToggle -> shared로 이동 (#230) * feat: shared로 이동한 컴포넌트 경로 변경 (#230) * refactor: ModalContents 폴더 구조 변경 (#230) * feat: import 문 구분을 위해 폴더 구조 배럴파일 구조로 변경 (#230) * feat: commit 누락된 부분 저장 (#230) * feat: 홈페이지 import 문 수정 (#230) * refactor: atoms 컴포넌트 용도에 맞게 폴더 이동 및 네이밍 컨벤션에 맞게 변경 (#230) * refactor: 바뀐 컴포넌트 경로에 맞게 import문 수정 (#230) * refactor: 홈에서만 쓰이는 hook 폴더 이동 및 훅을 사용하는 컴포넌트의 import문 변경 (#230) * refactor: ButtonSVG 사용 불필요하여 삭제 (#230) * refactor: 상아 피드백 반영해서 UI 분류 페이지 제거 모든 컴포넌트 depth 1로 고정 (#230) * refactor: hook import 경로 수정 (#230) * refactor: 로그인 페이지 구조 변경 및 불필요한 templates 레거시 코드 삭제 (#230) (#232) * [Refactor] 타이머 페이지 폴더 구조 변경 (#233) * refactor: timer 컴포넌트/훅 컨벤션에 맞게 정리 및 불필요 컴포넌트/훅 삭제 (#230) * refactor: 불필요한 templates 컴포넌트 삭제 (#230) * Merge branch 'develop' of github.com:morib-in/Morib-Client into refactor/#230/timer-folder-structure * [Refactor] 온보딩 페이지 폴더구조 변경 (#234) * refactor: 온보딩 페이지 컴포넌트 폴더 삭제 및 컴포넌트명으로 폴더 생성하여 적용 (#230) * refactor: 상아 피드백 반영해서 컴포넌트 depth 1로 고정 (#230) * [style] 컬러팔레트 네이밍 추가 및 색상 공통 컴포넌트 생성 (#220) * [refactor] 색상 네이밍에 맞춰 컬러 팔레트 수정 (#220) * [feat] url 중복 유효성 검사 로직 추가 (#220) * [refactor] 드롭다운 클릭 시 이벤트 전파 방지 (#220) * [style] 카테고리 내 허용서비스 컴포넌트 분리 (#220) * [code review] 코드리뷰 반영 (#220) * [style] moribSet -> allowedService 네이밍 변경 (#220) * [chore] 리베이스 충돌 해결 (#220) * [style] sideBar 삭제 후 Layout 적용 (#220) * [code review] 코드리뷰 반영 (#220) * [style] 사이드바 홈, 허용서비스뷰 추가 (#220) * [style] 드롭다운 이벤트 전파 방지 적용 (#220) --------- Co-authored-by: 김건휘 <66071954+KIMGEONHWI@users.noreply.github.com> Co-authored-by: Hanseo Kim <108131226+seueooo@users.noreply.github.com> Co-authored-by: suwonthugger <127329855+suwonthugger@users.noreply.github.com>

KIMGEONHWI added 7 commits November 22, 2024 04:12

refactor: SideBoxTemporary 컴포넌트 삭제

6e4f985

feat: MoribSetCOntainer 컴포넌트 구현

b7e2f9e

style: 허용할 사이트 영역 홀,짝수번째 배경화면 다르게 수정

93ad40f

feat: 취소 버튼 온클릭 핸들러 추가

56ef40b

refactor: MoribSetContainer가 열린 상태에서 다른 요소 클릭 가능하게 수정

acd37f5

feat: 배열 별도의 상수 파일로 분리 및 기능 구현

edbc7ad

refactor: 아이콘 url도 ALLOW_SITE_LIST에서 관리

ff0a344

KIMGEONHWI added the 🎨 Style 마크업 & 스타일링 label Dec 3, 2024

KIMGEONHWI requested review from Ivoryeee, seueooo and suwonthugger December 3, 2024 18:21

KIMGEONHWI self-assigned this Dec 3, 2024

KIMGEONHWI linked an issue Dec 3, 2024 that may be closed by this pull request

[ Style ] 모립세트 컴포넌트 구현 #223

Closed

1 task

pull-request-size bot added the size/L label Dec 3, 2024

suwonthugger reviewed Dec 8, 2024

View reviewed changes

KIMGEONHWI added 2 commits December 9, 2024 16:53

codereview: 대원 코드리뷰 반영

3119c46

refactor: 모립세트 워딩 허용서비스 세트로 수정

92231e7

Ivoryeee requested changes Dec 10, 2024

View reviewed changes

KIMGEONHWI added 4 commits December 13, 2024 15:49

codereview: 대원, 상아 코드리뷰 반영

8ff881c

feat: 툴팁 생성

182995b

refactor: 타이머페이지 툴팁 삭제

5f9043c

refacotr: 툴팁 isAllowedServiceVisible이 true일 때만 화면에 등장하도록 수정

f49b9e3

seueooo approved these changes Dec 13, 2024

View reviewed changes

suwonthugger approved these changes Dec 14, 2024

View reviewed changes

Ivoryeee approved these changes Dec 14, 2024

View reviewed changes

codereview: BoxAllowedService에서 PopoverAllowedService로 네이밍 변경

c2184dd

KIMGEONHWI merged commit b2948f0 into develop Dec 15, 2024
1 check passed

suwonthugger deleted the style/#223/moribset-component branch December 21, 2024 12:51

[ Style ] 모립세트 컴포넌트 구현 #225

[ Style ] 모립세트 컴포넌트 구현 #225

Conversation

KIMGEONHWI commented Dec 3, 2024 • edited Loading

🔥 Related Issues

✅ 작업 리스트

🔧 작업 내용

MoribSetTitle.tsx

MoribSetContainer.tsx

🧐 새로 알게된 점

🤔 궁금한 점

📸 스크린샷 / GIF / Link

suwonthugger left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

KIMGEONHWI Dec 9, 2024 • edited Loading

Choose a reason for hiding this comment

suwonthugger Dec 10, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ivoryeee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

seueooo left a comment

Choose a reason for hiding this comment

suwonthugger left a comment

Choose a reason for hiding this comment

Ivoryeee left a comment

Choose a reason for hiding this comment

KIMGEONHWI commented Dec 3, 2024 •

edited

Loading

KIMGEONHWI Dec 9, 2024 •

edited

Loading

suwonthugger Dec 10, 2024 •

edited

Loading