diff --git a/package-lock.json b/package-lock.json
index e7df565..a8fd2ea 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "finalproject",
"version": "0.1.0",
"dependencies": {
+ "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tanstack/react-query": "^5.17.19",
"@tanstack/react-query-devtools": "^5.17.21",
"axios": "^1.6.5",
@@ -2781,6 +2782,35 @@
"tslib": "^2.4.0"
}
},
+ "node_modules/@tailwindcss/nesting": {
+ "version": "0.0.0-insiders.565cd3e",
+ "resolved": "https://registry.npmjs.org/@tailwindcss/nesting/-/nesting-0.0.0-insiders.565cd3e.tgz",
+ "integrity": "sha512-WhHoFBx19TnH/c+xLwT/sxei6+4RpdfiyG3MYXfmLaMsADmVqBkF7B6lDalgZD9YdM459MF7DtxVbWkOrV7IaQ==",
+ "dependencies": {
+ "postcss-nested": "^5.0.5"
+ },
+ "peerDependencies": {
+ "postcss": "^8.2.15"
+ }
+ },
+ "node_modules/@tailwindcss/nesting/node_modules/postcss-nested": {
+ "version": "5.0.6",
+ "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.6.tgz",
+ "integrity": "sha512-rKqm2Fk0KbA8Vt3AdGN0FB9OBOMDVajMG6ZCf/GoHgdxUJ4sBFp0A/uMIRm+MJUdo33YXEtjqIz8u7DAp8B7DA==",
+ "dependencies": {
+ "postcss-selector-parser": "^6.0.6"
+ },
+ "engines": {
+ "node": ">=12.0"
+ },
+ "funding": {
+ "type": "opencollective",
+ "url": "https://opencollective.com/postcss/"
+ },
+ "peerDependencies": {
+ "postcss": "^8.2.14"
+ }
+ },
"node_modules/@tanstack/query-core": {
"version": "5.17.19",
"resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-5.17.19.tgz",
@@ -3785,7 +3815,6 @@
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
"integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
- "dev": true,
"bin": {
"cssesc": "bin/cssesc"
},
@@ -6386,7 +6415,6 @@
"version": "8.4.33",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.33.tgz",
"integrity": "sha512-Kkpbhhdjw2qQs2O2DGX+8m5OVqEcbB9HRBvuYM9pgrjEFUg30A9LmXNlTAUj4S9kgtGyrMbTzVjH7E+s5Re2yg==",
- "dev": true,
"funding": [
{
"type": "opencollective",
@@ -6513,7 +6541,6 @@
"version": "6.0.15",
"resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.15.tgz",
"integrity": "sha512-rEYkQOMUCEMhsKbK66tbEU9QVIxbhN18YiniAwA7XQYTVBqrBy+P2p5JcdqsHgKM2zWylp8d7J6eszocfds5Sw==",
- "dev": true,
"dependencies": {
"cssesc": "^3.0.0",
"util-deprecate": "^1.0.2"
@@ -7779,8 +7806,7 @@
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
- "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
- "dev": true
+ "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
},
"node_modules/which": {
"version": "2.0.2",
diff --git a/package.json b/package.json
index 3d6634d..1aa608b 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
"lint": "next lint"
},
"dependencies": {
+ "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tanstack/react-query": "^5.17.19",
"@tanstack/react-query-devtools": "^5.17.21",
"axios": "^1.6.5",
diff --git a/postcss.config.js b/postcss.config.js
index 12a703d..cdbe50f 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
module.exports = {
plugins: {
+ 'tailwindcss/nesting': {},
tailwindcss: {},
autoprefixer: {},
},
diff --git a/src/app/(auth)/[username]/_components/.gitkeep b/src/app/(auth)/[username]/_components/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/(auth)/[username]/page.tsx b/src/app/(auth)/[username]/page.tsx
new file mode 100644
index 0000000..f9cd726
--- /dev/null
+++ b/src/app/(auth)/[username]/page.tsx
@@ -0,0 +1,3 @@
+export default function Home() {
+ return 마이 페이지;
+}
diff --git a/src/app/(auth)/[username]/status/[id]/.gitkeep b/src/app/(auth)/[username]/status/[id]/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 3f15965..caa7ea3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,9 +1,13 @@
import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
+import { Noto_Sans_KR } from 'next/font/google';
import '../styles/globals.css';
import ReactQueryProviders from '@/utils/react-query-provider';
-const inter = Inter({ subsets: ['latin'] });
+// Noto sans 폰트 적용
+const notoSansKr = Noto_Sans_KR({
+ preload: false,
+ weight: ['100', '200', '300', '400', '500', '600', '700', '800', '900'],
+});
export const metadata: Metadata = {
title: 'Team Six',
@@ -17,7 +21,7 @@ export default function RootLayout({
}>) {
return (
-
+
{children}
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5f9150b..d3ff399 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -3,6 +3,7 @@ export default function Home() {
main
dev 브랜치 자동 배포 테스트용 텍스트입니다..!
+ test
);
}
diff --git a/src/components/.gitkeep b/src/components/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e41deea..39222d7 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -4,9 +4,16 @@
@layer base {
:root {
- --primary: 85 52 218;
- --primary-light: 241 239 253;
- --red: 214 23 58;
+ --primary-900: #c80011;
+ --primary-800: #d8001e;
+ --primary-700: #e40026;
+ --primary-600: #f6002b;
+ --primary-500: #ff002b;
+ --primary-400: #ff2049;
+ --primary-300: #f35c6e;
+ --primary-200: #f98d97;
+ --primary-100: #ffc7d2;
+ --primary-50: #ffe9ee;
--green: 122 197 85;
--green-light: 231 247 219;
--purple: 118 13 222;
@@ -16,24 +23,30 @@
--blue: 118 165 234;
--blue-light: 29 155 240;
--blue-hover-light: 26 140 216;
- --pink: 232 118 234;
- --pink-light: 247 219 240;
- --black: 23 23 23;
- --white: 255 255 255;
- --gray-1: 250 250 250;
- --gray-2: 238 238 238;
- --gray-3: 217 217 217;
- --gray-4: 159 166 178;
- --gray-5: 120 116 134;
- --gray-6: 75 75 75;
- --gray-7: 51 50 54;
- --WHITE: 255 255 255;
+ --black: #040404;
+ --white: #fff;
+ --gray-50: #f5f5f5;
+ --gray-100: #eaeaea;
+ --gray-200: #dbdbdb;
+ --gray-300: #c6c6c6;
+ --gray-400: #a0a0a0;
+ --gray-500: #7e7e7e;
+ --gray-600: #585858;
+ --gray-700: #454545;
+ --gray-800: #282828;
}
- :root[data-theme="dark"] {
- --primary: 85 52 218;
- --primary-light: 241 239 253;
- --red: 214 23 58;
+ :root[data-theme='dark'] {
+ --primary-900: #c80011;
+ --primary-800: #d8001e;
+ --primary-700: #e40026;
+ --primary-600: #f6002b;
+ --primary-500: #ff002b;
+ --primary-400: #ff2049;
+ --primary-300: #f35c6e;
+ --primary-200: #f98d97;
+ --primary-100: #ffc7d2;
+ --primary-50: #ffe9ee;
--green: 122 197 85;
--green-light: 241 207 255;
--purple: 118 13 222;
@@ -42,98 +55,92 @@
--orange-light: 249 238 227;
--blue: 118 165 234;
--blue-light: 219 230 247;
- --pink: 232 118 234;
- --pink-light: 247 219 240;
- --black: 255 255 255;
- --white: 23 23 23;
- --gray-1: 51 50 54;
- --gray-2: 75 75 75;
- --gray-3: 120 116 134;
- --gray-4: 159 166 178;
- --gray-5: 217 217 217;
- --gray-6: 238 238 238;
- --gray-7: 250 250 250;
- --WHITE: 255 255 255;
+ --black: #fff;
+ --white: #040404;
+ --gray-50: #282828;
+ --gray-100: #454545;
+ --gray-200: #585858;
+ --gray-300: #7e7e7e;
+ --gray-400: #a0a0a0;
+ --gray-500: #c6c6c6;
+ --gray-600: #dbdbdb;
+ --gray-700: #eaeaea;
+ --gray-800: #f5f5f5;
}
-}
-
-* {
- box-sizing: border-box;
- font-family: "Pretendard";
-}
-
-html {
- font-size: 62.5%;
-}
-html,
-body {
- background-color: white;
- ::-webkit-scrollbar {
- width: 8px;
- }
- ::-webkit-scrollbar-thumb {
- height: 30%;
- border-radius: 10px;
- background-color: #d9d9d9;
+ * {
+ box-sizing: border-box;
}
- @media (max-width: 375px) {
- padding-right: 7px;
- &::-webkit-scrollbar {
- width: 4px;
+ html,
+ body {
+ background-color: white;
+ ::-webkit-scrollbar {
+ width: 8px;
+ }
+ ::-webkit-scrollbar-thumb {
+ height: 30%;
+ border-radius: 10px;
+ background-color: #d9d9d9;
+ }
+
+ @media (max-width: 375px) {
+ padding-right: 7px;
+ &::-webkit-scrollbar {
+ width: 4px;
+ }
}
}
-}
-html,
-body,
-div,
-span,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-p,
-a,
-dl,
-dt,
-dd,
-ol,
-ul,
-li,
-form,
-label,
-table,
-button {
- margin: 0;
- padding: 0;
- border: 0;
-}
+ html,
+ body,
+ div,
+ span,
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ p,
+ a,
+ dl,
+ dt,
+ dd,
+ ol,
+ ul,
+ li,
+ form,
+ label,
+ table,
+ button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ }
-a {
- text-decoration: none !important;
- cursor: pointer;
-}
+ a {
+ text-decoration: none !important;
+ cursor: pointer;
+ }
-ol,
-ul {
- list-style: none;
-}
+ ol,
+ ul {
+ list-style: none;
+ }
-button {
- cursor: pointer;
-}
+ button {
+ cursor: pointer;
+ }
-input {
- border: none;
- padding: none;
-}
+ input {
+ border: none;
+ padding: none;
+ }
-input:focus {
- outline: none;
+ input:focus {
+ outline: none;
+ }
}
@layer utilities {
@@ -144,84 +151,3 @@ input:focus {
@apply flex flex-col justify-center items-center;
}
}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 900;
- font-display: swap;
- src: local("Pretendard Black"),
- url("/fonts/Pretendard-Black.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-Black.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 800;
- font-display: swap;
- src: local("Pretendard ExtraBold"),
- url("/fonts/Pretendard-ExtraBold.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-ExtraBold.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 700;
- font-display: swap;
- src: local("Pretendard Bold"),
- url("/fonts/Pretendard-Bold.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-Bold.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 600;
- font-display: swap;
- src: local("Pretendard SemiBold"),
- url("/fonts/Pretendard-SemiBold.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-SemiBold.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 500;
- font-display: swap;
- src: local("Pretendard Medium"),
- url("/fonts/Pretendard-Medium.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-Medium.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 400;
- font-display: swap;
- src: local("Pretendard Regular"),
- url("/fonts/Pretendard-Regular.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-Regular.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 300;
- font-display: swap;
- src: local("Pretendard Light"),
- url("/fonts/Pretendard-Light.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-Light.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 200;
- font-display: swap;
- src: local("Pretendard ExtraLight"),
- url("/fonts/Pretendard-ExtraLight.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-ExtraLight.subset.woff") format("woff");
-}
-
-@font-face {
- font-family: "Pretendard";
- font-weight: 100;
- font-display: swap;
- src: local("Pretendard Thin"),
- url("/fonts/Pretendard-Thin.subset.woff2") format("woff2"),
- url("/fonts/Pretendard-Thin.subset.woff") format("woff");
-}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index d24ab6a..e8e5bd5 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -13,18 +13,6 @@ const PX_ENTRIES_10 = createPxEntries(10);
const PX_ENTRIES_100 = createPxEntries(100);
const PX_ENTRIES_1000 = createPxEntries(1000);
-/* type AccType = Record;
-
-const range = (start: number, end: number): number[] => {
- let array = [];
- for (let i = start; i <= end; ++i) {
- array.push(i);
- }
- return array;
-};
-
-const pxToRem = (px: number, base = 16) => `${px / base}rem`; */
-
const config: Config = {
content: [
'./src/pages/**/*.{js,ts,jsx,tsx,mdx}',
@@ -37,23 +25,31 @@ const config: Config = {
// spacing values are inherited by the 'padding', 'margin', 'height', 'maxHeight', 'flex-basis', 'gap', 'inset', 'space', 'translate', 'scrollMargin', 'scrollPadding', and 'textIndent'.
spacing: PX_ENTRIES_1000,
fontWeight: {
- light: '400',
- normal: '500',
+ light: '300',
+ DEFAULT: '400',
+ medium: '500',
bold: '700',
},
borderRadius: {
- sm: '0.25rem',
- md: '0.375rem',
- lg: '0.5rem',
+ sm: '0.5rem', // 추후 수정 가능
+ md: '1.5rem', // 추후 수정 가능
+ lg: '2rem', // 추후 수정 가능
full: '9999px',
},
colors: {
transparent: 'transparent',
primary: {
- DEFAULT: 'rgb(var(--primary) / )',
- light: 'rgb(var(--primary-light) / )',
+ DEFAULT: 'var(--primary-400)',
+ 1: 'var(--primary-50)',
+ 2: 'var(--primary-100)',
+ 3: 'var(--primary-200)',
+ 4: 'var(--primary-300)',
+ 5: 'var(--primary-500)',
+ 6: 'var(--primary-600)',
+ 7: 'var(--primary-700)',
+ 8: 'var(--primary-800)',
+ 9: 'var(--primary-900)',
},
- red: 'rgb(var(--red) / )',
green: {
DEFAULT: 'rgb(var(--green) / )',
light: 'rgb(var(--green-light) / )',
@@ -71,21 +67,18 @@ const config: Config = {
light: 'rgb(var(--blue-light) / )',
hoverLight: 'rgb(var(--blue-hover-light) / )',
},
- pink: {
- DEFAULT: 'rgb(var(--pink) / )',
- light: 'rgb(var(--pink-light) / )',
- },
- black: 'rgb(var(--black) / )',
- white: 'rgb(var(--white) / )',
- WHITE: 'rgb(var(--WHITE) / )',
+ black: 'var(--black)',
+ white: 'var(--white)',
gray: {
- 1: 'rgb(var(--gray-1) / )',
- 2: 'rgb(var(--gray-2) / )',
- 3: 'rgb(var(--gray-3) / )',
- 4: 'rgb(var(--gray-4) / )',
- 5: 'rgb(var(--gray-5) / )',
- 6: 'rgb(var(--gray-6) / )',
- 7: 'rgb(var(--gray-7) / )',
+ 1: 'var(--gray-50)',
+ 2: 'var(--gray-100)',
+ 3: 'var(--gray-200)',
+ 4: 'var(--gray-300)',
+ 5: 'var(--gray-400)',
+ 6: 'var(--gray-500)',
+ 7: 'var(--gray-600)',
+ 8: 'var(--gray-700)',
+ 9: 'var(--gray-800)',
},
},
screens: {