Skip to content

feat: 학생 상세 페이지, 캘런디 반응형(모바일) 지원되게 구현 #16

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
hanjiwon1108 wants to merge 4 commits into
base: main
Choose a base branch
from
+217 −91
Open

feat: 학생 상세 페이지, 캘런디 반응형(모바일) 지원되게 구현 #16

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
988c447
feat: 학생 상세 페이지, 캘런디 반응형(모바일) 지원되게 구현
hanjiwon1108 Jul 14, 2025
6998592
feat: 반응형 가능한 calendar components 구현
hanjiwon1108 Jul 16, 2025
590dba1
feat: 현장실습 캘린더 적용
hanjiwon1108 Jul 16, 2025
309ba71
feat: 학생 상세설명 모바일 기능 추가
hanjiwon1108 Jul 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 40 additions & 24 deletions src/features/users/components/StudentDetail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,13 @@ const componentsMap: Record<DetailType, ValueItemsType> = {
},
employment: {
label: '취업',
component: (data) => <Employment datas={data.employment_companies.filter((item: UserDetailType['employment_companies'][0]) => item.is_working)} />,
component: (data) => (
<Employment
datas={data.employment_companies.filter(
(item: UserDetailType['employment_companies'][0]) => item.is_working
)}
/>
),
},
university: {
label: '대학교 진학',
Expand Down Expand Up @@ -121,66 +127,76 @@ export function StudentDetail({ student_id }: { student_id: string }) {
)

return (
<div className='h-full space-y-6 overflow-auto p-1'>
<Card>
<CardHeader className='pb-3'>
<div className='flex items-center justify-between'>
<CardTitle className='text-2xl'>{data?.name}</CardTitle>
<div className='h-full space-y-4 overflow-auto p-0 sm:space-y-6 sm:p-1'>
<Card className='border-0 shadow-sm sm:border sm:shadow-md'>
<CardHeader className='p-3 pb-2 sm:p-6 sm:pb-3'>
<div className='flex flex-col sm:flex-row sm:items-center sm:justify-between'>
<CardTitle className='mb-2 text-xl sm:mb-0 sm:text-2xl'>
{data?.name}
</CardTitle>
<div className='flex items-center gap-2'>
<Badge variant='outline'>
<Badge variant='outline' className='text-xs sm:text-sm'>
{data?.departments.department_name}
</Badge>
</div>
</div>
</CardHeader>

<CardContent className='space-y-5'>
<CardContent className='space-y-4 p-3 sm:space-y-5 sm:p-6'>
{(Object.keys(componentsMap) as DetailType[]).map((key) => {
return (
<div key={key}>
<div className='mb-2 flex items-center justify-between'>
<h3 className='font-semibold'>{componentsMap[key].label}</h3>
<div
key={key}
className='rounded-md border border-border/40 bg-card p-2 sm:p-3'
>
<div className='mb-2 flex flex-col sm:flex-row sm:items-center sm:justify-between'>
<h3 className='mb-1 text-base font-semibold sm:mb-0'>
{componentsMap[key].label}
</h3>
{editingSection === key ? (
<div className='flex gap-2'>
<div className='flex justify-end gap-2'>
<Button
variant='outline'
size='sm'
onClick={cancelEditing}
className='flex items-center gap-1 text-muted-foreground transition-colors hover:text-destructive'
className='flex h-8 items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-destructive sm:text-sm'
>
<X size={14} />
<span>취소</span>
<X size={14} className='sm:mr-1' />
<span className='hidden sm:inline'>취소</span>
</Button>
<Button
size='sm'
onClick={saveEditing}
className='flex items-center gap-1 bg-gradient-to-r from-primary to-primary/90'
className='flex h-8 items-center gap-1 bg-gradient-to-r from-primary to-primary/90 text-xs sm:text-sm'
>
<Save size={14} />
<span>저장</span>
<Save size={14} className='sm:mr-1' />
<span className='hidden sm:inline'>저장</span>
</Button>
</div>
) : componentsMap[key].canEdit !== false ? (
<Button
variant='ghost'
size='sm'
onClick={() => setEditingSection(key)}
className='flex items-center gap-1 text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary'
className='flex h-8 items-center gap-1 self-end text-xs text-muted-foreground transition-colors hover:bg-primary/10 hover:text-primary sm:text-sm'
>
<Pencil size={14} />
<span>수정</span>
<Pencil size={14} className='sm:mr-1' />
<span className='hidden sm:inline'>수정</span>
</Button>
) : null}
</div>

<Separator className='my-2' />

{data ? (
<div className='mb-5'>
<div className='py-1 text-sm sm:text-base'>
{componentsMap[key].component(data)}
</div>
) : (
<div>학생 정보가 존재하지 않습니다.</div>
<div className='py-4 text-center text-sm text-muted-foreground'>
학생 정보가 존재하지 않습니다.
</div>
)}
<Separator />
</div>
)
})}
Expand Down
78 changes: 45 additions & 33 deletions src/features/users/components/field-training.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import { DateRange } from 'react-day-picker'
import { getCurrentFieldTraining } from '@/utils/users/getCurrentFieldTraining'
import { Button } from '@/components/ui/button'
import { Calendar } from '@/components/ui/calendar'
import { Label } from '@/components/ui/label'
import {
Select,
SelectContent,
Expand Down Expand Up @@ -91,7 +90,14 @@ export const FieldTraining = ({
},
])
}
}, [updateDate, updateJob, editingSection, currentFieldTraining, currentRow, setEditData])
}, [
updateDate,
updateJob,
editingSection,
currentFieldTraining,
currentRow,
setEditData,
])

return (
<div>
Expand All @@ -104,13 +110,17 @@ export const FieldTraining = ({
<div className='grid grid-cols-1 gap-3'>
<div className='space-y-2'>
<span className='font-medium'>실습 기간</span>
<div className='flex justify-center'>
<Calendar
mode='range'
selected={updateDate}
onSelect={setUpdateDate}
className='rounded-lg border border-border p-2'
/>
{/* 캘린더 컨테이너에 반응형 스타일 추가 */}
<div className='w-full overflow-x-auto md:overflow-visible'>
<div className='flex min-w-full justify-center'>
<Calendar
mode='range'
selected={updateDate}
onSelect={setUpdateDate}
className='transform-origin-center w-auto max-w-full scale-[0.85] rounded-lg border border-border p-1 sm:scale-100 sm:p-2'
showOutsideDays={false}
/>
</div>
</div>
Copy link

Copilot AI Jul 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[nitpick] The responsive Calendar wrapper layout is duplicated for both date ranges; consider extracting this into a reusable component to DRY up the code and improve maintainability.

Copilot uses AI. Check for mistakes.
</div>
<div className='space-y-2'>
Expand Down Expand Up @@ -182,21 +192,26 @@ export const FieldTraining = ({
<div className='grid grid-cols-1 gap-3'>
<div className='space-y-2'>
<span className='font-medium'>실습 기간</span>
<div className='flex justify-center'>
<Calendar
mode='range'
selected={addDate}
onSelect={(range) => {
setAddDate(range)
setAddFieldTraining((prev) => ({
...prev,
start_date:
range?.from?.toISOString().split('T')[0] ?? '',
end_date: range?.to?.toISOString().split('T')[0] ?? '',
}))
}}
className='rounded-lg border border-border p-2'
/>
{/* 두 번째 캘린더도 같은 방식으로 반응형 스타일 적용 */}
<div className='w-full overflow-x-auto md:overflow-visible'>
<div className='flex min-w-full justify-center'>
<Calendar
mode='range'
selected={addDate}
onSelect={(range) => {
setAddDate(range)
setAddFieldTraining((prev) => ({
...prev,
start_date:
range?.from?.toISOString().split('T')[0] ?? '',
end_date:
range?.to?.toISOString().split('T')[0] ?? '',
}))
}}
className='transform-origin-center w-auto max-w-full scale-[0.85] rounded-lg border border-border p-1 sm:scale-100 sm:p-2'
showOutsideDays={false}
/>
</div>
</div>
</div>
<div className='space-y-2'>
Expand All @@ -220,16 +235,15 @@ export const FieldTraining = ({
))}
<AddFieldTrainingOption
type='job'
onClick={() => {
// 여기에 직무 추가 로직 구현 예정
}}
onClick={() => {}}
onSuccess={() => {
refetchJobs()
}}
/>
</SelectContent>
</Select>
</div>
{/* 나머지 코드는 동일하게 유지 */}
<div className='space-y-2'>
<span className='font-medium'>회사명</span>
<Select
Expand All @@ -254,9 +268,7 @@ export const FieldTraining = ({
))}
<AddFieldTrainingOption
type='company'
onClick={() => {
// 여기에 회사 추가 로직 구현 예정
}}
onClick={() => {}}
onSuccess={() => {
refetchCompanies()
}}
Expand Down Expand Up @@ -343,20 +355,20 @@ export const FieldTraining = ({
<div className='space-y-4'>
<div className='rounded-md border p-3'>
<dl className='space-y-2'>
<div className='flex gap-2'>
<div className='flex flex-col gap-1 sm:flex-row sm:gap-2'>
<dt className='w-24 flex-shrink-0 font-medium'>
실습 기간:
</dt>
<dd>{currentFieldTraining.start_date ?? '-'}</dd> ~{' '}
<dd>{currentFieldTraining.end_date ?? '-'}</dd>
</div>
<div className='flex gap-2'>
<div className='flex flex-col gap-1 sm:flex-row sm:gap-2'>
<dt className='w-24 flex-shrink-0 font-medium'>
실습 직무:
</dt>
<dd>{currentFieldTraining.jobs.job_name ?? '-'}</dd>
</div>
<div className='flex gap-2'>
<div className='flex flex-col gap-1 sm:flex-row sm:gap-2'>
<dt className='w-24 flex-shrink-0 font-medium'>회사명:</dt>
<dd>
{currentFieldTraining.companies.company_name ?? '-'}
Expand Down