From 34bf3d69ee219d29fb5a91f0082283b44e8d58a0 Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Tue, 13 Aug 2024 18:20:24 +0900 Subject: [PATCH 01/25] =?UTF-8?q?fix:=20global=20scss=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EC=9D=B4=EB=A6=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../board/ArticleSearchBar/ArticleSearchBar.module.scss | 2 +- .../board/BasicArticleCard/BasicArticleCard.module.scss | 2 +- .../board/BestArticleCard/BestArticleCard.module.scss | 2 +- src/components/layout/Header/Header.module.scss | 2 +- src/core/ui/SectionTitle/SectionTitle.module.scss | 2 +- src/core/ui/buttons/UButton/UButton.module.scss | 2 +- src/core/ui/dropdowns/UDropdown/UDropdown.module.scss | 2 +- src/core/ui/inputs/UInput/UInput.module.scss | 2 +- "src/styles/\bglobal.scss" => src/styles/global.scss | 0 9 files changed, 8 insertions(+), 8 deletions(-) rename "src/styles/\bglobal.scss" => src/styles/global.scss (100%) diff --git a/src/components/board/ArticleSearchBar/ArticleSearchBar.module.scss b/src/components/board/ArticleSearchBar/ArticleSearchBar.module.scss index 688dbc52c..b9871f162 100644 --- a/src/components/board/ArticleSearchBar/ArticleSearchBar.module.scss +++ b/src/components/board/ArticleSearchBar/ArticleSearchBar.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .searchBar { &__wrapper { diff --git a/src/components/board/BasicArticleCard/BasicArticleCard.module.scss b/src/components/board/BasicArticleCard/BasicArticleCard.module.scss index 6d88ca28a..f05aae16a 100644 --- a/src/components/board/BasicArticleCard/BasicArticleCard.module.scss +++ b/src/components/board/BasicArticleCard/BasicArticleCard.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .card { &__wrapper { diff --git a/src/components/board/BestArticleCard/BestArticleCard.module.scss b/src/components/board/BestArticleCard/BestArticleCard.module.scss index 3a8a850f1..ab8594055 100644 --- a/src/components/board/BestArticleCard/BestArticleCard.module.scss +++ b/src/components/board/BestArticleCard/BestArticleCard.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .date { position: absolute; diff --git a/src/components/layout/Header/Header.module.scss b/src/components/layout/Header/Header.module.scss index e78eab7c7..4083db9b1 100644 --- a/src/components/layout/Header/Header.module.scss +++ b/src/components/layout/Header/Header.module.scss @@ -1,4 +1,4 @@ -@import '../../../styles/global.scss'; +@import '../../../styles/global.scss'; .navbar { position: fixed; diff --git a/src/core/ui/SectionTitle/SectionTitle.module.scss b/src/core/ui/SectionTitle/SectionTitle.module.scss index 8d07d5d2e..096fef64d 100644 --- a/src/core/ui/SectionTitle/SectionTitle.module.scss +++ b/src/core/ui/SectionTitle/SectionTitle.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .title { @include Body1; diff --git a/src/core/ui/buttons/UButton/UButton.module.scss b/src/core/ui/buttons/UButton/UButton.module.scss index 4e8a83284..a28971bf0 100644 --- a/src/core/ui/buttons/UButton/UButton.module.scss +++ b/src/core/ui/buttons/UButton/UButton.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .common-button { cursor: pointer; diff --git a/src/core/ui/dropdowns/UDropdown/UDropdown.module.scss b/src/core/ui/dropdowns/UDropdown/UDropdown.module.scss index 66482cbf3..af1e63b2f 100644 --- a/src/core/ui/dropdowns/UDropdown/UDropdown.module.scss +++ b/src/core/ui/dropdowns/UDropdown/UDropdown.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .dropdown { &__wrapper { diff --git a/src/core/ui/inputs/UInput/UInput.module.scss b/src/core/ui/inputs/UInput/UInput.module.scss index c2f92497c..c82793ddf 100644 --- a/src/core/ui/inputs/UInput/UInput.module.scss +++ b/src/core/ui/inputs/UInput/UInput.module.scss @@ -1,4 +1,4 @@ -@import '/src/styles/global.scss'; +@import '/src/styles/global.scss'; .input { border: none; diff --git "a/src/styles/\bglobal.scss" b/src/styles/global.scss similarity index 100% rename from "src/styles/\bglobal.scss" rename to src/styles/global.scss From 585e586df8814a3dce414ca97827a94e445aa611 Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Tue, 13 Aug 2024 18:31:56 +0900 Subject: [PATCH 02/25] =?UTF-8?q?feature:=20reset=20css=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/_app.tsx | 4 ++- pages/index.tsx | 1 - src/styles/reset.css | 72 ++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 src/styles/reset.css diff --git a/pages/_app.tsx b/pages/_app.tsx index ef477bd44..8c07f1c22 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,10 +1,12 @@ +import 'normalize.css'; +import '@/src/styles/reset.css'; + import Header from '@/src/components/layout/Header/Header'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import type { AppProps } from 'next/app'; import Head from 'next/head'; import { useState } from 'react'; -import 'normalize.css'; export default function App({ Component, pageProps }: AppProps) { const [queryClient] = useState(() => new QueryClient()); diff --git a/pages/index.tsx b/pages/index.tsx index 2989b85f3..d1905e1d8 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,5 @@ import Head from 'next/head'; import styles from '@/src/styles/Home.module.scss'; -import { getArticles } from '@/src/lib/api/articleApi'; export default function Home() { return ( diff --git a/src/styles/reset.css b/src/styles/reset.css new file mode 100644 index 000000000..8a4c82475 --- /dev/null +++ b/src/styles/reset.css @@ -0,0 +1,72 @@ +/* box-sizing 규칙을 명시합니다. */ +*, +*::before, +*::after { + box-sizing: border-box; +} + +/* 폰트 크기의 팽창을 방지합니다. */ +html { + -moz-text-size-adjust: none; + -webkit-text-size-adjust: none; + text-size-adjust: none; +} + +/* 기본 여백을 제거하여 작성된 CSS를 더 잘 제어할 수 있습니다. */ +* { + margin: 0; + text-decoration: none; +} + +/* list를 role값으로 갖는 ul, ol 요소의 기본 목록 스타일을 제거합니다. */ +ul[role='list'], +ol[role='list'] { + list-style: none; +} + +/* 핵심 body의 기본값을 설정합니다. */ +body { + min-height: 100vh; + line-height: 1.5; +} + +/* 제목 요소와 상호작용하는 요소에 대해 line-height를 더 짧게 설정합니다. */ +h1, +h2, +h3, +h4, +button, +input, +label { + line-height: 1.1; +} + +/* 이미지 관련 작업을 더 쉽게 합니다. */ +img, +picture { + max-width: 100%; + display: block; +} + +/* 행 속성이 없는 textarea가 너무 작지 않도록 합니다. */ +textarea:not([rows]) { + min-height: 10em; +} + +/* 고정된 모든 항목에는 여분의 스크롤 여백이 있어야 합니다. */ +:target { + scroll-margin-block: 5ex; +} + +/* + Avoid text overflows +*/ +p, +h1, +h2, +h3, +h4, +h5, +h6 { + overflow-wrap: break-word; +} From b7d054c20975df539538c1975d9e18059962c4cc Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Tue, 13 Aug 2024 18:44:46 +0900 Subject: [PATCH 03/25] =?UTF-8?q?feature:=20tsconfig=20paths=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/_app.tsx | 4 ++-- pages/boards/index.tsx | 10 +++++----- pages/index.tsx | 2 +- .../board/AllArticlesBoard/AllArticlesBoard.tsx | 10 +++++----- .../board/ArticleSearchBar/ArticleSearchBar.tsx | 6 +++--- .../board/BasicArticleCard/BasicArticleCard.tsx | 4 ++-- .../board/BestArticleCard/BestArticleCard.tsx | 6 +++--- .../board/BestArticlesSection/BestArticlesSection.tsx | 8 ++++---- src/components/layout/BasicLayout/BasicLayout.tsx | 2 +- src/components/layout/Header/Header.tsx | 4 ++-- src/core/ui/SectionTitle/SectionTitle.tsx | 2 +- src/core/ui/UImage/UImage.tsx | 4 ++-- src/core/ui/dropdowns/UDropdown/UDropdown.tsx | 4 ++-- src/core/ui/inputs/UInput/UInput.tsx | 2 +- src/core/ui/logos/HeaderLogo/HeaderLogo.tsx | 2 +- src/lib/api/articleApi.ts | 5 +---- src/{types => type}/ArticleTypes.ts | 0 src/{types => type}/BasicTypes.ts | 0 tsconfig.json | 2 +- 19 files changed, 37 insertions(+), 40 deletions(-) rename src/{types => type}/ArticleTypes.ts (100%) rename src/{types => type}/BasicTypes.ts (100%) diff --git a/pages/_app.tsx b/pages/_app.tsx index 8c07f1c22..5ba52e46f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,7 +1,7 @@ import 'normalize.css'; -import '@/src/styles/reset.css'; +import '@styles/reset.css'; -import Header from '@/src/components/layout/Header/Header'; +import Header from '@components/layout/Header/Header'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import type { AppProps } from 'next/app'; diff --git a/pages/boards/index.tsx b/pages/boards/index.tsx index 0bd26fbf7..cc3ed0a1d 100644 --- a/pages/boards/index.tsx +++ b/pages/boards/index.tsx @@ -1,8 +1,8 @@ -import AllArticlesBoard from '@/src/components/board/AllArticlesBoard/AllArticlesBoard'; -import BestArticlesSection from '@/src/components/board/BestArticlesSection/BestArticlesSection'; -import BasicLayout from '@/src/components/layout/BasicLayout/BasicLayout'; -import { getArticles } from '@/src/lib/api/articleApi'; -import { Article } from '@/src/types/ArticleTypes'; +import AllArticlesBoard from '@components/board/AllArticlesBoard/AllArticlesBoard'; +import BestArticlesSection from '@components/board/BestArticlesSection/BestArticlesSection'; +import BasicLayout from '@components/layout/BasicLayout/BasicLayout'; +import { getArticles } from '@lib/api/articleApi'; +import { Article } from '@type/ArticleTypes'; import { error } from 'console'; import { GetServerSideProps } from 'next'; diff --git a/pages/index.tsx b/pages/index.tsx index d1905e1d8..50811b443 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,5 +1,5 @@ import Head from 'next/head'; -import styles from '@/src/styles/Home.module.scss'; +import styles from '@styles/Home.module.scss'; export default function Home() { return ( diff --git a/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx b/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx index dc740325a..95bfed0f9 100644 --- a/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx +++ b/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx @@ -1,13 +1,13 @@ import styles from './AllArticlesBoard.module.scss'; -import SectionTitle from '@/src/core/ui/SectionTitle/SectionTitle'; -import UButton from '@/src/core/ui/buttons/UButton/UButton'; +import SectionTitle from '@core/ui/SectionTitle/SectionTitle'; +import UButton from '@core/ui/buttons/UButton/UButton'; import ArticleSearchBar from '../ArticleSearchBar/ArticleSearchBar'; -import UDropdown from '@/src/core/ui/dropdowns/UDropdown/UDropdown'; +import UDropdown from '@core/ui/dropdowns/UDropdown/UDropdown'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; -import { Article, ArticleOrderBy } from '@/src/types/ArticleTypes'; -import { getArticles } from '@/src/lib/api/articleApi'; +import { Article, ArticleOrderBy } from '@type/ArticleTypes'; +import { getArticles } from '@lib/api/articleApi'; import BasicArticleCard from '../BasicArticleCard/BasicArticleCard'; type AllArticlesBoardProps = { initArticles: Article[] }; diff --git a/src/components/board/ArticleSearchBar/ArticleSearchBar.tsx b/src/components/board/ArticleSearchBar/ArticleSearchBar.tsx index e40cc6884..5005580f4 100644 --- a/src/components/board/ArticleSearchBar/ArticleSearchBar.tsx +++ b/src/components/board/ArticleSearchBar/ArticleSearchBar.tsx @@ -1,10 +1,10 @@ import styles from './ArticleSearchBar.module.scss'; -import UInput from '@/src/core/ui/inputs/UInput/UInput'; -import IconSearch from '@/src/assets/images/icons/ic_search.svg'; +import UInput from '@core/ui/inputs/UInput/UInput'; +import IconSearch from '@assets/images/icons/ic_search.svg'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; -import { BasicType } from '@/src/types/BasicTypes'; +import { BasicType } from '@type/BasicTypes'; import Image from 'next/image'; type ArticleSearchBarProps = Pick; diff --git a/src/components/board/BasicArticleCard/BasicArticleCard.tsx b/src/components/board/BasicArticleCard/BasicArticleCard.tsx index 53a17423b..845507627 100644 --- a/src/components/board/BasicArticleCard/BasicArticleCard.tsx +++ b/src/components/board/BasicArticleCard/BasicArticleCard.tsx @@ -2,8 +2,8 @@ import styles from './BasicArticleCard.module.scss'; import Link from 'next/link'; import Image from 'next/image'; -import { formatUpdatedAt } from '@/src/lib/utils/DateUtil'; -import { BasicType } from '@/src/types/BasicTypes'; +import { formatUpdatedAt } from '@lib/utils/DateUtil'; +import { BasicType } from '@type/BasicTypes'; type BasicArticleCardProps = Pick; diff --git a/src/components/board/BestArticleCard/BestArticleCard.tsx b/src/components/board/BestArticleCard/BestArticleCard.tsx index 77d71fc73..d4f632697 100644 --- a/src/components/board/BestArticleCard/BestArticleCard.tsx +++ b/src/components/board/BestArticleCard/BestArticleCard.tsx @@ -1,9 +1,9 @@ import styles from './BestArticleCard.module.scss'; import Image from 'next/image'; -import icBest from '@/src/assets/images/icons/ic_medal.svg'; -import { formatUpdatedAt } from '@/src/lib/utils/DateUtil'; -import { Article } from '@/src/types/ArticleTypes'; +import icBest from '@assets/images/icons/ic_medal.svg'; +import { formatUpdatedAt } from '@lib/utils/DateUtil'; +import { Article } from '@type/ArticleTypes'; type BestArticleCardProps = { article: Article; diff --git a/src/components/board/BestArticlesSection/BestArticlesSection.tsx b/src/components/board/BestArticlesSection/BestArticlesSection.tsx index f55fb9c45..bc083cd94 100644 --- a/src/components/board/BestArticlesSection/BestArticlesSection.tsx +++ b/src/components/board/BestArticlesSection/BestArticlesSection.tsx @@ -1,11 +1,11 @@ import styles from './BestArticlesSection.module.scss'; import BestArticleCard from '../BestArticleCard/BestArticleCard'; -import useViewport from '@/src/lib/hooks/useViewport'; +import useViewport from '@lib/hooks/useViewport'; import { useEffect, useState } from 'react'; -import { Article } from '@/src/types/ArticleTypes'; -import { getArticles } from '@/src/lib/api/articleApi'; -import SectionTitle from '@/src/core/ui/SectionTitle/SectionTitle'; +import { Article } from '@type/ArticleTypes'; +import { getArticles } from '@lib/api/articleApi'; +import SectionTitle from '@core/ui/SectionTitle/SectionTitle'; const getPageSize = (width: number) => { if (width < 768) { diff --git a/src/components/layout/BasicLayout/BasicLayout.tsx b/src/components/layout/BasicLayout/BasicLayout.tsx index 7ffa0c9fc..1d31d175f 100644 --- a/src/components/layout/BasicLayout/BasicLayout.tsx +++ b/src/components/layout/BasicLayout/BasicLayout.tsx @@ -1,4 +1,4 @@ -import { BasicType } from '@/src/types/BasicTypes'; +import { BasicType } from '@type/BasicTypes'; import styles from './BasicLayout.module.scss'; type BasicLayout = Partial>; diff --git a/src/components/layout/Header/Header.tsx b/src/components/layout/Header/Header.tsx index 89cdafff3..d647e7830 100644 --- a/src/components/layout/Header/Header.tsx +++ b/src/components/layout/Header/Header.tsx @@ -4,8 +4,8 @@ import { useRouter } from 'next/router'; import Link from 'next/link'; import clsx from 'clsx'; import Image from 'next/image'; -import imgPandaMarketLogo from '@/src/assets/images/logo/logo.svg'; -import imgProfile from '@/src/assets/images/icons/ic_profile.svg'; +import imgPandaMarketLogo from '@assets/images/logo/logo.svg'; +import imgProfile from '@assets/images/icons/ic_profile.svg'; const Header = ({}) => { const { pathname } = useRouter(); diff --git a/src/core/ui/SectionTitle/SectionTitle.tsx b/src/core/ui/SectionTitle/SectionTitle.tsx index f95512c5e..63d32e48c 100644 --- a/src/core/ui/SectionTitle/SectionTitle.tsx +++ b/src/core/ui/SectionTitle/SectionTitle.tsx @@ -1,4 +1,4 @@ -import { BasicType } from '@/src/types/BasicTypes'; +import { BasicType } from '@type/BasicTypes'; import styles from './SectionTitle.module.scss'; type SectionTitleProps = Pick; diff --git a/src/core/ui/UImage/UImage.tsx b/src/core/ui/UImage/UImage.tsx index fe70f90c6..fed313d46 100644 --- a/src/core/ui/UImage/UImage.tsx +++ b/src/core/ui/UImage/UImage.tsx @@ -1,6 +1,6 @@ -import { OptionalPick } from '@/src/lib/utils/OptionalPick'; +import { OptionalPick } from '@lib/utils/OptionalPick'; import styles from './UImage.module.scss'; -import { BasicType } from '@/src/types/BasicTypes'; +import { BasicType } from '@type/BasicTypes'; import clsx from 'clsx'; type UImageProps = OptionalPick< diff --git a/src/core/ui/dropdowns/UDropdown/UDropdown.tsx b/src/core/ui/dropdowns/UDropdown/UDropdown.tsx index d8b96bba6..97caced46 100644 --- a/src/core/ui/dropdowns/UDropdown/UDropdown.tsx +++ b/src/core/ui/dropdowns/UDropdown/UDropdown.tsx @@ -1,8 +1,8 @@ import styles from './UDropdown.module.scss'; import { useState } from 'react'; -import { BasicType } from '@/src/types/BasicTypes'; -import IconSort from '@/src/assets/images/icons/ic_sort.svg'; +import { BasicType } from '@type/BasicTypes'; +import IconSort from '@assets/images/icons/ic_sort.svg'; import Image from 'next/image'; type UDropdownProps = Pick; diff --git a/src/core/ui/inputs/UInput/UInput.tsx b/src/core/ui/inputs/UInput/UInput.tsx index 38ab58d6f..58704857f 100644 --- a/src/core/ui/inputs/UInput/UInput.tsx +++ b/src/core/ui/inputs/UInput/UInput.tsx @@ -1,6 +1,6 @@ import styles from './UInput.module.scss'; -import { BasicType } from '@/src/types/BasicTypes'; +import { BasicType } from '@type/BasicTypes'; import clsx from 'clsx'; type UInputProps = Partial< diff --git a/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx b/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx index 0c8ed07e0..7e24070fd 100644 --- a/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx +++ b/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx @@ -1,6 +1,6 @@ import Link from 'next/link'; import { UImage } from '../../UImage/UImage'; -import Logo from '@/src/assets/images/logo/logo.svg'; +import Logo from '@assets/images/logo/logo.svg'; import styles from './HeaderLogo.module.scss'; diff --git a/src/lib/api/articleApi.ts b/src/lib/api/articleApi.ts index 7d23491e2..a978b3be3 100644 --- a/src/lib/api/articleApi.ts +++ b/src/lib/api/articleApi.ts @@ -1,7 +1,4 @@ -import { - ArticleListRequest, - ArticleListResponse, -} from '@/src/types/ArticleTypes'; +import { ArticleListRequest, ArticleListResponse } from '@type/ArticleTypes'; import axiosInstance from './axios'; export const getArticles = async ({ ...params }: ArticleListRequest) => { diff --git a/src/types/ArticleTypes.ts b/src/type/ArticleTypes.ts similarity index 100% rename from src/types/ArticleTypes.ts rename to src/type/ArticleTypes.ts diff --git a/src/types/BasicTypes.ts b/src/type/BasicTypes.ts similarity index 100% rename from src/types/BasicTypes.ts rename to src/type/BasicTypes.ts diff --git a/tsconfig.json b/tsconfig.json index 670224f3e..c74222132 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,7 +14,7 @@ "jsx": "preserve", "incremental": true, "paths": { - "@/*": ["./*"] + "@*": ["./src/*"] } }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], From 61f3e81f85c59fb93ed6b28561b6c9ab7aab0545 Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Tue, 13 Aug 2024 19:52:09 +0900 Subject: [PATCH 04/25] =?UTF-8?q?fix:=20BestArticleCard=20=EC=8B=9C?= =?UTF-8?q?=EB=A7=A8=ED=8B=B1=20=ED=83=9C=EA=B7=B8=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../BestArticleCard.module.scss | 46 ++++++++---- .../board/BestArticleCard/BestArticleCard.tsx | 73 ++++++++++--------- 2 files changed, 69 insertions(+), 50 deletions(-) diff --git a/src/components/board/BestArticleCard/BestArticleCard.module.scss b/src/components/board/BestArticleCard/BestArticleCard.module.scss index ab8594055..f5c80bb7a 100644 --- a/src/components/board/BestArticleCard/BestArticleCard.module.scss +++ b/src/components/board/BestArticleCard/BestArticleCard.module.scss @@ -6,6 +6,7 @@ left: 12.5rem; line-height: 1.5rem; } + .title { position: absolute; top: 0rem; @@ -15,6 +16,7 @@ display: inline-block; width: 16rem; } + .articleImage { position: absolute; top: calc(50% - 22.29px); @@ -23,6 +25,7 @@ height: 2.788rem; object-fit: cover; } + .imageWrapper { position: absolute; top: 0rem; @@ -35,7 +38,8 @@ height: 4.5rem; overflow: hidden; } -.group { + +.content { position: absolute; top: 2.875rem; left: 0rem; @@ -44,6 +48,7 @@ font-size: 1.25rem; color: #1f2937; } + .listCommunityicMedalChild { position: absolute; height: 43.75%; @@ -55,10 +60,9 @@ border-radius: 2.5px; background-color: #fff; } -.vectorIcon { - position: absolute; - height: 93.13%; - width: 77.5%; + +.bestIcon { + // position: absolute; top: 3.85%; right: 11.22%; bottom: 3.03%; @@ -67,6 +71,7 @@ overflow: hidden; max-height: 100%; } + .listCommunityicMedal { width: 1rem; position: relative; @@ -74,11 +79,13 @@ overflow: hidden; flex-shrink: 0; } -.best { - position: relative; + +.bestText { + // position: relative; line-height: 1.625rem; font-weight: 600; } + .listCommunityicMedalParent { display: flex; flex-direction: row; @@ -86,31 +93,39 @@ justify-content: center; gap: 0.25rem; } -.imgBadge { + +.bestBadge { position: absolute; - top: 0rem; + top: -2.825rem; left: 0rem; border-radius: 0px 0px 16px 16px; background-color: #3692ff; width: 6.375rem; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; justify-content: center; padding: 0.125rem 1.5rem; - box-sizing: border-box; font-size: 1rem; color: #fff; } -.div2 { + +.author { position: relative; line-height: 1.5rem; } + +.likeCount { + position: relative; + line-height: 1.5rem; +} + .icHeart { width: 1rem; position: relative; height: 1rem; } + .icHeartParent { display: flex; flex-direction: row; @@ -119,7 +134,8 @@ gap: 0.25rem; color: #6b7280; } -.container { + +.footer { position: absolute; top: 8.5rem; left: 0rem; @@ -130,11 +146,13 @@ gap: 0.5rem; color: #4b5563; } -.parent { + +.header { width: 21rem; position: relative; height: 9.563rem; } + .card { width: 24rem; position: relative; diff --git a/src/components/board/BestArticleCard/BestArticleCard.tsx b/src/components/board/BestArticleCard/BestArticleCard.tsx index d4f632697..d2503da0f 100644 --- a/src/components/board/BestArticleCard/BestArticleCard.tsx +++ b/src/components/board/BestArticleCard/BestArticleCard.tsx @@ -11,45 +11,46 @@ type BestArticleCardProps = { const BestArticleCard = ({ article }: BestArticleCardProps) => { return ( -
-
-
{formatUpdatedAt(article.createdAt)}
-
-
{article.title}
-
- 게시물 사진 -
-
-
-
-
-
- 베스트 아이콘 -
-
Best
-
-
-
-
{article.writer.nickname}
-
-
-
- {article.likeCount < 9999 ? article.likeCount : '9999+'} -
+
+
+ +
+
+

{article.title}

+
+ {`${article.title} +
+ +
+
+
+ {article.writer.nickname} +
+
+
+
+ {article.likeCount < 9999 ? article.likeCount : '9999+'}
-
+
); }; From 27c933eae8cf728431f61e48342e4634e72a662f Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Wed, 14 Aug 2024 23:34:11 +0900 Subject: [PATCH 05/25] =?UTF-8?q?fix:=20UI=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=84=A4=EC=9D=B4=EB=B0=8D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../board/AllArticlesBoard/AllArticlesBoard.tsx | 8 ++++---- .../board/ArticleSearchBar/ArticleSearchBar.tsx | 4 ++-- .../UImage.module.scss => UIImage/UIImage.module.scss} | 0 src/core/ui/{UImage/UImage.tsx => UIImage/UIImage.tsx} | 0 .../UIButton.module.scss} | 0 .../{UButton/UButton.tsx => UIButton/UIButton.tsx} | 10 +++++----- .../UIDropdown.module.scss} | 0 .../UDropdown.tsx => UIDropdown/UIDropdown.tsx} | 8 ++++---- .../UInput.module.scss => UIInput/UIInput.module.scss} | 0 .../inputs/{UInput/UInput.tsx => UIInput/UIInput.tsx} | 8 ++++---- 10 files changed, 19 insertions(+), 19 deletions(-) rename src/core/ui/{UImage/UImage.module.scss => UIImage/UIImage.module.scss} (100%) rename src/core/ui/{UImage/UImage.tsx => UIImage/UIImage.tsx} (100%) rename src/core/ui/buttons/{UButton/UButton.module.scss => UIButton/UIButton.module.scss} (100%) rename src/core/ui/buttons/{UButton/UButton.tsx => UIButton/UIButton.tsx} (89%) rename src/core/ui/dropdowns/{UDropdown/UDropdown.module.scss => UIDropdown/UIDropdown.module.scss} (100%) rename src/core/ui/dropdowns/{UDropdown/UDropdown.tsx => UIDropdown/UIDropdown.tsx} (84%) rename src/core/ui/inputs/{UInput/UInput.module.scss => UIInput/UIInput.module.scss} (100%) rename src/core/ui/inputs/{UInput/UInput.tsx => UIInput/UIInput.tsx} (74%) diff --git a/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx b/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx index 95bfed0f9..b3fefc836 100644 --- a/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx +++ b/src/components/board/AllArticlesBoard/AllArticlesBoard.tsx @@ -1,9 +1,9 @@ import styles from './AllArticlesBoard.module.scss'; import SectionTitle from '@core/ui/SectionTitle/SectionTitle'; -import UButton from '@core/ui/buttons/UButton/UButton'; +import UIButton from '@core/ui/buttons/UIButton/UIButton'; import ArticleSearchBar from '../ArticleSearchBar/ArticleSearchBar'; -import UDropdown from '@core/ui/dropdowns/UDropdown/UDropdown'; +import UIDropdown from '@core/ui/dropdowns/UIDropdown/UIDropdown'; import { useRouter } from 'next/router'; import { useEffect, useState } from 'react'; import { Article, ArticleOrderBy } from '@type/ArticleTypes'; @@ -53,11 +53,11 @@ const AllArticlesBoard = ({ ...props }: AllArticlesBoardProps) => { <>
- {}} /> + {}} />
- { <>
검색 아이콘 - ['type']; type: 'box' | 'floating' | 'round'; className?: string; @@ -12,7 +12,7 @@ type UButtonProps = { isSmallButton?: boolean; }; -const UButton = ({ +const UIButton = ({ buttonTagType, type, className = '', @@ -20,7 +20,7 @@ const UButton = ({ children, isDisalbed = false, isSmallButton = false, -}: UButtonProps) => { +}: UIButtonProps) => { return ( <> + + )} +
+ + ); +}; + +export default UIImageInput; diff --git a/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx b/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx index 7e24070fd..2fb0e23cb 100644 --- a/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx +++ b/src/core/ui/logos/HeaderLogo/HeaderLogo.tsx @@ -1,5 +1,5 @@ import Link from 'next/link'; -import { UImage } from '../../UImage/UImage'; +import { UImage } from '../../UIImage/UIImage'; import Logo from '@assets/images/logo/logo.svg'; import styles from './HeaderLogo.module.scss'; diff --git a/src/type/BasicTypes.ts b/src/type/BasicTypes.ts index b93386a58..b241b41c1 100644 --- a/src/type/BasicTypes.ts +++ b/src/type/BasicTypes.ts @@ -23,10 +23,13 @@ export type BasicType = { placeholder: string; options: { key: string; value: string }[]; sortOptions: { key: ArticleOrderBy; label: string }; + file: File; + initialPreview: string; // handler onClick: (e: React.MouseEvent) => void; onChange: (e: React.ChangeEvent) => void; + onChangeFile: (name: string, nextValue: File) => void; onKeyDown: (e: React.KeyboardEvent) => void; onSortSelection: (key: string) => void; onSearch: (keyword: string) => void; From 2ec8f120f5b07e70f2e2c15de9645178e07849c1 Mon Sep 17 00:00:00 2001 From: "wonsic3686@gmail.com" Date: Sun, 18 Aug 2024 17:53:16 +0900 Subject: [PATCH 07/25] =?UTF-8?q?feat:=20addboard=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20UI=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/addboard/index.tsx | 5 +- .../AddBoardForm/AddBoardForm.module.scss | 22 +++++++ .../board/AddBoardForm/AddBoardForm.tsx | 54 +++++++++++++++ src/core/ui/UIImage/UIImage.tsx | 9 ++- src/core/ui/buttons/UIButton/UIButton.tsx | 6 +- .../UIImageInput/UIImageInput.module.scss | 6 +- .../ui/inputs/UIImageInput/UIImageInput.tsx | 66 ++++++++++++------- .../ui/inputs/UIInput/UIInput.module.scss | 7 +- .../UIInputLabel/UIInputLabel.module.scss | 6 ++ .../ui/inputs/UIInputLabel/UIInputLabel.tsx | 19 ++++++ .../inputs/UITextarea/UITextarea.module.scss | 20 ++++++ src/core/ui/inputs/UITextarea/UITextarea.tsx | 31 +++++++++ src/type/BasicTypes.ts | 8 ++- 13 files changed, 220 insertions(+), 39 deletions(-) create mode 100644 src/core/ui/inputs/UIInputLabel/UIInputLabel.module.scss create mode 100644 src/core/ui/inputs/UIInputLabel/UIInputLabel.tsx create mode 100644 src/core/ui/inputs/UITextarea/UITextarea.module.scss create mode 100644 src/core/ui/inputs/UITextarea/UITextarea.tsx diff --git a/pages/addboard/index.tsx b/pages/addboard/index.tsx index 4afd43647..307f01c68 100644 --- a/pages/addboard/index.tsx +++ b/pages/addboard/index.tsx @@ -1,3 +1,4 @@ +import AddBoardForm from '@components/board/AddBoardForm/AddBoardForm'; import BasicLayout from '@components/layout/BasicLayout/BasicLayout'; type AddBoardPageProps = {}; @@ -5,7 +6,9 @@ type AddBoardPageProps = {}; const AddBoardPage = ({}: AddBoardPageProps) => { return ( <> - + + + ); }; diff --git a/src/components/board/AddBoardForm/AddBoardForm.module.scss b/src/components/board/AddBoardForm/AddBoardForm.module.scss index e69de29bb..0ebb9072c 100644 --- a/src/components/board/AddBoardForm/AddBoardForm.module.scss +++ b/src/components/board/AddBoardForm/AddBoardForm.module.scss @@ -0,0 +1,22 @@ +@import '/src/styles/global.scss'; + +.form { + width: 100%; + + &__header { + width: 100%; + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin: 0 0 2rem; + } + + &__input { + display: flex; + width: 100%; + flex-direction: column; + margin: 0 0 1.5rem; + gap: 0.5rem; + } +} diff --git a/src/components/board/AddBoardForm/AddBoardForm.tsx b/src/components/board/AddBoardForm/AddBoardForm.tsx index e69de29bb..ed2e83f40 100644 --- a/src/components/board/AddBoardForm/AddBoardForm.tsx +++ b/src/components/board/AddBoardForm/AddBoardForm.tsx @@ -0,0 +1,54 @@ +import styles from './AddBoardForm.module.scss'; + +import SectionTitle from '@core/ui/SectionTitle/SectionTitle'; +import UIButton from '@core/ui/buttons/UIButton/UIButton'; +import UIInputLabel from '@core/ui/inputs/UIInputLabel/UIInputLabel'; +import UIInput from '@core/ui/inputs/UIInput/UIInput'; +import UITextarea from '@core/ui/inputs/UITextarea/UITextarea'; +import UIImageInput from '@core/ui/inputs/UIImageInput/UIImageInput'; + +type AddBoardFormProps = {}; + +const AddBoardForm = ({ ...props }: AddBoardFormProps) => { + const handleSubmit = () => {}; + + return ( + <> +
+
+ + +
+
+ + {}} + onChange={() => {}} + /> +
+
+ + {}} + onTextareaChange={() => {}} + /> +
+
+ + {}} /> +
+
+ + ); +}; + +export default AddBoardForm; diff --git a/src/core/ui/UIImage/UIImage.tsx b/src/core/ui/UIImage/UIImage.tsx index fed313d46..50f66fc4c 100644 --- a/src/core/ui/UIImage/UIImage.tsx +++ b/src/core/ui/UIImage/UIImage.tsx @@ -1,15 +1,16 @@ +import styles from './UIImage.module.scss'; + import { OptionalPick } from '@lib/utils/OptionalPick'; -import styles from './UImage.module.scss'; import { BasicType } from '@type/BasicTypes'; import clsx from 'clsx'; -type UImageProps = OptionalPick< +type UIImageProps = OptionalPick< BasicType, 'src', 'alt' | 'className' | 'isRound' >; -export const UImage = ({ ...props }: UImageProps) => { +const UIImage = ({ ...props }: UIImageProps) => { return ( <> { ); }; + +export default UIImage; diff --git a/src/core/ui/buttons/UIButton/UIButton.tsx b/src/core/ui/buttons/UIButton/UIButton.tsx index fbbbf37ff..9d898d1fd 100644 --- a/src/core/ui/buttons/UIButton/UIButton.tsx +++ b/src/core/ui/buttons/UIButton/UIButton.tsx @@ -7,7 +7,7 @@ type UIButtonProps = { className?: string; handleClick: (e: React.MouseEvent) => void; children: React.ReactNode; - isDisalbed?: boolean; + isDisabled?: boolean; isLightTheme?: boolean; isSmallButton?: boolean; }; @@ -18,7 +18,7 @@ const UIButton = ({ className = '', handleClick, children, - isDisalbed = false, + isDisabled = false, isSmallButton = false, }: UIButtonProps) => { return ( @@ -37,7 +37,7 @@ const UIButton = ({ className )} onClick={handleClick} - disabled={isDisalbed} + disabled={isDisabled} type={buttonTagType} > {children} diff --git a/src/core/ui/inputs/UIImageInput/UIImageInput.module.scss b/src/core/ui/inputs/UIImageInput/UIImageInput.module.scss index 05688cbbe..598950ee3 100644 --- a/src/core/ui/inputs/UIImageInput/UIImageInput.module.scss +++ b/src/core/ui/inputs/UIImageInput/UIImageInput.module.scss @@ -1,3 +1,5 @@ +@import '/src/styles/global.scss'; + .wrapper-btn-input-image-file { display: flex; justify-content: start; @@ -9,7 +11,7 @@ height: 168px; margin: 0 8px 0 0; border-radius: 12px; - background-color: var(--gray-100); + background-color: $gray-100; display: inline-flex; justify-content: center; align-items: center; @@ -36,7 +38,7 @@ } .text-btn-input-image-file { - color: var(--gray-400); + color: $gray-400; font-size: 16px; font-style: normal; font-weight: 400; diff --git a/src/core/ui/inputs/UIImageInput/UIImageInput.tsx b/src/core/ui/inputs/UIImageInput/UIImageInput.tsx index a5483b55b..c39957bc9 100644 --- a/src/core/ui/inputs/UIImageInput/UIImageInput.tsx +++ b/src/core/ui/inputs/UIImageInput/UIImageInput.tsx @@ -1,10 +1,13 @@ import styles from './UIImageInput.module.scss'; -import clsx from 'clsx'; import { BasicType } from '@type/BasicTypes'; import { useEffect, useRef, useState } from 'react'; -import imgDefault from '@assets/images/image/img_default.png'; import { OptionalPick } from '@lib/utils/OptionalPick'; +import IconX from '@assets/images/icons/ic_x.svg'; +import IconUnion from '@assets/images/icons/ic_plus.svg'; +import UIImage from '@core/ui/UIImage/UIImage'; +import Image from 'next/image'; +import clsx from 'clsx'; type UIImageInputProps = OptionalPick< BasicType, @@ -14,11 +17,11 @@ type UIImageInputProps = OptionalPick< const UIImageInput = ({ ...props }: UIImageInputProps) => { const [preview, setPreview] = useState(props.initialPreview); - const inputRef = useRef(); + const inputRef = useRef(null); const handleChange = (e: React.ChangeEvent) => { - const nextValue: File = e.target.files[0]; - props.onChangeFile(props.name || '', nextValue); + const target = e.target as HTMLInputElement; + if (target.files) props.onChangeFile(props.name || '', target.files[0]); }; const handleClearClick = () => { @@ -26,35 +29,46 @@ const UIImageInput = ({ ...props }: UIImageInputProps) => { if (!inputNode) return; inputNode.value = ''; - props.onChangeFile(name, null); + props.onChangeFile(props.name || '', null); }; useEffect(() => { - if (!value) return; - const nextPreview = URL.createObjectURL(value); + if (!props.file) return; + const nextPreview = URL.createObjectURL(props.file); setPreview(nextPreview); return () => { - setPreview(initialPreview); + setPreview(props.initialPreview); URL.revokeObjectURL(nextPreview); }; - }, [value, initialPreview]); + }, [props.file, props.initialPreview]); return ( <> -
+
{/* 추가 버튼 */} -