[황희상: Svelte] Good-Night-Hackathon-Frontend 제출

.gitignore

@@ -0,0 +1,29 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+/node_modules/
+/public/build/
+
+.DS_Store

.vscode/extensions.json

@@ -0,0 +1,3 @@
+{
+  "recommendations": ["svelte.svelte-vscode"]
+}

README.md

@@ -1,78 +1,47 @@
-# 영화 리뷰 앱
-
-## 안내사항
-- 본 레포지토리를 fork하여 과제를 수행하고, 완료시 PR을 보냅니다.
-- 과제의 소스코드는 본인의 GitHub 레포지토리에 **Public**으로 올려주세요.
-- 진행 간 문의사항은 이 레포지토리의 Issue로 등록해주세요.
-- 구현 내용은 README.md 하단에 이어서 작성해 주세요.
-
-## 기본 요구사항
-- 아래 제시된 라이브러리, 프레임워크를 활용하여 영화 리뷰 앱을 구현합니다.
-- 일관된 코딩 컨벤션을 유지해주세요.
-- 기능 당 커밋은 필수입니다.
-
-### React.JS
-- TypeScript로 작성해주세요.
-- 별도의`.env` 파일을 사용하여 api호출 주소에 대한 정보를 분리해주세요
-
-### Next.JS
-- TypeScript로 작성해주세요.
-- 별도의`.env` 파일을 사용하여 api호출 주소에 대한 정보를 분리해주세요
-
-### Flutter
-- Flutter, Dart 최신 버전을 사용해주세요
-- IOS 시뮬레이터 구동을 위한 Xcode가 설치되어 있어야 합니다.
-
-### Svelte
-- 최신 버전의 Svelte를 사용해주세요.
-
-<br>
-
-## 백엔드 해커톤을 진행하지 않았을 경우 사용할 수 있는 백엔드 레포 주소
-- repo : https://github.com/0BVer/Good-Night-2nd-Hackathon-Backend
-- swagger : http://localhost:8080/api/v1/swagger/index.html#/
-
-<br>
-
-## 기능
-
-### 영화 등록 페이지
-> **영화 정보 입력**: 사용자는 영화 정보를 입력할 수 있습니다.
-- **장르 선택**: '스릴러', '로맨스', '코믹', '액션' 중 하나를 드롭다운 메뉴에서 선택합니다.
-- **개봉일 입력**: Date-Picker 도구를 사용해 개봉일을 선택합니다.
-- **상영 종료일 입력**: Date-Picker 도구를 사용해 상영 종료일을 선택합니다.
-- **예외처리** : 빈 문자열 및 Null값으로 입력에 대한 등록했을때 안내 메세지를 띄워주세요(추가 기능)
-
-### 영화 목록 페이지
-> **영화 목록 표시**: 등록된 영화의 목록을 볼 수 있습니다.
-- **영화 추가** : 별도의 추가하기 버튼을 눌러 영화 등록 페이지로 이동합니다.
-- **영화 상세 정보 조회**: 영화 항목을 클릭하면 해당 영화의 상세 정보 페이지로 이동합니다.
-- **영화 수정**: 각 영화 항목 옆에 있는 '수정' 버튼을 클릭하면 영화 수정 페이지로 이동합니다.
-- **영화 삭제**: 각 영화 항목 옆에 있는 '삭제' 버튼을 클릭하면 해당 영화를 삭제할 수 있어야 합니다.
-- **필터링 기능**:
-    - 장르와 상영 여부를 기준으로 필터링하여 영화 목록을 조회할 수 있어야 합니다.
-    - 평점이 n점 이상인 영화만 필터링하여 조회할 수 있어야 합니다. **(추가 기능)**
-- **페이지네이션**: 영화 목록은 페이지네이션 기능을 통해 조회됩니다. **(추가 기능)**
-
-### 영화 수정 페이지
-> **기존 영화 정보 표시**: 수정 페이지에 접속하면 해당 영화의 기존 정보가 표시됩니다. 사용자는 이 정보를 바탕으로 원하는 부분을 수정할 수 있습니다.
-
-### **영화 상세 정보 페이지**
-1. **상제 정보 조회** : 해당 영화의 기존 정보가 표현됩니다.
-    - **예외처리** : 존재하지 않는 영화에 대한 정보를 조회 했을때 에러 메세지를 표현해주세요(추가 기능)
-2. **리뷰 등록**: 사용자는 영화에 대한 리뷰와 평점을 등록할 수 있습니다.
-    - **평점 입력**: 평점은 1~5점 사이에서 1 단위로 선택 가능합니다.
-3. **리뷰 목록 조회**: 영화에 대한 리뷰들을 확인할 수 있습니다.
-    - **리뷰 필터링**: 평점이 n점 이상인 리뷰만 필터링하여 조회 가능합니다. (추가 기능)
-
-### 어드민 페이지 (추가기능)
-> **관리자 모드** : 관리자 모드 버튼을 통해 관리자모드로 전환이 가능합니다.
-- 관리자 모드일때만 영화에 대해 추가, 수정, 삭제가 가능해야 합니다.
-- 관리자는 리뷰를 작성할 수 없습니다.
-- 관리자 상태는 로컬스토리지에 저장하고 관리해주세요
-
-# 기여해주신 분
-- [김영준](https://github.com/0BVer)
-- [이수현](https://github.com/suhyeon0921)
-- [정태원](https://github.com/teawon)
-- [백한결](https://github.com/baekhangyeol)
+# Svelte + Vite
+
+This template should help get you started developing with Svelte in Vite.
+
+## Recommended IDE Setup
+
+[VS Code](https://code.visualstudio.com/) + [Svelte](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode).
+
+## Need an official Svelte framework?
+
+Check out [SvelteKit](https://github.com/sveltejs/kit#readme), which is also powered by Vite. Deploy anywhere with its serverless-first approach and adapt to various platforms, with out of the box support for TypeScript, SCSS, and Less, and easily-added support for mdsvex, GraphQL, PostCSS, Tailwind CSS, and more.
+
+## Technical considerations
+
+**Why use this over SvelteKit?**
+
+- It brings its own routing solution which might not be preferable for some users.
+- It is first and foremost a framework that just happens to use Vite under the hood, not a Vite app.
+
+This template contains as little as possible to get started with Vite + Svelte, while taking into account the developer experience with regards to HMR and intellisense. It demonstrates capabilities on par with the other `create-vite` templates and is a good starting point for beginners dipping their toes into a Vite + Svelte project.
+
+Should you later need the extended capabilities and extensibility provided by SvelteKit, the template has been structured similarly to SvelteKit so that it is easy to migrate.
+
+**Why `global.d.ts` instead of `compilerOptions.types` inside `jsconfig.json` or `tsconfig.json`?**
+
+Setting `compilerOptions.types` shuts out all other types not explicitly listed in the configuration. Using triple-slash references keeps the default TypeScript setting of accepting type information from the entire workspace, while also adding `svelte` and `vite/client` type information.
+
+**Why include `.vscode/extensions.json`?**
+
+Other templates indirectly recommend extensions via the README, but this file allows VS Code to prompt the user to install the recommended extension upon opening the project.
+
+**Why enable `checkJs` in the JS template?**
+
+It is likely that most cases of changing variable types in runtime are likely to be accidental, rather than deliberate. This provides advanced typechecking out of the box. Should you like to take advantage of the dynamically-typed nature of JavaScript, it is trivial to change the configuration.
+
+**Why is HMR not preserving my local component state?**
+
+HMR state preservation comes with a number of gotchas! It has been disabled by default in both `svelte-hmr` and `@sveltejs/vite-plugin-svelte` due to its often surprising behavior. You can read the details [here](https://github.com/sveltejs/svelte-hmr/tree/master/packages/svelte-hmr#preservation-of-local-state).
+
+If you have state that's important to retain within a component, consider creating an external store which would not be replaced by HMR.
+
+```js
+// store.js
+// An extremely simple external store
+import { writable } from 'svelte/store'
+export default writable(0)
+```

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Moview</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>

jsconfig.json

@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "moduleResolution": "node",
+    "target": "ESNext",
+    "module": "ESNext",
+    /**
+     * svelte-preprocess cannot figure out whether you have
+     * a value or a type, so tell TypeScript to enforce using
+     * `import type` instead of `import` for Types.
+     */
+    "verbatimModuleSyntax": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    /**
+     * To have warnings / errors of the Svelte compiler at the
+     * correct position, enable source maps by default.
+     */
+    "sourceMap": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable this if you'd like to use dynamic types.
+     */
+    "checkJs": true
+  },
+  /**
+   * Use global.d.ts instead of compilerOptions.types
+   * to avoid limiting type declarations.
+   */
+  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
+}