Skip to content

feat: vercel 세팅 및 글 템플릿 복사 기능 추가 #34

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.

Sign up for GitHub

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

Open
dlwhsk0 wants to merge 3 commits into
base: develop
Choose a base branch
from
Open

feat: vercel 세팅 및 글 템플릿 복사 기능 추가 #34

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1c0177d
docs: 주석 정리
dlwhsk0 Nov 11, 2024
d3c66ab
feat: 마크다운으로 복사하는 기능 구현
dlwhsk0 Nov 11, 2024
280b573
product: vercel 세팅
dlwhsk0 Dec 6, 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
6 changes: 1 addition & 5 deletions src/App.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
<template>
<div id="app">
<router-view />
<!-- <LoginPopUp></LoginPopUp> -->
</div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
// import LoginPopUp from './pages/LoginPopUp.vue';

export default defineComponent({
// components: {
// LoginPopUp,
// },

name: 'App',
});
</script>
Expand Down
25 changes: 0 additions & 25 deletions src/components/BlueFolder.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,9 +71,6 @@ const filterAlgorithms = (algorithms: string[]) => {
src="../assets//mainpage/programers.svg"
class="mr-2 bg-[50%_50%] bg-cover bg-no-repeat w-[23px] h-[22px]"
/>
<!-- <div class="flex justify-center items-center">
<img :src="baekjoon" />
</div> -->
<span class="break-words font-semibold text-[20px] text-[#000000]">{{
truncateString(problem.problemTitle, 17)
}}</span>
Expand Down Expand Up @@ -127,25 +124,3 @@ const filterAlgorithms = (algorithms: string[]) => {
</div>
</div>
</template>
<!-- <script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();

const truncateString = (str: string, maxLength: number) => {
return str.length > maxLength ? str.slice(0, maxLength) + '...' : str;
};

interface Problem {
problemId: number;
problemDifficulty: string;
problemTitle: string;
problemState: string;
platform: string;
problemAlgorithms: string[];
}
const props = defineProps<{ problems: Problem[] }>();

const goToDetailPage = (problemId: number) => {
router.push({ name: 'detail-page', params: { id: problemId } });
};
</script> -->
15 changes: 1 addition & 14 deletions src/components/Editor.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,7 @@ export default {
};
},
mounted() {
// 문제 데이터 가져오기
// const problemStore = useProblemStore();
// if (!problemStore.problems.length) {
// problemStore.fetchProblems();
// }

const boardStore = useBoardStore();
const route = useRoute();
const boardId = Number(route.params.id);
Expand All @@ -45,11 +41,6 @@ export default {
previewStyle: 'vertical',
plugins: [[codeSyntaxHighlight, { highlighter: Prism }], colorSyntax],
});

// boardData의 content를 에디터에 설정
// if (this.boardData?.solutions?.[0]?.content) {
// this.editor.setMarkdown(this.boardData.solutions[0].content);
// }
});

// SUBMIT 버튼 클릭 이벤트
Expand Down Expand Up @@ -83,7 +74,6 @@ export default {
<div class="px-[10px] border-[2px] bg-white border-gray-300 rounded-[10px] text-green-600 text-xl">
{{ boardData.solutions[0].language }}
</div>
<!-- <div class="px-[15px] border-[2px] bg-white border-gray-300 rounded-[10px] text-blue-700 text-xl">이분탐색</div> -->
</div>
<div class="px-[50px] border-[2px] bg-white border-gray-300 rounded-[10px] text-2xl">
<div class="my-[10px]" @click="toggleContent">
Expand Down Expand Up @@ -121,9 +111,6 @@ export default {
class="mb-[30px] p-[20px] border-[2px] bg-white border-gray-300 rounded-[10px] font-Pretendards text-[20px]"
>
{{ boardData.board.memo }}
<!-- 문제의 제한 사항을 체크해보면 players 배열의 최대 길이는 50,000이고 callings 배열의 최대 길이는 1,000,000이
된다. 만약 배열의 index를 활용하여 문제를 풀 경우 최악의 경우 O(n^2)이 되는데 이를 계산해보면 총
50,000,000,000번 연산해야 하는 경우가 발생한다. 실제로 이러한 방법으로 풀었던 코드가 바로 아래에 있다. -->
</div>
</div>
<div class="flex justify-center items-center mt-[30px]" id="editor"></div>
Expand Down
3 changes: 1 addition & 2 deletions src/components/FilterBar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,14 +26,13 @@ const filteredProblems = ref<Problem[]>([]); // 필터링된 데이터를 저장

const problemAPI = async (offset = 0, limit = 30) => {
try {
const response = await axios.get('http://localhost:8080/api/v1/boards', {
const response = await axios.get('http://localhost:8080/api/v2/boards', {
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
},
params: { offset, limit },
});
// console.log('전체 목록 조회 성공', response.data.data.content[0]);

const content = response.data.data.content[0].reverse();
problems.value = content.map((item: any) => ({
Expand Down
3 changes: 0 additions & 3 deletions src/components/Navbar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@
></textarea>
<img class="w-[20px]" src="../assets/search.svg" />
</div>
<!-- <span class="flex items-center text-blue-700">{{ nickname.value }}</span> -->
<span class="flex items-center text-blue-700">{{ nickname.valueOf() }}</span>
<!-- <span class="flex items-center text-blue-700">alchive</span> -->
<img class="w-[30px]" src="../assets/user.svg" />
</div>
</div>
Expand All @@ -31,7 +29,6 @@ export default defineComponent({
setup() {
const userStore = useUserStore();
const router = useRouter();
// const displayedUserName = computed(() => userStore.userName.valueOf); // 사용자 이름을 computed 속성으로 가져옴

const nickname = computed(() => userStore.userName);
console.log(nickname.value);
Expand Down
83 changes: 45 additions & 38 deletions src/pages/DetailPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export default defineComponent({
const boardId = Number(route.params.id); // URL 파라미터에서 boardId 추출
console.log('boardId', boardId);
try {
const response = await axios.get(`http://localhost:8080/api/v1/boards/${boardId}`);
const response = await axios.get(`http://localhost:8080/api/v2/boards/${boardId}`);
console.log('게시글 조회 성공:', response.data.data);
boardData.value = response.data.data;
} catch (error) {
Expand All @@ -84,12 +84,52 @@ export default defineComponent({
router.push({ name: 'edit', params: { id: boardId } }); // 'edit' 페이지로 이동하며 ID 전달
};

// 마크다운 형식으로 클립보드에 복사하는 함수
const copyToClipboard = () => {
if (boardData.value) {
const markdownContent = `
# [[${boardData.value.problem.platform}] ${boardData.value.problem.number}. ${boardData.value.problem.title}](${boardData.value.problem.url})

## 문제 내용
${boardData.value.problem.content}

**알고리즘**: ${boardData.value.problem.algorithms.join(', ')}

> **메모**
> ${boardData.value.board.memo}

---

## 풀이 설명
${boardData.value.solutions[0].description}

### 코드
\`\`\`${boardData.value.solutions[0].language}
${boardData.value.solutions[0].content
.replace(/<br>/g, '\n') // <br>을 줄바꿈으로 변환
.replace(/&lt;/g, '<') // HTML 엔티티를 실제 문자로 변환
.replace(/&gt;/g, '>')
.replace(/&nbsp;/g, ' ')}
\`\`\`

---

> <small>이 게시물의 양식은 [Alchive](https://github.com/Alchive)를 통해 작성되었습니다.👍😎</small>
`;

navigator.clipboard.writeText(markdownContent).then(() => {
alert('내용이 클립보드에 복사되었습니다.');
});
}
};

return {
isContentVisible,
toggleContent,
boardData,
markdownToHtml,
goToEditPage,
copyToClipboard,
};
},
});
Expand All @@ -108,8 +148,6 @@ export default defineComponent({
<div class="flex w-full justify-between mt-[40px]">
<div class="flex gap-[20px]">
<div class="text-4xl">{{ boardData.problem.number }}. {{ boardData.problem.title }}</div>
<!-- <div class="text-4xl">{{ problems.problemNumber }}. {{ problems.problemTitle }}</div>
<div class="font-Pretendards text-2xl">{{ problems.problemDifficulty }}</div> -->
</div>
<div class="flex">
<!-- 문제 상태에 따라 fill 색상 변경 -->
Expand All @@ -127,6 +165,9 @@ export default defineComponent({
</defs>
</svg>
<img class="w-[40px] h-[40px]" src="../assets/trash.svg" alt="trash" />
<button @click="copyToClipboard" class="my-4 p-2 bg-blue-500 text-white rounded">
마크다운 형식으로 복사하기
</button>
</div>
</div>
<div class="flex mb-[20px]">
Expand Down Expand Up @@ -154,7 +195,6 @@ export default defineComponent({
<div class="px-[10px] border-[2px] bg-white border-gray-300 rounded-[10px] text-green-600 text-xl">
{{ boardData.solutions[0].language }}
</div>
<!-- <div class="px-[15px] border-[2px] bg-white border-gray-300 rounded-[10px] text-blue-700 text-xl">이분탐색</div> -->
</div>
<div class="px-[50px] border-[2px] bg-white border-gray-300 rounded-[10px] text-2xl">
<div class="my-[10px]" @click="toggleContent">
Expand All @@ -176,9 +216,6 @@ export default defineComponent({
class="mb-[30px] p-[20px] border-[2px] bg-white border-gray-300 rounded-[10px] font-Pretendards text-[20px]"
>
<div v-if="boardData" v-html="markdownToHtml(boardData.board.memo)"></div>
<!-- 문제의 제한 사항을 체크해보면 players 배열의 최대 길이는 50,000이고 callings 배열의 최대 길이는 1,000,000이
된다. 만약 배열의 index를 활용하여 문제를 풀 경우 최악의 경우 O(n^2)이 되는데 이를 계산해보면 총
50,000,000,000번 연산해야 하는 경우가 발생한다. 실제로 이러한 방법으로 풀었던 코드가 바로 아래에 있다. -->
</div>
</div>
<div class="px-[50px] bg-white border-[2px] border-gray-300 rounded-[10px]">
Expand All @@ -191,47 +228,17 @@ export default defineComponent({
v-if="boardData"
>
<div v-if="boardData" v-html="markdownToHtml(boardData.solutions[0].description)"></div>
<span>
<!-- hash 자료구조를 이용해서 풀이하는 방법으로 바꿨다. object의 key로 접근할 때 bigO는 O(1)이다. 먼저,
players의 name을 key, 해당 index를 value로 초기화해주었다. 다음으로 callings에 대한 반복문을 돌리는데,
초기화해주었던 hash에 callings에 대한 요소(이름)로 key에 접근해서 value를 currIdx에 담아두었다. 그럼 해당
이름의 index를 받아왔고 이름이 불린 앞사람과 위치를 바꿔야 한다. 앞사람의 이름을 fornt라는 변수에 currIdx -
1 값을 담아두었다. -->
</span>
</div>
<div class="flex justify-between my-[10px] text-2xl">
<span class="flex flex-col">코드<span class="border-[3px] border-blue-700" /></span>
<!-- <span class="font-Pretendards text-red-500">Ref</span>-->
</div>
<div
v-if="boardData"
class="mb-[30px] p-[20px] border-[2px] bg-white border-gray-300 rounded-[10px] font-Pretendards text-[20px]"
>
<div v-if="boardData" v-html="markdownToHtml(boardData.solutions[0].content)"></div>
<!-- <span-->
<!-- >{{ boardData.solutions[0].content }}-->
<!-- {{ boardData.solutions[0].description }}-->
<!-- &lt;!&ndash; <span class="text-red-400"> function</span><span class="text-blue-400"> solution(</span-->
<!-- ><span class="text-green-500">players, callings</span><span class="text-blue-400">)</span> {<br />-->
<!-- <span class="text-red-400">&nbsp; const</span> hash =-->
<!-- <span class="text-red-400">new</span> Map();<br /><br />&nbsp; players.forEach(<span class="text-blue-400"-->
<!-- >(</span-->
<!-- ><span class="text-green-500">name, index</span><span class="text-blue-400">) => </span> {<br />&nbsp;-->
<!-- &nbsp;&nbsp;&nbsp; hash.set(name, index);<br />&nbsp; }) <br /><br />callings.forEach(<span-->
<!-- class="text-green-500"-->
<!-- >name</span-->
<!-- ><span class="text-blue-400"> => </span> { <br /><span class="text-red-400">&nbsp; const</span> currIdx =-->
<!-- hash.get(name);<br />-->
<!-- <span class="text-red-400">&nbsp; const</span> front = players[currIdx - 1];<br /><br />-->
<!-- &nbsp;&nbsp;&nbsp;&nbsp; [players[currIdx], players[currIdx -1]] = [players[currIdx -1],-->
<!-- players[currIdx]];<br /><br />-->
<!-- &nbsp;&nbsp;&nbsp;&nbsp; hash.set(name, hash.get(name) - 1);<br />-->
<!-- &nbsp;&nbsp;&nbsp;&nbsp; hash.set(front, hash.get(name) + 1); <br />})<br /><br />-->
<!-- <span class="text-red-400">&nbsp; return</span> players;<br />-->
<!-- } &ndash;&gt;-->
<!-- </span>-->
</div>
</div>
</div>
</div>
</template>
</template>
7 changes: 0 additions & 7 deletions src/pages/LoginPopUp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@
<div class="text-[15px] font-Pretendards">나만의 알고리즘 저장소</div>

<div>
<!-- <input
type="text"
v-model="userName"
placeholder="Enter your nickname"
/> -->
<button
@click="handleClickGoogle()"
class="flex mt-[20px] px-[10px] py-[3px] shadow-[0px_0px_10px_0px_rgba(0,0,0,0.25)] rounded-[10px] bg-gray-100 hover:scale-110"
Expand All @@ -29,7 +24,6 @@
</div>
</template>
<script lang="ts">
// import jwtdecode from 'jwt-decode';
export default {
name: 'Login',
data() {
Expand All @@ -39,7 +33,6 @@ export default {
};
},
methods: {
// googleLoginBtn()
async handleClickGoogle() {
window.open('http://localhost:8080/oauth2/authorization/google');
},
Expand Down
1 change: 0 additions & 1 deletion src/pages/PostPage.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,6 @@ export default {
isContentVisible.value = !isContentVisible.value; // 컨텐츠의 가시성을 토글
};
return {
// isContentVisible: false,
isContentVisible,
toggleContent,
};
Expand Down
15 changes: 3 additions & 12 deletions src/pages/SignUp.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,6 @@
<input v-model="userName" type="text" placeholder="닉네임을 입력하세요" class="text-neutral-400" />
<span class="border-[2px] border-neutral-400"></span>
</div>
<!-- <div class="flex flex-col gap-[3px]">
<span class="text-6md">한 줄 소개</span>
<input
type="text"
placeholder="당신을 한 줄로 소개해 보세요"
class="text-neutral-400"
/>
<span class="border-[2px] border-neutral-400"></span>
</div> -->
</div>
<div
@click="handleSubmit"
Expand Down Expand Up @@ -72,7 +63,7 @@ export default {
}
try {
// userName 중복 검사
const usernameCheck = await fetch(`http://localhost:8080/api/v1/users/username/${this.userName}`);
const usernameCheck = await fetch(`http://localhost:8080/api/v2/users/username/${this.userName}`);
if (!usernameCheck.ok) {
// 중복된 userName이 존재하는 경우
if (usernameCheck.status === 409) {
Expand All @@ -84,7 +75,7 @@ export default {
}
}
//user 생성
const response = await fetch('http://localhost:8080/api/v1/users', {
const response = await fetch('http://localhost:8080/api/v2/users', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Expand Down Expand Up @@ -125,7 +116,7 @@ export default {
if (error.message === 'Token expired') {
// 토큰이 만료된 경우, 새로운 토큰을 요청하도록 설정
try {
const tokenRequest = await fetch('http://localhost:8080/api/v1/users/auth/token', {
const tokenRequest = await fetch('http://localhost:8080/api/v2/users/auth/token', {
method: 'GET',
});
// API 호출이 성공한 경우
Expand Down
8 changes: 0 additions & 8 deletions src/router/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,21 +18,13 @@ const routes = [
children: [
//배경 layout 적용할 페이지 경로 설정
{ path: 'main', name: 'main', component: MainPageVue },
// { path: '/', name: 'home', component: MainPageVue },
{ path: '/detail/:id', name: 'detail', component: DetailPage, props: true },
{ path: '/post', name: 'post', component: PostPage },
{ path: '/edit/:id', name: 'edit', component: Editor, props: true },
{ path: '/sign', name: 'sign', component: SignUp },
],
},
{ path: '/login', name: 'login', component: LoginPopUp },
// { path: '/sign', name: 'sign', component: SignUp },
// {
// path: '/sign',
// name: 'sign',
// component: MainLayoutVue,
// children: [{ path: '/sign', name: 'sign', component: SignUp }],
// },
{ path: '/tag', component: Tags },
{
path: '/:pathMatch(.*)*',
Expand Down
2 changes: 1 addition & 1 deletion src/stores/boardStore.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ export const useBoardStore = defineStore('boardStore', {
// 데이터 초기화
this.boardData = null;
try {
const response = await axios.get(`http://localhost:8080/api/v1/boards/${boardId}`);
const response = await axios.get(`http://localhost:8080/api/v2/boards/${boardId}`);
console.log('게시글 조회 성공', response.data.data);
this.boardData = response.data.data;
} catch (error) {
Expand Down
Loading