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

[임채민] Week20 #1085

Open
wants to merge 46 commits into
base: part3-임채민
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
46 commits
Select commit Hold shift + click to select a range
19de492
Initial commit from Create Next App
withyj-codeit Sep 8, 2023
c6d12fc
Ready to Developement
Chaemin-153 Feb 11, 2024
1168874
Refactor : Finished 7week
Chaemin-153 Feb 11, 2024
b5d7ca9
Refactor : 7week's code review
Chaemin-153 Feb 14, 2024
1e02132
Feat : Router 도입
Chaemin-153 Feb 14, 2024
d502f6e
Refactor : a -> Link 태그로 변경
Chaemin-153 Feb 14, 2024
3de4f6a
Feat : 페이지 title -> Helmet 사용
Chaemin-153 Feb 14, 2024
8a674b0
Refactor : Folder 페이지 추가
Chaemin-153 Feb 16, 2024
7d8c289
Refactor : 폴더 구조 변경
Chaemin-153 Feb 16, 2024
07d901e
Feat : 8주차 미완성
Chaemin-153 Feb 19, 2024
1209fa8
Refactor : 8주차 코드리뷰 적용
Chaemin-153 Feb 20, 2024
eb2531d
9주차 미완성
Chaemin-153 Feb 26, 2024
3904634
:truck: Rename: CSS 파일명 첫글자 대문자로 변경
Chaemin-153 Mar 23, 2024
95e5120
:recycle: Refactor: CardList 컴포넌트 모듈화 작업
Chaemin-153 Mar 23, 2024
16d4741
:recycle: Refactor: Profile 컴포넌트 모듈화 작업
Chaemin-153 Mar 23, 2024
9946f16
:recycle: Refactor: SearchBar 컴포넌트 모듈화 작업
Chaemin-153 Mar 23, 2024
2b92956
:recycle: Refactor: AddLinkBar 컴포넌트 모듈화 작업
Chaemin-153 Mar 23, 2024
3b84f2f
:recycle: Refactor: Folder 페이지 컴포넌트 모듈화 작업
Chaemin-153 Mar 24, 2024
7947994
:truck: Rename: 파일명 jsx로 수정
Chaemin-153 Mar 24, 2024
f97510f
:package: Chore: Sass 패키지 설치
Chaemin-153 Mar 24, 2024
cd36178
:recycle: Refactor: 프로젝트 전체 스타일 module Scss로 변경
Chaemin-153 Mar 25, 2024
ef363ea
:bug: Fix: FolderCards에서 전체 카테고리 렌더링 이슈 해결
Chaemin-153 Mar 26, 2024
6337c02
:recycle: Refactor: Shared 페이지 컴포넌트 모듈화
Chaemin-153 Mar 26, 2024
c404531
:lipstick: Style: SearchBar width 값 변경
Chaemin-153 Mar 26, 2024
55db12d
:lipstick: Style: star, kebab 디자인 수정
Chaemin-153 Mar 27, 2024
6307121
:sparkles: Feat: AddFolderModal 추가
Chaemin-153 Mar 27, 2024
851557f
:sparkles: Feat: DeleteLinkModal 추가
Chaemin-153 Mar 27, 2024
676eeb0
:sparkles: Feat: 케밥 클릭시 Select Menu 팝오버 추가
Chaemin-153 Apr 1, 2024
f7adc44
:sparkles: Feat: AddLinkModal 추가
Chaemin-153 Apr 1, 2024
4103f8a
:sparkles: Feat: EditFolderModal 추가
Chaemin-153 Apr 1, 2024
0325851
:sparkles: Feat: DeleteFolderModal 추가
Chaemin-153 Apr 1, 2024
b174882
:package: Chore: Typescript 패키지 설치
Chaemin-153 Apr 1, 2024
3022554
:package: Chore: TS 마이그레이션
Chaemin-153 Apr 1, 2024
04dddcd
:recycle: Refactor: 프로젝트 전체 TS 적용
Chaemin-153 Apr 2, 2024
23ffd01
Squashed commit of the following:
Chaemin-153 Apr 3, 2024
a86aad9
:sparkles: Feat: 검색 필터링 기능 추가
Chaemin-153 Apr 4, 2024
b1e1e6c
:recycle: Refactor: Next로 마이그레이션
Chaemin-153 Apr 5, 2024
5a24a3e
:lipstick: Style: 마이그레이션 후 Style 깨짐 수정
Chaemin-153 Apr 5, 2024
9cad33a
:sparkles: Feat: EmailInputForm 추가
Chaemin-153 Apr 5, 2024
c76237a
:sparkles: Feat: PasswordInput 토글 기능 추가
Chaemin-153 Apr 5, 2024
8fc7bf4
Refactor: App Router로 변경
Chaemin-153 May 11, 2024
b0570bd
Refactor: 폴더구조 변경(src 폴더 추가)
Chaemin-153 May 11, 2024
79a9ff6
Refactor: 라우팅 및 Layout 수정
Chaemin-153 May 11, 2024
fd2cc05
feat: 로그인 페이지 추가
Chaemin-153 May 13, 2024
7fa95a4
feat: 회원가입 페이지 추가
Chaemin-153 May 13, 2024
ad9a75b
feat: AccessToken 없을 시, 로그인 페이지로 이동
Chaemin-153 May 13, 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
3 changes: 3 additions & 0 deletions .eslintrc.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"extends": "next/core-web-vitals"
}
27 changes: 0 additions & 27 deletions .github/pull_request_template.md

This file was deleted.

14 changes: 0 additions & 14 deletions .github/workflows/delete-merged-branch-config.yml

This file was deleted.

40 changes: 40 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js
.yarn/install-state.gz

# testing
/coverage

# next.js
/.next/
/out/

# production
/build

# misc
.DS_Store
*.pem
.env.local
.env.development.local
.env.test.local
.env.production.local

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# local env files
.env*.local

# vercel
.vercel

# typescript
*.tsbuildinfo
next-env.d.ts
40 changes: 40 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).

## Getting Started

First, run the development server:

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.

[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.

The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
30 changes: 30 additions & 0 deletions next.config.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: true,
images: {
domains: [
'img1.daumcdn.net',
'yt3.googleusercontent.com',
'velog.velcdn.com',
'avatars.githubusercontent.com',
'codeit-images.codeit.com',
'codeit-frontend.codeit.com',
'reactjs.org',
'assets.vercel.com',
'storybook.js.org',
'testing-library.com',
'static.cdninstagram.com',
's.pstatic.net',
'tanstack.com',
],
Comment on lines +5 to +19
Copy link
Collaborator

Choose a reason for hiding this comment

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

아마, 앱라우터 정책 상 외부 이미지를 화이트리스트로 받는다는 점에서 이렇게 설정하신 것 같군요.

요구사항은 사용자가 이미지 URL을 넣도록 되어 있어서 '모든 URL'이 될 수 있다는 점과 NextJS 보안 정책에 의해 막히고 있는 듯 합니다.
현재 채민님께서 대부분의 도메인들을 허용해주고 있으나 근본적인 해결책은 아닌 것을 자각하고 계실거라 생각해요.

이럴 경우 모든 도메인을 허용 **해주는 방법이 있으나 이는 NextJS 외부 이미지를 통한 보안을 해제하는 것과 다름 없습니다.

Copy link
Collaborator

Choose a reason for hiding this comment

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

그럼 어떻게 할까?

제가 제안드리는 솔루션은 특정 컴포넌트에서만 모든 외부 이미지를 허용해주는게 어떨지 제안드립니다:

function AllowedExternalImage({
  src,
  width,
  height,
  alt,
}: Pick<ImageProps, "src" | "width" | "height" | "alt">) {
  return (
    <Image
      loader={({ src }) => src}
      src={src}
      alt={alt}
      width={width}
      height={height}
      unoptimized={true}
    />
  );
}

export default function Card({ title, image, id }: PostSchema) {
  return (
    <Link href={`/posts/${id}`} scroll={false}>
      <div className="flex flex-col justify-center items-center p-4 border border-gray-300 rounded-lg cursor-pointer hover:shadow-lg transition-shadow">
        {/* <Image
          src={image}
          alt={title}
          width={300}
          height={300}
          className="rounded-lg"
        /> */}
        <AllowedExternalImage src={image} width={300} height={300} alt={title} />
        <h2 className="text-2xl font-bold">{title}</h2>
      </div>
    </Link>
  );
}

위처럼 설정해두면 Card 컴포넌트에서만 모든 외부 도메인이 허용될 수 있습니다. 😊

remotePatterns: [
{
protocol: 'https',
hostname: 'codeit-images.codeit.com',
pathname: '/api/**', //**는 해당 경로 뒤에 모든 경로,
},
],
},
};

export default nextConfig;
Loading