From f5caad5204d2f8f6613549c2914b5eebb19a9fb6 Mon Sep 17 00:00:00 2001 From: lemon1335 Date: Fri, 22 Nov 2024 13:09:08 +0900 Subject: [PATCH 1/8] =?UTF-8?q?[feat]=20axios=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 100 ++++++++++++++++++++++++++++++++++++++++++++++ package.json | 9 +++-- 2 files changed, 105 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index baa2b6655..747086d3c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "fe-weekly-mission", "version": "0.1.0", "dependencies": { + "axios": "^1.7.7", "next": "13.5.6", "react": "^18", "react-dom": "^18" @@ -705,6 +706,12 @@ "has-symbols": "^1.0.3" } }, + "node_modules/asynckit": { + "version": "0.4.0", + "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz", + "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q==", + "license": "MIT" + }, "node_modules/available-typed-arrays": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz", @@ -726,6 +733,17 @@ "node": ">=4" } }, + "node_modules/axios": { + "version": "1.7.7", + "resolved": "https://registry.npmjs.org/axios/-/axios-1.7.7.tgz", + "integrity": "sha512-S4kL7XrjgBmvdGut0sN3yJxqYzrDOnivkBiN0OFs6hLiUam3UPvswUo0kqGyhqUZGEOytHyumEdXsAkgCOUf3Q==", + "license": "MIT", + "dependencies": { + "follow-redirects": "^1.15.6", + "form-data": "^4.0.0", + "proxy-from-env": "^1.1.0" + } + }, "node_modules/axobject-query": { "version": "3.2.1", "resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-3.2.1.tgz", @@ -855,6 +873,18 @@ "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==", "dev": true }, + "node_modules/combined-stream": { + "version": "1.0.8", + "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz", + "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==", + "license": "MIT", + "dependencies": { + "delayed-stream": "~1.0.0" + }, + "engines": { + "node": ">= 0.8" + } + }, "node_modules/concat-map": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", @@ -941,6 +971,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/delayed-stream": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz", + "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==", + "license": "MIT", + "engines": { + "node": ">=0.4.0" + } + }, "node_modules/dequal": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz", @@ -1645,6 +1684,26 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.9", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.9.tgz", + "integrity": "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "license": "MIT", + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, "node_modules/for-each": { "version": "0.3.3", "resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.3.tgz", @@ -1654,6 +1713,20 @@ "is-callable": "^1.1.3" } }, + "node_modules/form-data": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.1.tgz", + "integrity": "sha512-tzN8e4TX8+kkxGPK8D5u0FNmjPUjw3lwC9lSLxxoB/+GtsJG91CO8bSWy73APlgAZzZbXEYZJuxjkHH2w+Ezhw==", + "license": "MIT", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -2501,6 +2574,27 @@ "node": ">=8.6" } }, + "node_modules/mime-db": { + "version": "1.52.0", + "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz", + "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==", + "license": "MIT", + "engines": { + "node": ">= 0.6" + } + }, + "node_modules/mime-types": { + "version": "2.1.35", + "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz", + "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==", + "license": "MIT", + "dependencies": { + "mime-db": "1.52.0" + }, + "engines": { + "node": ">= 0.6" + } + }, "node_modules/minimatch": { "version": "3.1.2", "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz", @@ -2888,6 +2982,12 @@ "react-is": "^16.13.1" } }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==", + "license": "MIT" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", diff --git a/package.json b/package.json index 1ce24924f..0c5c593c7 100644 --- a/package.json +++ b/package.json @@ -9,16 +9,17 @@ "lint": "next lint" }, "dependencies": { + "axios": "^1.7.7", + "next": "13.5.6", "react": "^18", - "react-dom": "^18", - "next": "13.5.6" + "react-dom": "^18" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", "eslint": "^8", - "eslint-config-next": "13.5.6" + "eslint-config-next": "13.5.6", + "typescript": "^5" } } From d6157bbf3631d54f3bf904786a68cd4f6d86ed4e Mon Sep 17 00:00:00 2001 From: lemon1335 Date: Fri, 22 Nov 2024 14:05:41 +0900 Subject: [PATCH 2/8] =?UTF-8?q?[feat]=20header=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/Header.jsx | 34 ++++++++++++ pages/_app.jsx | 13 +++++ pages/_app.tsx | 6 --- pages/boards.jsx | 5 ++ pages/index.tsx | 111 +-------------------------------------- public/favicon.ico | Bin 25931 -> 0 bytes public/ic_login.svg | 24 +++++++++ public/ic_logo.svg | 14 +++++ public/next.svg | 1 - public/vercel.svg | 1 - styles/Header.css | 56 ++++++++++++++++++++ styles/globals.css | 118 ++++++++++-------------------------------- tsconfig.json | 2 +- 13 files changed, 175 insertions(+), 210 deletions(-) create mode 100644 components/Header.jsx create mode 100644 pages/_app.jsx delete mode 100644 pages/_app.tsx create mode 100644 pages/boards.jsx delete mode 100644 public/favicon.ico create mode 100644 public/ic_login.svg create mode 100644 public/ic_logo.svg delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg create mode 100644 styles/Header.css diff --git a/components/Header.jsx b/components/Header.jsx new file mode 100644 index 000000000..c0114c20d --- /dev/null +++ b/components/Header.jsx @@ -0,0 +1,34 @@ +import Image from 'next/image'; +import logo from '../public/ic_logo.svg'; +import login from '../public/ic_login.svg'; +import Link from 'next/link'; + +function Header() { + return ( +
+ + 캐릭터 +
+ ); +} + +export default Header; diff --git a/pages/_app.jsx b/pages/_app.jsx new file mode 100644 index 000000000..205597133 --- /dev/null +++ b/pages/_app.jsx @@ -0,0 +1,13 @@ +// import type { AppProps } from 'next/app' +import Header from '../components/Header'; +import '../styles/Header.css'; +import '@/styles/globals.css'; + +export default function App({ Component, pageProps }) { + return ( + <> +
+ + + ); +} diff --git a/pages/_app.tsx b/pages/_app.tsx deleted file mode 100644 index 021681f4d..000000000 --- a/pages/_app.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' - -export default function App({ Component, pageProps }: AppProps) { - return -} diff --git a/pages/boards.jsx b/pages/boards.jsx new file mode 100644 index 000000000..3491f11c7 --- /dev/null +++ b/pages/boards.jsx @@ -0,0 +1,5 @@ +export default function Boards() { + return ( + <> +
Boards 페이지
) +} diff --git a/pages/index.tsx b/pages/index.tsx index 02c4dee04..7d39f505e 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,114 +1,7 @@ -import Head from 'next/head' -import Image from 'next/image' -import { Inter } from 'next/font/google' -import styles from '@/styles/Home.module.css' - -const inter = Inter({ subsets: ['latin'] }) - export default function Home() { return ( <> - - Create Next App - - - - -
-
-

- Get started by editing  - pages/index.tsx -

- -
- -
- Next.js Logo -
- - -
+

안녕 판다마켓!

- ) + ); } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 718d6fea4835ec2d246af9800eddb7ffb276240c..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 25931 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 LrJugUA?W`A8`#=m diff --git a/public/ic_login.svg b/public/ic_login.svg new file mode 100644 index 000000000..aa190f066 --- /dev/null +++ b/public/ic_login.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/ic_logo.svg b/public/ic_logo.svg new file mode 100644 index 000000000..bc7118d5b --- /dev/null +++ b/public/ic_logo.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28c5..000000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f842227..000000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/styles/Header.css b/styles/Header.css new file mode 100644 index 000000000..0562b6eb1 --- /dev/null +++ b/styles/Header.css @@ -0,0 +1,56 @@ +.nav-bar, +.nav-content, +.logo, +.tab, +.title { + display: flex; +} + +.nav-bar, +.logo, +.tab, +.title { + align-items: center; +} + +.nav-bar { + position: sticky; + z-index: 1; + top: 0; + padding: 9px 0; + background-color: white; + height: 70px; + border-bottom: 1px solid var(--light-gray); + justify-content: space-around; +} + +.title, +.tab-list { + font-family: "ROKAF Sans", sans-serif; + text-align: center; +} + +.title { + justify-content: center; + color: var(--primary); + font-weight: 700; + font-size: 26px; + line-height: 35px; +} + +li { + list-style: none; +} +.tab-list { + font-weight: 600; + font-size: 18px; + line-height: 26px; + padding: 21px 15px; + gap: 10px; +} +li > a { + color: var(--grayish-blue); +} +a { + text-decoration: none; +} \ No newline at end of file diff --git a/styles/globals.css b/styles/globals.css index d4f491e15..bf0ed6e87 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,107 +1,41 @@ -:root { - --max-width: 1100px; - --border-radius: 12px; - --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', - 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', - 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; - - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; - - --primary-glow: conic-gradient( - from 180deg at 50% 50%, - #16abff33 0deg, - #0885ff33 55deg, - #54d6ff33 120deg, - #0071ff33 160deg, - transparent 360deg - ); - --secondary-glow: radial-gradient( - rgba(255, 255, 255, 1), - rgba(255, 255, 255, 0) - ); - - --tile-start-rgb: 239, 245, 249; - --tile-end-rgb: 228, 232, 233; - --tile-border: conic-gradient( - #00000080, - #00000040, - #00000030, - #00000020, - #00000010, - #00000010, - #00000080 - ); - - --callout-rgb: 238, 240, 241; - --callout-border-rgb: 172, 175, 176; - --card-rgb: 180, 185, 188; - --card-border-rgb: 131, 134, 135; -} - -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; - - --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); - --secondary-glow: linear-gradient( - to bottom right, - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0), - rgba(1, 65, 255, 0.3) - ); - - --tile-start-rgb: 2, 13, 46; - --tile-end-rgb: 2, 5, 19; - --tile-border: conic-gradient( - #ffffff80, - #ffffff40, - #ffffff30, - #ffffff20, - #ffffff10, - #ffffff10, - #ffffff80 - ); - - --callout-rgb: 20, 20, 20; - --callout-border-rgb: 108, 108, 108; - --card-rgb: 100, 100, 100; - --card-border-rgb: 200, 200, 200; - } -} +@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); * { box-sizing: border-box; - padding: 0; margin: 0; + padding: 0; } html, body { - max-width: 100vw; - overflow-x: hidden; + font-family: 'Pretendard'; } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); +:root { + --primary: #3692ff; + --cyan-blue: #cfe5ff; + --white: #ffffff; + --gray-400: #9ca3af; + --light-gray: #dfdfdf; + --gray-200: #e5e7eb; + --gray-100: #f3f4f6; + --gray-50: #f9fafb; + --gray-10: #fcfcfc; + --black-900: #111827; + --approx-midnight: #1f2937; + --black-700: #374151; + --grayish-blue: #4b5563; } -a { - color: inherit; - text-decoration: none; +button { + border: 0; + cursor: pointer; } -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } +button:disabled { + cursor: not-allow; } + +img { + object-fit: cover; +} \ No newline at end of file diff --git a/tsconfig.json b/tsconfig.json index 670224f3e..8584861af 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,6 @@ "@/*": ["./*"] } }, - "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "pages/_app.jsx"], "exclude": ["node_modules"] } From 609c9ac044b7f903014083b696b0ed2a5d6b1ee6 Mon Sep 17 00:00:00 2001 From: lemon1335 Date: Fri, 22 Nov 2024 17:14:59 +0900 Subject: [PATCH 3/8] =?UTF-8?q?[feat]=20=EB=B2=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EA=B2=8C=EC=8B=9C=EA=B8=80=20ui=20=EA=B5=AC=ED=98=84=201?= =?UTF-8?q?=EC=B0=A8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BestBoard.jsx | 39 ++++++++++++ components/EntireBoard.jsx | 53 +++++++++++++++++ pages/_app.jsx | 3 +- pages/boards.jsx | 10 +++- public/ic_heart.svg | 3 + public/ic_medal.svg | 4 ++ public/ic_profile.svg | 24 ++++++++ public/ic_search.svg | 3 + public/img_example.svg | 9 +++ styles/Header.css | 23 ++++--- styles/bestBoards.css | 119 +++++++++++++++++++++++++++++++++++++ styles/globals.css | 21 ++++++- 12 files changed, 294 insertions(+), 17 deletions(-) create mode 100644 components/BestBoard.jsx create mode 100644 components/EntireBoard.jsx create mode 100644 public/ic_heart.svg create mode 100644 public/ic_medal.svg create mode 100644 public/ic_profile.svg create mode 100644 public/ic_search.svg create mode 100644 public/img_example.svg create mode 100644 styles/bestBoards.css diff --git a/components/BestBoard.jsx b/components/BestBoard.jsx new file mode 100644 index 000000000..95e78e203 --- /dev/null +++ b/components/BestBoard.jsx @@ -0,0 +1,39 @@ +import Image from 'next/image'; +import medal from '@/public/ic_medal.svg'; +import example from '@/public/img_example.svg'; +import heart from '@/public/ic_heart.svg'; + +export default function BestBoard() { + return ( +
+
베스트 게시글
+
+
+
+ 메달 +
Best
+
+
+
+ 맥북 16기가 1테라 정도 + 사양이면 얼마에 팔아야 하나요? +
+
+ 맥북 +
+
+
+
+
총명한 판다
+
+ 좋아요 +
9999+
+
+
+
2024. 04. 16
+
+
+
+
+ ); +} diff --git a/components/EntireBoard.jsx b/components/EntireBoard.jsx new file mode 100644 index 000000000..482178573 --- /dev/null +++ b/components/EntireBoard.jsx @@ -0,0 +1,53 @@ +import Image from 'next/image'; +import search from '@/public/ic_search.svg'; +import example from '@/public/img_example.svg'; +import heart from '@/public/ic_heart.svg'; +import profile from '@/public/ic_profile.svg'; + +export default function EntierBoard() { + return ( +
+
+
게시글
+ +
+
+
+
+ 검색 + +
+ +
+
+
+
+
맥북 16인치 16기가 1테라정도 사양이면 얼마에 팔아야 하나요?
+
+ 맥북 +
+
+
+
+ 프로필 +
+
총명한 판다
+
2024. 04. 16
+
+
+ 좋아요 +
9999+
+
+
+
+
+
+
+
+ ); +} diff --git a/pages/_app.jsx b/pages/_app.jsx index 205597133..7724642b5 100644 --- a/pages/_app.jsx +++ b/pages/_app.jsx @@ -1,7 +1,8 @@ // import type { AppProps } from 'next/app' import Header from '../components/Header'; -import '../styles/Header.css'; import '@/styles/globals.css'; +import '@/styles/header.css'; +import '@/styles/bestBoards.css'; export default function App({ Component, pageProps }) { return ( diff --git a/pages/boards.jsx b/pages/boards.jsx index 3491f11c7..daeb01412 100644 --- a/pages/boards.jsx +++ b/pages/boards.jsx @@ -1,5 +1,11 @@ +import BestBoard from '../components/BestBoard'; +import EntierBoard from '../components/EntireBoard'; + export default function Boards() { return ( - <> -
Boards 페이지
) +
+ + +
+ ); } diff --git a/public/ic_heart.svg b/public/ic_heart.svg new file mode 100644 index 000000000..3d50a4386 --- /dev/null +++ b/public/ic_heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/ic_medal.svg b/public/ic_medal.svg new file mode 100644 index 000000000..d650c4019 --- /dev/null +++ b/public/ic_medal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/ic_profile.svg b/public/ic_profile.svg new file mode 100644 index 000000000..b88ccee01 --- /dev/null +++ b/public/ic_profile.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/ic_search.svg b/public/ic_search.svg new file mode 100644 index 000000000..52241e6d8 --- /dev/null +++ b/public/ic_search.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/img_example.svg b/public/img_example.svg new file mode 100644 index 000000000..f61975572 --- /dev/null +++ b/public/img_example.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/styles/Header.css b/styles/Header.css index 0562b6eb1..6b5ce45d6 100644 --- a/styles/Header.css +++ b/styles/Header.css @@ -17,36 +17,35 @@ position: sticky; z-index: 1; top: 0; - padding: 9px 0; + padding: 0.9rem 0; background-color: white; - height: 70px; - border-bottom: 1px solid var(--light-gray); + height: 7rem; + border-bottom: 0.1rem solid var(--light-gray); justify-content: space-around; } .title, .tab-list { - font-family: "ROKAF Sans", sans-serif; text-align: center; } .title { justify-content: center; color: var(--primary); - font-weight: 700; - font-size: 26px; - line-height: 35px; + font-weight: var(--bold); + font-size: 2.6rem; + line-height: 3.5rem; } li { list-style: none; } .tab-list { - font-weight: 600; - font-size: 18px; - line-height: 26px; - padding: 21px 15px; - gap: 10px; + font-weight: var(--medium); + font-size: 1.8rem; + line-height: 2.6rem; + padding: 2.1rem 1.5rem; + gap: 1rem; } li > a { color: var(--grayish-blue); diff --git a/styles/bestBoards.css b/styles/bestBoards.css new file mode 100644 index 000000000..301247289 --- /dev/null +++ b/styles/bestBoards.css @@ -0,0 +1,119 @@ +.boards-page { + display: flex; + flex-direction: column; + width: 100%; + gap: 4rem; + margin-top: 2.4rem; +} +.best-board-container { + display: flex; + flex-direction: column; + width: 100%; + gap: 2.4rem; +} + +.best-board-title { + font-weight: var(--bold); + font-size: 2rem; + line-height: 2.3rem; +} + +.best-board-card { + display: grid; + width: 100%; + grid-template-columns: repeat(3, 1fr); + column-gap: 2.4rem; +} + +.card-content { + display: flex; + flex-direction: column; + width: 38.4rem; + height: 16.9rem; + padding: 0 2.4rem 1.6rem 2.4rem; + background-color: var(--gray-50); + gap: 1rem; +} + +.card-head { + display: flex; + justify-content: center; + align-items: center; + width: 10.2rem; + padding: 0.2rem 2.4rem; + gap: 0.5rem; + background-color: var(--primary); + border-bottom-left-radius: 1.6rem; + border-bottom-right-radius: 1.6rem; +} + +.card-head-title { + font-weight: var(--medium); + font-size: 1.6rem; + line-height: 2.6rem; + color: var(--white); +} + +.card-body { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.card-body-content { + width: auto; + font-weight: var(--medium); + font-size: 2rem; + line-height: 3.2rem; + color: var(--approx-midnight); +} + +.card-body-content-image { + display: flex; + justify-content: center; + align-items: center; + padding: 1.2rem; + background-color: var(--white); + border-radius: 0.6rem; + border: 0.1rem solid var(--gray-200); +} + +.card-bottom { + display: flex; + justify-content: space-between; +} + +.card-bottom-ahead { + display: flex; + width: 100%; + gap: 0.8rem; +} + +.board-user-id, +.like-count, +.upload-date { + font-weight: var(--regular); + font-size: 1.4rem; + line-height: 2.4rem; +} + +.board-user-id { + color: var(--grayish-blue); +} + +.like-count { + color: var(--gray-500); +} + +.upload-date { + color: var(--gray-400); +} + +.like-it { + display: flex; + width: 100%; + gap: 0.4rem; +} + +/*module로 바꾸기*/ diff --git a/styles/globals.css b/styles/globals.css index bf0ed6e87..d0175a24f 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -12,9 +12,12 @@ body { } :root { + /*color palette*/ --primary: #3692ff; --cyan-blue: #cfe5ff; --white: #ffffff; + --grayish-blue: #4b5563; + --gray-500: #6b7280; --gray-400: #9ca3af; --light-gray: #dfdfdf; --gray-200: #e5e7eb; @@ -24,7 +27,21 @@ body { --black-900: #111827; --approx-midnight: #1f2937; --black-700: #374151; - --grayish-blue: #4b5563; + + /*font-weight*/ + --regular: 400; + --medium: 600; + --bold: 700; +} + +html { + /* 브라우저 폰트 사이즈 16px * 0.625 = 10px */ + font-size: 62.5%; +} + +body { + /* 1rem = html의 폰트 사이즈, 10px = 1rem */ + font-size: 1rem; } button { @@ -38,4 +55,4 @@ button:disabled { img { object-fit: cover; -} \ No newline at end of file +} From 320296f0ef9707b996d3fd3d5dc06e3406842307 Mon Sep 17 00:00:00 2001 From: lemon1335 Date: Fri, 22 Nov 2024 18:01:29 +0900 Subject: [PATCH 4/8] =?UTF-8?q?[feat]=20=EA=B2=8C=EC=8B=9C=EA=B8=80=20?= =?UTF-8?q?=EB=A6=AC=EC=8A=A4=ED=8A=B8=20ui=201=EC=B0=A8=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84=20=EC=99=84=EB=A3=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/EntireBoard.jsx | 12 +-- pages/_app.jsx | 3 +- styles/{bestBoards.css => bestBoard.css} | 0 styles/entireBoard.css | 100 +++++++++++++++++++++++ 4 files changed, 108 insertions(+), 7 deletions(-) rename styles/{bestBoards.css => bestBoard.css} (100%) create mode 100644 styles/entireBoard.css diff --git a/components/EntireBoard.jsx b/components/EntireBoard.jsx index 482178573..68034ddcf 100644 --- a/components/EntireBoard.jsx +++ b/components/EntireBoard.jsx @@ -15,11 +15,11 @@ export default function EntierBoard() {
-
+
검색 - +
- @@ -34,14 +34,14 @@ export default function EntierBoard() {
+
프로필 -
총명한 판다
2024. 04. 16
-
+
좋아요 -
9999+
+
9999+
diff --git a/pages/_app.jsx b/pages/_app.jsx index 7724642b5..faeda827d 100644 --- a/pages/_app.jsx +++ b/pages/_app.jsx @@ -2,7 +2,8 @@ import Header from '../components/Header'; import '@/styles/globals.css'; import '@/styles/header.css'; -import '@/styles/bestBoards.css'; +import '@/styles/bestBoard.css'; +import '@/styles/entireBoard.css'; export default function App({ Component, pageProps }) { return ( diff --git a/styles/bestBoards.css b/styles/bestBoard.css similarity index 100% rename from styles/bestBoards.css rename to styles/bestBoard.css diff --git a/styles/entireBoard.css b/styles/entireBoard.css new file mode 100644 index 000000000..89f4a2dcd --- /dev/null +++ b/styles/entireBoard.css @@ -0,0 +1,100 @@ +.entire-board-container, +.entire-board-body { + display: flex; + flex-direction: column; + width: 100%; + gap: 2.4rem; +} + +.entire-board-header { + display: flex; + justify-content: space-between; + width: 100%; +} + +.entire-board-title { + font-weight: var(--bold); + font-size: 2rem; + line-height: 3.2rem; + color: var(--approx-midnight); +} + +.small-button { + height: 4.2rem; + width: auto; + padding: 1.2rem 2.3rem; + gap: 1rem; + border-radius: 0.8rem; + background-color: var(--primary); + font-weight: var(--medium); + font-size: 1.6rem; + line-height: 1.9rem; + color: var(--white); +} + +.user-select-section { + display: flex; + justify-content: space-between; + align-items: center; + width: 100%; +} + +.search-bar { + display: flex; +} + +.search-bar-input { + width: 100%; + height: 4.2rem; + border: none; + background-color: var(--gray-100); + border-radius: 1.2rem; + padding: 0.9rem 2rem 0.9rem 1.6rem; + gap: 1rem; +} + +.entire-board-list { + display: grid; + grid-template-rows: repeat(4, 1fr); + row-gap: 2.4rem; +} + +.board-list-content { + background-color: var(--gray-10); + padding-bottom: 2.4rem; + border-bottom: 0.1rem solid var(--gray-200); +} + +.list-main-content { + display: flex; + justify-content: space-between; + width: 100%; + gap: 0.8rem; +} + +.list-main-question { + font-weight: var(--medium); + font-size: 2rem; + line-height: 3.2rem; + color: var(--approx-midnight); +} + +.list-info { + margin: 1.6rem; +} + +.list-info-ahead { + display: flex; + justify-content: space-between; + width: 100%; +} + +.board-user-info { + display: flex; + gap: 0.8rem; +} + +.liked-it { + display: flex; + align-items: center; +} \ No newline at end of file From 3dfcab46e08ca0e3ad5a7b85532f5df0046e3c46 Mon Sep 17 00:00:00 2001 From: lemon1335 Date: Sat, 23 Nov 2024 12:39:29 +0900 Subject: [PATCH 5/8] =?UTF-8?q?[feat]=20api=20=EC=97=B0=EB=8F=99=20?= =?UTF-8?q?=EB=B0=8F=20module.css=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/BestBoard.jsx | 58 ++++---- components/EntireBoard.jsx | 70 +++++----- components/Header.jsx | 24 ++-- next.config.js | 8 +- pages/_app.jsx | 7 +- pages/_document.tsx | 2 +- pages/api/api.js | 4 + pages/api/hello.ts | 13 -- pages/boards.jsx | 126 +++++++++++++++++- .../{bestBoard.css => BestBoard.module.css} | 65 +++------ styles/{entireBoard.css => Boards.module.css} | 91 ++++++------- styles/EntireBoard.module.css | 88 ++++++++++++ styles/{Header.css => Header.module.css} | 27 ++-- tsconfig.json | 2 +- 14 files changed, 375 insertions(+), 210 deletions(-) create mode 100644 pages/api/api.js delete mode 100644 pages/api/hello.ts rename styles/{bestBoard.css => BestBoard.module.css} (66%) rename styles/{entireBoard.css => Boards.module.css} (56%) create mode 100644 styles/EntireBoard.module.css rename styles/{Header.css => Header.module.css} (83%) diff --git a/components/BestBoard.jsx b/components/BestBoard.jsx index 95e78e203..fdc8b2f36 100644 --- a/components/BestBoard.jsx +++ b/components/BestBoard.jsx @@ -1,38 +1,40 @@ import Image from 'next/image'; import medal from '@/public/ic_medal.svg'; -import example from '@/public/img_example.svg'; import heart from '@/public/ic_heart.svg'; +import styles from '@/styles/BestBoard.module.css'; + +export default function BestBoard({ data = {} }) { + const { title, image, updatedAt, likeCount, writer } = data; + + const date = new Date(updatedAt); + + const formattedDate = date.toLocaleDateString({ + year: 'numeric', + month: 'long', + day: 'numeric', + }); -export default function BestBoard() { return ( -
-
베스트 게시글
-
-
-
- 메달 -
Best
-
-
-
- 맥북 16기가 1테라 정도 - 사양이면 얼마에 팔아야 하나요? -
-
- 맥북 -
-
-
-
-
총명한 판다
-
- 좋아요 -
9999+
-
-
-
2024. 04. 16
+
+
+ 메달 +
Best
+
+
+
{title}
+
+ 게시글 사진 +
+
+
+
+
{writer.nickname}
+
+ 좋아요 +
{likeCount}
+
{formattedDate}
); diff --git a/components/EntireBoard.jsx b/components/EntireBoard.jsx index 68034ddcf..3e63ff8dc 100644 --- a/components/EntireBoard.jsx +++ b/components/EntireBoard.jsx @@ -1,51 +1,41 @@ import Image from 'next/image'; -import search from '@/public/ic_search.svg'; -import example from '@/public/img_example.svg'; import heart from '@/public/ic_heart.svg'; import profile from '@/public/ic_profile.svg'; +import styles from '@/styles/EntireBoard.module.css'; + +export default function EntireBoard({ data }) { + const { title, image, updatedAt, likeCount, writer } = data; + const imageUrl = image || '/default-image.jpg'; + + const date = new Date(updatedAt); + + const formattedDate = date.toLocaleDateString({ + year: 'numeric', + month: 'long', + day: 'numeric', + }); -export default function EntierBoard() { return ( -
-
-
게시글
- -
-
-
-
- 검색 - -
- +
+
+
{title}
+
+ 리스트 사진
-
-
-
-
맥북 16인치 16기가 1테라정도 사양이면 얼마에 팔아야 하나요?
-
- 맥북 -
-
-
-
-
- 프로필 -
총명한 판다
-
2024. 04. 16
-
-
- 좋아요 -
9999+
-
-
+
+
+
+
+ 프로필 +
+
{writer.nickname}
+
{formattedDate}
+
+ 좋아요 +
{likeCount}
+
diff --git a/components/Header.jsx b/components/Header.jsx index c0114c20d..b8628fe66 100644 --- a/components/Header.jsx +++ b/components/Header.jsx @@ -1,26 +1,28 @@ +// Header.jsx import Image from 'next/image'; -import logo from '../public/ic_logo.svg'; -import login from '../public/ic_login.svg'; import Link from 'next/link'; +import logo from '@/public/ic_logo.svg'; +import login from '@/public/ic_login.svg'; +import styles from '@/styles/Header.module.css' function Header() { return ( -
-