Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -147,11 +147,11 @@ const getEndpointKey = (endpoint: EndpointItem) => `${endpoint.domain}:${endpoin
const getMethodClassName = (method: DefinitionMethod) =>
cn(
"rounded px-1.5 py-0.5 typo-regular-4",
method === "GET" && "bg-[#E8F3FF] text-[#1D4ED8]",
method === "POST" && "bg-[#ECFDF3] text-[#047857]",
method === "PUT" && "bg-[#FFF7ED] text-[#C2410C]",
method === "PATCH" && "bg-[#FEF3C7] text-[#B45309]",
method === "DELETE" && "bg-[#FEE2E2] text-[#B91C1C]",
method === "GET" && "bg-magic-http-get-surface text-magic-http-get-text",
method === "POST" && "bg-magic-http-post-surface text-magic-http-post-text",
method === "PUT" && "bg-magic-http-put-surface text-magic-http-put-text",
method === "PATCH" && "bg-magic-http-patch-surface text-magic-http-patch-text",
method === "DELETE" && "bg-magic-http-delete-surface text-magic-http-delete-text",
(method === "HEAD" || method === "OPTIONS") && "bg-k-100 text-k-700",
);

Expand Down Expand Up @@ -385,7 +385,7 @@ export function BrunoApiPageContent() {

<div className="space-y-4">
{showRemoteWarning ? (
<div className="flex items-start gap-2 rounded-md border border-[#FACC15] bg-[#FEFCE8] px-4 py-3 text-[#854D0E]">
<div className="flex items-start gap-2 rounded-md border border-magic-warning-border bg-magic-warning-surface px-4 py-3 text-magic-warning">
<AlertTriangle className="mt-0.5 h-4 w-4 shrink-0" />
<div className="min-w-0">
<p className="typo-sb-11">원격 API 서버에 연결되어 있습니다.</p>
Expand Down Expand Up @@ -437,7 +437,7 @@ export function BrunoApiPageContent() {
</div>
) : null}
{editorError ? (
<div className="rounded-md border border-[#FCA5A5] bg-[#FEF2F2] px-3 py-2 typo-regular-4 text-[#B91C1C]">
<div className="rounded-md border border-magic-error-border bg-magic-error-surface px-3 py-2 typo-regular-4 text-magic-error">
{editorError}
</div>
) : null}
Expand Down Expand Up @@ -501,8 +501,8 @@ export function BrunoApiPageContent() {
className={cn(
"rounded px-2 py-1",
requestResult.status >= 200 && requestResult.status < 300
? "bg-[#ECFDF3] text-[#047857]"
: "bg-[#FEF2F2] text-[#B91C1C]",
? "bg-magic-api-success-surface text-magic-api-success-text"
: "bg-magic-error-surface text-magic-error",
)}
>
HTTP {requestResult.status}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ const STATUS_OPTIONS: { value: MentorApplicationStatus; label: string }[] = [

const statusStyles: Record<MentorApplicationStatus, string> = {
PENDING: "bg-primary-100 text-primary",
APPROVED: "bg-[#E9F7EC] text-[#15A861]",
REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
APPROVED: "bg-magic-success-surface text-magic-success",
REJECTED: "bg-magic-danger-surface text-magic-danger",
};

const statusLabels: Record<MentorApplicationStatus, string> = {
Expand Down Expand Up @@ -254,7 +254,7 @@ function MentorApplicationHistoryRow({ colSpan, siteUserId }: { colSpan: number;
<span className="ml-2 typo-regular-4 text-k-500">이력을 불러오는 중...</span>
</div>
) : isError ? (
<p className="py-4 text-center typo-regular-4 text-[#E22A2D]">신청 이력을 불러오지 못했습니다.</p>
<p className="py-4 text-center typo-regular-4 text-magic-danger">신청 이력을 불러오지 못했습니다.</p>
) : historyItems.length === 0 ? (
<p className="py-4 text-center typo-regular-4 text-k-500">신청 이력이 없습니다.</p>
) : (
Expand Down Expand Up @@ -595,7 +595,7 @@ export function MentorApplicationsPageContent() {
</TableRow>
) : isError ? (
<TableRow>
<TableCell colSpan={9} className="text-center typo-regular-4 text-[#E22A2D]">
<TableCell colSpan={9} className="text-center typo-regular-4 text-magic-danger">
멘토 승격 요청을 불러오지 못했습니다.
</TableCell>
</TableRow>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -300,7 +300,7 @@ export function RegionsCountriesPageContent() {
</TableRow>
) : regionsQuery.isError ? (
<TableRow>
<TableCell colSpan={3} className="text-center typo-regular-4 text-[#E22A2D]">
<TableCell colSpan={3} className="text-center typo-regular-4 text-magic-danger">
권역을 불러오지 못했습니다.
</TableCell>
</TableRow>
Expand Down Expand Up @@ -431,7 +431,7 @@ export function RegionsCountriesPageContent() {
</TableRow>
) : countriesQuery.isError ? (
<TableRow>
<TableCell colSpan={4} className="text-center typo-regular-4 text-[#E22A2D]">
<TableCell colSpan={4} className="text-center typo-regular-4 text-magic-danger">
지역을 불러오지 못했습니다.
</TableCell>
</TableRow>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
<button
type="button"
onClick={handleApprove}
className="rounded bg-[#15A861] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#10814A]"
className="rounded bg-magic-success px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-success-hover"
>
승인
</button>
Expand All @@ -50,7 +50,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
<button
type="button"
onClick={handleReject}
className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
className="rounded bg-magic-danger px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-danger-hover"
>
확인
</button>
Expand All @@ -59,7 +59,7 @@ export function ScoreVerifyButton({ currentStatus, onVerifyChange }: Props) {
<button
type="button"
onClick={handleReject}
className="rounded bg-[#E22A2D] px-3 py-1 typo-sb-11 text-k-0 hover:bg-[#BA1E21]"
className="rounded bg-magic-danger px-3 py-1 typo-sb-11 text-k-0 hover:bg-magic-danger-hover"
>
거절
</button>
Expand Down
4 changes: 2 additions & 2 deletions apps/admin/src/components/features/scores/StatusBadge.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,8 @@ import type { VerifyStatus } from "@/types/scores";

const statusStyles = {
PENDING: "bg-primary-100 text-primary",
APPROVED: "bg-[#E9F7EC] text-[#15A861]",
REJECTED: "bg-[#FFD9D9] text-[#E22A2D]",
APPROVED: "bg-magic-success-surface text-magic-success",
REJECTED: "bg-magic-danger-surface text-magic-danger",
};

const statusLabels = {
Expand Down
6 changes: 3 additions & 3 deletions apps/admin/src/components/layout/AdminLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@ export function AdminLayout({ children, activeMenu, title, description }: AdminL
};

return (
<div className="min-h-screen bg-[radial-gradient(circle_at_top,_#eef2ff_0%,_#fafafa_48%,_#f5f5f5_100%)] text-k-800">
<div className="min-h-screen bg-magic-admin-shell text-k-800">
<div className="mx-auto flex min-h-screen w-full max-w-[1440px] flex-col px-3 py-4 sm:px-4 sm:py-6 lg:px-8">
<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-[0_10px_30px_-24px_rgba(26,31,39,0.45)]">
<header className="mb-4 flex items-center justify-between rounded-2xl border border-k-100 bg-k-0 px-4 py-3 shadow-magic-admin-header">
<div className="flex items-center gap-3">
<div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary-100 text-primary typo-sb-9">
SC
Expand All @@ -67,7 +67,7 @@ export function AdminLayout({ children, activeMenu, title, description }: AdminL
<div className="flex min-h-[calc(100vh-96px)] overflow-hidden rounded-[24px] border border-k-100 bg-k-0 shadow-sdw-a">
<AdminSidebar activeMenu={activeMenu} />
<section className="flex-1 bg-bg-50 p-4 sm:p-6 lg:p-7">
<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-[0_8px_24px_-22px_rgba(26,31,39,0.45)] sm:p-6">
<div className="h-full rounded-2xl border border-k-100 bg-k-0 p-4 shadow-magic-admin-panel sm:p-6">
<h1 className="typo-bold-1 text-k-900">{title}</h1>
{description ? <p className="mt-1 typo-regular-4 text-k-500">{description}</p> : null}
{children}
Expand Down
48 changes: 48 additions & 0 deletions apps/admin/src/styles.css
Original file line number Diff line number Diff line change
@@ -1,6 +1,37 @@
@import "tailwindcss";
@source "../../../packages/ui/src";

@theme {
--color-magic-success: #15a861;
--color-magic-success-hover: #10814a;
--color-magic-success-surface: #e9f7ec;
--color-magic-danger: #e22a2d;
--color-magic-danger-hover: #ba1e21;
--color-magic-danger-surface: #ffd9d9;
--color-magic-error: #b91c1c;
--color-magic-error-border: #fca5a5;
--color-magic-error-surface: #fef2f2;
--color-magic-warning: #854d0e;
--color-magic-warning-border: #facc15;
--color-magic-warning-surface: #fefce8;
--color-magic-api-success-surface: #ecfdf3;
--color-magic-api-success-text: #047857;
--color-magic-http-get-surface: #e8f3ff;
--color-magic-http-get-text: #1d4ed8;
--color-magic-http-post-surface: #ecfdf3;
--color-magic-http-post-text: #047857;
--color-magic-http-put-surface: #fff7ed;
--color-magic-http-put-text: #c2410c;
--color-magic-http-patch-surface: #fef3c7;
--color-magic-http-patch-text: #b45309;
--color-magic-http-delete-surface: #fee2e2;
--color-magic-http-delete-text: #b91c1c;
--color-magic-admin-shell-spotlight: #eef2ff;
--color-magic-admin-shell-mid: #fafafa;
--color-magic-admin-shell-base: #f5f5f5;
--color-magic-admin-panel-shadow: rgba(26, 31, 39, 0.45);
}

body {
@apply m-0;
font-family: "Pretendard", system-ui, -apple-system, sans-serif;
Expand Down Expand Up @@ -101,6 +132,23 @@ code {
box-shadow: 0 4px 40px 0 rgba(26, 31, 39, 0.12);
}

.bg-magic-admin-shell {
background-image: radial-gradient(
circle at top,
var(--color-magic-admin-shell-spotlight) 0%,
var(--color-magic-admin-shell-mid) 48%,
var(--color-magic-admin-shell-base) 100%
);
}

.shadow-magic-admin-header {
box-shadow: 0 10px 30px -24px var(--color-magic-admin-panel-shadow);
}

.shadow-magic-admin-panel {
box-shadow: 0 8px 24px -22px var(--color-magic-admin-panel-shadow);
}

.typo-bold-1 {
font-size: 24px;
line-height: 140%;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ const PostWriteButton = ({ onClick }: PostWriteButtonProps) => {
className={`fixed bottom-16 flex w-full max-w-app flex-col items-center transition-transform duration-300 ease-in-out ${isVisible ? "translate-y-0" : "translate-y-[calc(100%+66px)]"} `}
>
<button
className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-[0px_4px_30px_rgba(0,0,0,0.15)]"
className="relative flex h-14 w-14 cursor-pointer items-center justify-center rounded-full bg-primary shadow-magic-floating-action"
onClick={onClick}
type="button"
aria-label="글쓰기"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ const Comment = ({
<div
className={clsx(
"flex border-b border-gray-c-100 px-5 py-[18px]",
comment.parentId !== null ? "bg-line-1" : "bg-[#fafafa]",
comment.parentId !== null ? "bg-line-1" : "bg-magic-comment-reply-bg",
)}
key={comment.id}
role="button"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ const ChatPageClient = () => {
</p>
<Link
href={"/mentor"}
className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-[linear-gradient(270deg,_var(--Primary-Color,_#5950F6)_0%,_var(--SubA-Color,_#388CE8)_100%)] px-[10px] text-white typo-sb-9"
className="mt-5 flex h-[52px] w-60 items-center justify-center gap-[10px] rounded-[30px] bg-gradient-to-l from-primary to-sub-a px-[10px] text-white typo-sb-9"
>
멘토 찾으러 가볼까요?
</Link>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const likeIcon = (
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
<path
d="M13.3562 0C11.7398 0 10.3052 0.634385 9.33325 1.72476C8.3613 0.634385 6.9267 0 5.31026 0C3.9024 0.00169364 2.55268 0.558508 1.55717 1.54831C0.561652 2.53811 0.0016233 3.88008 -8.01086e-05 5.27987C-8.01086e-05 11.0669 8.51337 15.6908 8.87544 15.8852C9.01614 15.9606 9.17345 16 9.33325 16C9.49306 16 9.65037 15.9606 9.79107 15.8852C10.1531 15.6908 18.6666 11.0669 18.6666 5.27987C18.6649 3.88008 18.1049 2.53811 17.1093 1.54831C16.1138 0.558508 14.7641 0.00169364 13.3562 0ZM12.9145 11.3885C11.7939 12.334 10.596 13.1849 9.33325 13.9325C8.07048 13.1849 6.87258 12.334 5.75199 11.3885C4.00843 9.90136 1.93095 7.63342 1.93095 5.27987C1.93095 4.38877 2.28699 3.53416 2.92073 2.90405C3.55447 2.27394 4.41402 1.91995 5.31026 1.91995C6.74245 1.91995 7.9413 2.67194 8.43935 3.88311C8.51184 4.05967 8.63557 4.21076 8.79478 4.31712C8.95399 4.42348 9.14145 4.48028 9.33325 4.48028C9.52506 4.48028 9.71252 4.42348 9.87173 4.31712C10.0309 4.21076 10.1547 4.05967 10.2272 3.88311C10.7252 2.67194 11.9241 1.91995 13.3562 1.91995C14.2525 1.91995 15.112 2.27394 15.7458 2.90405C16.3795 3.53416 16.7356 4.38877 16.7356 5.27987C16.7356 7.63342 14.6581 9.90136 12.9145 11.3885Z"
fill="#4672EE"
fill="currentColor"
/>
</svg>
);
Expand All @@ -20,7 +20,7 @@ const likeIconFilled = (
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="16" viewBox="0 0 19 16" fill="none">
<path
d="M13.3562 0C11.7398 0 10.3052 0.634385 9.33325 1.72476C8.3613 0.634385 6.9267 0 5.31026 0C3.9024 0.00169364 2.55268 0.558508 1.55717 1.54831C0.561652 2.53811 0.0016233 3.88008 -8.01086e-05 5.27987C-8.01086e-05 11.0669 8.51337 15.6908 8.87544 15.8852C9.01614 15.9606 9.17345 16 9.33325 16C9.49306 16 9.65037 15.9606 9.79107 15.8852C10.1531 15.6908 18.6666 11.0669 18.6666 5.27987C18.6649 3.88008 18.1049 2.53811 17.1093 1.54831C16.1138 0.558508 14.7641 0.00169364 13.3562 0Z"
fill="#4672EE"
fill="currentColor"
/>
</svg>
);
Expand Down Expand Up @@ -81,7 +81,7 @@ const UniversityBtns = ({ universityId }: UniversityBtnsProps) => {
showIconToast("univ", "관심학교 추가되었습니다");
}
}}
className={`/* stroke: #FFF; stroke-width: 1px; */ /* fill: linear-gradient(...) */ /* CSS의 fill은 SVG 속성이지만, 버튼 배경으로 적용합니다. */ /* backdrop-filter: blur(2px); */ /* filter: drop-shadow(...) */ /* 기타 스타일 */ rounded-full border border-white/80 bg-[linear-gradient(136deg,rgba(255,255,255,0.4)_14.87%,rgba(199,212,250,0.8)_89.1%)] p-3 drop-shadow-[2px_2px_6px_#C7D4FA] backdrop-blur-[2px] transition-transform duration-200 ease-in-out hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 active:scale-95`}
className="rounded-full border border-white/80 bg-magic-university-action-glass p-3 text-magic-university-action drop-shadow-magic-university-action backdrop-blur-[2px] transition-transform duration-200 ease-in-out hover:scale-110 focus:outline-none focus:ring-2 focus:ring-white/50 active:scale-95"
>
{isLiked ? likeIconFilled : likeIcon}
</button>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,6 @@ const GpaCertExamplePage = () => {

const divStyle = {
padding: "33px 20px 36px 20px",
borderBottom: "1px solid rgb(236, 236, 236)",
fontFamily: "Pretendard",
fontSize: "14px",
lineHeight: "150%",
Expand Down Expand Up @@ -48,7 +47,7 @@ const GpaCertExamplePage = () => {
return (
<div className="w-full">
<TopDetailNavigation title="증명서 예시" handleBack={closeWindow} />
<div style={divStyle} className="border-b border-bg-400 text-gray-800">
<div style={divStyle} className="border-b border-magic-certificate-divider text-gray-800">
학번과 직전학기가 표시된 증명서만 승인됩니다.
<br />
<br />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const BottomNavigation = () => {
}

return (
<nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white [box-shadow:0px_-2px_6px_0px_var(--K50,#F5F5F5)]">
<nav className="fixed bottom-0 flex h-[56px] w-full max-w-app bg-white shadow-magic-bottom-nav">
{NAV_ITEMS.map(({ route, text, iconType }) => {
const isActive = isRouteActive(pathname, route);
return (
Expand All @@ -36,11 +36,13 @@ const BottomNavigation = () => {
href={route}
aria-current={isActive ? "page" : undefined}
aria-label={`${text} 페이지로 이동`}
className="flex flex-[1_0_0] flex-col items-center self-stretch px-3 pb-2 pt-1.5 no-underline"
className={`flex flex-[1_0_0] flex-col items-center self-stretch px-3 pb-2 pt-1.5 no-underline ${
isActive ? "text-primary" : "text-magic-nav-inactive"
}`}
>
{(() => {
const IconComp = ICON_COMPONENTS[iconType];
return <IconComp color={isActive ? "#5950F6" : undefined} />;
return <IconComp />;
})()}
<span
className={
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// eslint-disable-next-line
export default function DegreeHat({ color = "#707070" }) {
export default function DegreeHat({ color = "currentColor" }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path d="M0.42041 0H20.4204V20H0.42041V0Z" fill="white" fillOpacity="0.01" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// eslint-disable-next-line
export default function EditTwo({ color = "#707070" }) {
export default function EditTwo({ color = "currentColor" }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path d="M0.460449 0H20.4604V20H0.460449V0Z" fill="white" fillOpacity="0.01" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// eslint-disable-next-line
export default function Home({ color = "#707070" }) {
export default function Home({ color = "currentColor" }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// eslint-disable-next-line
export default function Human({ color = "#707070" }) {
export default function Human({ color = "currentColor" }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
// eslint-disable-next-line
export default function WhatsNew({ color = "#707070" }) {
export default function WhatsNew({ color = "currentColor" }) {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
<path
Expand Down
Original file line number Diff line number Diff line change
@@ -1,25 +1,25 @@
const World = () => (
const World = ({ color = "currentColor" }) => (
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
<path d="M0 0H20V20H0V0Z" fill="white" fillOpacity="0.01" />
<path
d="M10.0003 18.3334C14.6027 18.3334 18.3337 14.6024 18.3337 10C18.3337 5.39765 14.6027 1.66669 10.0003 1.66669C5.39795 1.66669 1.66699 5.39765 1.66699 10C1.66699 14.6024 5.39795 18.3334 10.0003 18.3334Z"
stroke="#707070"
stroke={color}
strokeWidth="1.6"
/>
<path
d="M1.66699 8.6835C2.92318 8.09033 3.85227 8.00771 4.45424 8.43558C5.35724 9.07746 5.47045 11.6933 7.52428 10.4431C9.57812 9.19292 6.64478 8.6835 7.28158 6.87246C7.91837 5.06142 10.0038 6.46821 10.2111 4.48446C10.3493 3.16193 8.76733 2.65589 5.46516 2.96634"
stroke="#707070"
stroke={color}
strokeWidth="1.6"
/>
<path
d="M15.0012 3.33331C12.6202 5.4119 11.7886 6.6671 12.5064 7.09885C13.5832 7.74652 14.04 6.83469 15.3539 7.09885C16.6679 7.36306 16.3834 9.14402 15.6923 9.14402C15.0012 9.14402 11.422 8.68823 11.6023 10.7771C11.7825 12.8659 13.9354 13.1751 13.9354 14.3421C13.9354 15.1201 13.4591 16.3108 12.5064 17.9142"
stroke="#707070"
stroke={color}
strokeWidth="1.6"
strokeLinecap="round"
/>
<path
d="M2.54395 13.7193C2.92373 13.5536 3.20922 13.4322 3.4004 13.355C5.00336 12.7074 6.19277 12.5547 6.96857 12.897C8.34044 13.5024 7.81302 14.725 8.24273 15.1754C8.6724 15.6258 9.7454 15.4948 9.7454 16.3516C9.7454 16.9229 9.55352 17.5682 9.16977 18.2875"
stroke="#707070"
stroke={color}
strokeWidth="1.6"
strokeLinecap="round"
/>
Expand Down
Loading
Loading