Skip to content

Commit e2327b6

Browse files
jisooooooooooojisooooooooooo
committed
design: 디자인 수정
1 parent 5aeddf6 commit e2327b6

2 files changed

Lines changed: 74 additions & 78 deletions

File tree

‎src/page/todo/myTodo/MyTodo.css.ts‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ export const contentWrapper = style({
3232
alignItems: 'flex-start',
3333
width: '100%',
3434
maxWidth: '128rem',
35-
gap: '8.6rem', // 헤더-데이트피커 간격 86px
35+
gap: '8.6rem',
3636
});
3737

3838
export const datePickerSection = style({
@@ -124,19 +124,10 @@ export const checkMainContainer = style({
124124
flexDirection: 'column',
125125
alignItems: 'flex-start',
126126
height: '67.2rem',
127-
padding: '2.6rem 5rem 2.6rem',
128-
gap: '1rem',
127+
padding: '2.6rem',
129128
alignSelf: 'stretch',
130129
});
131130

132-
export const mainContentSection = style({
133-
display: 'flex',
134-
alignItems: 'flex-start',
135-
gap: '1.9rem',
136-
width: '100%',
137-
height: '100%',
138-
});
139-
140131
export const todoCheckArea = style({
141132
display: 'flex',
142133
flexDirection: 'column',
@@ -147,6 +138,7 @@ export const todoCheckArea = style({
147138
height: '100%',
148139
flexShrink: 0,
149140
paddingRight: '1.9rem',
141+
boxSizing: 'border-box',
150142
});
151143

152144
export const selectorChipsContainer = style({
@@ -161,22 +153,25 @@ export const todoCheckContainer = style({
161153
display: 'flex',
162154
flexDirection: 'column',
163155
alignItems: 'flex-start',
164-
width: '57.1rem',
156+
width: '100%',
165157
height: '53.8rem',
166158
gap: '2.4rem',
167159
alignSelf: 'stretch',
168160
overflowY: 'auto',
161+
boxSizing: 'border-box',
169162
});
170163

171164
export const noScrollTodoCheckContainer = style({
172165
display: 'flex',
173166
flexDirection: 'column',
174167
alignItems: 'flex-start',
168+
width: '100%',
175169
height: '53.8rem',
176170
gap: '2.4rem',
177171
alignSelf: 'stretch',
178-
overflowY: 'hidden',
172+
overflow: 'hidden',
179173
paddingRight: '1.9rem',
174+
boxSizing: 'border-box',
180175
});
181176

182177
export const todoCheckLine = style({
@@ -204,7 +199,7 @@ export const todoText = styleVariants({
204199

205200
export const emptyTodoBox = style({
206201
display: 'flex',
207-
width: '55.2rem',
202+
width: '100%',
208203
height: '53.8rem',
209204
padding: '25.1rem 9.1rem',
210205
justifyContent: 'center',
@@ -223,8 +218,11 @@ export const emptyTodoText = style({
223218

224219
export const mandalartWithTodoSection = style({
225220
display: 'flex',
226-
alignItems: 'center',
227-
justifyContent: 'space-between',
221+
alignItems: 'flex-start',
222+
justifyContent: 'flex-start',
223+
gap: '3.7rem',
224+
width: '100%',
225+
height: '100%',
228226
flex: 1,
229227
});
230228

‎src/page/todo/myTodo/component/TodoCheckSection/TodoCheckSection.tsx‎

Lines changed: 60 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -104,69 +104,67 @@ const TodoCheckSection = ({
104104
</header>
105105

106106
<section className={styles.checkMainContainer}>
107-
<div className={styles.mainContentSection}>
108-
<div className={styles.mandalartWithTodoSection}>
109-
<Mandalart
110-
type="TODO_MAIN"
111-
data={{
112-
id: 0,
113-
position: 4,
114-
title: mandalartData.title || mandalartData.mainGoal,
115-
subGoals: Array.isArray(coreGoalsData?.data?.coreGoals)
116-
? coreGoalsData.data.coreGoals.map(
117-
(
118-
goal: { title: string; position: number; subGoals?: unknown[] },
119-
idx: number,
120-
) => ({
121-
id: idx < 4 ? idx : idx + 1,
122-
title: goal.title,
123-
position: goal.position,
124-
subGoals: goal.subGoals ?? [],
125-
}),
126-
)
127-
: [],
128-
}}
129-
onGoalClick={(position) => {
130-
const coreGoal = coreGoalsData?.data?.coreGoals.find(
131-
(goal) => goal.position === position,
132-
);
133-
const parentId = coreGoal?.id;
134-
onMandalartClick(selectedParentId === parentId ? undefined : parentId);
135-
}}
136-
/>
137-
<div className={styles.todoCheckArea}>
138-
<div className={styles.selectorChipsContainer}>
139-
{CYCLE_LIST.map((cycle) => (
140-
<CycleChip
141-
key={cycle}
142-
type="selector"
143-
value={cycle}
144-
selected={selectedCycle === cycle}
145-
onClick={onCycleClick}
146-
/>
147-
))}
148-
</div>
149-
150-
<div
151-
className={
152-
localSubGoals.length === 0
153-
? styles.noScrollTodoCheckContainer
154-
: styles.todoCheckContainer
155-
}
156-
>
157-
{localSubGoals.length === 0 ? (
158-
<div className={styles.emptyTodoBox}>
159-
<span className={styles.emptyTodoText}>해당하는 할 일이 없어요</span>
107+
<div className={styles.mandalartWithTodoSection}>
108+
<Mandalart
109+
type="TODO_MAIN"
110+
data={{
111+
id: 0,
112+
position: 4,
113+
title: mandalartData.title || mandalartData.mainGoal,
114+
subGoals: Array.isArray(coreGoalsData?.data?.coreGoals)
115+
? coreGoalsData.data.coreGoals.map(
116+
(
117+
goal: { title: string; position: number; subGoals?: unknown[] },
118+
idx: number,
119+
) => ({
120+
id: idx < 4 ? idx : idx + 1,
121+
title: goal.title,
122+
position: goal.position,
123+
subGoals: goal.subGoals ?? [],
124+
}),
125+
)
126+
: [],
127+
}}
128+
onGoalClick={(position) => {
129+
const coreGoal = coreGoalsData?.data?.coreGoals.find(
130+
(goal) => goal.position === position,
131+
);
132+
const parentId = coreGoal?.id;
133+
onMandalartClick(selectedParentId === parentId ? undefined : parentId);
134+
}}
135+
/>
136+
<div className={styles.todoCheckArea}>
137+
<div className={styles.selectorChipsContainer}>
138+
{CYCLE_LIST.map((cycle) => (
139+
<CycleChip
140+
key={cycle}
141+
type="selector"
142+
value={cycle}
143+
selected={selectedCycle === cycle}
144+
onClick={onCycleClick}
145+
/>
146+
))}
147+
</div>
148+
149+
<div
150+
className={
151+
localSubGoals.length === 0
152+
? styles.noScrollTodoCheckContainer
153+
: styles.todoCheckContainer
154+
}
155+
>
156+
{localSubGoals.length === 0 ? (
157+
<div className={styles.emptyTodoBox}>
158+
<span className={styles.emptyTodoText}>해당하는 할 일이 없어요</span>
159+
</div>
160+
) : (
161+
localSubGoals.map((todo) => (
162+
<div key={todo.id} className={styles.todoCheckLine}>
163+
<CycleChip type="display" value={todo.cycle as CycleType} />
164+
<TodoBox type="todo" items={[todo]} onItemClick={handleTodoClick} />
160165
</div>
161-
) : (
162-
localSubGoals.map((todo) => (
163-
<div key={todo.id} className={styles.todoCheckLine}>
164-
<CycleChip type="display" value={todo.cycle as CycleType} />
165-
<TodoBox type="todo" items={[todo]} onItemClick={handleTodoClick} />
166-
</div>
167-
))
168-
)}
169-
</div>
166+
))
167+
)}
170168
</div>
171169
</div>
172170
</div>

0 commit comments

Comments
 (0)