Skip to content

Commit 00fdf5c

Browse files
haram831haram831
authored
Merge pull request #117 from wafflestudio/haram
시간표 QA 사항 및 주별뷰 period bar 효과 추가
2 parents b9a5603 + 278c711 commit 00fdf5c

13 files changed

Lines changed: 784 additions & 195 deletions

‎src/pages/timetable/AddClassPanel.tsx‎

Lines changed: 124 additions & 115 deletions
Original file line numberDiff line numberDiff line change
@@ -119,128 +119,137 @@ export function AddClassPanel({
119119
};
120120

121121
return (
122-
<aside className={styles.panel}>
123-
<SlArrowRight onClick={() => setIsClicked(false)} />
124-
<h2>새 수업 추가</h2>
125-
126-
<label className={styles.field}>
127-
<div>과목명 (필수)</div>
128-
<input
129-
value={title}
130-
onChange={(e) => setTitle(e.target.value)}
131-
placeholder="경제학개론"
132-
/>
133-
</label>
134-
135-
<label className={styles.field}>
136-
<div>교수명 (선택)</div>
137-
<input
138-
value={professor}
139-
onChange={(e) => setProfessor(e.target.value)}
140-
placeholder="박이택"
141-
/>
142-
</label>
143-
144-
<label className={styles.field}>
145-
<div>학점 (선택)</div>
146-
<input
147-
type="number"
148-
value={credit ?? ""}
149-
onChange={(e) => {
150-
const value = e.target.value;
151-
setCredit(value === "" ? undefined : Number(value));
152-
}}
153-
placeholder="3"
154-
min={0}
155-
step={1}
156-
/>
157-
</label>
158-
159-
<div>
122+
<>
123+
<button
124+
type="button"
125+
className={styles.addClassPanelDim}
126+
aria-label="수업 추가 닫기"
127+
onClick={() => setIsClicked(false)}
128+
/>
129+
130+
<aside className={styles.panel}>
131+
<SlArrowRight onClick={() => setIsClicked(false)} />
132+
<h2>새 수업 추가</h2>
133+
134+
<label className={styles.field}>
135+
<div>과목명 (필수)</div>
136+
<input
137+
value={title}
138+
onChange={(e) => setTitle(e.target.value)}
139+
placeholder="경제학개론"
140+
/>
141+
</label>
142+
143+
<label className={styles.field}>
144+
<div>교수명 (선택)</div>
145+
<input
146+
value={professor}
147+
onChange={(e) => setProfessor(e.target.value)}
148+
placeholder="박이택"
149+
/>
150+
</label>
151+
152+
<label className={styles.field}>
153+
<div>학점 (선택)</div>
154+
<input
155+
type="number"
156+
value={credit ?? ""}
157+
onChange={(e) => {
158+
const value = e.target.value;
159+
setCredit(value === "" ? undefined : Number(value));
160+
}}
161+
placeholder="3"
162+
min={0}
163+
step={1}
164+
/>
165+
</label>
166+
160167
<div>
161-
<div>시간 (필수)</div>
162-
</div>
168+
<div>
169+
<div>시간 (필수)</div>
170+
</div>
163171

164-
{slot.map((t) => (
165-
<div key={t.rowId}>
166-
<div className={styles.timeslotDelete}>
167-
<TiDelete onClick={() => removeRow(t.rowId)} />
172+
{slot.map((t) => (
173+
<div key={t.rowId}>
174+
<div className={styles.timeslotDelete}>
175+
<TiDelete onClick={() => removeRow(t.rowId)} />
176+
</div>
177+
178+
<div className={styles.dayButtons}>
179+
{DAYS.map((d) => {
180+
const active = dayOfWeekToDay(t.dayOfweek) === d;
181+
return (
182+
<button
183+
key={d}
184+
type="button"
185+
className={`${styles.dayBtn} ${active ? styles.isActive : ""}`}
186+
onClick={() =>
187+
updateRow(t.rowId, { dayOfweek: dayToDayOfWeek(d) })
188+
}
189+
>
190+
{DAY_LABELS_KO[d]}
191+
</button>
192+
);
193+
})}
194+
</div>
195+
196+
<div className={styles.timeRange}>
197+
<select
198+
value={t.startAt}
199+
onChange={(e) =>
200+
updateRow(t.rowId, { startAt: Number(e.target.value) })
201+
}
202+
>
203+
{timeOptions.map((o) => (
204+
<option key={o.value} value={o.value}>
205+
{o.label}
206+
</option>
207+
))}
208+
</select>
209+
210+
<span className={styles.tilde}>~</span>
211+
212+
<select
213+
value={t.endAt}
214+
onChange={(e) =>
215+
updateRow(t.rowId, { endAt: Number(e.target.value) })
216+
}
217+
>
218+
{timeOptions.map((o) => (
219+
<option key={o.value} value={o.value}>
220+
{o.label}
221+
</option>
222+
))}
223+
</select>
224+
</div>
168225
</div>
226+
))}
169227

170-
<div className={styles.dayButtons}>
171-
{DAYS.map((d) => {
172-
const active = dayOfWeekToDay(t.dayOfweek) === d;
173-
return (
174-
<button
175-
key={d}
176-
type="button"
177-
className={`${styles.dayBtn} ${active ? styles.isActive : ""}`}
178-
onClick={() =>
179-
updateRow(t.rowId, { dayOfweek: dayToDayOfWeek(d) })
180-
}
181-
>
182-
{DAY_LABELS_KO[d]}
183-
</button>
184-
);
185-
})}
186-
</div>
228+
<button className={styles.link} type="button" onClick={addRow}>
229+
+ 시간 추가
230+
</button>
187231

188-
<div className={styles.timeRange}>
189-
<select
190-
value={t.startAt}
191-
onChange={(e) =>
192-
updateRow(t.rowId, { startAt: Number(e.target.value) })
193-
}
194-
>
195-
{timeOptions.map((o) => (
196-
<option key={o.value} value={o.value}>
197-
{o.label}
198-
</option>
199-
))}
200-
</select>
201-
202-
<span className={styles.tilde}>~</span>
203-
204-
<select
205-
value={t.endAt}
206-
onChange={(e) =>
207-
updateRow(t.rowId, { endAt: Number(e.target.value) })
208-
}
209-
>
210-
{timeOptions.map((o) => (
211-
<option key={o.value} value={o.value}>
212-
{o.label}
213-
</option>
214-
))}
215-
</select>
232+
{!isTimeRangeValid && (
233+
<div className={styles.error}>
234+
시간 범위가 잘못되었습니다. (종료가 시작보다 늦어야 하고 5분
235+
단위여야 합니다.)
216236
</div>
217-
</div>
218-
))}
237+
)}
219238

220-
<button className={styles.link} type="button" onClick={addRow}>
221-
+ 시간 추가
222-
</button>
223-
224-
{!isTimeRangeValid && (
225-
<div className={styles.error}>
226-
시간 범위가 잘못되었습니다. (종료가 시작보다 늦어야 하고 5분
227-
단위여야 합니다.)
228-
</div>
229-
)}
230-
231-
{!isTitleValid && (
232-
<div className={styles.error}>과목 이름은 필수입니다.</div>
233-
)}
234-
</div>
239+
{!isTitleValid && (
240+
<div className={styles.error}>과목 이름은 필수입니다.</div>
241+
)}
242+
</div>
235243

236-
<button
237-
className={styles.save}
238-
type="button"
239-
disabled={!canSave}
240-
onClick={handleSave}
241-
>
242-
저장
243-
</button>
244-
</aside>
244+
<button
245+
className={styles.save}
246+
type="button"
247+
disabled={!canSave}
248+
onClick={handleSave}
249+
>
250+
저장
251+
</button>
252+
</aside>
253+
</>
245254
);
246255
}

0 commit comments

Comments
 (0)