Skip to content

Commit

Permalink
모바일 반응형 추가
Browse files Browse the repository at this point in the history
  • Loading branch information
@YongJaeHyun
YongJaeHyun committed Sep 5, 2023
1 parent 5796500 commit d2a3848
Show file tree
Hide file tree
Showing 11 changed files with 40 additions and 42 deletions.
2 changes: 1 addition & 1 deletion src/App.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import Header from "./components/Header";

function App() {
return (
<div className="h-full px-5 lg:px-20 lg:text-base">
<div className="h-full px-7 lg:px-20 lg:text-base">
<Header />
<DragDropContainer />
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ const Dropdown = ({ title, content }: IDropdown) => {
return (
<>
<div className="w-full flex justify-between items-center">
<h3 className="font-semibold break-keep">{title}</h3>
<h3 className="font-semibold break-keep text-base">{title}</h3>
<button type="button" onClick={toggleIsVisible}>
{isVisible ? (
<IoMdArrowDropup size={20} className="mt-0.5" />
<IoMdArrowDropup className="mt-0.5 text-xl" />
) : (
<IoMdArrowDropdown size={20} className="mt-0.5" />
<IoMdArrowDropdown className="mt-0.5 text-xl" />
)}
</button>
</div>
Expand All @@ -36,7 +36,7 @@ const Dropdown = ({ title, content }: IDropdown) => {
}`}
>
{content.split(/\r|\n|\r\n/).map((row, idx) => (
<span className="text-darkgray" key={idx}>
<span className="text-darkgray text-base" key={idx}>
{row}
<br />
</span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/DroppableCategories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const DroppableCategories = () => {
const nGroupList = useRecoilValue(groupList);

return (
<main className="h-full lg:h-[calc(100%-4.75rem)]">
<main className="h-[90%] lg:h-[calc(100%-4.75rem)]">
<GroupInfo />
<section className="grid grid-cols-2 grid-rows-2 lg:flex lg:justify-between gap-5 lg:gap-10 lg:mt-5 relative">
<span className="w-screen absolute h-0 lg:h-0.5 bg-linegray -left-20 top-[2.95rem] z-10"></span>
Expand Down
2 changes: 1 addition & 1 deletion src/components/DroppableList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const DroppableList = ({ value, idx, className }: IDroppableList) => {
<div
{...provided.dragHandleProps}
ref={provided.innerRef}
className="w-[40%] h-24"
className="w-[97%] lg:w-[41%] h-[6.2rem] -ml-2 -mt-2"
>
{AIsCardDragging && (
<p
Expand Down
8 changes: 4 additions & 4 deletions src/components/DroppableWorkList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,10 @@ const DroppableWorkList = ({
<div className="bg-white shadow-lg relative">
<button
type="button"
className={`w-10 h-10 rounded-full flex justify-center items-center absolute z-20 bg-yellow ${
className={`w-8 h-8 lg:w-10 lg:h-10 rounded-full flex justify-center items-center absolute z-20 bg-yellow ${
workList.length
? "-top-5 -right-5"
: "top-[3rem] -translate-y-1/2 right-1/2 translate-x-1/2 "
? "-top-4 -right-4 lg:-top-5 lg:-right-5"
: "top-[2.5rem] lg:top-12 -translate-y-1/2 right-1/2 translate-x-1/2 "
}`}
onClick={showModal}
>
Expand All @@ -55,7 +55,7 @@ const DroppableWorkList = ({
<DroppableWorkListCard key={idx} cardDetail={cardDetail} idx={idx} />
))
) : (
<div className="w-full h-24 bg-white shadow-lg absolute"></div>
<div className="w-full h-[5.1rem] lg:h-24 bg-white shadow-lg absolute"></div>
)}
{provided.placeholder}
</div>
Expand Down
6 changes: 3 additions & 3 deletions src/components/DroppableWorkListCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ const DroppableWorkListCard = ({
{...provided.dragHandleProps}
ref={provided.innerRef}
>
<div className="w-full px-8 my-5">
<div className="w-full px-4 lg:px-8 my-3 lg:my-5">
<div className="flex justify-between mb-1">
<span className="text-sm">{`~${month}월 ${days}일`}</span>
<span className="text-3md">{`~${month}월 ${days}일`}</span>
<div className="flex items-center">
<Rate rate={rate} size={12} />
<Rate rate={rate} className="text-2md" />
</div>
</div>
<Dropdown title={title} content={content} />
Expand Down
30 changes: 15 additions & 15 deletions src/components/GroupInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,13 @@ const GroupInfo = () => {
<div className="flex w-full flex-col lg:justify-between gap-3 lg:gap-5">
<div className="flex items-center">
<div className="mr-3 lg:mr-5">
<span className="font-bold text-sm">Group</span>
<span className="font-bold text-base">Group</span>
</div>
<div className="relative">
<select
name="group"
id="group"
className="lg:w-52 font-semibold border-b-2 pb-0.5 lg:pb-2 border-linegray mr-12 mt-2 text-base"
className="lg:w-52 font-semibold border-b-2 pb-1 lg:pb-2 border-linegray mr-12 mt-2 text-base"
>
<option value="1">Matrix App1</option>
<option value="2">Matrix App2</option>
Expand All @@ -25,40 +25,40 @@ const GroupInfo = () => {
<div className="flex justify-between items-center">
<div className="flex justify-between lg:justify-normal items-center">
<div className="mr-3 lg:mr-5">
<span className="font-bold text-sm">Members</span>
<span className="font-bold text-base">Members</span>
</div>
<div className="flex items-center">
<img
alt="프로필 사진"
src="/images/profile.jpeg"
className="w-7 h-7 lg:w-8 lg:h-8 rounded-full mr-2 lg:mr-4 object-cover"
src={`${process.env.PUBLIC_URL}/images/profile.jpeg`}
className="w-8 h-8 rounded-full mr-2 lg:mr-4 object-cover"
/>
<img
alt="프로필 사진"
src="/images/profile.jpeg"
className="w-7 h-7 lg:w-8 lg:h-8 rounded-full mr-2 lg:mr-4 object-cover"
src={`${process.env.PUBLIC_URL}/images/profile.jpeg`}
className="w-8 h-8 rounded-full mr-2 lg:mr-4 object-cover"
/>
<img
alt="프로필 사진"
src="/images/profile.jpeg"
className="w-7 h-7 lg:w-8 lg:h-8 rounded-full mr-2 lg:mr-4 object-cover"
src={`${process.env.PUBLIC_URL}/images/profile.jpeg`}
className="w-8 h-8 rounded-full mr-2 lg:mr-4 object-cover"
/>
<img
alt="프로필 사진"
src="/images/profile.jpeg"
className="w-7 h-7 lg:w-8 lg:h-8 rounded-full mr-2 lg:mr-4 object-cover"
src={`${process.env.PUBLIC_URL}/images/profile.jpeg`}
className="w-8 h-8 rounded-full mr-2 lg:mr-4 object-cover"
/>
</div>
</div>
<div className="flex items-center">
<div className="mr-3 lg:mr-5">
<span className="font-bold text-sm">Sort by</span>
<span className="font-bold text-base">Sort by</span>
</div>
<div className="relative">
<select
name="group"
id="group"
className="w-14 lg:w-52 font-semibold border-b-2 pb-0.5 lg:pb-2 border-linegray mt-2 text-base"
name="sort"
id="sort"
className="w-full lg:w-52 font-semibold border-b-2 pb-0.5 lg:pb-2 border-linegray mt-2 text-base"
>
<option value="importance">중요도순</option>
<option value="date">추가한 날짜순</option>
Expand Down
8 changes: 4 additions & 4 deletions src/components/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ const Header = () => {
</div>
<div className="flex items-center">
<button className="p-2 mr-4">
<IoMdMail size={20} />
<IoMdMail className="text-xl" />
</button>
<div className="flex items-center">
<img
alt="프로필 사진"
src="/images/profile.jpeg"
className="w-7 h-7 lg:w-8 lg:h-8 rounded-full mr-1 object-cover"
src={`${process.env.PUBLIC_URL}/images/profile.jpeg`}
className="w-8 h-8 rounded-full mr-1 object-cover"
/>
<IoMdArrowDropdown size={20} />
<IoMdArrowDropdown className="text-2xl" />
</div>
</div>
</header>
Expand Down
10 changes: 4 additions & 6 deletions src/components/Rate.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@ import { BsStarFill } from "react-icons/bs";
interface IRate {
rate: number;
setRate?: React.Dispatch<React.SetStateAction<number>>;
size: number;
className: string;
}

const Rate = ({ rate, setRate, size }: IRate) => {
const Rate = ({ rate, setRate, className }: IRate) => {
return (
<>
{Array(5)
Expand All @@ -15,17 +15,15 @@ const Rate = ({ rate, setRate, size }: IRate) => {
setRate ? (
<button type="button" key={idx} onClick={() => setRate(idx)}>
<BsStarFill
size={size}
className={`${rate >= idx ? "text-yellow" : "text-lightgray"} ${
className={`${className} ${rate >= idx ? "text-yellow" : "text-lightgray"} ${
idx === 4 && "mr-1"
}`}
/>
</button>
) : (
<p key={idx}>
<BsStarFill
size={size}
className={`${rate >= idx ? "text-yellow" : "text-lightgray"} ${
className={`${className} ${rate >= idx ? "text-yellow" : "text-lightgray"} ${
idx === 4 && "mr-1"
}`}
/>
Expand Down
4 changes: 2 additions & 2 deletions src/components/WorkListAddModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,7 +67,7 @@ const WorkListAddModal = ({ type }: IWorkListAddModal) => {
</p>
</div>
<div className="w-full ml-10 px-2 border-b mr-1 pb-1.5">
<Rate rate={rate} setRate={setRate} size={16} />
<Rate rate={rate} setRate={setRate} className="text-sm lg:text-base" />
</div>
</div>
<div className="flex">
Expand All @@ -89,7 +89,7 @@ const WorkListAddModal = ({ type }: IWorkListAddModal) => {
<p className="text-right text-darkgray">내용&nbsp;</p>
</div>
<textarea
className="w-full ml-10 px-2 border-b pb-1.5 mr-1"
className="w-full ml-10 px-2 border-b pb-1.5 mr-1 text-darkgray"
placeholder="내용을 입력해주세요."
spellCheck="false"
value={content}
Expand Down
2 changes: 1 addition & 1 deletion src/components/WorkListModifyModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ const WorkListModifyModal = ({
</p>
</div>
<div className="w-full ml-10 px-2 border-b mr-1 pb-1.5">
<Rate rate={rate} setRate={setRate} size={16} />
<Rate rate={rate} setRate={setRate} className="text-sm lg:text-base" />
</div>
</div>
<div className="flex">
Expand Down

0 comments on commit d2a3848

Please sign in to comment.