Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[김지윤] Sprint10 #650

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
93a0e93
chore: 머지 후 브랜치 삭제 github action 추가
withyj-codeit Sep 3, 2023
b2e37bd
reset
hanseulhee Oct 10, 2023
6f8bbb0
Merge branch 'codeit-bootcamp-frontend:main' into main
hanseulhee Oct 10, 2023
e11e25f
fix: 머지 후 브랜치 삭제 github action 수정
hanseulhee Oct 10, 2023
212e864
env: workflows 폴더로 이동
hanseulhee Oct 10, 2023
4dc5dd0
Merge pull request #237 from hanseulhee/fix-github-actions
withyj-codeit Nov 6, 2023
d4ef766
Feat: 게시글 상세 페이지 라우팅
wayandway Jun 7, 2024
62264ef
Merge branch 'codeit-bootcamp-frontend:main' into Next.js-김지윤-sprint10
wayandway Jun 7, 2024
39bbe6f
Fix: _colors.scss를 사용한 색상 적용
wayandway Jun 7, 2024
8b8561b
Fix: useFetchData 커스텀훅에서 파라미터로 url값만 받도록 수정
wayandway Jun 7, 2024
53b529b
Fix: 색상 코드 수정
wayandway Jun 7, 2024
34bb0f0
Feat: 게시판 상세페이지 - 게시글 섹션 추가
wayandway Jun 7, 2024
f4168b6
Feat: Comment 인터페이스 추가
wayandway Jun 7, 2024
76bffb7
Feat: 댓글 리스트 섹션 추가
wayandway Jun 7, 2024
55b315c
Feat: 댓글 등록 섹션 추가
wayandway Jun 7, 2024
c8ce65a
Feat: 게시글 상세페이지 - 하위 컴포넌트 렌더링
wayandway Jun 7, 2024
2501aef
Feat: 게시글 작성 페이지 이동 코드 추가
wayandway Jun 7, 2024
0156895
Fix: 컴포넌트 이름 수정
wayandway Jun 7, 2024
84019f0
Feat: 게시글 작성 페이지 추가
wayandway Jun 7, 2024
7be262b
Feat: 목록으로 돌아가기 버튼 & 댓글이 없을 때의 이미지 추가
wayandway Jun 7, 2024
2daaa19
Chore: 모든 종류의 도메인 임시허용
wayandway Jun 7, 2024
f9d91dc
Merge branch 'Next.js-김지윤-sprint10' of https://github.com/wayandway/6…
wayandway Jun 7, 2024
de37216
update README.md
wayandway Jun 7, 2024
d05224c
Feat: 검색창 디바운싱 적용
wayandway Jun 8, 2024
74d5960
Fix: 검색 키워드가 없을 때 검색창도 보이도록 수정
wayandway Jun 8, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

by NextJS & TypeScript

<br/>

## 프로젝트 구조 (`src/`)

- `components/` : 전역으로 쓰이는 UI 컴포넌트
Expand Down
5 changes: 4 additions & 1 deletion next.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,10 @@
const nextConfig = {
reactStrictMode: true,
images: {
domains: ["sprint-fe-project.s3.ap-northeast-2.amazonaws.com"],
domains: [
"sprint-fe-project.s3.ap-northeast-2.amazonaws.com",
"example.com",
],
},
};

Expand Down
10 changes: 10 additions & 0 deletions public/svgs/comment-empty.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions public/svgs/kebab.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 4 additions & 0 deletions public/svgs/plus.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 4 additions & 3 deletions src/components/Button/Button.module.scss
Original file line number Diff line number Diff line change
@@ -1,16 +1,17 @@
@import "@/src/styles/_mixin";
@import "@/src/styles/_colors";

.button {
@include font-style(16px, 600, var(--white));
@include font-style(16px, 600, $white);
padding: 12px 24px;
background-color: var(--blue);
background-color: $blue;
border-radius: 5px;
width: max-content;
cursor: pointer;

transition: background-color 0.3s ease;

&:hover {
background-color: #0056b3;
background-color: $dark-blue;
}
}
3 changes: 2 additions & 1 deletion src/components/DropDown/DropDown.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "@/src/styles/_mixin";
@import "@/src/styles/_colors";

.container {
@include drop-down-box();
Expand Down Expand Up @@ -32,7 +33,7 @@
.dropDownItem {
padding: 6px 0;
&:hover {
color: var(--blue);
color: $blue;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

오! 점점 scss를 잘 활용하고 계시는데요 👍

}
}
}
Expand Down
9 changes: 5 additions & 4 deletions src/components/Header/Header.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "@/src/styles/_mixin";
@import "@/src/styles/_colors";

.container {
position: fixed;
Expand All @@ -10,8 +11,8 @@
justify-content: space-between;
align-items: center;
padding: 0 200px;
background-color: var(--white);
border-bottom: 1px solid var(--grey-200);
background-color: $white;
border-bottom: 1px solid $grey-200;
z-index: 999;
}

Expand All @@ -25,7 +26,7 @@
align-items: center;

.navContainer {
@include font-style(18px, 700, var(--grey-600));
@include font-style(18px, 700, $grey-600);
display: flex;
gap: 24px;
width: max-content;
Expand All @@ -38,7 +39,7 @@
gap: 16px;

.navContainer {
@include font-style(16px, 700, var(--grey-600));
@include font-style(16px, 700, $grey-600);
gap: 8px;
}
}
Expand Down
4 changes: 2 additions & 2 deletions src/components/Header/Header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@ export default function Header() {
return {
color:
typeof window !== "undefined" && window.location.pathname === path
? "var(--blue)"
: "var(--grey-600)",
? "#3692ff"
: "#4b5563",
};
};

Expand Down
7 changes: 4 additions & 3 deletions src/components/SearchBar/SearchBar.module.scss
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
@import "@/src/styles/_mixin";
@import "@/src/styles/_colors";

.container {
display: flex;
Expand All @@ -7,10 +8,10 @@
}

.searchBar {
@include font-style(16px, 400, var(--grey-400));
@include font-style(16px, 400, $grey-400);
flex-grow: 1;
height: 42px;
background-color: var(--grey-100);
background-color: $grey-100;
padding: 9px 16px 9px 44px;
border-radius: 12px;

Expand All @@ -19,7 +20,7 @@
}

&::placeholder {
color: var(--gray-200);
color: $grey-400;
font-size: 16px;
}
}
Expand Down
21 changes: 20 additions & 1 deletion src/components/SearchBar/SearchBar.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from "react";
import React, { useState, useEffect, useCallback } from "react";
import Image from "next/image";
import styles from "./SearchBar.module.scss";
import searchIcon from "@/public/svgs/search.svg";
Expand All @@ -9,6 +9,25 @@ interface SearchBarProps {

const SearchBar: React.FC<SearchBarProps> = ({ keyword }) => {
const [searchTerm, setSearchTerm] = useState("");
const [debouncedSearchTerm, setDebouncedSearchTerm] = useState("");

// 디바운싱을 위한 useEffect
useEffect(() => {
const timer = setTimeout(() => {
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

goood 💯 바로 디바운싱을 검색에 적용하셨다니! 아주 적절하게 디바운싱을 잘 사용하셨습니다 👍
이제 로직도 만들어봤으니 디바운싱 자제를 "커스텀 훅"으로 빼보면 다른 컴포넌트에서도 재사용할 수 있을 것 같은데
한번 연습해보시길 추천할게요!

setDebouncedSearchTerm(searchTerm);
}, 2000); // 2초 딜레이가 지난 후 조회 API 호출

return () => {
clearTimeout(timer);
};
}, [searchTerm]);

// 디바운싱된 검색어가 변경될 때 keyword 함수 호출
useEffect(() => {
if (debouncedSearchTerm) {
keyword(debouncedSearchTerm);
}
}, [debouncedSearchTerm, keyword]);

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setSearchTerm(e.target.value);
Expand Down
60 changes: 60 additions & 0 deletions src/containers/boards-detail/AddComment/AddComment.module.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
@import "@/src/styles/_mixin";
@import "@/src/styles/_colors";

.container {
width: 100%;
display: flex;
flex-direction: column;
margin: 64px 0 24px;
gap: 16px;
}

.sectionTitle {
@include font-style(16px, 600, $grey-900);
cursor: default;
}

.commentContainer {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 16px;
}

.commentInput {
width: 100%;
resize: none;
background-color: $grey-100;
border-radius: 12px;
padding: 16px 24px;
height: 104px;

&:focus {
outline: none;
}

&::placeholder {
color: $grey-400;
font-size: 16px;
}
}

.submitButton {
@include font-style(16px, 600, $white);
padding: 12px 24px;
background-color: $blue;
border-radius: 8px;
width: max-content;
cursor: pointer;

transition: background-color 0.3s ease;

&:hover {
background-color: $dark-blue;
}

&:disabled {
background-color: $grey-400;
cursor: not-allowed;
}
}
61 changes: 61 additions & 0 deletions src/containers/boards-detail/AddComment/AddComment.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
import { useRouter } from "next/router";
import { useState } from "react";
import axios from "@/src/lib/axios";
import Spinner from "@/src/components/Spinner/Spinner";

import styles from "./AddComment.module.scss";

export default function AddComment() {
const router = useRouter();
const { id } = router.query;
const url = `/articles/${id}/comments`;

const [comment, setComment] = useState<string>("");
const [isLoading, setIsLoading] = useState<boolean>(false);
const [error, setError] = useState<string | null>(null);

const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
setError(null);

try {
await axios.post(url, { content: comment });
setComment(""); // 댓글이 성공적으로 추가된 후 input값 리셋
} catch (err) {
setError("댓글을 작성할 수 없습니다.");
} finally {
setIsLoading(false);
}
};

// 버튼 활성화 여부 확인
const isButtonDisabled = comment.trim() === "" || isLoading;

return (
<div className={styles.container}>
<div className={styles.sectionTitle}>댓글 달기</div>
<form onSubmit={handleSubmit} className={styles.commentContainer}>
<textarea
className={styles.commentInput}
value={comment}
onChange={(e) => setComment(e.target.value)}
placeholder="댓글을 입력해주세요."
required
/>
{isLoading ? (
<Spinner />
) : (
<button
className={styles.submitButton}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이제 여기서 button이 disabled한 상태일때 css를 수정해주고 싶을 수 있어요
그럴때 현업에서는 classnames라는 라이브러리와 함께 사용합니다
사실 scss + classnames 는 거의 한 세트라고 봐도 무방해요 ㅎㅎ

type="submit"
disabled={isButtonDisabled} // 버튼 활성화 여부 설정
>
등록
</button>
)}
{error && <div>{error}</div>}
</form>
</div>
);
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
@import "@/src/styles/_mixin";
@import "@/src/styles/_colors";

.container {
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
gap: 16px;
}

.titleSection {
display: flex;
justify-content: space-between;
align-items: center;

.title {
@include font-style(20px, 700, $grey-800);
}
}

.writerSection {
display: flex;
align-items: center;
gap: 8px;
cursor: default;

.nickname {
@include font-style(14px, 400, $grey-600);
}

.date {
@include font-style(12px, 400, $grey-600);
}

.vectorBar {
@include font-style(24px, 200, $grey-200);
margin: 0 8px;
}

.likeCount {
@include font-style(14px, 400, $grey-500);
display: flex;
align-items: center;
gap: 4px;
}
}

.hr {
border: 1px solid $grey-200;
}

.contentSection {
display: flex;
flex-direction: column;
gap: 20px;

.content {
@include font-style(16px, 400, $grey-800);
}
}
Loading
Loading