diff --git a/src/components/common/Badge.tsx b/src/components/common/Badge.tsx index a24f892..0166e57 100644 --- a/src/components/common/Badge.tsx +++ b/src/components/common/Badge.tsx @@ -13,7 +13,6 @@ interface BadgeProps { className?: string; // 추가적인 여백(ml-2) 등을 줄 때 사용 } -// 💡 5가지 디자인 시안 컬러 매핑 const badgeVariants = { primary: 'bg-brand-lightBlue text-white', // 파란 바탕 + 흰 글씨 (제안, 강의꿀팁) secondary: 'bg-gray-100 text-gray-700', // 회색 바탕 + 진회색 글씨 (데이터베이스) @@ -22,6 +21,12 @@ const badgeVariants = { lightYellow: 'bg-yellow-main text-[#CA8A04] border border-[#FEF08A]', // 연노랑 바탕 + 노랑 글씨 (교양필수) outlineBlue: 'bg-white border border-brand-lightBlue text-brand-lightBlue', // 흰 바탕 + 파란 테두리 + 파란 글씨 (요청받은 게시글) outlineGray: 'bg-white border border-gray-300 text-gray-600', // 흰 바탕 + 회색 테두리 + lightRed: 'bg-red-100 text-red-100 border text-gray-600', + grayOutline: 'bg-gray-200 text-zinc-900 text-xs border border-slate-400 ', // 교양필수 + blueSolid: + 'bg-brand-lightBlue text-white text-xs font-light border border-slate-500 font-normal', // 졸업요건 + lightBlueOutline: + 'bg-blue-100 text-zinc-900 border text-xs border-brand-lightBlue ', //전공필수 }; export const Badge = ({ diff --git a/src/components/common/CourseCard.tsx b/src/components/common/CourseCard.tsx index 6e7828d..bbb2c2a 100644 --- a/src/components/common/CourseCard.tsx +++ b/src/components/common/CourseCard.tsx @@ -1,4 +1,3 @@ -// src/components/common/CourseCard.tsx import React from 'react'; interface CourseCardProps { @@ -9,7 +8,7 @@ interface CourseCardProps { leftNode?: React.ReactNode; rightNode?: React.ReactNode; className?: string; - onClick?: () => void; // 💡 1. 여기에 onClick 타입을 추가합니다. + onClick?: () => void; } export const CourseCard = ({ @@ -20,10 +19,9 @@ export const CourseCard = ({ leftNode, rightNode, className = '', - onClick, // 💡 2. props로 onClick을 받습니다. + onClick, }: CourseCardProps) => { return ( - // 💡 3. 최상위 div에 onClick을 달아주고, 클릭 가능할 땐 마우스 커서를 포인터로 바꿔줍니다.

{title}

- {/* 교수, 시간 정보가 있을 때만 렌더링 */} + {/* 교수, 시간 정보가 있을 때만 렌더링 (팀원 요청 스타일 반영됨) */} {(professor || time) && ( -
+
{professor &&

교수 : {professor}

} {time &&

시간 : {time}

}
diff --git a/src/components/common/Dropdown.tsx b/src/components/common/Dropdown.tsx index b5b3ac1..57994aa 100644 --- a/src/components/common/Dropdown.tsx +++ b/src/components/common/Dropdown.tsx @@ -30,7 +30,7 @@ export const Dropdown = ({ - - - - - -
- - - {/* 2. 실제 시안 레이아웃(Layout) 테스트 - 하이라이트 ✨ */} -
-

- 2. 실제 시안 레이아웃 조립 테스트 -

-
- {/* 케이스 A: 하단 고정 100% 버튼 */} -
-

- ✅ 케이스 A: 회원가입, 시간등록 (기본 100%) -

- -
- - {/* 케이스 B: 50:50 모달창 버튼 */} -
-

- ✅ 케이스 B: 모달창 (취소/삭제 반반 나누기) -

-
- - -
-
- - {/* 케이스 C: 리스트 아이템 내부의 수락/거절 */} -
-

- ✅ 케이스 C: 받은 요청함 (수락/거절 작은 버튼) -

-
- - -
-
-
-
- - {/* 3. 크기(Size) 테스트 */} -
-

- 3. Size (크기 변화) - fullWidth={false} 기준 -

-
- - - -
-
- - {/* 4. 비활성화(Disabled) 테스트 */} -
-

- 4. Disabled (비활성화 상태) -

-
- - - -
-
-
- ); -}; diff --git a/src/pages/TestCard.tsx b/src/pages/TestCard.tsx deleted file mode 100644 index f84caa7..0000000 --- a/src/pages/TestCard.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import { Icon } from '@iconify/react'; -import { Badge } from '../components/common/Badge'; -import { CourseCard } from '../components/common/CourseCard'; - -export const TestCard = () => { - return ( -
-
-

- 과목 카드 & 배지 테스트 🪪 -

-

- 시안의 모든 카드 케이스 완벽 구현 -

-
- -
- {/* 케이스 A: 찜 목록 (가장 단순한 형태 + 노란색 배지) */} -
-

- 1. 찜 목록 스타일 -

- - 교양필수 - 운영체제 - - } - /> -
- - {/* 케이스 B: 글쓰기 - 원하는 과목 선택 (+ 아이콘) */} -
-

- 2. 원하는 과목 선택 (+ 아이콘) -

- - + -
- } - badges={ - <> - 컴퓨터 과학 - 전공필수 - - } - /> - - - {/* 케이스 C: 글쓰기 - 선택된 과목 삭제 (X 아이콘 + 우측 정렬 배지) */} -
-

- 3. 교환글 작성 (X 삭제 버튼) -

- } - badges={ -
- {' '} - {/* 배지만 우측으로 밀기 */} - 컴퓨터 과학 - - 전공필수 - -
- } - /> -
- - {/* 케이스 D: 게시글 상세 - 요청받은 내 게시글 (파란 테두리 배지) */} -
-

- 4. 상세 - 요청받은 게시글 (파란 테두리) -

- - 전공필수 - 컴퓨터과학 - - } - /> -
-
- - ); -}; diff --git a/src/pages/TestExtra.tsx b/src/pages/TestExtra.tsx deleted file mode 100644 index 8fc6dc5..0000000 --- a/src/pages/TestExtra.tsx +++ /dev/null @@ -1,165 +0,0 @@ -import { useState } from 'react'; -import { Icon } from '@iconify/react'; -import { Dropdown } from '../components/common/Dropdown'; -import { EmptyState } from '../components/common/EmptyState'; -import { FAB } from '../components/common/FAB'; -import { Toast } from '../components/common/Toast'; -import Button from '../components/common/Button'; -import Header from '../components/layout/Header'; -import { ICONS } from '../constants/icons'; -import { IconButton } from '../components/common/IconButton'; - -export const TestExtra = () => { - // 1. 드롭다운 상태 관리 - const [filterValue, setFilterValue] = useState('all'); - - // 2. 토스트 상태 관리 - const [isToastVisible, setIsToastVisible] = useState(false); - const [toastMessage, setToastMessage] = useState(''); - const [toastIcon, setToastIcon] = useState('ph:check-bold'); - - // 토스트 띄우기 도우미 함수 - const showToast = (message: string, icon: string = 'ph:check-bold') => { - setToastMessage(message); - setToastIcon(icon); - setIsToastVisible(false); // 연타 시 타이머 초기화를 위해 한번 껐다가 켭니다 - setTimeout(() => setIsToastVisible(true), 10); - }; - - return ( -
-
-

- 기타 컴포넌트 테스트 🧩 -

-

- 드롭다운, 빈 화면, 토스트, 그리고 플로팅 버튼 -

-
- - {/* 💡 모바일 화면 규격 (스크롤 테스트를 위해 높이와 overflow 속성 추가) */} -
- {/* ========================================= - 💡 공통 Header 컴포넌트 적용 완료 - ========================================= */} -
} - title="컴포넌트 테스트" - rightNode={} - /> - - {/* 스크롤 가능한 메인 영역 */} -
- {/* ========================================= - 💡 1. Dropdown (드롭다운 필터) 테스트 - ========================================= */} -
-

- 1. 드롭다운 필터 (z-index 테스트) -

-
- -
-

- 현재 선택된 값:{' '} - {filterValue} -

-
- -
- - {/* ========================================= - 💡 2. EmptyState (빈 화면) 테스트 - ========================================= */} -
-

- 2. 텅 빈 화면 안내 -

-
- } // 시안의 연파란색 느낌 - title="아직 등록한 교환 게시글이 없어요." - description="교환하려는 과목을 등록하고 원하는 과목을 찾아보세요!" - action={ - - } - /> -
-
- -
- - {/* ========================================= - 💡 3. Toast (토스트 알림) 테스트 - ========================================= */} -
-

- 3. 토스트 알림 띄우기 -

-
- - -
-
- - {/* 스크롤 길이를 늘리기 위한 가짜 여백 */} -
- (스크롤 영역) -
-
- - {/* ========================================= - 💡 4. FAB (플로팅 버튼) 테스트 - ========================================= */} - {/* 기본 동그라미 FAB (+ 아이콘) : 겹치지 않게 위치 조정 */} - alert('+ 아이콘 클릭!')} - className="bottom-28" // 원래 위치 - /> - - {/* 알약 모양 FAB (+ 글쓰기) : 겹치지 않게 위치 조정 */} - alert('글쓰기 클릭!')} - text="글쓰기" - className="bottom-8" // 아래로 조금 내림 - /> - - {/* ========================================= - 💡 5. 실제 렌더링되는 Toast 컴포넌트 - ========================================= */} - setIsToastVisible(false)} - icon={toastIcon} - /> -
-
- ); -}; diff --git a/src/pages/TestHeader.tsx b/src/pages/TestHeader.tsx deleted file mode 100644 index 50f5a24..0000000 --- a/src/pages/TestHeader.tsx +++ /dev/null @@ -1,82 +0,0 @@ -import { ICONS } from '../constants/icons'; -import { IconButton } from '../components/common/IconButton'; -import Header from '../components/layout/Header'; - -export const TestHeader = () => { - return ( -
-
-

- 헤더 UI 테스트 도화지 🎨 -

-

- 타이틀 중앙 정렬 및 가변 아이콘 검증 -

-
- - {/* 모바일 화면(402px) 규격을 흉내 낸 컨테이너 */} -
- {/* 1번 시안: 게시글 상세 */} -
-

- 1. 게시글 상세 (타이틀 중앙 + 우측 점 3개) -

-
-
console.log('뒤로가기')} - /> - } - title="게시글 상세" - rightNode={} - /> - {/* 헤더 아래 빈 내용 영역 */} -
-
-
- - {/* 2번 시안: 교환 요청함 */} -
-

- 2. 교환 요청함 (기본 형태) -

-
-
} - title="교환 요청함" - rightNode={} - /> -
-
-
- - {/* 3번 시안: 메인 홈 */} -
-

- 3. 메인 홈 (좌측 로고 + 우측 멀티 아이콘) -

-
-
- 교환해요 - - } - // title은 아예 비워둡니다 - rightNode={ - <> - {/* 💡 아이콘 두 개가 나란히 들어가도 알아서 예쁘게 배치됩니다 */} - - - - } - /> -
-
-
-
-
- ); -}; diff --git a/src/pages/TestInput.tsx b/src/pages/TestInput.tsx deleted file mode 100644 index 53d0f2b..0000000 --- a/src/pages/TestInput.tsx +++ /dev/null @@ -1,94 +0,0 @@ -import { useState } from 'react'; -import { Icon } from '@iconify/react'; -// 💡 컴포넌트들의 실제 경로에 맞게 수정해주세요 -import { Input } from '../components/common/Input'; -import { Textarea } from '../components/common/Textarea'; - -export const TestInput = () => { - // 비밀번호 보이기/숨기기 토글 상태 관리 - const [showPassword, setShowPassword] = useState(false); - - return ( -
-
-

- 입력창 UI 테스트 도화지 📝 -

-

- 기본, 아이콘, 에러, 채팅 피드 타입 검증 -

-
- - {/* 모바일 화면(402px) 규격 컨테이너 */} -
- {/* 케이스 1: 기본 이메일 입력창 */} -
- - } - /> -
- - {/* 케이스 2: 비밀번호 변경 에러 상태 */} -
- - setShowPassword(!showPassword)} - > - - - } - isError={true} - errorMessage="비밀번호가 일치하지 않습니다." - /> -
- - {/* 케이스 3: 게시판 글쓰기 제목 및 내용 */} -
- -
- -