Closed hyeonseok98 closed 1 month ago
font-black์
https://tailwindcss.com/docs/font-weight ํ ์ผ์๋ ๊ณตํ์์ font-black์ด ์ต๊ณ ๊ตต์ ํฐํธ ํฌ๊ธฐ๋ผ ์ผ์์ต๋๋ค. ํน์ ๋ค๋ฅธ๊ฒ ๋จนํ๋ ค๋ ์ถ์ด์ font-[10rem] ์ด๋ฐ๊ฑฐ ํด๋ณด๋ ค๋ ์๋๋๋ผ๊ตฌ์ ํน์ ๋ค๋ฅธ ํฐํธ์จ์ดํธ ์ค์ ๋ฒ ์์ผ๋ฉด ์๋ ค์ฃผ์ธ์ ์ผ๋จ์ font-black์ผ๋ก ์ฐ๊ณ ์์ด์ผ ํ ๊ฑฐ ๊ฐ์ต๋๋ค ----->> ์ด๋ถ๋ถ ๋ค๋ฅธ๋ถ๋ค์๊ฒ ํผ๋์ ์ฃผ๋๊ฑฐ ๊ฐ์์ font-extrabold ํ๋จ๊ณ ๋ด๋ ค์ ์ฐ๊ฒ ์ต๋๋ค~!
๐ฅ ์ฝ๋์ ์คํ ๊ฒฐ๊ณผ๋ง์ ๋ณด๊ณ ์์ฑํ์์์ผ๋ก ์๋์ ๋ค๋ฅธ ๊ฒฝ์ฐ comment ๋จ๊ฒจ์ฃผ์ธ์(7์ 14์ผ 13์ ๊ธฐ์ค ์ฝ๋์ ๋๋ค)
๐ก ์ ๊ฐ์ธ์ ์ธ ์ฝ๋ ๋ฆฌ๋ทฐ์์ผ๋ก ํ ๋ก ์ ์ธ์ ๋ ํ์์ ๋๋ค~!!
๐ ์ ์ฒด(To. ํ์ฅ๋~)
1. (๊ฑด์์ฌํญ) input css ํต์ผ
2. ButtonSm ์ปดํฌ๋ํธ์ ์ด๋ฆ์ ์ ์ฒด์ ์ธ ์ปจ๋ฒค์ ์ ๋ง์ถฐ SmallButton์ผ๋ก ๋ณ๊ฒฝํ๋ฉด ์ด๋จ๊น์?
3. ButtonSm ์ด์ธ์ ๋ฐฐ๊ฒฝ์์ด customGreen์ด๊ณ ๊ธ์๊ฐ ํฐ์์ธ ๋ฒํผ์ ๊ฒฝ์ฐ ๊ธ์๊ฐ ์ ์๋ณด์ฌ์ ๊ท ์ผํ๊ฒ bold ํด์ฃผ๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
โจ ๋ก๊ทธ์ธ
1. email, back ์ด๋ฏธ์ง ์์น ์์
2. /(sub)/auth/page.tsx
์ผ๋ฐ์ ์ผ๋ก early return์ ์ฌ์ฉํ๋ ๊ฒ์ ๋ถํ์ํ ์ถ๊ฐ ๋ก์ง์ ์คํํ์ง ์๊ธฐ ์ํจ์ ๋๋ค. ํ์ฌ kakao ๋ก๊ทธ์ธ์ด ์๋ ๊ฒฝ์ฐ์๋ if(error)๋ฌธ์ด ์คํ๋์ง๋ง, ์ด๋ kakao ๋ก๊ทธ์ธ์ด ์๋ ๊ฒฝ์ฐ ์คํ๋์ง ์์๋ ๋จ์ผ๋ก if~else ๋ฌธ์ผ๋ก ๋ณ๊ฒฝํด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
3. /(sub)/auth/kakao-redirect/page.tsx
4. /(sub)/auth/login/page.tsx
4-1. 10๋ฒ์งธ ์ค: ๋ถํ์ ๊ณต๋ฐฑ์ค ์ ๊ฑฐ 4-2. ์ฝ๋ ๋ด if(result.error)์ ๊ฐ์ด ์๋ฌ ์ฒ๋ฆฌ ๊ตฌ๋ฌธ์ด ์์ง๋ง, fetchํ๋ ๊ณผ์ ์์ฒด์์ error๊ฐ ์๊ธธ ๊ฒฝ์ฐ์๋ result ์ด์ ์ ์๋ฌ๊ฐ ์๊น๋๋ค. ๋๋ฌธ์ setError(null) ๋ค์ ์ฝ๋๋ถํฐ try~catch๋ฌธ์ผ๋ก ๋ง๋ค์ด ์๋ฌ ์ฒ๋ฆฌ ํด์ฃผ๋ ๊ฒ๋ ์ข์๋ณด์ ๋๋ค.
5. /(sub)/auth/sign-up/page.tsx
5-1. ์ฌ์ฉํ์ง ์๋ ๊ตฌ๋ฌธ ์ญ์
5-2. 9, 20๋ฒ์งธ ๋ถํ์ ๊ณต๋ฐฑ์ค ์ ๊ฑฐ
6. /(sub)/auth/socialNickname/page.tsx
6-1. ๋ค๋ฅธ ์์น๋ก๋ถํฐ ๊ฐ์ ธ์ค๋ const supabase = createClient(); ๋ถ๋ถ์ ๋ฐ๋ก ์กด์ฌํ๊ธฐ ๋ณด๋จ ๋ค๋ฅธ const์ ๊ฐ์ด ๋ถ์ด ์์ด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. 6-2. [63~111๋ฒ์งธ ์ค] ์ฐพ์๋ณด๋ supabase์๋
upsert
๋ผ๋ ์ฟผ๋ฆฌ๋ฌธ์ด ์์ต๋๋ค. ์ค๋ณต๋๋ ๊ฐ์ด ์๋ค๋ฉด Update๋ฅผ ํ๊ณ ์ค๋ณต๋๋ ๊ฐ์ด ์๋ค๋ฉด Insert๋ฅผ ํ๋ ๊ธฐ๋ฅ์ ํ๋ฉฐ, ์ฌ๊ธฐ์ ๊ธฐ์กด์ ์ฌ์ฉ์๊ฐ ์์ผ๋ฉด ์ ๋ฐ์ดํธํ๊ณ , ์์ผ๋ฉด ์ฝ์ ํ๋ ๋ก์ง์ ๋์ฒดํ ์ ์์ต๋๋ค. ์ด๋ฐ ๊ตฌ๋ฌธ๋ ์๋ค ์ ๋๋ก ์ฐธ๊ณ ํด์ฃผ์ธ์(ํ์ฌ 50์ค -> upsert ์ฌ์ฉ์ 20์ค ์ ๋ ์์)6.3 useEffect ์์กด์ฑ ๋ฐฐ์ด์ supabase๋ฅผ ์ถ๊ฐํ์ฌ ๊ฒฝ๊ณ ๋ฐ์ค์ ์์ ๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค. 6.4 h1์ ํฌ๊ธฐ๊ฐ ๋๋ฌด ์ปค์ ๋ ์ค์ด ๋์ด ์์ต๋๋ค.
6.5 input ์ข์ฐ ์ฌ๋ฐฑ์ด ์กฐ๊ธ ์์ผ๋ฉด ์ด๋จ๊น ํฉ๋๋ค! 6.6 button์ hover ํจ๊ณผ๊ฐ ์์ผ๋ฉด ์ด๋จ๊น ํฉ๋๋ค 6.7 ํ ํ์ด์ง ๋ด '๋๋ค์'์ด๋ผ๋ ๋จ์ด๊ฐ ๋ง์ด ๋ฐ๋ณต๋๊ณ ์์ต๋๋ค(4๋ฒ). ๋๋ฌธ์ label์ ์์ด๋ ๊น๋ํ์ง ์์๊น ๊ฑด์๋๋ ค์ 6.7 ์ ์ฒด๋ฅผ ๊ฐ์ธ๋ div ๋์ main, section, form๊ณผ ๊ฐ์ ์๋ฉํฑ ํ๊ทธ๋ ๊ด์ฐฎ์ ๋ณด์ ๋๋ค!
โจ ๋ฉ์ธ ํ์ด์ง(clubs)
/(main)/page.tsx
\
\
\
โจ ๋ชจ์ ๋ง๋ค๊ธฐ
โจ Club Detail
โ ๊ณต์ ํ๊ธฐ
๋งํฌ ๊ณต์ ์ url ์์ ์ด ์ด๋ฃจ์ด์ง๋ฉด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
๊ณต์ ๊ฒ์๊ธ์ด title๊ณผ description์ ๋๋ ์ ๋ณด์ฌ์ฃผ๊ณ , ์ด๋ฏธ์ง๋ ์ถ๊ฐ๋๋ฉด ์์ ๊ฒ ๊ฐ์์. ์ฌ์ง์ ppt๋ก... ํด๋ณด์์ต๋๋ค...
\
โ ๋ชจ์ ๋ง๋ค๊ธฐ(๋ฆฌ์คํธ)
\, \
\
/(main)/clubs/[clubId]/page.tsx
// ๋ณ๊ฒฝ ํ commentList.length > 0
1-6 input ํ๊ทธ ๋ด์๋ ํ ์คํธ ์์ ์ง์ ์ ์ ๊ฑฐํด๋ ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
1-7. textarea ๋ด text-2xl๊ณผ border ์ฌ์ด ๊ณต๋ฐฑ์ ์ ๊ฑฐ ๋ถํ๋๋ ค์! 1-8. ๊ฐ์ธ์ ์ผ๋ก textarea ๋ด ๊ธ์ ํฌ๊ธฐ๊ฐ ์กฐ๊ธ ํฐ ๊ฒ ๊ฐ์์.
ํ๊ทธ๊ฐ text-xl ํฌ๊ธฐ์์ผ๋ก textarea์ ํฌ๊ธฐ๋ text-base(์๋ฌด๊ฒ๋ ์ง์ ์ํ ๋ธ๋ผ์ฐ์ ๊ธฐ๋ณธ ํฌ๊ธฐ)๊ฐ ๋๋ฉด ์ข์ ๊ฒ ๊ฐ์์
1-9. ๊ธ์ ์์ฑํ๋ ๋ถ๋ถ์ placeholder๋ก ์ด๊ณณ์ ๊ธ์ ์์ฑํด์ฃผ์ธ์ ๋ฑ์ ์๋ด ๋ฌธ๊ตฌ๊ฐ ์์ด๋ ์ข์ ๊ฒ ๊ฐ์์.(์ทจํฅ)
2. (main)/guests/[id]/postDetail/[postId]/page.tsx
2-1. ์์ ํ์ด์ง์ฒ๋ผ font-black์ ์ญ์ ๋ฅผ, ์ค๋ฅธ์ชฝ ์ฌ๋ฐฑ๋ ์ผ์ชฝ ์ฒ๋ผ ๊ท ๋ฑํ๊ฒ ์์์ผ๋ฉด ํ๋ ๋ฐ๋์ ๋๋น
2-2. ์งง๊ฒ category๋ฅผ ๋ํ๋ด๋ ๋ถ๋ถ์ด๊ธฐ์ div๋ณด๋ค ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํด๋ ์ข์๋ณด์ฌ์!
2-3. text-2xl๊ณผ mb-4 ์ฌ์ด ๊ณต๋ฐฑ ์ ๊ฑฐ๋ฅผ ๋ถํ๋๋ฆฝ๋๋ท! ๊ทธ๋ฆฌ๊ณ ์์ ํ์ด์ง์ ๋ชจ์์ ๋ํ๋ผ ๋ \
ํ๊ทธ๋ฅผ ์ฌ์ฉํด์ ์ด๋ถ๋ถ์ ํ ๋จ๊ณ ๋ฎ์ถ ๋ฅผ ์ฌ์ฉํด๋ ๊ด์ฐฎ์ ๋ณด์ฌ์!
2-4. ์์ผ๋ก ๋ฆฌ์คํธ๊ฐ ๋ํ๋ ์๋ฏธ๋ก ํด์๋์ง๋ง ํด๋น ํ์ด์ง ๋ด์์ ๋ํ๋ด๋ ๊ฒ์ด ์๋๊ณ , ๋ฒํผ๋ง์ ๊ฐ์ผ ํ๊ทธ์ด๊ธฐ์ ul๋ณด๋ค๋ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ๋ ๊ฒ์ด ์ข์ ๊ฒ ๊ฐ์ต๋๋ค.
\
์ด ์ฌ์ฉ๋์ง ์์ต๋๋ค!(seo์ ๋ชจ๋ฌ์ ๋์์ด ๋ณ๋ก ๋์ง ์๊ธฐ ๋๋ฌธ์ด๋ฉฐ, h1์ ์ ๋ง ์ค์ํ ๊ณณ์๋ง ์ฌ์ฉ) ๋๋ฌธ์ ๋ค๋ฅธ ํ๊ทธ๋ฅผ ์ฌ์ฉํ์๋ ๊ฑธ ๊ฐ์ธ์ ์ผ๋ก ์ถ์ฒ๋๋ ค์
ํด๋น ๋ถ๋ถ์ ์๋ฌ๊ฐ ๋ฐ์ํ ๊ฒฝ์ฐ early return์ ํตํด ์๋ ๋ก์ง์ด ์คํ๋์ง ์๊ฒ ์ต์ ํ ํ ์ ์์ ๊ฒ ๊ฐ์ต๋๋ค.
\
์ฝ๋ ๋ณด๊ธฐ/์ ๊ธฐ
```jsx "use client"; type ColorButtonsProps = { handleColorChange: (color: string) => void; }; // ์์๋ constants ํด๋๋ก ๋ถ๋ฆฌ ๊ฐ๋ฅ const COLORS = [ { bgColor: "#ffcccc", colorCode: "#FFBABA" }, { bgColor: "#ccffcc", colorCode: "#8DE8A6" }, { bgColor: "#ccccff", colorCode: "#84BBFD" }, { bgColor: "#ffccff", colorCode: "#E4AFED" }, ]; const ColorButtons = ({ handleColorChange }: ColorButtonsProps) => { return (โจ ๊ทธ ์ธ
โ apis ํด๋