From 23be15eda86a2023056c7bb2bd80d3d2f1d36252 Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 01:36:37 +0900 Subject: [PATCH 01/11] feat: Init --- pages/_app.tsx | 13 ++- pages/_document.tsx | 6 +- pages/index.tsx | 111 +------------------- public/next.svg | 1 - public/vercel.svg | 1 - styles/Home.module.css | 229 ----------------------------------------- styles/globals.css | 107 ------------------- 7 files changed, 15 insertions(+), 453 deletions(-) delete mode 100644 public/next.svg delete mode 100644 public/vercel.svg delete mode 100644 styles/Home.module.css diff --git a/pages/_app.tsx b/pages/_app.tsx index 021681f4d..f2eb2548f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,13 @@ -import '@/styles/globals.css' -import type { AppProps } from 'next/app' +import '@/styles/globals.css'; +import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { - return + return ( + <> +
header
+
+ +
+ + ); } diff --git a/pages/_document.tsx b/pages/_document.tsx index 54e8bf3e2..713078f7d 100644 --- a/pages/_document.tsx +++ b/pages/_document.tsx @@ -1,13 +1,13 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from 'next/document'; export default function Document() { return ( - +
- ) + ); } diff --git a/pages/index.tsx b/pages/index.tsx index 02c4dee04..e53f8cde3 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 -
- - -
+

index

- ) + ); } 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/Home.module.css b/styles/Home.module.css deleted file mode 100644 index 6676d2c66..000000000 --- a/styles/Home.module.css +++ /dev/null @@ -1,229 +0,0 @@ -.main { - display: flex; - flex-direction: column; - justify-content: space-between; - align-items: center; - padding: 6rem; - min-height: 100vh; -} - -.description { - display: inherit; - justify-content: inherit; - align-items: inherit; - font-size: 0.85rem; - max-width: var(--max-width); - width: 100%; - z-index: 2; - font-family: var(--font-mono); -} - -.description a { - display: flex; - justify-content: center; - align-items: center; - gap: 0.5rem; -} - -.description p { - position: relative; - margin: 0; - padding: 1rem; - background-color: rgba(var(--callout-rgb), 0.5); - border: 1px solid rgba(var(--callout-border-rgb), 0.3); - border-radius: var(--border-radius); -} - -.code { - font-weight: 700; - font-family: var(--font-mono); -} - -.grid { - display: grid; - grid-template-columns: repeat(4, minmax(25%, auto)); - max-width: 100%; - width: var(--max-width); -} - -.card { - padding: 1rem 1.2rem; - border-radius: var(--border-radius); - background: rgba(var(--card-rgb), 0); - border: 1px solid rgba(var(--card-border-rgb), 0); - transition: background 200ms, border 200ms; -} - -.card span { - display: inline-block; - transition: transform 200ms; -} - -.card h2 { - font-weight: 600; - margin-bottom: 0.7rem; -} - -.card p { - margin: 0; - opacity: 0.6; - font-size: 0.9rem; - line-height: 1.5; - max-width: 30ch; -} - -.center { - display: flex; - justify-content: center; - align-items: center; - position: relative; - padding: 4rem 0; -} - -.center::before { - background: var(--secondary-glow); - border-radius: 50%; - width: 480px; - height: 360px; - margin-left: -400px; -} - -.center::after { - background: var(--primary-glow); - width: 240px; - height: 180px; - z-index: -1; -} - -.center::before, -.center::after { - content: ''; - left: 50%; - position: absolute; - filter: blur(45px); - transform: translateZ(0); -} - -.logo { - position: relative; -} -/* Enable hover only on non-touch devices */ -@media (hover: hover) and (pointer: fine) { - .card:hover { - background: rgba(var(--card-rgb), 0.1); - border: 1px solid rgba(var(--card-border-rgb), 0.15); - } - - .card:hover span { - transform: translateX(4px); - } -} - -@media (prefers-reduced-motion) { - .card:hover span { - transform: none; - } -} - -/* Mobile */ -@media (max-width: 700px) { - .content { - padding: 4rem; - } - - .grid { - grid-template-columns: 1fr; - margin-bottom: 120px; - max-width: 320px; - text-align: center; - } - - .card { - padding: 1rem 2.5rem; - } - - .card h2 { - margin-bottom: 0.5rem; - } - - .center { - padding: 8rem 0 6rem; - } - - .center::before { - transform: none; - height: 300px; - } - - .description { - font-size: 0.8rem; - } - - .description a { - padding: 1rem; - } - - .description p, - .description div { - display: flex; - justify-content: center; - position: fixed; - width: 100%; - } - - .description p { - align-items: center; - inset: 0 0 auto; - padding: 2rem 1rem 1.4rem; - border-radius: 0; - border: none; - border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); - background: linear-gradient( - to bottom, - rgba(var(--background-start-rgb), 1), - rgba(var(--callout-rgb), 0.5) - ); - background-clip: padding-box; - backdrop-filter: blur(24px); - } - - .description div { - align-items: flex-end; - pointer-events: none; - inset: auto 0 0; - padding: 2rem; - height: 200px; - background: linear-gradient( - to bottom, - transparent 0%, - rgb(var(--background-end-rgb)) 40% - ); - z-index: 1; - } -} - -/* Tablet and Smaller Desktop */ -@media (min-width: 701px) and (max-width: 1120px) { - .grid { - grid-template-columns: repeat(2, 50%); - } -} - -@media (prefers-color-scheme: dark) { - .vercelLogo { - filter: invert(1); - } - - .logo { - filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); - } -} - -@keyframes rotate { - from { - transform: rotate(360deg); - } - to { - transform: rotate(0deg); - } -} diff --git a/styles/globals.css b/styles/globals.css index d4f491e15..e69de29bb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -1,107 +0,0 @@ -: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; - } -} - -* { - box-sizing: border-box; - padding: 0; - margin: 0; -} - -html, -body { - max-width: 100vw; - overflow-x: hidden; -} - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - -a { - color: inherit; - text-decoration: none; -} - -@media (prefers-color-scheme: dark) { - html { - color-scheme: dark; - } -} From 992081cff4c6af3fde12c61f980695006e4751d4 Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 01:40:33 +0900 Subject: [PATCH 02/11] feat: Add global, reset css --- styles/globals.css | 50 +++++++++++++++++++++++++++++++++++++ styles/reset.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 112 insertions(+) create mode 100644 styles/reset.css diff --git a/styles/globals.css b/styles/globals.css index e69de29bb..e16587f59 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -0,0 +1,50 @@ +@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css'); + +:root { + --Primary-300: #1251aa; + --Primary-200: #1967d6; + --Primary-100: #3692ff; + --main-bg-color: #cfe5ff; + --Secondary-900: #111827; + --Secondary-800: #1f2937; + --Secondary-700: #374151; + --Secondary-600: #4b5563; + --Secondary-500: #6b7280; + --Secondary-400: #9ca3af; + --Secondary-200: #e5e7eb; + --Secondary-100: #f3f4f6; + --Secondary-50: #f9fafb; + --error-red: #f74747; + --size-max-width: 1140px; +} + +* { + font-family: 'Pretendard', sans-serif; +} + +header { + background-color: #fff; +} + +footer { + background-color: var(--Secondary-900); +} + +.max-container { + max-width: var(--size-max-width); + margin: auto; +} + +/* tablet */ +@media screen and (max-width: 1199px) { + .max-container { + max-width: 760px; + } +} + +/* mobile */ +@media screen and (max-width: 767px) { + .max-container { + max-width: 360px; + } +} diff --git a/styles/reset.css b/styles/reset.css new file mode 100644 index 000000000..8c916afbd --- /dev/null +++ b/styles/reset.css @@ -0,0 +1,62 @@ +* { + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + color: inherit; + vertical-align: baseline; +} + +header { + position: fixed; + top: 0; + width: 100%; +} + +body { + margin: 0; + padding: 0; + height: 100vh; + width: 100%; +} + +a { + text-decoration: none; +} + +ul { + list-style: none; + padding: 0; +} + +button { + border: none; + outline: none; + cursor: pointer; +} + +footer { + width: 100%; +} + +input { + outline: none; + border: none; +} + +input:focus { + outline: none; +} + +input[type='submit'] { + cursor: pointer; + outline: none; +} + +@media screen and (max-width: 767px) { + body { + height: 100%; + } +} From a6ee05112c7bc067aead1f5083e1d92db701146e Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 02:22:52 +0900 Subject: [PATCH 03/11] feat: Add Header --- pages/_app.tsx | 11 ++++--- pages/boards/index.tsx | 3 ++ public/images/avatar.svg | 24 ++++++++++++++++ public/images/logo_lg.png | Bin 0 -> 2794 bytes src/components/GlobalLayout.module.css | 3 ++ src/components/GlobalLayout.tsx | 12 ++++++++ src/components/Header.module.css | 38 +++++++++++++++++++++++++ src/components/Header.tsx | 24 ++++++++++++++++ styles/reset.css | 6 ---- 9 files changed, 109 insertions(+), 12 deletions(-) create mode 100644 pages/boards/index.tsx create mode 100644 public/images/avatar.svg create mode 100644 public/images/logo_lg.png create mode 100644 src/components/GlobalLayout.module.css create mode 100644 src/components/GlobalLayout.tsx create mode 100644 src/components/Header.module.css create mode 100644 src/components/Header.tsx diff --git a/pages/_app.tsx b/pages/_app.tsx index f2eb2548f..ad0f0594b 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,13 +1,12 @@ +import GlobalLayout from '@/src/components/GlobalLayout'; +import '@/styles/reset.css'; import '@/styles/globals.css'; import type { AppProps } from 'next/app'; export default function App({ Component, pageProps }: AppProps) { return ( - <> -
header
-
- -
- + + + ); } diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx new file mode 100644 index 000000000..995ecddd5 --- /dev/null +++ b/pages/boards/index.tsx @@ -0,0 +1,3 @@ +export default function BoardsIndex() { + return
boardIndex
; +} diff --git a/public/images/avatar.svg b/public/images/avatar.svg new file mode 100644 index 000000000..3136c4fab --- /dev/null +++ b/public/images/avatar.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/images/logo_lg.png b/public/images/logo_lg.png new file mode 100644 index 0000000000000000000000000000000000000000..1fa247edad67b125d4f1d067b582763884518377 GIT binary patch literal 2794 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 literal 0 HcmV?d00001 diff --git a/src/components/GlobalLayout.module.css b/src/components/GlobalLayout.module.css new file mode 100644 index 000000000..6834545af --- /dev/null +++ b/src/components/GlobalLayout.module.css @@ -0,0 +1,3 @@ +.mainContainer { + margin-top: 75px; +} diff --git a/src/components/GlobalLayout.tsx b/src/components/GlobalLayout.tsx new file mode 100644 index 000000000..1bc12a7b6 --- /dev/null +++ b/src/components/GlobalLayout.tsx @@ -0,0 +1,12 @@ +import { ReactNode } from 'react'; +import Header from './Header'; +import styles from './GlobalLayout.module.css'; + +export default function GlobalLayout({ children }: { children: ReactNode }) { + return ( + <> +
+
{children}
+ + ); +} diff --git a/src/components/Header.module.css b/src/components/Header.module.css new file mode 100644 index 000000000..cc521d55d --- /dev/null +++ b/src/components/Header.module.css @@ -0,0 +1,38 @@ +.header { + z-index: 999; + position: fixed; + top: 0; + width: 100%; + border-bottom: 1px solid #dfdfdf; +} + +.headerContainer { + padding: 10px 0; + display: flex; + align-items: center; + justify-content: space-between; +} + +.logoWrapper { + position: relative; + width: 153px; + height: 51px; +} + +.nav { + color: var(--Secondary-600, #4b5563); + text-align: center; + font-size: 18px; + font-weight: 700; + flex: 1; + + display: flex; + gap: 30px; + margin-left: 30px; +} + +.avatarWrapper { + position: relative; + width: 40px; + height: 40px; +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx new file mode 100644 index 000000000..e1924a0e5 --- /dev/null +++ b/src/components/Header.tsx @@ -0,0 +1,24 @@ +import Link from 'next/link'; +import styles from './Header.module.css'; +import Image from 'next/image'; + +export default function Header() { + return ( +
+
+ +
+ logo +
+ + +
+ avatar +
+
+
+ ); +} diff --git a/styles/reset.css b/styles/reset.css index 8c916afbd..68d34450b 100644 --- a/styles/reset.css +++ b/styles/reset.css @@ -9,12 +9,6 @@ vertical-align: baseline; } -header { - position: fixed; - top: 0; - width: 100%; -} - body { margin: 0; padding: 0; From a32b2aadf015cd2647b3863fd54a13afae2401a7 Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 02:32:43 +0900 Subject: [PATCH 04/11] refactor: Header logo as background-image --- {public/images => src/assets}/logo_lg.png | Bin src/components/GlobalLayout.module.css | 3 ++- src/components/GlobalLayout.tsx | 4 +++- src/components/Header.module.css | 5 ++++- src/components/Header.tsx | 12 ++++++------ 5 files changed, 15 insertions(+), 9 deletions(-) rename {public/images => src/assets}/logo_lg.png (100%) diff --git a/public/images/logo_lg.png b/src/assets/logo_lg.png similarity index 100% rename from public/images/logo_lg.png rename to src/assets/logo_lg.png diff --git a/src/components/GlobalLayout.module.css b/src/components/GlobalLayout.module.css index 6834545af..2ccbc164d 100644 --- a/src/components/GlobalLayout.module.css +++ b/src/components/GlobalLayout.module.css @@ -1,3 +1,4 @@ -.mainContainer { +.main { margin-top: 75px; + width: 100%; } diff --git a/src/components/GlobalLayout.tsx b/src/components/GlobalLayout.tsx index 1bc12a7b6..f4ce9201f 100644 --- a/src/components/GlobalLayout.tsx +++ b/src/components/GlobalLayout.tsx @@ -6,7 +6,9 @@ export default function GlobalLayout({ children }: { children: ReactNode }) { return ( <>
-
{children}
+
+
{children}
+
); } diff --git a/src/components/Header.module.css b/src/components/Header.module.css index cc521d55d..00a796bf7 100644 --- a/src/components/Header.module.css +++ b/src/components/Header.module.css @@ -14,9 +14,12 @@ } .logoWrapper { - position: relative; width: 153px; height: 51px; + background-image: url('../assets/logo_lg.png'); + background-size: contain; + background-repeat: no-repeat; + cursor: pointer; } .nav { diff --git a/src/components/Header.tsx b/src/components/Header.tsx index e1924a0e5..de258d5cd 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -6,13 +6,13 @@ export default function Header() { return (
- -
- logo -
- +
From 2076d3cd520ba0e125ff60b13961279a84f30dde Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 02:38:51 +0900 Subject: [PATCH 05/11] feat: Add header mobile --- src/assets/logo_sm.png | Bin 0 -> 1235 bytes src/components/Header.module.css | 15 +++++++++++++++ src/components/Header.tsx | 2 +- 3 files changed, 16 insertions(+), 1 deletion(-) create mode 100644 src/assets/logo_sm.png diff --git a/src/assets/logo_sm.png b/src/assets/logo_sm.png new file mode 100644 index 0000000000000000000000000000000000000000..c72c1788c7528a5a72fef5cad2f74b58f1fa1f4f GIT binary patch literal 1235 zcmV;^1T6cBP)Lzh&+Mh6U1Dm63f;JET2GX@@ZsltRV-k@VPmGJyQilKI2;a#!{Kl^9FCQsFee*FrkUM) z9^yZKR9!58;$OjgDZDk{z!bwu*4F88;O z%u{2~EF;(e?dLnHqYa+s&k}TaX=m+k`J$S__hsar|D^2i`U!sLC9v`|LS9-~pT@rN zKmQE-W#lP?-$Y^h5_=dP!;rzOADRxPj8W$K`X7!*;bHnH+SoU(p?UZ0oI7=_08S*} zqTDUny*;bL8sO7P@1g`6IK^9LphSZwT&BR_%KVi_>oRCi8IAmz!imQf!AF3n5E@Sm zE@iOrP0WE+;`xp`pm{fFx!W*t#mQ5XG%b;k zAQsIyAKSQJ+^H41MnVR##n$#L*_AC(awo~@uu3>7NhRcSQO8o=mC2JBD(&<8>H*_k zNQG?`6-dQJULSWPjpI08l#yM(MTK|<_i0I+#V^D)?FtoQMN-3`uU}mypE(An9MB#< z0BAM7%#A72wl>3a5e2FQt*V=6y~b059+T6J3#@#JKTZf;;^jOif=S3^;Ms&*Qju6= zacs&4yR(a{ZjH<(rXd_&*Ek4wRg8*MiHR|17g1qdX0$J8pruX_bHVpyCmDe!g#Zgu zl(&9lM1f5uxuVADjS0%*0!Bs+7E{KA#2QSPf1l>eb+I6xGjC2Cz_|2;DZ=WMxMD8* z2&u)dCRrVoyiH|orI9SU-otL8Z)>!_wM0>pJ#7D52;%83hL4c$ESJ?hsi~`Q#_Zq` z#1kiwyR#^;c(}%;{ox)a6XkaXf1?DpvO+w@;a-9UH=}RlxTOcjEg$a*s)nykArP-k zQJ^q)p7?A>-7MQz7KiQ+-AmgTlvJ{TR<6gfvO;+eQ`t*J^2yO+$A2|!%gIPebk}Ym z3fse$JW+{UjW09HDZ>J;F9~lqEp)t9Ys_kn3B4ipiiRFjgpjkjESBcR(ticqdTe5D zI$hQh+L8`UR3fe9fqYP&+@RzXz(zQxM`UFu_{+$B4c#v;xw4E=w5*qyqQv5^IE^Y* zCVGa1ub}7^WsvkpDn8kSS5km@c2Aw~a)Kq1CciB#8)fsuHy?AssGvuZxyWIpmJBSE z&o{Gjq4dd;@?44H?`cK(onZ6N%!<_FWizozGsAkh!96jx^j*w-WejpwFQz`v2Y*w@ xrz35fv)1VHOOC}3hr{7;I2;a#!{K;u`5(7X*|If4K#c$Z002ovPDHLkV1m`zK$rjk literal 0 HcmV?d00001 diff --git a/src/components/Header.module.css b/src/components/Header.module.css index 00a796bf7..49aa3e690 100644 --- a/src/components/Header.module.css +++ b/src/components/Header.module.css @@ -11,6 +11,8 @@ display: flex; align-items: center; justify-content: space-between; + max-width: 1300px; + margin: auto; } .logoWrapper { @@ -39,3 +41,16 @@ width: 40px; height: 40px; } + +/* mobile */ +@media screen and (max-width: 767px) { + .logoWrapper { + width: 81px; + height: 40px; + background-image: url('../assets/logo_sm.png'); + } + + .nav { + font-size: 16px; + } +} diff --git a/src/components/Header.tsx b/src/components/Header.tsx index de258d5cd..4bfbbcbac 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -5,7 +5,7 @@ import Image from 'next/image'; export default function Header() { return (
-
+
Date: Sat, 26 Oct 2024 02:46:28 +0900 Subject: [PATCH 06/11] feat: Add board api ts --- src/apis/boardTypes.ts | 27 +++++++++++++++++++++++++++ src/apis/boardsApi.ts | 39 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 66 insertions(+) create mode 100644 src/apis/boardTypes.ts create mode 100644 src/apis/boardsApi.ts diff --git a/src/apis/boardTypes.ts b/src/apis/boardTypes.ts new file mode 100644 index 000000000..4dc8c93f5 --- /dev/null +++ b/src/apis/boardTypes.ts @@ -0,0 +1,27 @@ +export interface Writer { + id: number; + nickname: string; +} + +export interface Board { + id: number; + title: string; + content: string; + image: string | null; + likeCount: number; + createdAt: string; + updatedAt: string; + writer: Writer; +} + +export interface GetBoardsResponse { + list: Board[]; + totalCount: number; +} + +export interface GetBoardsRequestParams { + page?: number; + pageSize?: number; + orderBy?: 'recent' | 'like'; + keyword?: string; +} diff --git a/src/apis/boardsApi.ts b/src/apis/boardsApi.ts new file mode 100644 index 000000000..7c4165183 --- /dev/null +++ b/src/apis/boardsApi.ts @@ -0,0 +1,39 @@ +import { Board, GetBoardsResponse, GetBoardsRequestParams } from './boardTypes'; + +const BASE_URL = 'https://panda-market-api.vercel.app'; + +async function fetchFromAPI(endpoint: string): Promise { + try { + const response = await fetch(endpoint); + if (!response.ok) { + throw new Error( + `HTTP error! Status: ${response.status} / response: ${response}` + ); + } + + return await response.json(); + } catch (error) { + console.error('Failed to fetch data:', error); + throw error; + } +} + +export async function getBoards({ + page = 1, + pageSize = 10, + orderBy = 'recent', + keyword, +}: GetBoardsRequestParams) { + const queryParams = new URLSearchParams({ + page: page.toString(), + pageSize: pageSize.toString(), + orderBy, + }); + + if (keyword) { + queryParams.append('keyword', keyword); + } + + const endpoint = `${BASE_URL}/products?${queryParams.toString()}`; + return await fetchFromAPI(endpoint); +} From d965f48061baab34b2ff6484c2d02c726eb4a006 Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 03:48:37 +0900 Subject: [PATCH 07/11] feat: Add BestBoardCard structure and css --- pages/api/hello.ts | 13 --- .../components/BestBoardCard.module.css | 80 +++++++++++++++++++ pages/boards/components/BestBoardCard.tsx | 36 +++++++++ pages/boards/components/BestBoards.module.css | 20 +++++ pages/boards/components/BestBoards.tsx | 12 +++ pages/boards/index.tsx | 8 +- {public/images => src/assets}/avatar.svg | 0 src/assets/ic_heart.svg | 5 ++ src/assets/ic_medal.svg | 4 + src/components/Header.tsx | 3 +- styles/globals.css | 2 +- 11 files changed, 167 insertions(+), 16 deletions(-) delete mode 100644 pages/api/hello.ts create mode 100644 pages/boards/components/BestBoardCard.module.css create mode 100644 pages/boards/components/BestBoardCard.tsx create mode 100644 pages/boards/components/BestBoards.module.css create mode 100644 pages/boards/components/BestBoards.tsx rename {public/images => src/assets}/avatar.svg (100%) create mode 100644 src/assets/ic_heart.svg create mode 100644 src/assets/ic_medal.svg diff --git a/pages/api/hello.ts b/pages/api/hello.ts deleted file mode 100644 index f8bcc7e5c..000000000 --- a/pages/api/hello.ts +++ /dev/null @@ -1,13 +0,0 @@ -// Next.js API route support: https://nextjs.org/docs/api-routes/introduction -import type { NextApiRequest, NextApiResponse } from 'next' - -type Data = { - name: string -} - -export default function handler( - req: NextApiRequest, - res: NextApiResponse -) { - res.status(200).json({ name: 'John Doe' }) -} diff --git a/pages/boards/components/BestBoardCard.module.css b/pages/boards/components/BestBoardCard.module.css new file mode 100644 index 000000000..169ff0d5c --- /dev/null +++ b/pages/boards/components/BestBoardCard.module.css @@ -0,0 +1,80 @@ +.bestBoardCardContainer { + border-radius: 8px; + background: var(--Secondary-50, #f9fafb); + padding: 0px 24px; + padding-bottom: 15px; + + display: flex; + flex-direction: column; + gap: 18px; +} + +.bestBoardBadge { + width: 102px; + height: 30px; + text-align: center; + padding: 2px 24px; + background: var(--Primary-100, #3692ff); + border-radius: 0px 0px 16px 16px; + + display: flex; + align-items: center; + gap: 4px; +} + +.bestText { + color: #fff; + font-size: 16px; + font-weight: 600; +} + +.contentContainer { + width: 100%; + display: flex; + justify-content: space-between; + flex-wrap: wrap; +} + +.contentTitle { + color: var(--Secondary-800, #1f2937); + font-size: 20px; + font-weight: 600; + max-width: 256px; +} + +.contentImgWrapper { + position: relative; + width: 72px; + height: 72px; + + border-radius: 6px; + border: 1px solid var(--Secondary-200, #e5e7eb); + background: #fff; +} + +.additionalInfo { + color: var(--Secondary-600, #4b5563); + font-size: 14px; + font-weight: 400; + + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; +} + +.likeCountWrapper { + flex: 1; + + display: flex; + align-items: center; + gap: 4px; +} + +/* tablet */ +@media screen and (max-width: 1199px) { + .contentTitle { + gap: 40px; + max-width: 180px; + } +} diff --git a/pages/boards/components/BestBoardCard.tsx b/pages/boards/components/BestBoardCard.tsx new file mode 100644 index 000000000..8930f1c1a --- /dev/null +++ b/pages/boards/components/BestBoardCard.tsx @@ -0,0 +1,36 @@ +import Image from 'next/image'; +import styles from './BestBoardCard.module.css'; +import medalSvg from '@/src/assets/ic_medal.svg'; +import heardSvg from '@/src/assets/ic_heart.svg'; + +export default function BestBoardCard() { + return ( +
+
+ medal + Best +
+
+

+ 맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요? +

+
+ medal +
+
+
+ 총명한판다 +
+ heardIcon + 9999+ +
+ 2024. 04. 16 +
+
+ ); +} diff --git a/pages/boards/components/BestBoards.module.css b/pages/boards/components/BestBoards.module.css new file mode 100644 index 000000000..f9f30b50e --- /dev/null +++ b/pages/boards/components/BestBoards.module.css @@ -0,0 +1,20 @@ +.bestBoards { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 24px; +} + +/* tablet */ +@media screen and (max-width: 1199px) { + .bestBoards { + grid-template-columns: repeat(2, 1fr); + gap: 16px; + } +} + +/* mobile */ +@media screen and (max-width: 767px) { + .bestBoards { + grid-template-columns: repeat(1, 1fr); + } +} diff --git a/pages/boards/components/BestBoards.tsx b/pages/boards/components/BestBoards.tsx new file mode 100644 index 000000000..a2f1962c6 --- /dev/null +++ b/pages/boards/components/BestBoards.tsx @@ -0,0 +1,12 @@ +import BestBoardCard from './BestBoardCard'; +import styles from './BestBoards.module.css'; + +export default function BestBoards() { + return ( +
+ + + +
+ ); +} diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx index 995ecddd5..4b76b887c 100644 --- a/pages/boards/index.tsx +++ b/pages/boards/index.tsx @@ -1,3 +1,9 @@ +import BestBoards from './components/BestBoards'; + export default function BoardsIndex() { - return
boardIndex
; + return ( +
+ +
+ ); } diff --git a/public/images/avatar.svg b/src/assets/avatar.svg similarity index 100% rename from public/images/avatar.svg rename to src/assets/avatar.svg diff --git a/src/assets/ic_heart.svg b/src/assets/ic_heart.svg new file mode 100644 index 000000000..2d4338bfc --- /dev/null +++ b/src/assets/ic_heart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/assets/ic_medal.svg b/src/assets/ic_medal.svg new file mode 100644 index 000000000..d650c4019 --- /dev/null +++ b/src/assets/ic_medal.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Header.tsx b/src/components/Header.tsx index 4bfbbcbac..1f5362bae 100644 --- a/src/components/Header.tsx +++ b/src/components/Header.tsx @@ -1,6 +1,7 @@ import Link from 'next/link'; import styles from './Header.module.css'; import Image from 'next/image'; +import avatarSvg from '@/src/assets/avatar.svg'; export default function Header() { return ( @@ -16,7 +17,7 @@ export default function Header() { 중고마켓
- avatar + avatar
diff --git a/styles/globals.css b/styles/globals.css index e16587f59..14b366aeb 100644 --- a/styles/globals.css +++ b/styles/globals.css @@ -15,7 +15,7 @@ --Secondary-100: #f3f4f6; --Secondary-50: #f9fafb; --error-red: #f74747; - --size-max-width: 1140px; + --size-max-width: 1200px; } * { From 455b5b37875a74ec49458e0e462eeb7e52cc5935 Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 03:54:01 +0900 Subject: [PATCH 08/11] feat: Add bestBoards title --- pages/boards/components/BestBoards.module.css | 12 ++++++++++++ pages/boards/components/BestBoards.tsx | 13 ++++++++----- 2 files changed, 20 insertions(+), 5 deletions(-) diff --git a/pages/boards/components/BestBoards.module.css b/pages/boards/components/BestBoards.module.css index f9f30b50e..303c97577 100644 --- a/pages/boards/components/BestBoards.module.css +++ b/pages/boards/components/BestBoards.module.css @@ -4,6 +4,14 @@ gap: 24px; } +.title { + color: var(--Secondary-900, #111827); + font-size: 20px; + font-weight: 700; + + padding: 24px 0; +} + /* tablet */ @media screen and (max-width: 1199px) { .bestBoards { @@ -17,4 +25,8 @@ .bestBoards { grid-template-columns: repeat(1, 1fr); } + + .title { + padding: 16px 0; + } } diff --git a/pages/boards/components/BestBoards.tsx b/pages/boards/components/BestBoards.tsx index a2f1962c6..349ca3091 100644 --- a/pages/boards/components/BestBoards.tsx +++ b/pages/boards/components/BestBoards.tsx @@ -3,10 +3,13 @@ import styles from './BestBoards.module.css'; export default function BestBoards() { return ( -
- - - -
+
+

베스트 게시글

+
+ + + +
+
); } From 616c5fe90dae465bbf44f1ef5d214a7ae749b81d Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 04:27:41 +0900 Subject: [PATCH 09/11] feat: Add BestBoard api call with prefetch --- next.config.js | 7 +++-- pages/boards/components/BestBoardCard.tsx | 32 ++++++++++++++--------- pages/boards/components/BestBoards.tsx | 13 ++++++--- pages/boards/index.tsx | 26 ++++++++++++++++-- src/apis/boardTypes.ts | 2 +- src/apis/boardsApi.ts | 2 +- 6 files changed, 59 insertions(+), 23 deletions(-) diff --git a/next.config.js b/next.config.js index a843cbee0..da265d11c 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,9 @@ /** @type {import('next').NextConfig} */ const nextConfig = { reactStrictMode: true, -} + images: { + domains: ['sprint-fe-project.s3.ap-northeast-2.amazonaws.com'], + }, +}; -module.exports = nextConfig +module.exports = nextConfig; diff --git a/pages/boards/components/BestBoardCard.tsx b/pages/boards/components/BestBoardCard.tsx index 8930f1c1a..555d74968 100644 --- a/pages/boards/components/BestBoardCard.tsx +++ b/pages/boards/components/BestBoardCard.tsx @@ -2,8 +2,21 @@ import Image from 'next/image'; import styles from './BestBoardCard.module.css'; import medalSvg from '@/src/assets/ic_medal.svg'; import heardSvg from '@/src/assets/ic_heart.svg'; +import { Board } from '@/src/apis/boardTypes'; -export default function BestBoardCard() { +interface BestBoardCardProps + extends Pick< + Board, + 'title' | 'image' | 'writer' | 'likeCount' | 'createdAt' + > {} + +export default function BestBoardCard({ + title, + image, + writer, + likeCount, + createdAt, +}: BestBoardCardProps) { return (
@@ -11,25 +24,18 @@ export default function BestBoardCard() { Best
-

- 맥북 16인치 16기가 1테라 정도 사양이면 얼마에 팔아야하나요? -

+

{title}

- medal + medal
- 총명한판다 + {writer.nickname}
heardIcon - 9999+ + {likeCount}
- 2024. 04. 16 + {new Date(createdAt).toLocaleDateString()}
); diff --git a/pages/boards/components/BestBoards.tsx b/pages/boards/components/BestBoards.tsx index 349ca3091..5a81735eb 100644 --- a/pages/boards/components/BestBoards.tsx +++ b/pages/boards/components/BestBoards.tsx @@ -1,14 +1,19 @@ +import { Board } from '@/src/apis/boardTypes'; import BestBoardCard from './BestBoardCard'; import styles from './BestBoards.module.css'; -export default function BestBoards() { +interface BestBoardsProps { + boards: Board[]; +} + +export default function BestBoards({ boards }: BestBoardsProps) { return (

베스트 게시글

- - - + {boards.map((board) => ( + + ))}
); diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx index 4b76b887c..5a408add3 100644 --- a/pages/boards/index.tsx +++ b/pages/boards/index.tsx @@ -1,9 +1,31 @@ +import { GetStaticProps } from 'next'; import BestBoards from './components/BestBoards'; +import { Board } from '@/src/apis/boardTypes'; +import { getBoards } from '@/src/apis/boardsApi'; -export default function BoardsIndex() { +interface BoardsIndexProps { + boards: Board[]; +} + +export default function BoardsIndex({ boards }: BoardsIndexProps) { return (
- +
); } + +export const getStaticProps: GetStaticProps = async () => { + const { list } = await getBoards({ + page: 1, + pageSize: 3, + orderBy: 'like', + }); + + return { + props: { + boards: list || [], + }, + revalidate: 600, // Re-generate the page every 600 seconds (ISR) + }; +}; diff --git a/src/apis/boardTypes.ts b/src/apis/boardTypes.ts index 4dc8c93f5..e44f3fdff 100644 --- a/src/apis/boardTypes.ts +++ b/src/apis/boardTypes.ts @@ -7,7 +7,7 @@ export interface Board { id: number; title: string; content: string; - image: string | null; + image: string; // TODO image null 처리 likeCount: number; createdAt: string; updatedAt: string; diff --git a/src/apis/boardsApi.ts b/src/apis/boardsApi.ts index 7c4165183..d0b14090f 100644 --- a/src/apis/boardsApi.ts +++ b/src/apis/boardsApi.ts @@ -34,6 +34,6 @@ export async function getBoards({ queryParams.append('keyword', keyword); } - const endpoint = `${BASE_URL}/products?${queryParams.toString()}`; + const endpoint = `${BASE_URL}/articles?${queryParams.toString()}`; return await fetchFromAPI(endpoint); } From 31ca3b381b2c6fbc66dac14dcbf9fa9093ae1f7f Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 04:55:06 +0900 Subject: [PATCH 10/11] fix: Add hiding additional rows for bestBoards on mobile, tablet --- pages/boards/components/BestBoards.module.css | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/pages/boards/components/BestBoards.module.css b/pages/boards/components/BestBoards.module.css index 303c97577..aac4c7461 100644 --- a/pages/boards/components/BestBoards.module.css +++ b/pages/boards/components/BestBoards.module.css @@ -18,6 +18,10 @@ grid-template-columns: repeat(2, 1fr); gap: 16px; } + + .bestBoards > *:nth-child(n + 3) { + display: none; + } } /* mobile */ @@ -29,4 +33,8 @@ .title { padding: 16px 0; } + + .bestBoards > *:nth-child(n + 2) { + display: none; + } } From deb77253293af442935c975f7f7c0555a84fa1ef Mon Sep 17 00:00:00 2001 From: heejin Date: Sat, 26 Oct 2024 05:15:43 +0900 Subject: [PATCH 11/11] feat: Add button component and boards header --- pages/boards/components/BestBoards.module.css | 3 ++ pages/boards/components/Boards.module.css | 46 +++++++++++++++++++ pages/boards/components/Boards.tsx | 26 +++++++++++ pages/boards/index.tsx | 2 + src/assets/ic_search.svg | 5 ++ src/components/Button.module.css | 12 +++++ src/components/Button.tsx | 19 ++++++++ 7 files changed, 113 insertions(+) create mode 100644 pages/boards/components/Boards.module.css create mode 100644 pages/boards/components/Boards.tsx create mode 100644 src/assets/ic_search.svg create mode 100644 src/components/Button.module.css create mode 100644 src/components/Button.tsx diff --git a/pages/boards/components/BestBoards.module.css b/pages/boards/components/BestBoards.module.css index aac4c7461..9c335b01e 100644 --- a/pages/boards/components/BestBoards.module.css +++ b/pages/boards/components/BestBoards.module.css @@ -2,6 +2,8 @@ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; + + margin-bottom: 40px; } .title { @@ -17,6 +19,7 @@ .bestBoards { grid-template-columns: repeat(2, 1fr); gap: 16px; + margin-bottom: 24px; } .bestBoards > *:nth-child(n + 3) { diff --git a/pages/boards/components/Boards.module.css b/pages/boards/components/Boards.module.css new file mode 100644 index 000000000..fdc84945d --- /dev/null +++ b/pages/boards/components/Boards.module.css @@ -0,0 +1,46 @@ +.boardsHeader { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; +} + +.title { + color: var(--Secondary-800, #1f2937); + font-size: 20px; + font-weight: 700; +} + +.searchBar { + padding: 9px 20px 9px 16px; + border-radius: 12px; + background: var(--Secondary-100, #f3f4f6); + + display: flex; + align-items: center; + gap: 4px; +} + +.searchData { + font-size: 16px; + font-weight: 400; + background: transparent; +} + +.searchData::placeholder { + color: var(--Secondary-400, #9ca3af); +} + +/* tablet */ +@media screen and (max-width: 1199px) { + .boardsHeader { + margin-bottom: 48px; + } +} + +/* mobile */ +@media screen and (max-width: 767px) { + .boardsHeader { + margin-bottom: 16px; + } +} diff --git a/pages/boards/components/Boards.tsx b/pages/boards/components/Boards.tsx new file mode 100644 index 000000000..1d4d84956 --- /dev/null +++ b/pages/boards/components/Boards.tsx @@ -0,0 +1,26 @@ +import Image from 'next/image'; +import Button from '@/src/components/Button'; +import styles from './Boards.module.css'; +import searchSvg from '@/src/assets/ic_search.svg'; + +export default function Boards() { + return ( +
+
+

게시글

+
+ +
+
+
+
+ searchIcon + +
+
+
+ ); +} diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx index 5a408add3..5e584f2c6 100644 --- a/pages/boards/index.tsx +++ b/pages/boards/index.tsx @@ -2,6 +2,7 @@ import { GetStaticProps } from 'next'; import BestBoards from './components/BestBoards'; import { Board } from '@/src/apis/boardTypes'; import { getBoards } from '@/src/apis/boardsApi'; +import Boards from './components/Boards'; interface BoardsIndexProps { boards: Board[]; @@ -11,6 +12,7 @@ export default function BoardsIndex({ boards }: BoardsIndexProps) { return (
+
); } diff --git a/src/assets/ic_search.svg b/src/assets/ic_search.svg new file mode 100644 index 000000000..e8b451e48 --- /dev/null +++ b/src/assets/ic_search.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Button.module.css b/src/components/Button.module.css new file mode 100644 index 000000000..f01db8780 --- /dev/null +++ b/src/components/Button.module.css @@ -0,0 +1,12 @@ +.primaryButton { + border-radius: 8px; + background: var(--Primary-100, #3692ff); + + color: #fff; + font-size: 16px; + font-weight: 600; + + padding: 12px 23px; + width: 100%; + height: 100%; +} diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 000000000..56cd4dd67 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,19 @@ +import { ButtonHTMLAttributes } from 'react'; +import styles from './Button.module.css'; + +interface PrimaryButtonProps extends ButtonHTMLAttributes { + children: React.ReactNode; + className?: string; +} + +export default function Button({ + children, + className, + ...props +}: PrimaryButtonProps) { + return ( + + ); +}